Svelte: All the Nice Things of a Framework — Without the Framework

Getting the hang of Svelte; an introduction

Written by Charlotte Huygen, Developer

Have you ever heard of Svelte? Well, neither did I until a little over a year ago. Interested in what it is? Keep reading! I’ll tell you all about it and what you have to keep in mind when starting Svelte. I’ll have you writing Svelte BEFORE you finish this article! Ok, maybe not, but keep reading anyway. Because although Svelte isn’t actually a framework, it IS very promising.

How Did We Get Here?

The first time Svelte passed my screen was when a colleague of mine talked about it. He made a small application and used a simple new framework. He showed us a few lines of code, and I thought: “Hmm, I have to check this out some time.”.

Well, Svelte made it on my to-check list. You know, a list you make for everything you want to check out when you have the time, but then you forget about it. Fast forward a year later, and our team has the chance to develop a new portal-like application. As this was something shiny and new to work on, the whole team was naturally very excited. The first thing that came to mind: let’s use a framework!!!

I was honestly going to be happy with whatever framework. But in the end, Svelte made it off the to-check list and on the to-do list.

Why Svelte?

Why should you use Svelte? Well, in the first place, Svelte is really lightweight. If you’re planning to make a small application and don’t need a full-blown framework like React or Angular, Svelte is the way to go. Svelte isn’t even a framework: it’s actually a compiler. It translates its code into pure JavaScript. No overhead code is added in, making the compile time faster. How much faster? Well, it is said Svelte is about 30% faster than other frameworks.

At the same time, Svelte also offers everything you’d expect from a framework: the building blocks are components, you can implement state, they have lifecycle methods, and much more.

The learning curve: it’s even easier to get the hang of than Vue. Yes, really! The components themselves are built up similarly to Vue, where you basically just use a combination of HTML, JavaScript, and CSS to build your component. This makes Svelte easy for people who are not familiar with frameworks.

Lastly, this “framework” offers ever-so-easy state management. I couldn’t believe we finished so quickly when setting up our store. I’m sure there is more to talk about when it comes to Svelte, but these were just the first few things that came to mind. So make sure to check it out yourselves.

Svelte in Code

Now let’s get deeper into some functionalities of Svelte and how we handle them.

Svelte Components

Firstly there are the components. I’m a big fan of frameworks because you can put generic stuff into a reusable component and just use it wherever you need it. I’m the stubborn developer who tries to put everything you are likely to use again in a component — as you should! But as my colleagues might tell you, this stubbornness has also caused me to occasionally waste some time (screw you, form components!).

What I like about Svelte is how easy it is to build a component. In the first place, you just make a file with the .svelte extension and voilà; you’re ready to build your component.

In the image, you can see our Header component. Our portal will be FILLED with headers, so a reusable component was necessary. I swear.

Anyway, a Svelte component consists or can consist of three different HTML tag elements. Firstly, there’s the script element for any needed JavaScript in the component. Here you can easily declare properties or call any required life-cycle methods or… You know. Just any JavaScript function you want to use inside your component. See those exported variables? By declaring them, you have made a property to the Header component. It’s that easy.

Under the script tag, you can start declaring any HTML element to begin building the actual component. As you can see here, as we were building a header, we used a header HTML tag and filled it with other HTML elements. And voilà, there is your component. Or, more specifically, that is what your component will consist of — no need to learn any other syntax. You could also implement styling by just inserting a style tag under your component if you want to. Then, inside, you can just write your CSS as you would in any other styling tag. Simple, right? There is no need to spend too much time learning how to do it because you already can with basic HTML, JavaScript, and CSS skills.

State Management

Another thing is state management. If you’d ask me what got me completely hooked on Vue, it’s this. It is sooo easy to set up. Much like with other frameworks, the state of your application is kept within a store that you can access from anywhere. Note that the store is set up in a .js file and not a .svelte file.

Now Svelte has more than one kind of store. There are three:

• the writable store
• the readable store
• the derived store

In our application, we’ve only used the writable store. A writable store means you have a store with values that can be set from outside components. It is created by declaring a variable that calls Svelte’s writable method. Inside this method, you put your store values. Here we have an object that holds a state object with three properties: visible, bannerType, and bannerText. The values that are declared within the writable method are its default values. The properties in it are also the ones you will be able to read and set from within your component.

Inside the return object of our store, you’ll find two properties that return two store methods:

The show property returns the set method, and the hide property returns the update method. You can use the set method to replace a value in your store with a value that you’re passing as an argument to the set method. For example, in the code above, you’ll see that we’ll overwrite the state object when calling the show property.

Then there’s the update method of the hide property, which takes a callback function as an argument. Within this callback function, you can take the current state of a value and return a new state based on the old value of the state.

Now, of course, the purpose of a store is that the state you use inside components gets updated when changes occur inside the store, and for this, we have the subscribe method.

With this method, you can subscribe to a certain store value. You use this subscribe method in your component, and whenever the state of this value changes, it gets updated automatically within your component. The subscribe method returns a callback function that takes the data that we get back from the store as a parameter. Every time the data inside the store changes, the subscribe function gets fired again. Inside the callback function, we can do whatever we want with the data that gets returned from the store.

Recap on Svelte

Now, I could explain more about Svelte and how we use it inside our application, but there’s only so much you can put in one blog post. To recap:

• Svelte is a lightweight framework that doesn’t take much effort to learn if you already have some experience with HTML, CSS, and JavaScript.
• It’s a perfect framework for beginning web developers.
• Want to make an application fast but with every benefit of an actual framework? Svelte is the way to go.
• The way the store works is out of this world!

However, something to keep in mind is that Svelte is in its early stages. It took a bit more effort to pull off what we wanted in Svelte for some edge cases. But, this framework is gaining popularity fast and improving at the same pace. So, although some things might take some figuring out, don’t give up on Svelte too fast.

Maybe I’ve sparked your interest enough to try it out yourselves. If so, be sure to check out the Svelte documentation or try something out with Svelte: https://svelte.dev/

If you have any questions regarding Svelte or anything else, be sure to contact me: charlotte.huygen@persgroep.net