There is a framework war going on in the current world of front-end. A new successor to Angular, React and Vue are announced almost every day. On the other hand, the three main hegemonies compete with newer and newer solutions to dominate the market. In opposition, solutions that have nothing to do with the frameworks are starting to emerge. They are more like compilers and one of them is Svelte.
What is Svelte?
So as we know, Svelte is a compiler. Compared to popular frameworks, it analyzes changes in the application at the compilation stage, so we don’t have to wait until the work at run time. Another difference between frameworks is the component structure. We don’t need any boilerplate, and no special declarations are required. The components written in Svelte are, above all, simplicity and their structure almost resembles a regular HTML document. We can put Javascript, HTML, CSS code in them and each of them is optional. We just need to keep a special syntax which is very simple.
Why should we use Svelte?
No Virtual DOM
During code compilation, Svelte transforms the components into an ultra-efficient javascript that surgically updates the DOM.
So what does that mean?
- We don’t need an extra layer of abstraction.
- The first application loading will not be extended.
As a result, applications written with Svelte have great performance and lightenst.
Truly Reactive
Svelte automatically updates the DOM when your component’s state changes. Surprisingly, it doesn’t use any additional library like RxJs for Angular. Instead, it takes full advantage of Javascript, and we’re talking about “labeled statement” here. We don’t need additional state management libraries like redux or mobx, either. All tools for building a store and managing the state of the application are already built-in.
Performance
When designing Svelte, developers decided that one of the most important features of the framework should be efficiency. Built-in mechanisms significantly reduce the code generated as a result of compilation. The bundle size of the application can be even 10 times smaller than in the case of React.
Styles
Styles in components are encapsulated. This means that the scope of CSS rules is limited to the component only, so we don’t have to worry that the styles will have a global impact on other components. Additionally, all unused rules will be skipped at the compilation stage. We can also use CSS-in-JS libraries to write styles.
Typescript support
For fans of static typing, this will be a huge advantage. Svelte in its latest version now fully supports typescript.
Great User Experience
What Svelte offers for UX?
- performant transition engine built right into the framework.
- good performance also on weaker devices
- as the author himself declares “rock-solid code generated by compiler”
Summary
The low entry threshold, the simplicity of writing applications and great performance are a good argument to bet on Svelte. The solution is still gaining popularity. At the moment, the number of weekly downloads on NPM is nearly 100,000 and has received 37,000 github stars. So let us ask ourselves whether Svelte is the future for frontend-development? Definitely yes!
