tkssharmaWhy I am interested in learning SvelteJS
These Days, i am Talking about Year - 2022, I see everywhere people started talking about svelte JS a front-end framework for developing components like other framework we have like react, angular and Vue JS.
In my development journey i have worked on almost all different frameworks including
angular, react and Vue JS. Now i see something new called Svelte JS, its not new but yes new for me and questions for me is "should i learn this another framework ??"
So i did some research and explored all about svelte JS and finds out that "Yes i must learn this framework and should start using it in different applications.
I am just putting here some example so i can convince other Developers to explore more on Svelte JS
Svelte is pure html and javascript
This will print Hello World on the screen, its pure html and javascript.
We don't see any render or some complex bootstrap process for this component, we don't have any kind of render function returning HTML/JSX
// App.svelte file
<script>
let name = 'world';
</script>
<h1>Hello {name}!</h1>
Another Simple example with counter
<script>
// declaring a variable
let count = 0;
// declaring your function
function handleClick() {
count += 1;
}
</script>
// Calling your button and setting the onClick behavior similar to // Vue.js just no "v-" in front of it
<button on:click={handleClick}>
Clicked {count} {count === 1 ? 'time' : 'times'}
</button>
This example shows reactivity, if you think of same example in any other framework, there you have to do many things just to update state and re-render the same component for a DOM event change
Here count is a variable can be accessed by HTML template and when it gets changed, component will update the View to show updated value on the UI
When we look at the compiled JS for this code example, it is invalidating count after every event.
https://svelte.dev/repl/2c55788d8ffd4458bfe9bcb5f58956db?version=3.46.6
function instance($$self, $$props, $$invalidate) {
let count = 0;
// declaring your function
function handleClick() {
$$invalidate(0, count += 1);
}
return [count, handleClick];
}
If we learn more about reactivity then we might see some more example like this
In this example $$ expression will trigger with every count invalidate and will check this expression again and re-evaluate.
<script>
let count = 0;
$: if (count >= 10) {
alert(`count is dangerously high!`);
count = 9;
}
function handleClick() {
count += 1;
}
</script>
<button on:click={handleClick}>
Clicked {count} {count === 1 ? 'time' : 'times'}
</button>
Svelte is reactive without Virtual DOM
The second-most intriguing thing about Svelte is the fact that it states it is reactive, meaning when a change happens after the DOM loads, it will update without a full-page re-render. This is where React gets its name from, but React created this thing called the virtual DOM which is just a copy of the actual DOM and is able to make updates to it as the developer pleases. Read more about that here.
"Popular saying, its fast because DOM is slow"
Virtual DOM is pure overhead (https://svelte.dev/blog/virtual-dom-is-pure-overhead)
you can spend time to digest all these facts (https://svelte.dev/blog/virtual-dom-is-pure-overhead)
Let's retire the 'virtual DOM is fast' myth once and for all
If you've used JavaScript frameworks in the last few years, you've probably heard the phrase 'the virtual DOM is fast', often said to mean that it's faster than the real DOM. It's a surprisingly resilient meme — for example people have asked how Svelte can be fast when it doesn't use a virtual DOM.
example fro react --
function HelloMessage(props) {
return React.createElement(
'div',
{ className: 'greeting' },
'Hello ',
props.name
);
}
...but the result is the same — an object representing how the page should now look. That object is the virtual DOM. Every time your app's state updates (for example when the name prop changes), you create a new one. The framework's job is to reconcile the new one against the old one, to figure out what changes are necessary and apply them to the real DOM.
to get more info you can check https://svelte.dev/blog/virtual-dom-is-pure-overhead
Accessibility is built-in
Svelte's accessibility (often shortened to "a11y") warnings are one of the framework's standout features. Per Rich Harris, Svelte is an "a11y-first framework" that "will let you write non-accessible markup, but it won't respect you for it." Accessibility warnings in the compiler have been a part of the framework
Learning curve
When it comes to learning this, its easy and enough docs available to easily learn it, so complex concepts and things in Svelte JS
Anyone can start learning right from here https://svelte.dev/tutorial/basics
Bundle Size and faster compilation
Just to get start with some basic application, you can create one using simple commands
npx degit sveltejs/template my-svelte-project
cd my-svelte-project
# to use TypeScript run:
# node scripts/setupTypeScript.js
npm install
npm run dev
The Svelte implementation of TodoMVC weighs 3.6kb zipped. (https://svelte.dev/blog/frameworks-without-the-framework) For comparison, React plus ReactDOM without any app code weighs about 45kb zipped. It takes about 10x as long for the browser just to evaluate React as it does for Svelte to be up and running with an interactive TodoMVC.
And once your app is up and running, according to js-framework-benchmark Svelte is fast as heck. It's faster than React. It's faster than Vue. It's faster than Angular, or Ember, or Ractive, or Preact, or Riot, or Mithril. It's competitive with Inferno, which is probably the fastest UI framework in the world, for now,
Conclusion
- As i am learning svelte, soon i will be posting more about Svelte JS
- Every dev should look into what svelte JS is providing for our UI components and how it is different from all other frameworks.
