What is Svelte?
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.
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
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.
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 optimize 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.
And yes we're hiring for various roles across design and engineering! Check out the Careers section to join us and have such fun explorations.