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.
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.
SvelteKit is a new framework from the team behind Svelte. It's designed to make it easier than ever to build high-quality, modern web applications.
SvelteKit Overview:
SvelteKit is a build tool and framework for creating web applications.
It takes your source code and turns it into a single JavaScript file that can run in the browser.
SvelteKit uses a new approach to building web applications, called the "kit" model.
In a kit, every component is a stand-alone module that can be independently versioned, published, and reused.
This makes it easy to create applications that are composed of many small, reusable pieces.
SvelteKit also provides a way to automatically pre-render your application on the server, so that it loads fast and is SEO-friendly.
Svelte is one of the most popular frontend frameworks out there, and for good reason. It's fast, efficient, and easy to use. But just how popular is Svelte? Let's take a look at the numbers.
Since its release in 2016, Svelte has been downloaded over 10 million times. That's an impressive number, especially for a framework that's still relatively new.
Svelte is used by some big names, including Microsoft, Amazon, and the BBC. That's a pretty good endorsement from some of the biggest companies in the world.
There are over 2,000 Svelte-related projects on GitHub, and the Svelte community is growing rapidly.
All signs point to a bright future for Svelte. It's already one of the most popular frontend frameworks, and it's only going to become more popular in the years to come.
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.
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 of the demerits of current Javascript frameworks:
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.’
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.
For both the experienced and new frontend developers, Svelte has a lot to offer.
Let's cover Svelte benefits that are critical in modern front-end development.
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.
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 needed in the real DOM. So, the compiler takes the load for reactivity and not the browser.
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.
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 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.
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.
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.
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.
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!
