If you are in web development, you have probably heard about Svelte Js. But you asked, why it is becoming so popular web framework and what benefits it proposes for developers.
We will make a quick overview of this web development framework, its benefits, and drawbacks, that after reading you will be able to decide whether it fits your project or not.
Svelte first appeared in 2018, and that was a sensation. Both novices and highly experienced developers like to utilize it for projects of all kinds. With that being the case, let’s take some time to explain what it is about this framework that makes it so accessible.
👉WHAT IS SVELTE, AND WHAT ARE ITS BENEFITS?
Let’s come back to SvetleJS that developed since 2018. Some developers know it as the most popular write-in for the State of JavaScript in 2018. A Svelte Wiki entry does exist, but there isn’t much to it yet since it has been only been available for a while.
Svelte is meant to be a framework, but speaking frankly it is a component framework developed to compile components down at the build step. This allows you to load a single bundle.js onto your page so that you can render your app.
In more simple words, with Svelte, you write components using HTML, CSS, and JavaScript. During the development process, the framework compiles them into small, standalone JavaScript modules. By doing so, you ensure that the browser does as little work as possible which makes your web app faster and code simpler.
Here is a brief description of Svetle by its authors
Source: Svelte.dev
Because of all this, Svelte Mobile is one of the leaders when it comes to startup performance. While any other sort of optimization doesn’t make this possible. With Svelte it is achieved by using the available browser JavaScript compiler rather than a side compiler. Thus, this is a great fit for web development among other popular frameworks and programming languages.
This brings precise reactivity to your code and boosts its performance that is an attractive selling point for developers and business owners. While, for developers, the one more benefit of Svelte is its beginner-friendly and has a clear syntax structure.
👉SVELTE ARCHITECTURE OVERVIEW
Svelte is popular for being faster than any other library. This is due to shifting the step of loading a framework intended for building a virtual DOM . Rather than using a tool during the running process, it is compiled to JS during the building stage. This means that the application needs no dependencies to start.
👉HOW SVELTE WORKS
The simplest explanation of how Svelte works is as follows: first, you open a website. Next, you render the page using pure JS. Once you get it to where you want it to be, the other members of your development team can look it over, unless you are working by yourself. What they’re looking for is genuine reactivity from your code. If it’s present, then the application or website you are creating should run smoothly when you take it out of beta mode and bring it to the market.
👉SVELTE JS VS. REACT VS. VUE: COMPARISON
A lot of engineers compare Svetle.Js with other web development frameworks. The most famous alternatives are React and Vue.
The most popular web frameworks, like Angular, React, and Vue.js must are based on the idea of waiting until the code loading for building a virtual DOM. Only afterward can they render the page using the library.
For example, React developed by Facebook in 2011 made reactive programming quite popular. This framework first started using virtual DOM. It separates out the event handling, attributes manipulation, and manual DOM updating that would otherwise be required for you to build your app. It was a vital part of what made React so attractive.
Svelte, meanwhile, is a compiler. It compiles your components into JavaScript rather than relying on concepts like Virtual DOM to update the browser DOM. With Svelte typescript, you can build an app much more expediently. You can write your components using CSS, HTML, and JavaScript. During the build process, Svelte compiles them into the standalone JavaScript modules.
In the results, Svelte 3 builds a DOM less weighted. For example, the Svelte implementation of TodoMVC weighs in at 3.6kb when it is zipped. By comparison, React plus ReactDOM without an app code weighs approximately 45kb when it is zipped. It takes 10 times as long for the browser to evaluate React as for Svelte to be functional with an interactive TodoMVC.
Thought, Svelte vs. React performance is something that would be difficult to judge because the two frameworks are so dissimilar.
Anyway, if you would like to get even more details on practical metrics comparison of these web frameworks, this video might be much helpful for you
Svelte Native is considerably faster under the GitHub data than Ember, Angular, React, Ractive, Preact, Mithril, or Riot. It is even competitive with Inferno, which is likely the fastest UI framework in the world at this moment. So, it’s a critical benefit when making a higher speed of application can move you ahead of the competition.
👉SVELTE COMPONENTS
Hence, let’s dig deeper into more details Svetle structure. Any Svelte PWA component may contain three sections: script, style, and template. Here’s a more detailed breakdown of what that means:
Script Tag: this is an optional JavaScript block with function declarations and variables that should be used within the component.
Style Tag: this is another optional block. Think of it as a common HTML style tag, but there is one critical difference. The rules that are described inside this block are scoped to this component alone. Applying a style to a P-element will not affect all of the paragraphs on the page. The reason this is so excellent is that you do not have to come up with class names. This means you’ll never override another rule by accident.
Template Block: this is the last and the only required block, normally an H1 tag. It is both a presentation and a view of your component. It is tightly bound to the script and style blocks, as they determine how the view will behave and how it is styled.
To get a better understanding on how to create all that components check this brief handy video explanation by A shot of code:
With that Svelte can be regarded as a library trying to bring modularity to the front-end game. It keeps that modularity through grouping different components. However, it also isolates the template, logic, and view. Svelte builds any component-specific styles by default. This means you won't have any styles of bleeding between components, as would be the case with some other frameworks.
You'll also see Svelte interacting well with the JavaScript variable called name. This is a new concept that is a part of Svelte v3. Any variable in your component's script can now be accessed from markup. While there is no framework-specific syntax that you have to learn for state management. You don’t have to deal with Vue data, Angular $scope, or React to this state. Instead, you can use lets everywhere to achieve assignable state values. These cues re-renders whenever the values change.
Here is how works in practice:
With Svelte, making a component can feel like creating a CodePen. As you do it, though, you don’t have to wonder how to connect a declarative JS function you learned through some DOM query selector. Svelte will not affect window listeners or callback functions. Those fundamentals remain, which is as it should be.
An additional nice thing about these components is that they are just as important as a traditional one. All you must do is import the .html and Svelte understands how to unwrap it.
👉WHAT ELSE ABOUT SVELTE.JS YOU SHOULD KNOW
Let’s cover other Svelte benefits compared with other frameworks that matter a lot in the development process.
🎯Beginner-Friendly
Earlier, we mentioned that part of the reason Svelte has become so popular is how quickly beginners take to it. When you use it, you’re not forced to manipulate the DOM. You don’t have to grasp framework-specific state wrappers, either. You can access variables directly from markup, which simplifies the creation process dramatically. With Svelte, developers can learn the basic principles of a component state without getting too confused by the details.
Svelte syntax exists for conditionals that display DOM elements, and for looping. This works much like the JSX way of returning elements from a map. All the nested brackets in which beginners can easily get lost aren’t so much of a factor, though.
There is one Svelte oddity that is worth mentioning: it passes props to components. It’s easy to learn and fully functional, but the syntax is a bit too exotic for some developer’s tastes.
🎯Interoperability
Earlier, if you want to integrate for example some calendar widget or any other into your app, you could only do it using the same version of the framework the widget is built on. It means if you are building your app in Angular and the widget is built in React, you could not integrate it. If the widget or your app are built using Svelte, though, it would be possible.
🎯Code Splitting
Let’s say that you’re using React as your primary framework. If you initially serve only a single React component instead of many, you still must serve to React itself. With Svelte, code splitting is much more effective. This is because the framework is embedded in the component, and that component is quite small.
🎯Open Source Maintenance
Svelte is an open-source software developed by volunteers. Thus, using the Svelte framework doesn’t require any cost and allows you to add many features free of charge. Also, this Svelte has its active development environment on GitHub that you can join and where you can ask for help or make your contribution to this technology.
❓IS SVELTE ENOUGH STABLE & RELIABLE
This is a relevant question for a framework that is as new to the market as Svelte SSR is. All examples we have mentioned refer to the syntax of Svelte version 3. It’s still in beta at the moment. Compared to industry giants like ReactJS and VueJS, it only has a small following.
As exciting as SvelteJS is, you should wait for a while before you teach code workshops with it. That is because the beta version might differ from the mass-market one in some ways. Still, Svelte offers a concise page for documentation for V.3 that can ease beginners into it. So, this framework, for sure, can be considered as part of your robust tech stack.
❓IS SVELTE.JS THE NEXT BIG THING
This is a hard question to answer. Might Svelte surpass Vue and React as the front-end framework that stands the test of time?
That’s not so easy to predict. At this moment, it has not achieved the level of popularity of some of its counterparts. It doesn’t have big corporation backup in the same way that React does. Then again, though, Vue did well without it.
Last year, there was a State of JS survey. This is conducted annually to assess the habits of prominent developers. Svelte was the most popular of the other libraries categorized in that survey. That might mean that sooner or later, it will be considered as one of the better JS frameworks.
Svelte vs. React is a common topic for debate among programmers, but one framework is not necessarily better than the other. Svelte matches well for a web application or MVP development, while Angular suits well for PWA or enterprise web app. Some devs find a framework that they like and stick with it, but even if that is true for you, it should not prevent you from trying out Svelte. You might enjoy some of the features that we have described.
Let’s briefly go over some of the main selling points with Svelte again:
✔️It is a component-based framework that requires no extra plugins
✔️It handles state management with none of the usual difficulties
✔️It makes use of scoped styling without needing CSS-in-JS, so no editor extensions or odd syntax is required
✔️It needs a simple build script to get going
✔️If you are starting a base project, hardly any files are needed
You might be convinced at this point to try a Svelte tutorial if you’re a web developer in need of a new framework. In other cases, if you seeking the best technologies for your web solution, Svetle might be a good option to consider to use.
Top comments (20)
There are SSR tools such as NextJS for React and NuxtJS for Vue. They have become quite popular because you can now do SEO in JavaScript web apps, static exporting, optimized script generating, etc.
Is there anything similar to Svelte?
Also when doing TypeScript in React you get type-checking in the HTML because you write jsx (tsx).
In Vue you only have type-checking in the JavaScript part and not in the HTML.
Do you have the same type-checking level in Svelte as you do in React?
The last time I checked it, svelte doesn't really support legacy apps (the type where html is generated by backend code such as php) and is loaded separately from js files. I went with vuejs for that reason.
inertia.js
Thank you, this is interesting. I have implemented my own solution but this is definitely worth checking.
Thanks for sharing your experience. Vuejs is definitely a better choice for the legacy apps in that case.
I have this thing that I don't like to touch technologies that don't make it to the Stackoverflow survey results. Still, I always hated React's state management, so I would be happy to move somewhere if the market shifted. I plan to give Svelte a look. Just my personal opinion.
Thanks for sharing your thoughts. The market shift really matters for devs, so maybe somewhen it shifts to such technologies as Svelte, who knows. Anyway, it's a good idea to give Svelte a look, hope you would like it.
It's very similar to Riot JS which has been around for a lot longer - riot.js.org
Thanks for sharing. They both really have a lot of similarities.
I've already been down the Vue.js route and I'm not going down a similar route again with the potential to leave me unemployed altogether too often.
In this case, agree, Vue.js is a good option instead.
I was convinced I'll read the whole article after the second paragraph :)
It helped me to understand the differences, but I guess there is much more to it since your comparison basically only covers component development, right?
The whole topic of building apps including state management is still unclear to me and will need further investigation. (Can you recommend anything specific?)
For fully knowing when to use it and when not, as promised in that second paragraph, I think I need more information.
Sure, the article is more like a quick overview of the Svelte differences with the main focus on the components (as for me it's the main difference - just my opinion).
I can recommend resources that help me - I will not wonder you if I say that I started with Svelte documentation :) And these a few guides helped me a lot in the development process:
jsreport.io/building-an-app-with-s...
medium.com/swlh/simple-svelte-3-ap...
And about when to use it and when not, if you're going to use Svelte start with SPA development, think it's perfect for that. For MPA building, you can try to use Sapper framework sapper.svelte.dev/
How would it work if you wanted multiple pages, not just index.html?
You can try Sapper sapper.svelte.dev/ that works pretty well if each of your web pages is is a component.
Besides, here is another great guide of custom solution medium.com/swlh/simple-svelte-3-ap...
Nice ~3MB gif about scrolling on github. I wish I could scroll like this myself. :(
You know, gif is more like here to break the text and make the reading more engaging.
Besides, I just like to highlight that despite Svelte is a young framework, it has a big developers community.
Definitely agree, Svelte is a great option to use instead.
Thank you. I'll have a look at that