Svelte, a compiler based Javascript framework

 Svelte is one of the Javascript Frame work , most loved by the developer community. It is little bit different from React, Vuejs and Angular. 

Unlike React Svelte uses a compiler to generate bundles,  as result of this when user launches the app, it run faster, and bundle size will be minimal. 🚀 

 

Learning curve

Learning Svelte is not so hard, it is just another language. Documentation is worth reading and there is a good community for help.

Components

Svelte reusable component comprises of plain HTML code. In React they uses functional component or class component with props.

Svelte simplify these. Also let use Markdown to create components and routes. 

Props

Properties props can be think of variable. 

let posts[];

Reactivity

What is achieved in Vuejs' s computed property or React's useEffect can be done with few line of code. Here is how I implemented a search logic in Svelte

 

let searchTerm = '';$: {
if (searchTerm) {
filteredPokemon = $pokemon.filter((pokeman) =>
pokeman.name.toLowerCase().includes(searchTerm.toLowerCase())
);
} else {
filteredPokemon = [...$pokemon];
}

The above code filter pokemons collection using the searchTerm which is a reactive variable and  binded to a input box. Whenever user input search term it will automatically filter and display the content.

The same thing can be done in Reactjs with more lines of code. Thanks to the $ operator which make the reactive property observable.

The complete pokemon project can be found on Github Repo.

SvelteKit

So what is SvelteKit ? It is like Nextjs for React developers. SvelteKit helpful to setup app with all scaffolding and configurations such as routing. In short it is the easiest way to create a Svelte app.