This content originally appeared on DEV Community and was authored by Helitha Rupasinghe
So how is Svelte any different from other frameworks like Angular, React, vue and why should we care? Let’s dive into that...
What is Svelte?
Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app. - Offical Svelte Website
Svelte is a component framework which brings reactivity to JavaScript itself with less code and more magic. As per Svelte docs, it compiles HTML, CSS and JS code at build time into highly-optimized vanilla JavaScript code that runs in a browser with minimal framework overhead.
Knowing this, you might be wondering if Svelte is something you should consider. But there are still a lot of questions to be answered. So let's see why you should give Svelte a chance.
Why Svelte?
Svelte builds on lessons learned from its predecessors like React: Vue and Angular. But that's not the point. What makes it different is the approach it takes and the advantages it hence provides which could be subtle and prominent based on your unique use case.
Advantages
Let discuss the advantages that Svelte offers:
No Virtual DOM
Being a compiler and getting rid of the VirtualDOM is the most important advantage of Svelte that facilitates many of the other advantages we will see below. The concept is becoming more popular which means that your components are compiled to JavaScript and the DOM doesn't need to update. Also, it takes up little memory as it complies in highly optimized, small bundles of Javascript.
Compiled to just VanillaJS
Svelte produces highly optimized vanilla JS with a very minimal overhead at runtime. This means small bundle sizes, a low memory footprint, and a blazing fast web-application. Check the performance benchmarks down below to see the difference.
Less Boilerplate
With Svelte there is no need for complex state management libraries. The boilerplate required for components is very minimal and quite similar to vanilla HTML/JS. Svelte also supports optional two-way bindings making it easier to build forms.
<script>
let name = '';
</script>
<style>
p{
color: blue;
}
</style>
<input bind:value={name} placeholder="enter your name">
<p>Hello {name || 'stranger'}!</p>
Truly reactive
Svelte brings reactivity to JavaScript itself. The DOM is automatically updated on state changes in any top-level variable on a component. You don’t even have to add any special code for that.
Low Learning Curve
Unlike React or Angular, the learning curve for Svelte is quite low and you can get started writing Svelte apps in about 5 minutes. Everything is written using standard-compliant JS/TS, CSS, and HTML with some additional syntax for directives and template logic. The component API is simple and straightforward. The Svelte documentation is also quite good and easy to follow.
Components pattern
Svelte follows a component first pattern which makes it ideal for building new web applications or for adding web components to existing applications. Styles are scoped to components by default making Svelte ideal for web components.
Built-in effects and animations
Svelte provides built-in animations and effects which makes it easier to build slick user interfaces and interactive visualizations. Well, the framework was originally created for building interactive graphics for The Guardian. This approach provides a much nicer developer experience than something like React and is way easier to use.
Here is a simple example in the offical Svelte tutorial which uses a transition effect:
<script>
import { fade } from 'svelte/transition';
let visible = true;
</script>
<label>
<input type="checkbox" bind:checked={visible}>
visible
</label>
{#if visible}
<p transition:fade>
Fades in and out
</p>
{/if}
Built-in Reactive store
Svelte provides both mutable and immutable reactive stores out of the box making it easier to do more complex state management in your application. The stores support manual and automatic subscriptions and two-way bindings making them very flexible.
Let’s see an example of a writable store:
<script>
// you can also use readable or derived stores
import { writable } from "svelte/store";
// ideally you should do this in a different file
export const count = writable(0);
// using manual subscription
let count_value;
const unsubscribe = count.subscribe((value) => {
count_value = value;
});
</script>
<h1>The count is {count_value}</h1>
<!-- The same can be done with auto subscription like below -->
<h1>The count is {$count}</h1>
Multiple output targets
Being a compiler, it is easy to change output targets without having to change your component’s code. For example, Svelte supports server-side rendering out of the box by providing a compiler mode for it (dom vs ssr). There is even a NativeScript integration for Svelte that makes use of this flexibility to produce targets beyond dom and ssr.
Disadvantages
The advantages Svelte provides don't mean there are no downsides, every framework makes tradeoffs. The major downsides of Svelte are:
Small community
Because Svelte is quite new, it doesn’t yet have the kind of big community and developer fans that other frameworks enjoy. So you may not find as many tools or libraries as in React or as much help on Stack Overflow when you are stuck on some complex problem.
Tooling and packages support
When it comes to developer tools and packages, there are currently limited options available for Svelte developers to choose from. But as the community grows and more developers start to find Svelte amazing, this problem will fade out.
Lack of available jobs
Most companies are still looking for developers who are experienced with the major three front end frameworks but there are various, well-known early adopters of Svelte like IBM, Apple, Philips, GoDaddy, 1Password or The New York Times, just to name a few. You can find an extensive list of companies who are using Svelte at the bottom of the Svelte website.
Nevertheless, Svelte is fun to learn and many developers enjoy using Svelte especially for their own personal projects or small scale applications.
Comparisons to other frameworks (Level Of Use + Performance)
Asking you to start using Svelte in production is a lot, I know. So let's begin by outlining the reasons why you won't regret making this decision.
Level Of Use: Svelte, Angular, React and Vue.
If we look at the 2022 Developer Survey results:
- 75.28% developers loved using Svelte.
- 68.19% developers loved using ReactJS.
- 63.16% developers loved using VueJS.
- 52.27% developers loved using AngularJS.
The results show that Svelte has become a top performer in 2022 which is exciting!
To understand the gains of using Svelte, I will show you a benchmark test by Stefan Krause's. This test renders a table with four columns and 1000 rows. You select which frameworks to use and I've chosen Vue-v3.2.37: Svelte-v3.48.0, Angular-v13.0.0, React-v17.0.2:
As you can see, Svelte performs very well. Vue.js a little less so, with React and Angular are just behind.
Speed Test
In terms of speed, Svelte and Vue are quite similar and indeed the top performing in this category with Angular and React just behind. At the bottom of the table, we can see something called Geometric mean. Geometric mean is an indicator of overall performance and speed by a framework. From this, we can conclude the following category ranking:
- Vue - 1.22 geometric mean
- Svelte - 1.25 geometric mean
- React - 1.74 geometric mean
- Angular - 1.89 geometric mean
Memory Test
The memory test sees which framework takes up the least amount of memory for the same test. Let's jump into the results.
Again, Svelte is clearly on top. Vue and React are just behind while Angular (once again) is the least performing. From this, we can derive this category ranking.
- Svelte
- Vue
- React
- Angular
Conclusion
Svelte is growing with more and more people discovering and appreciating it as it has a lot to offer.
And if you are feeling adventurous, I’d recommend you also look at how Svelte works.
Useful Resources
https://svelte.dev/tutorial/basics
https://svelte.dev/docs
https://svelte.dev/examples/hello-world
https://svelte.dev/blog
https://www.youtube.com/watch?v=043h4ugAj4c
This content originally appeared on DEV Community and was authored by Helitha Rupasinghe
Helitha Rupasinghe | Sciencx (2022-07-01T19:38:23+00:00) Here’s why I Recommend Svelte To Every New Web Developer In 2022. Retrieved from https://www.scien.cx/2022/07/01/heres-why-i-recommend-svelte-to-every-new-web-developer-in-2022/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.