SvelteJs vs ReactJs : But both can co-exists!
Some might say, they do not need one more JS framework but this is not just any framework. It is pretty fast!
It is sometimes very puzzling to observe that some great JS frameworks just don’t get the attention they deserve. Also the community seems to be happy with the popular superstar frameworks. The peril lies in the fact that the new thing could be also a game changer but just went unnoticed!
In this context, SvelteJS deserves a warm welcome!
In 2020, Svelte took over React in overall user satisfaction. This may seem superficial but means a lot for the developer community.
Introduction
It was released way back in 2016 by Rich Harris. It’s a free and open-source front-end component-based framework. Svelte is fast & works like a compiler. Svelte simply outperforms any other framework — Angular, Vue, and React.
SvelteJS excels with some core philosophy :
- All about writing less code
- No such concepts like Virtual DOM
- No more external state management
GitHub : https://github.com/sveltejs/svelte
Why SvelteJS ?
The small bundle size of the framework makes the app more responsive. This results in a super-smooth-running end-product loads within fraction of a second.
It updates the DOM whenever a component’s stage changes but only if it is triggered by an assignment. The DOM rendering is carried out through reactive programming, which makes it faster than the virtual DOMs.
Svelte acts like a compiler when building an app, simply transforming it into JavaScript code. It means no addition of any overhead code to run in the browser when your app updates DOM making the entire process seamless. Its structure is just much smoother which helps when you have to define hundreds of components.
Svelte has a less steep learning curve when compared to React. Also the styling on Svelte is a breeze and the apps you create run super smoothly.
Installation
npm create svelte@latest myapp
cd myapp
npm install
npm run devAnd you are ready to start experimenting.
A simple counter example below!
Some Statistics
SvelteJs has a bundle size of 1.6Kb gzip version compared to 42.2Kb of React & ReactDOM combined.
It has very high reactivity. Svelte is considered more reactive than even React.
The lightweight and efficient code makes it ideal for applications where performance is critical, such as gaming applications or data visualisation applications.
A Complier
Svelte is a tool for building very fast web apps. It converts the app into ideal JavaScript at build time, rather than interpreting your app code at run time. This means we do not incur the performance cost of the framework’s abstractions and no performance penalty when the app first loads.
Complementary
Svelte can co-exist with other frameworks. You can freely use it where you require it the most. We can build the entire app with Svelte or we can just add it incrementally to an existing codebase. Independent components can also be shipped as standalone packages that work anywhere without the overhead of a dependency on any framework.
SvelteKit
SvelteKit is the full-stack framework built on top of SvelteJS. If you know React, SvelteKit is similar to Next. If you’re know Vue, SvelteKit is similar to Nuxt.
Svelte helps to render UI components but you need more than just Svelte to write an entire app with all the bells & whistles.
SvelteKit provides all the basic functionality like :
- router — which updates the UI when a link is clicked
- server-side rendering (SSR)
- build optimizations
- offline support
- preloading : loads pages before the user initiates navigation
- configurable rendering : allows you to render different parts of your app on the server with SSR
- client-side rendering
- prerendering
And many more mechanical stuffs that ypu don’t have to worry about!
It also reflects changes to your code in the browser instantly to provide a lightning-fast and feature-rich development experience by leveraging Vite with a Svelte plugin to do Hot Module Replacement (HMR).
Full Doc here
Finally
Svelte has demonstrated that we can achieve exceptional performance without the virtual DOM. For an experienced JS developer, Svelte could be a great place to experiment, find inspiration, and perhaps learn something new.
The version3 is the latest code. Apart from this, The Svelete community is also doing a lot of exciting stuffs.
Sapper, the Next.js-style app framework, is also in the middle of being updated to use Svelte 3.
The Svelte Native community project, which allows you to write Android and iOS apps in Svelte, is also making solid progress.
They also want to add first-class TypeScript support in Svelte.
