My look at SvelteJS and how you can start using it

Akash Hamirwasia
Sep 29, 2019 · 6 min read

Naturally, I ignore yet another JS framework type of posts but Svelte caught my eye when I saw it making some fuss in the web community. So I gave it a try, and to my dismay, it is better than what I thought! 🧡
In this post, I would share some of my thoughts which I had when starting with Svelte and how you can start using it in your web projects.

Some background

Svelte is a JavaScript compiler that takes the source code of the front-end and converts it into native JavaScript code. This compiled code does not include any code from Svelte itself, thus generating a more efficient JavaScript bundle that is much smaller in size compared to other popular frameworks. It still uses HTML, CSS, and JavaScript, but with a few specific additions that have led to creators calling it a separate language itself!

This decrease in size may not seem much for most projects and I would agree on that, but it’s always better to have solutions that tackle a problem differently rather than just reinventing the wheel again and again.

Some bits and pieces of Svelte

  • Components (including passing props and events)
  • Reactivity
  • State Management
  • Routing
  • At the end of the day, an overall improved developer experience 🤘

Svelte has most of the above-listed features, plus a really good developer experience(at least for someone who is just starting). It does not have an official routing library (but unofficial ones do exist and provide basic functionality).

Getting started by creating a project

Svelte REPL

All component files in Svelte ends with .svelte extension, and has three parts associated with it: JavaScript, Styling for the component, Markup. Following example illustrates basic usage of Svelte

Structure of a Svelte component. See the output here

If the above code looks confusing, don’t worry, we’ll go through it line by line.
export let name = 'world' creates a variable. export keyword marks this as a prop which can be passed from parent components. ‘world’ is the default value of the prop.
let num = 5 creates a state variable.
function sayHello(){... Creates a function in the component. We’ll use it later. Styling part is self-explanatory, so we’ll skip that.

<h1>Hello {name}!</h1> Interpolation comes into the picture now. h1 tag has {name} in its content. It gets replaced by the value stored in the name variable we created earlier.
<input bind:value={num}> Here we are binding the value in the input tag to num, the variable we created earlier. So every time we change the text in the input, it gets stored in num. [Notice how the next line updates in the output when you change the text. This shows reactivity]
<p>Double of num: {num * 2}</p> This also shows interpolation, but we are doing some JavaScript inside the curly braces.
<button on:click={sayHello}>Click me!</button> Here we are handling events. Events follow on:<event-name>={} syntax. Components can also dispatch custom events and they are also handled the same way.

I won’t be going through concepts like props passing, event dispatching, etc. in detail here cause their interactive tutorial is very good for learning Svelte.

Let’s see under the hood 🧐

Compiled JavaScript bundle

At first glance, it might not seem very optimized, and you’re right! This is because the REPL only shows the compiled ES module of the Svelte components. It is the job of a bundler to further convert it to commonJS and then minify it to get the production bundle.

If you see the output more closely, you would see how short the file itself is. This is where the compiler shines and gives you a significantly smaller bundle than other frameworks. Let’s now take a look at the CSS output.

CSS output

CSS output(shown above) doesn’t seem too interesting. But wait! What’s that .svelte-bt9zrl? Our App.svelte just has h1 { in the style tags. This is another feature of Svelte! It scopes our styling in component level. This means whatever styles you write in a component, they get scoped and are applied to only the elements within that component. This way you won’t have conflicting styles between different components.

If you want to have global styles(applied to all components), you’d create a separate CSS file and link to the HTML file itself. Ah, the good old way!

Building a real project with it

npx degit sveltejs/template my-svelte-project

Svelte uses Rollup to build the app. The project structure and the configuration worked out of the box, and I had migrated the existing project in a matter of a few hours.

The problem came when I wanted to implement Routing. I found out that Svelte does not have an official Routing library (the closest thing to it was Sapper, but it’s more than just routing) and I had to resort to using an unofficial routing library which worked relatively well for my needs.

So you’re telling me to switch to Svelte now? 😑

  • Easy to grasp syntax.
  • The idea of compiling rather than just another traditional framework is intriguing. ✨
  • Reactivity is very simple to use in the components.
  • Things like Svelte transitions, custom elements, and SSR integration are cherries on the cake.🍰
  • Speed isn’t a de-facto way of choosing frameworks, but Rich Harris(creator of Svelte) plays hard to keep Svelte’s speed at top of the list!

In the end, my experience with Svelte was positive. The community is small but growing. I would recommend you to watch this video ‘Rethinking reactivity’ — by Rich Harris, creator of Svelte.

Frontend Weekly

It's really hard to keep up with all the front-end…

Frontend Weekly

It's really hard to keep up with all the front-end development news out there. Let us help you. We hand-pick interesting articles related to front-end development. You can also subscribe to our weekly newsletter at http://frontendweekly.co

Akash Hamirwasia

Written by

A student with a strong passion for web development and design, a 3D artist, and a YouTuber.

Frontend Weekly

It's really hard to keep up with all the front-end development news out there. Let us help you. We hand-pick interesting articles related to front-end development. You can also subscribe to our weekly newsletter at http://frontendweekly.co