Svelte Framework: 6 not so popular javascript frameworks in 30 days series

svelte framework logo

In this post, I will talk about Svelte framework, the purpose of this series is simple, try out 6 not so popular* javascript frameworks in 30 days, and the first one is the Svelte framework.

*By not so popular I mean frameworks that are not so widely used in production apps

If you want to check the other frameworks, you can check them in this index

As always, code is available in Github, let’s start

This time, I decided to do a really simple listing app, you add items, you delete items, nothing fancy.

Installation

This is the first time i try Svelte framework, so, first thing I did was to check the docs,

The docs are really good, and they guide you through the core concepts with an interactive playground, so, if you want to learn it, don’t be a dumbass like me, and do the whole tutorial.

A thing which was a bit hard for me was to find an easy way to create a project, I was hoping they would expose a CLI tool or something like that, but instead, they allow you to create a project via npx.

How to create an Svelte framework project

So once I installed the project and the dependencies, I opened a .svelte file, and boom, vscode syntax highlighting goes nuts, not recognized.

I added two extensions:

  • Svelte for VScode
  • Svelte framework Intellisense

Problem solved.

Svelte Framework first impressions

Out of the box Svelte works with JS, but they support TS, you just need to run a script, some js frameworks allows you to use Typescript, but you need to install and configure it by yourself, but Svelte even creates a tsconfig for you

A shocking thing about Svelte is each file structure, but seems similar than Vue one, you have your logic, layout and styles in the same file. At first I though, ok, cool, I don’t need to navigate constantly, but the problem is that the file becomes messy really fast, so in order to get a cleaner component you should:

  • Split your code into more components
  • Be careful about the SOC principle, do I really need to place this code here?

Note that the style you define in your component will be scoped to that component, so probably you will end duplicating the CSS

Programming time

One of the key features of the programming frameworks is the development experience, and the Svelte one is awesome

I noticed this:

During the coding, I was adding a style tag to declare some CSS, and the Svelte IntelliSense suggested me some tags such <style lang=”scss”>, and I wasn’t sure if that could work, because I didn’t see any node-sass dependency in the package.json, surprisingly, when I added the tag with lang=”scss”, the Svelte extension yelled at me because I didn’t have node-sass installed, for me this is a 10/10 development experience. Unluckily I don’t remember the last time I installed node-sass successfully without building errors, this time wasn’t an exception… so I didn’t use it for the project.

Another cool thing is that Prettier Svelte formatter orders the tags. This builds consistency automatically in your files, each module will follow always the same structure, script, style, and then the HTML

Not so cool things

Not everything is wonderful, some things I didn’t like, probably due to my coding style:

You can’t define TS interfaces and export them from the component, which makes sense, because is not a .ts file, instead, you should define them and export them from another file.

Advantages of this:

  • You will have cleaner components

Disadvantages

  • You can’t define quick interfaces or interfaces related to a component, in React, for example, I tend to define “NameOfComponentProps” interface in the file, and export it from that component if another component props extend that interface, but I cannot do this in Svelte

State

To update the state, you just assign the new value, this is simple, but I think it hurts the state purity because state is not immutable at all and in my opinion, could lead to undesired side effects

Also, HMR (Hot Module Replacement, the system used to update your code when you save a file) doesn’t preserve the state, so if you are working on something with state and you save the file, the state will be resetted

Build

Build was generated in 1.1s,and the .js file weights 8kb, this was really surprising because even the TSC command takes more than 1.1s in my projects