Svelte is a front-end framework for web development like React, Vue and Angular. In a short time, Svelte has become very popular as you can see from ‘State of JS’ survey or the stars on it’s GitHub repo.
Single Page Application (SPA)
These UI Frameworks enable us to create single-page applications where most of the heavy lifting is done on the client. Traditionally, the web server has been responsible for routing, generating UI from templates and querying backend system. In modern SPA applications, these tasks are performed on the client inside the browser. These frameworks have grown in popularity as they enable us to manage all this complexity on the client-side. In particular, they help us define user interfaces in a declarative format which keep themselves updated as the state of the application changes.
Virtual DOM
To keep the UI in sync with application state, React and Vue use virtual DOM technology. It minimizes the changes to the browser DOM by avoiding the recreation of large portions of DOM with every state change. The idea is to keep a duplicate copy of DOM in memory (called virtual DOM). As the application state changes, rather than applying the changes to actual DOM, they are applied to the virtual DOM. Virtual DOM is then compared with the actual to find the differences. Finally, the differences found between the virtual and the actual are applied to the DOM. This helps in minimizing the amount of changes to the UI.
Angular doesn’t use virtual DOM, it has it’s own mechanism for change detection and applying it to DOM.
Svelte
Svelte is different from these other frameworks in the sense that it is more of a language and a compiler. The idea is to write components declaratively in HTML, JavaScript and CSS with Svelte syntax extensions and compile them down to optimized vanilla code at build. This is different from other frameworks where the bulk of the work for converting declarative components into DOM operations is done in the browser at runtime.
Svelte syntax extensions are also very intuitive and easy to pick up. It has a much smaller learning curve then Angular or React. And has a lot less boilerplate code.
Svelte is much younger, though. There is much less community support and third-party libraries as compared to the other three frameworks.
Want to know more about Svelte? Recommend watching Rich Harris’s Rethinking reactivity video.
