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