I want to say right off the bat that it’s an absolute joy using Svelte. After giving it a quick test, I was in complete awe, wondering why front-end JavaScript libraries and frameworks aren’t like Svelte. Svelte introduces a shift in the way we think about building user interfaces. In this article, I will cover the five reasons, in my opinion, that make Svelte a revolutionary front-end component framework.

The Svelte Compiler

Writing Svelte code feels a lot like writing vanilla HTML, CSS, and JS. The Svelte compiler provides a neat and sometimes subtle abstraction that makes it easier to build UIs with JavaScript. It makes sure that it doesn’t get in your way. Anyone with a rudimentary understanding of HTML, CSS, and JS can start working immediately with Svelte.

State Management

A component’s state is a simple JS variable. There is no need to use a function that triggers a re-render, like React’s setState function. Variables in Svelte are reactive by default, and reassigning them causes a re-render. Additionally, Svelte’s component binding makes it easy to create controlled inputs with zero boilerplate.

Reactivity

Reactivity is the backbone of the Svelte framework. Reactive declarations and reactive statements in Svelte make it easier to create computed states and execute arbitrary statements reactively. React requires using the useMemo or useEffect hooks to achieve a similar outcome.

Scoped Styles

Are you tired of thinking of new CSS class names? You’re in luck if you answered “Yes” to that question. Scoped styles ensure that the styles defined in a Svelte component are applied only to the elements inside that component. The Svelte compiler handles all details behind the scenes.

Component Events

Svelte allows us to define custom events through their EventDispatcher interface. It is by far my favorite Svelte feature. When creating custom events in Svelte, you don’t have to provide an event handler down the component hierarchy. One component can emit an event to which its parent component can subscribe. The subscriber either forwards the event to its parent component or handles it. The result is elegant and very readable.

Conclusion

Svelte is an awesome JS front-end framework. Unlike its counterparts, it provides very little abstraction over vanilla HTML, CSS, and JS. State management is intuitive and reactive by default. It also introduces a new approach to handling events.

The two downsides I noticed with using Svelte are applying dynamic styles and the community. Dynamically changing styles based on state and props requires a bit of boilerplate. It feels way easier doing the same thing with JSX. Svelte’s community is very young and you won’t find readily available packages like other JS libraries and frameworks.

In the following article, I will show what these Svelte features look like in practice.