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’.
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?”
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.
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
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 this new framework are quoted as under-
Pros & Cons
Further, we’re going to discuss some of the pros and cons of Svelte-
=> More Work in Less Code
=> 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
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-
=> Slow at removing elements
=> Component APIs don’t support Typescript
=> 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.
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.
Read our more interesting blogs like-
Reach out to Our team, if you are wondering which organization to connect to in order to get your project completed on the best possible terms.
Thanks for giving your invaluable time to this blog!!
Originally published at https://medium.com/.