Svelte! another javascript framework/compiler

Now a days Javascript frontend framework expanded like never before. Current battle ground are topped by most 3 popular JS Angular, ReactJS and VueJS.

% of developer impression on React, Vue, Angular.

According to survey, data from developer review ReactJs has win the developers heart. Vuejs and Angular got tied on 2nd.

You can find the survey data on below link can get the survey data from this link.

Personally I have started using js frameworks in 2014 by exploring angularJS but sadly in next year 2015, angularJs become Angular2 with the dramatically 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 new developer for 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 framework. Svelte run build time, that mean it will not include framework itself as a hard dependencies, and performance efficiency is much higher than state driven frameworks like vue or react.

To create 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-project

npm 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 is no dependencies, only have devDependencies because svelte is compiler, and will not bloat the application with unnecessary script. I think that is crucial for 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 familiar with VueJs it is really similar approach to write code, single component single file approach.

Svelte have awesome unused css markup feature that will mark all unused css within code, also animation and css maintain is easy in svelte due to strong library featured.

For learning svelte, the documentation you will find in their official website.

Really useful built in compiler is a awesome feature for reducing learning curve also having a example library can give a handy experience over functionality.

Though the svelte is not mature like Angular or not popular like ReactJs but they have really a promising feature list and strong community.

The creator of svelte ,Rich Harris have published a latest update video about svelte3 and new reactive feature and other update functionality. 100% worth of watching.

Also strongly focus on performance svelte can be a nice assets in your knowledge library.