Frontend Weekly
Published in

Frontend Weekly

My look at SvelteJS and how you can start using it

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

Front-end JavaScript frameworks are used by web developers to build their applications in a more structured and maintainable way. While they have a ton of benefits, the framework itself adds some bulk to your JavaScript bundle, thus increasing the load time of your app by a small margin.

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

Having used other frameworks, I expect any new framework in 2019 to have the following features.

  • 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

You can try Svelte on their REPL which is a playground where you can directly write your code rather than setting up 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 🧐

If you see the above code example in my REPL, you can see what our built files look like. Open the JS output, to see the JavaScript after compilation(also shown below).

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

After I got myself familiar with how Svelte handles the UI, I decided to give it a shot in trying to develop a real project with it. I had a project written in vanilla JavaScript and wanted to see how easy would it be to migrate an existing (relatively simple UI) project to Svelte. I scaffolded the project with the following command.

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

Nope. It may not be ready for large applications, but I think you should consider it for some side projects you build in the future, maybe get a feel for it and see if you like it. Some things I liked about Svelte were:

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

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Akash Hamirwasia

Akash Hamirwasia

47 Followers

Passionate about programming and building innovative products on the web