The framework removes abstractions in order to produce vanilla JavaScript that runs much faster, particularly on mobile devices
While there’s already a plethora of JavaScript frameworks available, there always seems to be room for another trying to provide something new. Enter the Svelte framework, which focuses on building apps for speed by converting them into pure vanilla JavaScript.
Svelte, available in a 1.0.0 release, turns templates into framework-less JavaScript. Developers write components using HTML, CSS, and JavaScript; the Svelte build process compiles them into standalone JavaScript modules.
“By statically analyzing the component template, we can make sure that the browser does as little work as possible,” said Rich Harris, Svelte founder and interactive editor at The Guardian. Svelte applications run faster than those from other JavaScript frameworks, including React, Vue, Angular, and Ember.
Frameworks like React solved the productivity problem of how to build rich, complex applications without creating a “pile of unmaintainable spaghetti code,” said Harris. And the front end community abandoned old ideas about separation of concerns and embraced a component-driven mindset. But this has come at a cost to users.
“Existing frameworks tend to be large enough that your application becomes slow to start up on mobile phones, especially on Android, which is where the bulk of market growth is happening.” Browsers have had to spend time parsing and evaluating JavaScript, during which time a phone is unresponsive, then there’s a performance cost to framework abstractions. “Svelte solves these problems by removing those abstractions. The hard work happens at compile time rather than run time — it spits out highly optimized low-level DOM manipulation code specific to your application.”
Svelte’s compiler detects which features a component uses by analyzing source code. “If a feature isn’t being used, Svelte doesn’t include the code for it,” said Harris. “You end up with exactly what you need.” The framework also offers advantages in code-splitting and supports capabilities like SVG and encapsulated CSS.
There still is plenty of work left to do on Svelte, Harris cautioned. It must be fitted with capabilities like server-side rendering and be integrated with existing tools, and he wants to add features like declarative translations.
