Is SvelteJS the next big framework in web development?

For end-users, Svelte equals speed. For coders, Svelte is radical, lighter, more performant, plain vanilla, yet truly remarkable! Though today, not many go agog over a new JavaScript UI framework, Svelte, the disappearing, disruptive framework gives you the tools to build apps in a component-driven and declarative way. It is now gaining popularity for being extremely lightweight and fast. Early reactions to Svelte described the experience as “playing with the best Legos in the world”. The open-source framework, in fact, enjoys a satisfaction ratio of 88%, evenly sandwiched between React’s 89% and Vue’s 87%, according to The State of JavaScript 2019. 

Here’s why the features Svelte offers is a gamechanger in the JavaScript universe.

Rethinking the future of JS frameworks

The presentation by Richard Harris, Svelte’s creator, at the JSConf 2018, titled Computer, build me an app, exhibited some pretty novel philosophy. From ‘frameworks aren’t tools for organizing your code, they are tools for organizing your mind’ to ‘virtual DOM is pure overhead’ and ‘React is not reactive’, Harris was pointing the JS community to what lies beyond the likes of ReactJS.

Virtual DOM, for instance, involves rendering and reconciliation steps, and if the browser could get rid of those, you’d have a programming model that would be leaner and faster –  rather svelte! Svelte’s genius is that it is a compiler, not an ordinary framework running in the browser. It takes your components, compiles them into JS modules during the build process, and rather than bank on virtual DOM diffing, or similar techniques, it ‘surgically updates the DOM’ when your app’s state changes. With the advent of the Svelte v3, one gets a glimpse of the future of JS frameworks: Svelte is a language that ‘extends JavaScript by making reactivity a language primitive’.

Less code, less boilerplate, smaller bundles, more speed, better performance

When Jesse Skinner, a freelance web developer, decided to give Svelte a shot, he was blown away by its simplicity. Moreover, the Tic Tac Toe game he developed, including runtime, was all of 2.4kb. But, there’s no sorcery here. Svelte is a compiler and reduces your script to the bare minimum with very little boilerplate – <script> and <style> tags. 

With Svelte you’re writing fewer lines of code, and therefore, less buggy programs, with a React component, typically being 40 % larger than its Svelte equivalent. While on the topic of size, it’s worth noting that smaller codebases make frameworks more performant and while React weighs about 121kb, a basic Svelte app is minuscule, just 2.95kb, as per analysis by Areknawao. Even so, when you pit React’s implementation of TodoMVC against Svelte’s, you’re looking at zipped sizes of 45kb vs 3.6kb. 

If you’re a web developer then this is probably music to your ears; with the average web page being 2MB in size, Svelte has the potential to clear out a lot of unnecessary heft. Shawn Wang, a web developer downsized his website from 187kb to 9kb by moving from React to Svelte, reports WIRED; and Wang compares this to traveling through a space elevator instead of rocket ships padded with massive fuel tanks. To conclude, lightweight code means that downloads are faster and there’s less to parse through. So, if you’re looking for faster and smaller web apps, Svelte could be your answer.

Beginner-friendly, with simple syntax

As opposed to mainstream JS frameworks like Angular or even React, Svelte has a small learning curve. In fact, developers feel that one hardly needs to read the documentation to get started –  everything feels so natural. The magic of course is in Svelte’s simplicity. It works with the grain and you’re good to go with plain JavaScript, CSS, and HTML (with some syntax additions).

Its reactivity is simple to use and with built-in CSS scoping, you don’t have any odd CSS-in-JS syntax issues to grapple with. The Co-Founder and CEO at Softermii, Slava Vaniukov acknowledges that “you’re not forced to manipulate the DOM [and] you don’t have to grasp framework-specific state wrappers, either… With Svelte, developers can learn the basic principles of a component state without getting too confused by the details.” All of this means that with Svelte you can get started and build apps expediently.

Senior Angular developer and contributor to codeburst.io, Armen Vardanyan describes his experience: “I just love how you can simplify passing attributes to HTML elements in Svelte. Instead of <img src={src} /> you can just do <img {src} />, and it is awesome. And you can also bubble up native events from child components without declaring dispatchers at all, the same way! This is some next level (good) magic I’d love to see in Angular and React.”

Easy integration and interoperability

Since Svelte is a compiler, you have standalone components and the framework script isn’t a dependency. This means that you can start bundling it with your other projects today! Svelte works at the component level and so, even if your project already uses Vue or React, you can simply integrate Svelte components at will. 

So, if your project uses Angular and you want to add a widget built-in React to it, it wouldn’t be possible. With Svelte, you can just drop-in components and such integrations are possible. Further, with the way Svelte works, code splitting is a lot easier too.

The future of embedded is here 

With small file sizes and fast performance, Svelte is actually perfect for apps that run on, say, a smartwatch, smart TV, or even a POS device. In Brazil, Stone, a Fintech firm that offers POS devices, found that frameworks like React and Vue couldn’t provide a good enough user experience. They were simply not fast enough. Svelte, however, did the trick. Mustlab.io, an app developer in Russia, did the same for their smart TV apps and is expanding its use of Svelte to home automation. According to Richard Harris, the next frontier the world is looking at is the embedded web: things like IoT, in-car entertainment, and wearables. All this is prime hunting ground for Svelte.

You even have mobile and application frameworks powered by Svelte, Native, and Sapper, in the suite of tools you can use to build powerful apps with small footprints.

So, are you ready to give Svelte a try?