Svelte Review

July 04, 2020

My review of the framework after an intense, two-week deep-dive, implementing my first project.

My background

Here’s a bit of my background, to make clearer my biases and blind spots (experience prior to 2012 omitted):

Quick facts about my first project

• Wanted routing, so I went with Svelte SPA Router 
• Ended up using SCSS, which then required Svelte-Preprocess  (Some sort of CSS-in-Javascript is probably available, and IE11 compatible, but I’ll have to revisit when I have time)
• Had to be IE11 compatible. Yeah, major downer. ☹️ I used core-js polyfills, and that was non-trivial to get all set up (not to mention maintain).
• I wanted to do freakish stuff like inlining everything into one HTML file, so I wrote a private, custom Rollup plugin.

If you are a poor soul who needs to support IE11, I’ve made a starter project on GitHub , which already navigates around many of the configuration gotchas I ran into, to hopefully save you from some blood, sweat and tears.

Review

Pros

Your logic and your code shine through brightly. The project goal is to minimize the amount of boilerplate, and wow, I have to say, I’m thoroughly impressed. The framework is very thoughtful, covers a lot of ground as a framework, and is powered by some mad wizardry to match. Major kudos to Rich Harris and the contributors.

Official resources are abundant. You check out the concise tutorial , view examples  and even try them in the REPL . All these can be found on the incredibly impressive official site . It’s content-rich and has a great developer experience. Again, serious props to the Svelte team.

The Svelte VSCode Extension  has also been superb.

As you probably know, the running joke within web development is that virtually every single piece of the tech stack changes every 4 years. I wasn’t super stoked about (re-)re-learning how to do all the simple things all over again in a completely different tech stack, but the website made the experience of being a (yet again) beginner easy.

Automatic scoping of CSS classes. This makes so much sense when building apps (or re-usable components) with Javascript. I believe that the articles and other long-form content for which CSS was originally intended simply just doesn’t work when developing apps, and typically requires some serious heavy lifting or cognitive load to make compartmentalized styles feasible. Svelte endeavors to do that while also staying low profile.

Cons

While it is v3, and brings a compelling experience for developers, Svelte still seems experimental and not quite production-ready There is some weird issues still not quite worked out.

For example, as of now, you cannot pass CSS classes to a child component , which makes it hard for components to be truly portable and reusable.

Additionally, Svelte will strip out classes that aren’t used . This means that if your style is declared but may be applied by code in an external library, it can still become stripped out.

Lastly, there is not clear, idiomatic way on how to have all components align to the same common theme .

On issues reported to the Svelte repository, I have seen a handful of instances where the community suggests a solution, perhaps citing that it’s a pattern observed in other frameworks. The Svelte team has (understandably) been hesitant to simply go with what another framework has done. This is thoughtfulness on the part of the maintainers is good for the future of the project, but is also a sign of the framework’s immaturity, in my book. There is no blame to be assigned to anyone; it’s just the state of innovative tech. It’s only a matter of time before they are worked out.

Other Gotchas

(As of July 4, 2020.)

SCSS. Using SCSS will raise multitudes of code warnings. In the project where I was using a SCSS library, I was getting thousands per file which decimated VSCode’s performance. Comment out a line in the Svelte compiler  as a hack-workaround.

Templating. For the {#each} loops, be sure to define which property should be key  if you are looping through an array of objects, and the objects are expected to populate or change. I thought I would have learned this from React, or from Angular, but apparently not.

Conclusion

Overall, Svelte brings many good ideas to the table. I am a fan, my gripes are only of temporary issues, and I do hope that development continues strong, and that the community continues to grow.

To get started, check out the official site  or the cheatsheet  crash course I wish I found earlier.