In this rapidly changing front-end Javascript frameworks ecosystem, Svelte is considered the next evolutionary way. Though Svelte has been around since 2016, it is still regarded as something new. Possibly that is why it ranks at 32 among Javascript frameworks. However, its popularity has risen since it released its version 3 in April 2019. But why and what's new?
In this rapidly changing front-end Javascript frameworks ecosystem, Svelte is considered the next evolutionary way. Though Svelte has been around since 2016, it is still regarded as something new. Possibly that is why it ranks at 32 among Javascript frameworks. However, its popularity has risen since it released its version 3 in April 2019. But why and what's new?
In the diverse collection of web frameworks, let’s check out what has made the community talk about the new approach to render a reactive web application.
What is Svelte.js?
In simple words, Svelte is a front-end Javascript compiler developed by Rich Harris to compile components at the build step. Svelte is a free and open-source framework promoted with the tagline "cybernetically enhanced web apps.”
While React and Vue frameworks do all the processing in the user's browser at runtime, Svelte does most of the processing at the compile step, i.e., when you build your app. This improves the run-time performance and reduces the size of transferred code. Implemented in TypeScript, the Svelte brings reactivity at its heart and enhances developers' experience.
A Journey from Version 1 to Version 3
Svelte made its debut in 2016 in Javascript. The first version of Svelte tested if a compiler can generate code for dynamic user experience. After two years, Version 2 of Svelte gave it some momentum but wasn't the talk of the town. However, the popularity of Svelte rose by 89% after the release of its V3 in 2019.
Making the headlines, Svelte-3 is an intelligent extension. The Svelte core team gave an outstanding front-end UI framework that focuses on the two critical problems: Reactivity and ease of use.
How Does Svelte.js Work: Framework or No Framework?
To begin with, a framework manages the complexity of the code and makes it manageable by using the virtual Document Object Model (DOM) technique. But actually, web applications integrate a lot of code, which significantly impacts the application’s performance.
Svelte 1 was released in conjunction with an article published by Rich Harris called "Frameworks without the Framework: Why didn't we think of this sooner?". It stated some demerits of current Javascript frameworks:
Weight of web applications
Poor performance time
Lack of interoperability
Currently, while a user accesses a web application, a lot of time is spent by the Javascript engine to interpret and process the code. This observation prompted Rich Harris to develop Svelte as a compiler instead of a runtime framework.
The components that you write using HTML, CSS, and Javascript are compiled by Svelte into an optimal JavaScript module at the build time. This removes all the runtime overhead and improves the reactivity. Thus, it got termed as 'framework without a framework.’
SVELTEJS VS. REACT VS. VUE: What Makes Svelte Different?
Comparing the Svelte to React or Vue.Js will show you why Svelte has become so popular recently among the developer community. However, these traditional UI frameworks are not reactive, and that's where Svelte takes the lead.
Secondly, React, and VueJS use virtual DOM - a Javascript object that is a representation of the real DOM. Internally, a virtual DOM is used to compare the real DOM API to detect any changes needed and render the user interface accordingly. Now, here reactivity is limited. The framework first detects the changes to the virtual DOM compared to the last iteration and then applies the changes.
Though the virtual DOM is not a problem and suits most use cases, it’s not good enough when the speedy performance is the prime metric. An example is the data visualization renderings.
Svelte provides a solution to this by taking a different road, and that's what a compiler does. Firstly, developers working with Svelte can write code using the simple syntax (Typescript). Then Svelte is the only tool to understand your code and generate an ideal (browse-optimized) Javascript module. There is no unnecessary code embedded into the application, and the final output is only the translation of your simple code.
Pros/Cons of Svelte.js
For both the experienced and new frontend developers, Svelte has a lot to offer.
Pros -
-High performance as there is no Virtual DOM
-You get a built-In style encapsulation
-More reactive components than any other framework
-No runtime processing, but compilation takes place at build-time
-Code Splitting
-Less size of web applications
Cons -
-Where adding elements is easy, removing is comparatively slow
-Post compilation, no tool available for debugging.
-It still needs more third-party component libraries
**
**
Let's cover Svelte benefits that are critical in modern front-end development.
Write Less Code to Produce More
The most significant merit of Svelte is that it promises developers to write less code. Today, reading and writing code is the biggest debt developers create. The bigger the application, the more is the probability of new bugs.
Secondly, more code needs more cognitive effort to get acquainted. You can add comments, segregate the snippets, etc., leading to even bigger code. Simply put, more code writing needs more time. When we talk about optimization, Svelte comes to the rescue - simple syntax and an effective product.
Increased Reactivity
At the heart of the Svelte is Reactivity. In Svelte, reactivity is based on defining the variable itself.
Since it is a compiler, Svelte inserts the code used for reactivity at the build time, which calculates the dependencies and changes required in the real DOM. So, the compiler takes the load for reactivity and not the browser.
Fast and Efficient
The syntax and semantics of Svelte need no prior knowledge of the framework and require the least cognitive load. The business logic is easy to write and easy to understand. Compared to React and Vue.Js, the React component is around 40% larger than the Svelte equivalent.
Popular & Beginner-friendly
One of the reasons Svelte is popular is how quickly beginners learn it. Any developer can use it without the need to manipulate the DOM. There is no need to learn extensive libraries or state wrappers and directly access the markup. All you will need is to learn the basics of a component state.
Interoperability & bundle size
Interoperability is any developer's critical block between the design problems and real-world code. Your web application is interoperable if it can work parallelly with other applications that may not be targeting the same platforms.
To integrate any widget into your application, you must adhere to a similar framework version. Unfortunately, not many cross-functional technologies are available, and compatibility of, let's say, an Angular widget with React is not possible. However, if you are using Svelte, it is possible.
Code Splitting
Svelte makes code-splitting even more effective than other frameworks, including React. The framework is associated with the component at its core, and the component size is comparatively small. On the other hand, if React is the primary framework, even serving a single component will need to serve React.
Open Source Maintenance
Svelte is an open-source and free framework. This does not incur any cost, and you can use any features free of charge. You can refer to the active development framework on Github and also contribute.
For better developer experience
Developers will enjoy working with Svelte as it is easy to understand, simple to write, and offers integration across technologies. In addition, the compiler environment opens new horizons for developers. With available flexibility and a smooth learning curve, any developer can explore building web applications without a team or support.
Conclusion: Is Svelte good enough?
The lead architect and creator of Svelte, Rich Harris, promises ease of writing and reactivity as the epitome of the language. Svelte is ahead of its time and opens an immense scope in the developer's world to look beyond.
Especially when other frameworks are still working on finding new ways to optimize the code, with Svelte, developers can reduce the size of the web application. At the same time, high performance gets delivered.
Making its headway into compilers, will the other Javascript frameworks vanish or not? That time will tell. However, Svelte is making an enormous contribution to moving the web forward, and currently, there are 15,910 Svelte live applications across the globe. Yours can be next!
Top comments (0)