If you are a frontend javascript developer, You might know that According to Stack Overflow’s 2021 survey, Svelte is the most loved framework and 71.47% of developers said they loved it. Where React was fourth (69.28%), Vue was fifth (64.41%) and Angular was ninth (55.82%). So, We can say there is something more interesting in svelte than other alternatives. In this blog, we will try to answer some questions about svelte.
What is Svelte?
Why do developers love it?
Svelte vs React.
and Why I am using svelte in my current project?
Before beginning, I am a javascript developer for a long time. In my javascript journey, I have worked on many of its frontend frameworks or libraries. Many just came and go. Some became very popular. I have tried them in a synchronized way like- Vanila Js to Jquery, Jquery to Angular, Angular to React and Vue. Now React to Svelte. I was working on React for a long time. But when I found Svelte and its simplicity, I think It will stay for a long time.
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." - This is what they say on their site.
In simple, Svelte is a component framework like other Javascript frontend frameworks like Vue and React but with less complex and less costly browser work. In other frameworks, we are writing declarative state-driven code. Where we are hoping that our browser will do this expensive task to convert our code into regular DOM operations. Where the browser will use DOM diffing to update the main DOM from the virtual DOM. Which is very complex and performance costly. But Svelte runs a build time compiler to convert our code into Imperative which surgically updates the DOM.
Why do developers love it?
Performance: Svelte is known for its exceptional performance. It compiles your code at build time, which means that the browser doesn't have to do as much work when it loads your web application. This leads to faster load times, smaller bundle sizes, and smoother interactions.
Easy to Learn: If you are comfortable with Vanilla JS then You are ready to start Svelte. Because Svelte has a simple and intuitive syntax, which makes it easy to learn for developers who are new to the framework. It also has a very small API, which means that you don't have to learn a lot of new concepts to get started.
Reactive State Management: Svelte has built-in reactivity that makes it easy to manage the state in your web application. This means that when you update a variable, Svelte automatically updates the DOM to reflect the changes. you don't need to call additional hooks like react dose.
Component-Based Architecture: Like other frameworks, Svelte also maintains component-based architecture, which makes it easy to create reusable UI components that you can use throughout your application. This helps to reduce code duplication and makes your code more modular and maintainable.
Tooling: Svelte has excellent tooling support, including a CLI tool, plugins for popular editors like VSCode and Sublime Text, and integration with popular frontend frameworks like React and Vue.
SSR: React has Next JS and Vue has Nuxt JS to make server-side rendering applications. Now Svelte also has SvelteKit, Which is now stable on version 1.0.
Svelte offers a unique combination of simplicity, performance, and reactivity, which makes it an attractive choice for developers.
Svelte vs React.
Performance: Svelte is known for its exceptional performance because it compiles your code at build time, which means that the browser doesn't have to do as much work when it loads your web application. In contrast, React's virtual DOM approach can lead to slower rendering times and larger bundle sizes.
Syntax: Svelte has a simpler and more intuitive syntax than React. Svelte uses a template-based syntax that looks more like regular HTML, while React uses a JavaScript-based syntax with JSX.
State Management: Svelte has built-in reactivity that makes it easy to manage the state in your web application and it has a svelte store. In contrast, React requires you to use a state management library like Redux or MobX to handle the state.
Size: Svelte's compiler can generate smaller bundle sizes than React. This is because Svelte eliminates the need for a virtual DOM and includes only the code that is used in your application.
Learning Curve: Svelte has a shorter learning curve than React, in part because its syntax is simpler and more intuitive. However, React has a larger and more active community, which means that there are more resources available to help you learn.
Community Support: Svelte is new compared to react. So the community support is less than react.
Why I am using svelte in my current project?
In my current project, We have two frontends for the admin and the user. For the first time, I was thinking to use react as It is the most popular JS frontend library on the earth and I was using it for a long time. But I found out our project was not very complex and I decided to take a risk to build it on Svelte. After using svelte for a few weeks I just loved it. Svelte has a very small API surface area, which makes it easy to learn and use. So I found no difficulties like I found shifting from angular to react. The framework provides a clear and concise syntax for defining components, making it easy to write and read code. Which was helpful for other react developers in my team to understand the code. Like React, Svelte also has modern development experience that includes hot reloading, automatic code splitting, and error handling. The framework also has an easy-to-use CLI tool that makes it easy to get started with a new project. Which was very helpful for me. Svelte can be used with other frameworks like React, Vue, and Angular, which makes it a great choice for me if I want to integrate my project with existing applications.
Finally, if you value performance, ease of use, and reusability, Svelte might be a good choice for your project as it is for my project.