Yet Another JavaScript framework or what we call JavaScript Fatigue, almost every day, we hear about new libraries and frameworks being released in the JavaScript world and many of them simply reinvent the wheel.

svelte logo

I know you may say why do i need to learn another js framework, but svelte ain’t like any other framework so let’s see what makes it unique and stand out from other frameworks.

So Whats is Svelte exactly?

tired babe Svelte is a framework for building user interfaces, like Vue or React. The key difference is that Svelte is a compiler, unlike React or Vue which runs in the browser. This key difference together with that Svelte is truly a reactive framework (which React and Vue are not),Traditional frameworks allow you to write declarative state-driven code, but there's a penalty: the browser must do extra work to convert those declarative structures into DOM operations, using techniques like virtual DOM diffing that eat into your frame budget and tax the garbage collector. Instead, Svelte runs at build time, converting your components into highly efficient imperative code that surgically updates the DOM. As a result, you're able to write ambitious applications with excellent performance characteristics.

Svelte is basically a tool to compile components down at the build step, allowing you to load a single bundle.js on your page to render your app. This means no virtual DOM, no frameworks on top of frameworks, and no framework to load at runtime,Some may know it as the most popular write-in for the State of JavaScript 2018 .Svelte is meant to be the framework that isn't really a framework.

Here is how a svelte component looks like :

svelte component

Seriously that’s it, this is the structure of svelte component pretty simple and easy, we can write our component logic code inside script tag and all the styles in a style tag and all that remained will be considered as html elements.

Some of its features are:

  • Truly reactive framework
  • Easy to learn
  • Accessibility support
  • Super fast and small bundle sizes
  • Scoped CSS
  • Only needs a simple build script to get going
  • A component based framework with zero extra plugins

Now we will build a small todo app using svelte,

svelte todo app code

svelte todo app visualisation

I think that svelte is really great easy to learn and fast and will become one of the big ui frameworks in the future, i suggest you to watch this extraordinary video about rethinking reactivity from the creator of svelte himself, and go to their website for more in dept documentation about this amazing framework.

Thanks for reading 😎