Svelte is a new uprising client side tool which is definitely worth learning. We will guide you through the basic steps required to setup a Svelte Project and display a simple component.

What is Svelte used for?

Svelte is a new framework that can be used to create user interface just like other frameworks like React and Vue. The major update in Svelte does most of the code conversion to lower level at compile time itself. Since the work is done majorly during Compile Time, the svelte application would run and bootstrap faster. Svelte is focussed on

• Application Performance
• Reactivity to Changes
• Light weighted Library
• Easy of Code and Use

Is Svelte better than React?

React uses concept of “Virtual DOM”. Every time when there are updates to state variable, Virtual DOMs are compared, react keeps the copy of old DOM tree and DOM construct after the update is made. Once the old and new copy of virtual DOM is available, the changes are propagated to the real DOM. The major hurdle over here is that DOM diffing does not comes for free. Although the algorithms to process the DOM diffing is very efficient, still it is an expensive operation to carry out.

Also in case when we are using Hooks, we cannot put down an expensive operation carelessly in the code. If we put down expensive operation inside a React Component using Hooks, it will be recalculated every time when the component is re-rendered.

Also in case of React, we have lot of work that is done in the background, in order to manage the component state. We also end up using complex libraries like “redux”, in order to achieve state management.

Svelte is capable of achieving all the functionality of React without the use of Virtual DOM. Svelte compiles the code to tiny frame less vanilla JavaScript to make the application fast and performant.

Installing and Running Svelte Project Locally

We will guide you through the basic setup steps required in order to get up and running with a Svelte Application…

1. Getting the Svelte Sample Project

You need to have Node installed in your local system before we can get the basic Svelte project. Then, we can run the following command in the repository where we are required to create a Svelte Application:

npx degit sveltejs/template project-name

2. Go to the Repository and Install Dependencies

Once the repository is created, move to the folder and install the dependencies that are required for the project. The dependencies for the project are specified inside the “package.json” file.

cd project-name

The dependencies for the Svelte Project is specified inside “devDependencies” and “dependencies”. We need these dependencies to be available before running the application.

Run the following commands:

npm install

3. Running the “dev” script

In “package.json”, we have “scripts” defined, in order to run the development environment, we need to run “dev” script.

npm run dev

This command will execute the Svelte project, and we have the application up and running on port 5000 ( http://localhost:5000/ )

Svelte has been a popular topic within the JavaScript dev community. And usually, when a framework or library is talked about as much as Svelte has been, I entertain the idea of learning about it and get curious to know why people are paying it so much attention.

4 Things That Interest

The Most About Svelte

There seem to be a lot of different benefits to Svelte, but here are the 3 that stood out the most when reading through their marketing page as well as their developer docs. Keep in mind I am comparing this to the big JavaScript frameworks/libraries to see what would make this different and worth exploring for new projects!

1. Svelte is built on top of HTML

One thing I always look out for in a framework is to see how easy it is to set up and get started with your first “Hello World” on the screen. According to their site, you just include a script tag, where you write your JavaScript, and then with the curly bracket syntax, call your variables or functions.

// App.svelte file
<script>
 let name = 'world';
</script><h1>Hello {name}!</h1>

A couple of things to notice: there isn’t a return/render statement anywhere in the component/page file; instead, there is just an H1 tag on in the ether! Can’t say I am a fan of this but really nice to get back up and going. So after seeing this, I wondered, how in the world would you write a function for, let’s say, a button click? Their example code on the homepage jumped straight to that, check it out below.

<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>

Most people might say anything built on top of HTML is very elementary and not considered programming, but people also have to understand HTML is a foundation when dealing with the web and especially JavaScript! HTML is a must-know and is very simple in comparison to all of the programming languages out there so to build on top of it is a win in my book!

2. Reactive without the 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.

If Svelte makes the claim that it is reactive but without the virtual DOM where in the world are they making changes?? They make the claim that the regular DOM is fast enough to handle the changes without a page reload and that is what they are utilizing. Sounds like magic to me, but that is just because I don’t understand it fully yet but definitely interesting. Here is the article where they provide all of the details on the Virtual DOM vs regular DOM comparison.

3. Weird looking syntax

One thing I am curious about though is the syntax for a lot of the JavaScript that lives inside the HTML. A lot of it looks like they should be commented code but there are weird characters inside of the HTML inside of curly brackets, so I know it will definitely take some getting used to. There are pound signs, or for us millennials, “hashtags”, for all of our JavaScript functions. What it resembles though is JSX. JSX in my opinion should become the new HTML, but that’s another discussion for another day.

/* You can see the hashtag sign to open the forEach method here but you end it like you would a normal html tag except instead of carats you use curly brackets */
<ul>
   {#each items as item}
      <li>{item.name} x {item.qty}</li>
   {/each}
</ul>

Svelte’s HTML syntax resembles JSX just in the fact that you can write JavaScript inside the HTML and you need the curly braces to jump into some JavaScript. Why I like JSX instead of this syntax is you can literally write normal JavaScript in the HTML, but with Svelte you have to learn a new way of writing things. This should be interesting once I start really using it.

4. Accessibility is built-in?

The final thing that interests me the most about Svelte is accessibility or “a11y” warnings are built-in. Back to the conversation about changing HTML for the better, would be building in accessibility errors/warnings directly in the HTML somehow. Anyway, these accessibility checks are all done during runtime which is nice but you still may need to install additional tools or linters for these checks while writing the code. There is something promising here and I hope they continue to build on this as time goes on.

In Conclusion

There is so much more to Svelte that interests me but these are the things that stood out the most and I may have to update after I fully dig into all of it. But at first glance, it definitely caught my attention for a number of reasons, 4 specifically, and will probably grow.

An honorable mention to this list though is SvelteKit which I will definitely dive into since it offers a server-side rendering experience similar to Next.js, which I am still waiting on React and Vue.js to do. But, I am waiting patiently. SvelteKit is still in early development but if the momentum of Svelte continues to push forward by the time they release this, it will grab the attention of more developers.

Svelte is built on top of HTML. It’s built without the Virtual DOM. The syntax is funny-looking, and accessibility warnings are built-in. If its bundle size is as small as it promises and is faster than other libraries and frameworks, we might have a competitor for building out MVPs in the future.

---