Svelte, My very first impression
One of my best friends and an old colleague asked me about my personal opinion about Svelte. So, I’ll try to do my best in this post.
The tagline
Cybernetically enhanced web apps….
Umm, it sounds interesting, but what do they mean by “Cybernetically enhanced”? The Svelte official blog gives us the following statement.
‘Cybernetically enhanced’ is designed to instead evoke Svelte’s overarching philosophy that our tools should work as intelligent extensions of ourselves — hopefully with a retro, William Gibson-esque twist.”
At first glance, I don’t get it :(. Maybe I will need more exposure to the Svelte ecosystem.
Main benefits 😄
Small footprint
Given the fact that Svelte does not have a Runtime, that gave it a clear advantage over other solutions. Not needing to deal with a runtime overheat is excellent if you are going to be writing isolated components and performance matters. Here is a comparison against other frameworks published by freeCodeCamp in the following article.
Performance
Because Svelte does all the heavy work at compiling time, in theory, that will make it super fast at runtime. I could not find any concrete example yet. Can you help me? Below another chart from the freeCodeCamp folks. I’m not sure about the conditions of the benchmark below neither.
Writing less code
The framework authors have made this one of their core principles. Take a look at the following post Write Less Code in which they make a comparison against Vue and React. Practically; I’m not sure if you can benefit from this in the near term. Because due to the framework age, there are not a lot of UI libraries. Some examples could be date pickers and autocompletes, so you will probably need to write a lot of code from scratch.
Built-in Self-contained styles
Don’t have to think about how to maintain a component-scoped CSS is a blessing.
Built-in accessibility features
Svelte will help by warning you if you write inaccessible markup, Awesome!!!.
Main drawbacks
Testing
It seems not being a defined official answer to this yet from the framework authors. Here is what they wrote in the project FAQ.
Custom syntax
My first impression of ReactJS was peculiar, cause I did not get why people mixed javascript with HTML (JSX). After a while, I started seeing the benefits. Herewith Svelte, having to learn all the framework-specific syntax, make me feel like going back again.
Here some examples from the Svelte documentation.
Adding Reactivity
Exporting props
Expressing conditional logic
Event Handlers Modifiers
Young ecosystem
The Svelte community is doing a great job creating docs, tooling, and other materials. However, the amount can’t be compared yet with other frameworks like React, Vue, or Angular. That will be getting better as the adoption increases.
In the following repo Awesome Svelte, you will find a curated list by Booqable.
Some Stats
Companies using Svelte
My conclusions
As the Svelte blog said, “Svelte is a radical new approach to building user interfaces.” When you do different things most of the time, you are going to have two primary outcomes, Glory or Missery 😄. Definitively Svelte is a project we should keep the eyes on, cause the are doing great stuff and shaking paradigms.
At Front10, we will always welcome innovation and new technologies that can push the Front-end development forward. Even when React is giving us great results so far, we wish long live to Svelte and hope to use it in production someday in the near term.
