Lang
Blog

Svelte- A Magically Fast JavaScript Framework

A framework with NO framework!!

ByPayal Mittal
July 22nd . 5 min read
Svelte- A Magically Fast JavaScript Framework

The developer’s world, today, is quite rich with the diverse and colorful collection of web frameworks. And the list is ever-growing!

Frameworks like Angular, React, Node, Vue, Ember, Preact, Mithril, and so, so many more are, as wonderful as one can hope for. However, some are less better than others and some are just ‘the best’.

Recently, a new JavaScript framework has come into the light, holding the potential to give a tough competition to these awesome frameworks- Svelte.

Though it’s been a few years since Svelte came around, originally in 2016, it is still considered as “new”. But the big difference was seen when the latest version- Svelte 3, was released earlier this year. It seems to have caught the attention of the developer community.

Let’s check out what has made the folk so talkative about this new approach of building reactive user-interfaces -

What is Svelte??

This is the question rather hard to answer. Even the creator of this framework, Rich Harris, seemed to be skeptical about its nature- what Svelte truly is? At first, he made us believe that it was a UI Framework, unlike other frameworks. But then he says that he didn’t realize what Svelte until very recently when its 3rd version was released.

Well, let’s hear out what exactly he has to say -

“I had you believe that Svelte was a UI framework — unlike React and Vue, etc. because it shifts work out of the client and into the compiler, but a framework nonetheless. But with Svelte 3 around the corner, it’s time to come clean about what Svelte really is. Svelte is a LANGUAGE. Specifically, it is an attempt to answer this question: what would it look like if we had a language for describing reactive user interfaces?”

In simple words, Svelte is a component-based JavaScript reactive user-interface framework, implemented in TypeScript.

It is an entirely different framework that holds that power to surprise you, which is a big statement, I guess, after having used React, Vue, Angular, and other wonderful frameworks for so long.

Svelte - A framework with NO framework??

What does that even mean?

Frameworks move the complexity of the code around, discard all the finicky implementation details, and make the code easily manageable- by using virtual DOM diffing technique.

What makes the React.js framework so wildly powerful is that it helps in managing the complexity of your thoughts and concepts, not the code.

Svelte, on the contrary, compiles the components into ideal JavaScript module during build time that you write using CSS, HTML, and JavaScript. That’s why it is also called the ‘framework without framework’.

This makes Svelte fast. Really fast, faster than React.js, faster than Vue.js, Angular.js- as much fast as Vanilla.js itself. It gives close competition to Inerno.js which is, so far, the fastest UI framework in the whole world.

There are some limitations as well, though. We’ll discuss them in the later sections of the blog.

Journey of Svelte — From Version1 to Version3

Svelte first set foot in the world of developers in the year 2016 with its very first version. Though v1 was just an approach to test a hypothesis that- a purpose-built compiler could generate rock-solid code that delivered a great user experience.

The v2 was another step with upgraded features and stirred up the things a little bit but didn’t receive much acknowledgment. However, the release of version 3 received a significant reaction.

Team Svelte worked really hard after version 2 was out to make something grand out of version 3. And it has. With its outstanding performance, ease of use, small bundles, compiling, cybernetically enhanced apps, etc. Svelte-3 is an upgraded and intelligent extension.

React vs Svelte

At present, React.js is the most popular JavaScript Framework and for many good reasons, indeed. But we are living in the technical era which requires us to move on, get better and better.

React introduced the concept ‘virtual DOM’ and this was the part that made React this much attractive and popular in the first place. But this ‘virtual DOM diffing’ couldn’t make React as much reactive as Svelte.

Hang on! This means that the ‘virtual DOM’ isn’t as fast as is claimed to be, is it?? Well, it is not the case. It is usually faster when compared with less efficient frameworks.

Svelte, being a compiler, compiles the components itself rather than relying upon ‘virtual DOM’ to update the browser DOM. This course improves the performance of the code and makes it fully ‘reactive’.

What Makes SvelteJS Different?

The regular frameworks are used to write declarative state-driven code, they do extra hard-work in using virtual DOM diffing technique in order to change the declarative code into DOM operations. It may waste a lot of time and money.

It was assumed that the ‘virtual DOM’ makes a framework work faster, which makes it debatable how Svelte manages to be faster without using it.

Svelte is less a framework and more a tool that compiles the code components at the build time instead of runtime and lets you load a single bundle.js file to render your app. Which means, no virtual DOM, no framework to load at runtime, and faster speed.

Svelte creates applications with smaller bundle sizes compared to other web frameworks.

The words of Jeff Delaney, creator of AngularFirebase.com, about SvelteJS are quoted as follows-

“I can confidently say that Svelte has been the easiest JavaScript component library to learn and start putting to use in a productive way.”

Pros & Cons

Further, we’re going to discuss some of the pros and cons of Svelte-

Pros -

  • More Work in Less Code
  • No Virtual DOM
  • Built-In Style Encapsulation
  • Declarative Transitions
  • Code compilation at build-time
  • Faster speed and great performance
  • CSS-in-JS Library
  • Reactive Components
  • Effective Code Splitting
  • Small application bundle size
  • Typescript-support (Added earlier in the new release)

Though Svelte has rather impeccable features, it lacks various important functionalities. It is not completely ready for production, not yet. Let’s check out its cons-

Cons -

  • Slow at removing elements
  • No DevTools to debug applications post-compilation
  • Incomplete third-party component libraries

Team Svelte is working on these cons and we can expect another big release soon, removing these flaws and uplifting the features

Summary:

No matter what type of software you intend to build, Svelte will oblige you with its extraordinary and out-of-box functionalities. It’s a lot faster than the other frameworks, or in better terms ‘the fastest existing JS framework’.

However, it’s nowhere near finished, there is a long way for Svelte to go. While React and other frameworks are on the peak of popularity, Svelte has just begun. Of course, it cannot surpass these frameworks but can surely offer an alternative to them in the time to come.

Reach out to HabileLabs team, if you are wondering which organization to connect to in order to get your project completed on the best possible terms in the whole market.

Thanks for giving your invaluable time to this blog!!

Share:
0
+0