One of the newer frameworks for JavaScript is Svelte, which has become very popular and is now competing with established frameworks like React and Angular. But is it here to stay?
The newcomer Svelte is already at the top of the list for peaking the programmers' interest (source). A few years back, React turned the world of web development upside down with its Virtual DOM, which has significant benefits comparing to traditional DOM handling. Now it might be Svelte's turn with their new approach.
Developers' interest across the different frameworks for JavaScript:
Svelte is run during the building phase and converts your components into a very efficient imperative code which surgically updates your DOM. This makes it possible for you to write ambitious applications with excellent performance characteristics. Svelte is meant to be used where you need minimal script download, and where other frameworks are too bulky. It is mainly aimed for so called "embedded web" environments – such as wearables, internet-of-things, Smart TVs, etc. – where every kilobyte counts.
Saving microseconds
According to JS Framework Benchmark Test, Svelte is as fast as greased lightning, and faster than both React, Vue and Angular. Svelte's implementation of TodoMVC only weighs 3.6 kb in zipped form, compared to React's 45 kb. TodoMVC is a test for writing a basic web application in a JavaScript framework in order to evaluate how difficult / easy basic operations are to perform.
In the benchmark tests, Svelte beats React and Angular regarding speed on practically all fronts. It is a fast framework, that is undebatable, but do those shaven off milliseconds automatically mean it is always the better framework? That is worth thinking about.
Reactive programming
Svelte does not handle reactive programming in the same way as React's state handling or Vue's getter and settlers, but in an even more minimal way, where a simple allocation to a variable makes the page refresh. Reactive programming deals with data streams and flows where a change to a variable creates a chain effect, depending on its underlying depending variables.
Example: A change to variable A may cause variables B and C to refresh automatically. Angular uses Observables and Rxjs to orchestrate these data flows in the programs.
Also Microsoft's WPF supports the model. For many, this is an attractive model in order to get more interactive interfaces.
CSS in Svelte
CSS in Svelte components are scoped to the component and does not leak. That is good, because that eliminates the need for yet another library to fix that. However, you can also use CSS-in-JS, similar to the Styled Components React has, if you prefer that.
Svelte for the win
Svelte offers a lot of the features a developer expects from a frontend framework, but with the upside of creating very minimal scripts. Does Svelte have what it takes to take over the crown from React and become the most used framework?
As usual React and Vue lead the pack, but Svelte is quickly establishing itself as a very serious contender for the front-end crown.
The battle for the throne depends on a number of factors – perhaps mainly on the demand that Svelte must be able to solve the same problems as React, but in a more efficient way, which will make it easier to develop the same type of functionality. Is it possible for Svelte to compete with the already established frameworks, or will it only be used when the highest priority is shaving off milliseconds? One example of this is environments that need minimal script files with bad bandwidth, where Svelte is a really interesting alternative.
The framework is a clear example of the continuously high innovation rate within JavaScript, and it is exciting to see where it will take us. Will Svelte continue to grow and become a framework to be counted on, or has the real contender for React's crown not yet seen the light of day? Either way, Svelte is a framework with potential and is worth keeping on your radar. Is it going to be the next big thing? Well, only time will tell.
More information
By Marko Poikkimäki
Comments