loading...
Cover image for 5 outcomes from building a Chrome extension with Svelte

5 outcomes from building a Chrome extension with Svelte

lexswed profile image Lex Swed ・5 min read

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:

Svelte Counter

The source in Svelte REPL

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.

eslint issue

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.

Posted on by:

lexswed profile

Lex Swed

@lexswed

Software Engineer in love with UI Engineering

Discussion

markdown guide
 

My 2cents about Svelte is more related to the "mindset" than the actual solution.

Like you said, it will take some time to grow and create something really stable, but other FE frameworks just choose to have a completely different way of work.

So, Svelte, the tech itself can be a bit, how can I say, behind... But the mindset and the proposal is (again, my 2cents) far ahead...

I hope to see it growing and (maybe) confirming itself as a really good choice!

 

Well, the idea is brilliant for sure. But it takes jQuery long to build a proper ecosystem around the tool. And being born in time when React is almost like a religion not a good timing 😅

 

Hahaha, for sure, David and Goliath... all over again! 😅

 

Thanks for the write-up. I wonder, why is eslint needed with Svelte? The compiler seems to be pretty good at complaining about undeclared variables and such.

 

Thanks you

Good point. As you stated, compiler is good at complaining on unused or undeclared variables + it has good style lint as well, so you won't have unused or misspelled classes in CSS. And I should have mentioned that. But eslint is more than just that, it enables consistent code (style can be forced with prettier, but return statements, variable declarations and style, etc). Also, I have just .js files in my project that aren't checked by Svelte compiler.

 

Ah, I didn't know js files aren't compiled. I thought it processes them so that it can do its treeshaking magic and all.
On the one hand your points make a lot of sense to me and I can relate. On the other hand I wonder whether we (devs) became too spoiled for our own good. We seem to prioritise DX over UX and expect to be hand held (by our free tools and the communities that back them) every step of the way

 

Svelte definitely seems like a solid choice for Chrome extensions etc. due to small bundle size. I'm not a fan of extensions which drop 100kb frameworks on me to perform little simple things.

 

That was my initial thought. But in the end of the day such lib is bundled once. So with growing codebase you have linear increase in bundle size. Then the difference is whether Svelte's generated output for components is smaller than for other frameworks.
And again, extension assets are kinda like SW cached website assets. You get them once and maybe even in browser idle (when updated) and then use it without any loading time.

 

I think it's naturally connected to our bias. I'm sure my overall experience was okay, it's just that I'm so attached to React that the learning curve makes me feel worse than it actually was.