xBlog

BLOG

SvelteJS Yet Another JS Framework you may say

SvelteJS Yet Another JS Framework you may say
youssef elouardi

youssef elouardi

27 November, 2019 Β· 3min πŸ“–

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 ?

thanks

youssef elouardi

youssef elouardi

JavaScript Enthusiast

Tags:

signature

youssef elouardi has no other posts

Aloha from xHub team πŸ€™

We are glad you are here. Sharing is at the heart of our core beliefs as we like to spread the coding culture into the developer community, our blog will be your next IT info best friend, you will be finding logs about the latest IT trends tips and tricks, and more

Never miss a thing Subscribe for more content!

πŸ’Ό Offices

We’re remote friendly, with office locations around the world:
🌍 Casablanca, Agadir, Valencia, Quebec

πŸ“ž Contact Us:

🀳🏻 Follow us:

Β© XHUB. All rights reserved.

Made with πŸ’œ by xHub

Terms of Service