Svelte Introduction

In this article, let’s see Svelte Introduction

What is Svelte?

Svelte is a component framework that uses a technique called virtual DOM and it allows to write a state-driven code which gets converted into ideal JavaScript code by the browser. In Svelte the code gets converted into JavaScript code at the build-time, unlike other frameworks that do during the run-time.

It convert your app into ideal JavaScript at build time, rather than interpreting your application code at run time.

It is a compiler, not a framework and it is faster than other JS libraries like ReactJS, AngularJS, or VueJS. It is used to create reactive web apps. If any change occurs in the data that change will reflect on the page instantly. Also, It is also used in rapid application development means quickly producing minimally coded software applications. It is used in Web Optimization. But it does not use virtual DOM which makes it different from others.

Benefits:

  1. Smaller Bundle Size: Its compiler is designed to produce optimized JavaScript code, resulting in a smaller bundle size than many other frameworks. This means that your web application will load and run faster, providing a better user experience. Additionally, because It only includes the code that your application actually needs, there’s less code to maintain and debug.
  1. Reactive State Management: Its reactive state management system is another standout feature. When your application’s state changes, It automatically updates the user interface without the need for manual updates. This makes it easy to build dynamic, data-driven applications without worrying about managing complex state changes.
  1. Easy to Learn and Use: Its syntax is simple and easy to understand, making it a great choice for developers who are new to web development or who are looking for a more approachable framework. Its minimalistic approach to web development means that there are fewer moving parts to worry about, allowing you to focus on building your application’s core functionality.
  1. Component-Based Architecture: Its component-based architecture is similar to other popular frameworks like React and Vue, making it easy to create reusable components and templates for your application. This makes it easier to maintain and update your application over time, as you can make changes to individual components without affecting the rest of the application.
  1. Strong Community Support: While It is still a relatively new framework, it has a strong and growing community of developers who are working on new tools, plugins, and resources to help other developers get the most out of the framework. This means that there are plenty of resources available to help you learn It and build high-quality applications with it.

Installation

In order to work with It, you need to have Node.js installed. To create your first app, run the following terminal commands:

npx degit sveltejs/template my-first-app
cd my-first-app
npm install
npm run dev

Advantages and Disadvantages

Advantages

  1. The building time is blazing fast when compared to React or even other frameworks. Usage of the rollup plugin as the bundler might be the secret here.
  2. Binding classes and variables are relatively easy, and custom logic is not needed when binding classes.
  3. Scoping CSS <style> within the component itself allows flexible styling.
  4. More straightforward store implementation when compared to React’s context API, granted context API provides more features, and Svelte might be simple enough for common scenarios.
  5. Easier to understand and get started when compared to other frameworks as the significant portion of Svelte is plain JavaScript, HTML, and CSS.

Disadvantages

  1. its tooling needs some time to mature, Prettier will randomly remove style tags for no reason.

  2. the svelte team seems to be moving toward a SvelteKit first approach which when you’re someone who focuses on building SPA feels a bit like a square peg, a round hole.
  3. Svelte Native isn’t great yet (maybe ever), no true native compile target.

 

Reference:

https://svelte.dev/
https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started

 

Svelte is a powerful and flexible framework for building modern web applications. Its unique approach to web development, including a smaller bundle size, reactive state management, easy-to-learn syntax, component-based architecture, and strong community support, make it a valuable tool for web developers of all levels. If you’re looking for a modern, flexible, and efficient way to build web applications, Svelte is definitely worth exploring.. Hope this article helps!

Last updated on May 13th, 2023.