Exploring Svelte: The Most Loved JS Framework
If you are a web developer, you have probably heard of Svelte, the most loved JS framework according to StackOverflow’s 2022 Developer Survey. But what makes Svelte so special, and why should you consider using it for your next project? In this blog post, I will share some of the reasons why I love Svelte and why you will too!
What is Svelte?
Svelte is a JavaScript component framework that has developed its own way to let developers build what they need and want. Unlike React and Vue, Svelte doesn’t use a virtual DOM. Instead, it compiles code into tiny, pure Vanilla JS. As a result, the code works much faster from the beginning, making a potential app product much lighter and more user-friendly.
About SvelteKit
Whereas Svelte is a component framework, SvelteKit is an app framework that solves the tricky problems of building something production-ready. It provides features such as:
- Routing
- Server-side rendering
- Data fetching
- Optimized production builds
- App deployment
- .. and many more!
Why is it most loved?
Let’s find out!
Light files
Svelte runs at build time, compiling your Svelte code into vanilla code without virtual DOM. This gives you some of the smallest files in a modern framework. It also allows Svelte to look like a superset of HTML and be truly reactive.
Easy to read and maintain
Svelte gathers the logic (JavaScript), the structure (HTML), and the style (CSS) in the same file. This makes the code easy to read and maintain. Guillermo Rauch, the Vercel founder & CEO, has even said Svelte, in his opinion, is a lot easier to learn than React — an environment he’s known perfectly for age.
Write less code
Svelte makes your code simple and readable by eliminating unnecessary layers. Using familiar languages like HTML, CSS, and JavaScript, you can create components without a boilerplate. Svelte aims to help you write less code and achieve more. No abstractions. No React Hooks. No boilerplate.
Built-in State Management
In Svelte, any variable can be a state. You don’t need complex state management libraries — Svelte brings reactivity to JavaScript itself.
Everything you need
Svelte comes with many built-in features that make development easier. You can import transitions, animations, eases, stores, lifecycle methods, and more as you need them. You don’t have to rely on external dependencies for most modern features.
Creating your first Svelte app
To start a Svelte project, you need NPM installed on your system. Once you have it, you can execute the following commands:
npm create svelte@latest myapp
cd myapp
npm install
npm run devDuring the package installation, you will be prompted with options to adjust your preferences, such as template, type checking, and additional settings for your setup.
Once it says the project is ready, install the dependencies using “npm run install” and, lastly, execute “npm run dev” to start the local development server that automatically updates the browser when you make changes to your code.
And finally, you can start working on your Svelte project!
Conclusion
By the end of this article, we talked about Svelte and SvelteKit and why many other developers love it. Whether you are looking for a fast, easy, and modern way to build web apps or are curious about the latest trends in JavaScript development, Svelte is worth checking out.
You can learn more about them on their official website. I hope you enjoyed this article and found it useful. If you have any questions or feedback, feel free to comment below.
Happy coding!
