Trying out Svelte: Framework without a framework

What is Svelte?

Svelte is a new framework that brings a different perspective to web development. Svelte aims to do most of the work while building your application as opposed to the popular front-end frameworks like Angular, React, or Vue, which do most of the work in the browser. Svelte was voted as the most loved framework in the 2021 Stack Overflow survey. Svelte is not just yet another JavaScript framework; it's a front-end compiler.

How does Svelte work?

Most modern front-end frameworks rely on diffing engine that syncs the visual DOM with an in-memory copy of DOM. In simple words, modern frameworks compare the two copies of code and check for any differences; if there is a difference between a previous copy of code, it creates an update to the real DOM and updates the view.

Svelte is different; it's a compiler that understands the declarative components and outputs an optimized imperative code that surgically updates DOM without diffing.

Why use Svelte?

Virtual DOM (V DOM) is at the heart of one of the most popular frameworks, i.e. React.

React creators talked about how great it is and how it boosts performance, being faster than real DOM. But using VDOM for updating DOM is not the fastest approach; it's fast enough because it allows you to build apps without thinking about state transitions, with a generally good performance.

But there is a crucial drawback in the case of VDOM based front-end frameworks, the bundle size of shipped code is large, so it's not just network time that'll kill your app's startup performance, but the time spent parsing and evaluating your script, that makes browser unresponsive.

Svelte only ships the code your app needs, making your app extremely lightweight and fast.

Svelte rejects the idea of using Virtual DOM to achieve reactivity and performance in a web application. Reactivity is achieved in Svelte apps by declaring reactive statements and assigning a value to a variable; the compiler adds vanilla JavaScript code to update variables and DOM. Performance is achieved by sticking close to vanilla JavaScript and knowing upfront how variables update or change; Svelte can be compared to a spreadsheet, where you can define the formula for each cell upfront, and the value is updated whenever we change values in particular cells.

This comes with a clear advantage of a smaller bundle size since you are shipping just the vanilla JS that runs in the browser, as can be seen, for example, by looking at software developer Stefan Krause’s benchmarks. This test renders a table with four columns and 1000 rows. You can select which frameworks to use. In the table below, I’ve chosen Svelte-v3.46.2, Vue-v3.2.26, React (with & without redux hooks), and Angular v13.0.0.

Ease of development

Wait, this new framework has a runtime? Ugh. Thanks, I'll pass. – Front-end developers in 2018

Quoting a quote from a Svelte blog that no front-end developer ever said, but ever so often as a front-end developer, I wonder, while building a web application, does this code need to be so complex? As a front-end project grows, the complexity of the codebase increases, and the code has a lot of boilerplate. Svelte aims to bring simplicity back to web development without sacrificing reactivity or state management features.

Svelte components are easy to understand

Svelte focuses on the philosophy of write less, do more, the popular tagline of the JQuery framework. The code example below shows the simplicity and conciseness of a Svelte component.

If you have never seen the Svelte syntax before, this is what a simple Svelte component looks like:

Compared to React or other frameworks, out-of-the-box lesser abstract concepts are being used here, making it easier for anyone who understands the basics of web development to start working on Svelte.

Reactivity with label statements

Adding reactivity to your Svelte app is easy; to recompute variables based on other variables, just add $: in front of the declarations, and you are good to go.

Any time button is clicked count variable increases by 1, and doubled variable is updated as well.

Binding input state

bind: value, observes for changes in the input field, and updates username accordingly; this is a small part of Svelte bindings; there is a lot more you can do with such bindings.

Scoped CSS styles – out of the box

Similar to CSS-in-JS libraries, Svelte styles are scoped by default, which means that a svelte-<some-unique-hash> class name will be generated in compiled JavaScript and applied to your markup.

And much more !!!

Some other points worth considering there are logic blocks (if/else, await/then/catch) that provide conditional rendering, built-in accessibility check, automatic component exports, built-in support for effects and animations, easy global state management out of the box with Svelte stores.

All the above reasons make a developer's life a lot easier, allowing them to focus on code more than the intricate details of a framework.

Typescript support has been added to Svelte recently, and the Svelte team introduced the Svelte kit to accelerate the development of Svelte apps to support server-side rendering routing.

Conclusion

Svelte bring a fresh perspective to front-end development and improves the web app performance as well as ease of development, complexity is handled by the compiler, and there is lesser, or no need to add more code to optimise the web app built using Svelte.

There is much more to Svelte, but these are the things that I experienced while building a small project. I would recommend using Svelte in your next project.

Want more insights and expert tips? Don't just read about Svelte! Work with brilliant engineers at Codemonk and experience it's effective use case firsthand!