Redesign 2020 - the move to Svelte

It's been over a year since this LoFi got going, and it seemed like time for an upgrade!

The design isnt complete, things are a little rough around the edges still, and the homepage isnt finished, but better to ship early and learn than wait for perfection. Especially on a personal site.

The site was running on Jekyll. It's a brilliant little SSG. I've loved it, but it was getting a little clunky. Not in any particular way. I knew how to get things done, it just felt like there were better ways to get things done. Especially when the plan is to expand the kind of content on show here.

So what did I go for? Sapper a Nuxt equivalent for Svelte.

I never understood the appeal of Angular or React. They seemed like too much work for the return you get. Vue certainly did its best to charm me, but it still never felt like it clicked. It never "felt right".

When I heard about Svelte, I fobbed it off as just another over hyped framework. Then I heard Rich on ShopTalk Show.

Everything he was saying made sense to me:

  • use the platform.
  • keeping things simple with HTML - no virtual DOM, but some treats on board
  • just write CSS, nothing fancy, but the framework will try and optimise what it can
  • compiling instead of combining. Ending up with a massive React Create App app to do something small is crazy. With Svelte, you only end up with what you need to make your app work. No more.

I have trudged through Angular/React/Vue tutorials, and I've been able to work the example, but it's always felt like they just showed a specific happy path, when I actually wanted to do something myself, it there would be lots of cruft and boilerplate needed.

Trying the Svelte Tutorial was quite the opposite. First of all, it's official, runs in the browser, and covers most of the framework. This you can tell in the first 10 seconds and it's very reassuring. None of the others have this.

Then, when you actually get going on it, trying out the code, it feels simple. Nearly too simple. Then you hit more complicated examples, the ones that would be avoided in Angular/React/Vue tutorials, and they make sense. This was it for me. An hour after starting the tutorial I knew Svelte was my new framework.

Realising that Sapper co-exists with Svelte and could let me build a PWA, basically without having to do any setup, sealed the deal fully, LoFi was getting a paint-job!