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?
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.
Here is how a svelte component looks like :
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,
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 ?