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.
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
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).
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(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-projectSvelte 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.
