5 outcomes from building a Chrome extension with Svelte

Even though I was happy with React and a huge fun of Vue, I still wanted to check out what's Svelte and why it is so awesome. And since the best way to try a tool is by building something with it, I decided to build a small Chromium extension (actually for the awesome Microsoft Edge browser). You can find sources here and my learnings in this article.

What's Svelte?

First things first, a quick introduction of Svelte. I will cite this awesome article by @bholmesdev

So let's go over some of the main selling points for learning web development with Svelte:

• It's a component-based framework with 0 extra plugins
• It handles state management without all the usual cruft
• It uses scoped styling without needing CSS-in-JS (so no editor extensions or wacky syntax)
• It only needs a dead simple build script to get going
• Hardly any files are needed in a base project

And give you some example:

How's experience?

You should go over Svelte Tutorial at least once

Svelte Tutorial is an awesome place to learn everything you need to start building apps. At first, you will probably need some patience, annoyed by HTML-template helpers. For Vue fans it's avoiding the question "Why not use the same directives as Vue does?" and for React fans it's "Why to use it at all?". But keep going and you'll get to the point when the magic of Svelte makes you feel its power.
But even after the tutorial, you will need to google sometimes, for example how to spread undeclared props to the root of your component.

Initial setup

I heard already about React fatigue, which is understandable, having all these Next.js, Gatsby, Redwood, various CSS-in-JS solutions, appearing data management solutions and upcoming React features. But it's just picking the tool. With Svelte you don't have much choice but cloning the official template which uses rollup, but you can find Webpack configs as well.

However, there is no vue-cli or create-react-app alternative that hides the setup from you. If you just learn Svelte – it's okay. But as soon as you start building something, you need to dig in. And so instead of building the product straight away, maybe tweaking some plugins, you start learning rollup and how it works with Svelte, and there aren't many resources. For example, I still didn't figure out how to generate .html file with included <script>'s and <link>'s. At least in my case, I didn't find how to have css files generated by rollup-plugin-svelte listed in my custom plugin's onGenerateBundle hook (hence none of the existing plugins can't include link to css, there is no such file). I guess it's me not knowing rollup though.

I don't want much from young framework, but it's very frustrating when I want to work on my app but instead have to spend time Googling how to setup something and do not find it. Shout out to parcel, Next.js and others for making our lives easier.

eslint + prettier + svelte = ❓

After few attempts I didn't manage to make eslint-plugin-prettier work with .svelte files. It continuously complained on bindings in html syntax, taking it as js and so trying to add semicolons.

eslint also has no way to understand that Svelte creates magic variables for you. Here I import text, which is a writable from svelte/store and use it in my JS as $text to extract its value.

Because (citation from Svelte Tutorial):

Any name beginning with $ is assumed to refer to a store value. It's effectively a reserved character — Svelte will prevent you from declaring your own variables with a $ prefix.

Prettier itself works flawlessly, you can even setup how to arrange <script>, <style> and template blocks in .svelte files (which maybe isn't a good thing, as it's one more thing to agree with the team on)

No TypeScript yet

The popularity of TypeScript is only growing and I've been a huge fan of it. It was the first thing I've searched after scaffolding the project, but it isn't there yet. There is a proposed solution, so let's hope we will see a full support at some point.

Too late to be young

Usually, I support the appearance of new libraries and frameworks since they all bring something new and shiny, something that popular frameworks can borrow, some functionality or ideas. I liked how different CSS-in-JS solutions continuously regress to the mean in terms of features and performance, making it possible to have few final solutions at some point. The same goes to React and Vue. You can build your business logic separated from your UI and use very similar hooks (I'm sure you can write a babel plugin that will make your hooks reusable for both frameworks).
But on the field of FE frameworks you have to propose something very different, like Flutter for Web. It enables you to have native apps on many platforms. And what I love the most - you don't have to design your components and you most probably won't screw up with theming, as Flutter provides you all needed widgets.
React is making huge promises with Suspense improving end-user and developer experience. Vue.js is soon to release 3.0 with hooks and load of optimizations and features. And many other frameworks continuously improve. Svelte on the other hand is still very young and I don't see how big companies can start betting on it. Vue.js is still considered by some as a niche framework, even being extremely popular.
The issue is obvious: being young means having no usage examples, best practices, learning resources. How do I build my stores? How do I scale and reuse routes? Which component library to use? How to build an accessible Select component? How to build static pages? While all these questions will be answered and the "ecosystem" will be developed, other FE frameworks will be way ahead.