Thread by @puruvjdev

✨ I moved macOS Web from React to Svelte ✨

I built macOS Web initially in React, went through half a dozen major changes, and ended up with it being in @sveltejs

Here's a complete breakdown 👇

(cc @SvelteSociety )

1st ever version: In React, Snowpack, Material UI

Styling done in JSS, with CSS written in JS Objects.

Features: Animated Dock, non-functional topbar, beautiful wallpaper.

Bundle size: 146KB of JS, 1KB of CSS 🐡

Available here: macos-web-mmo5af3r6.vercel.app

2nd version:

Replaced Snowpack with @vite_js, saved 21KB of transferred JavaScript.

Moved global State management from Restater to the very awesome Jotai by @pmndrs

Replaced JSS with Styled Components(Just for writing ease)

JS: 120KB
…feat-switch-to-vite-puruvj.vercel.app

3rd version:

Moved from React to Preact. Very easy process, wrote a 10-minute blog post about it. Decreased bundle size by 38KB. You can read here: puruvj.dev/blog/moving-ma…

Also added a lot of features, the bundle size got to 110kb

…feat-move-to-preact-puruvj.vercel.app

4th version

Replaced Styled Components with CSS Modules, as CSS in JS wasn't fast enough, and styled-comps wouldn't compress CSS with ViteJS.

Moved back to plain SCSS.

Bundle size went down to just 85Kb JS and 3.3KB CSS

Wrote about it here puruvj.dev/blog/move-to-c…

5th version:

Introduced Code Splitting to the app using Preact Suspense and `lazy()`.

This brought down initial bundle size down to just 62KB of JS, which was quite drastic 😱, but a very great experience. Very easy to do.

Svelte: The Golden Age

This is by far the most drastic change macos.vercel.app has ever gone through.

I rewrote it from Preact to Svelte in 2 days. Yes, it was that simple.

Result:

JS bundle size decreased from 62Kb to just 28.5KB. 2.2x smaller 🤯😱

CSS remained the same.

Overall, every single Component was 20-30% smaller compared to the JSX before, and all code was just much more readable.

The process:

Literally, just copy-pasted everything 😂

No, I'm not kidding, that's literally all I did. Just copy-pasted stuff around, changed a few things here and there, and it just worked.

Jotai as global state library is very close to Svelte stores, so it was effortless.

Moving styles was literally just copy-pasting, *without any changes*

Because it was in SCSS before, it worked effortlessly in Svelte's SFC

Observation #1

Svelte Code is much simpler. Everything about it was simpler and shorter than JSX code before.

I even tweeted about one little part

https://twitter.com/puruvjdev/status/1425866919853260800

Svelte Motion is a superb, superb thing!!! It's 🔥🔥

Writing animations as state-that-changes-over-time was extremely intuitive, and felt more natural to me.

Plus it is tiny. Very tiny, whereas Framer Motion was bigger(Cuz it can do much more stuff than Svelte Motion stores...

... but it was overqualified for my use cases, whereas Svelte Motion Stores fit perfectly. Not too much, not too little.

Only one part was missing, but I got it from popmotion library(Only 3Kb, that part was 🔥)

Svelte's Transitions are superb. They feel really intuitive, and that allowed me to add even more transitions to the app, making it feel even more like an Operating System, which is always a win.

A word about React, preact, Styled Components:

Me moving away from these tools doesn't mean these are not good tools. There's no such thing as a good tool or a bad tool, only **the right tool for the job**.

And even putting that aside, I use this project as a playground...

... of sorts, trying different things.

Right now the thing on the stage is Svelte. In the future, maybe it might not be. The future of it might be Vue, or Solid, or (god forbid) Angular.

So I don't want you to walk away from this thread thinking that Svelte is better...

...cuz it is not. It's not better or worse. It's just the right tool for the job 🙂

Same with other frameworks. They're not better or worse. They just weren't the right tool for **this** job. or they were, but not anymore, as my needs have changed

Hope you got something good out of this thread.

Here's an article going deep into the whole process 👇

dev.to/puruvj/macos-w…

Final comparison, if yur still here 😉

it went from 146KB(With very few features) to 33KB(with half a dozen more features)

talk about satisfaction 😌