Svelte! the new javascript framework in 2020.
Nowadays Javascript frontend framework expanded like never before. Current battleground are topped by most 3 popular JS Angular, ReactJS and VueJS.
According to the survey, data from developer review ReactJs has won the developer’s heart. Vuejs and Angular got tied on the 2nd.
You can find the survey data on below link
https://www.kaggle.com/sachag/state-of-javascript-2018 can get the survey data from this link.
Personally I have started using js frameworks in 2014 by exploring angularJS but sadly in the next year 2015, angularJs become Angular2 with the dramatic change and at that point, I had lost my connection with angular and go for searching another horse to ride.
Fast forward 2019 I am using a Vuejs for my personal projects and prefer Vuejs to the new developers for a short learning curve at least shorter than JSX.
Svelte the fourth horse:
I came across svelte one week ago and realize this is different than other frameworks, basically it is a compiler more than the framework. Svelte runs build time, which means it will not include the framework itself as a hard dependency, and performance efficiency is much higher than state-driven frameworks like Vue or React.
To create a Svelte boilerplate app, you must have install node, npm, and npx in local machine and run following command
npx degit sveltejs/template my-svelte-project
cd my-svelte-projectnpm install
npm run dev
This will open in “localhost:5000” with a Hello world example.
The magic you will find in “package.json” file. In svelte package file look like this,
As you see there are no dependencies, only have devDependencies because svelte is a compiler, and will not bloat the application with the unnecessary script. I think that is crucial for a heavy data-dependent project where you do not want any extra legs with your code.
After opening the App.svelte file you will find this form of code
If you are familiar with VueJs it is a really similar approach to write code, single component single file approach.
Svelte has an awesome unused CSS markup feature that will mark all unused CSS within code, also animation and CSS maintain is easy in svelte due to the strong library featured.
For learning svelte, the documentation you will find on their official website.
A really useful built-in compiler is an awesome feature for reducing the learning curve also having an example library can give a handy experience over functionality.
https://svelte.dev/examples#hello-world
Though the svelte is not mature like Angular or not popular like ReactJs they have really a promising feature list and strong community.
The creator of svelte, Rich Harris has published the latest update video about svelte3 and new reactive feature and other update functionality. 100% worth watching.
Also strongly focus on performance svelte can be a nice asset in your knowledge library.
Feel to ask any question or discussion in comment/Linkedin.
