Preact

Published on Oct 13, 2020

It took longer than expected, but I managed to overcome all the technical locks I found using Preact as a frontend framework.

Preact is like React, while weighing much less. It's an extremely important factor to take into account when you build websites, since a big bundle size reduces your page speed and thus your Google Lighthouse score.

VueJS is a good alternative to Preact, but I didn't want to learn a different API.

Preact also has a compatibility layer to adapt to vanilla React dependencies. DraftJS was the only incompatible library, so I switched to SlateJS. I'm more than happy with the latter, even though I only scratched the surface. It takes less time to develop with, it's easily customizable, and the code is much clearer than DraftJS'.

I also managed to implement server-side rendering and route-based code-splitting, which is far from well-documented. Now that I have a single central bundle and a bunch of chunks, I just have to refactor Writelier's webpages to be pre-rendered and implement service workers.

Replacing React with Preact allowed me to take my heaviest webpage from a 92/100 Performance score to 96/100. Adding pre-rendering should make it perfect. Article pages are already scoring 100/100, so it will be optimal for SEO. I just have to measure how long it will take to build 30,000 webpages, but the first results I obtained with React (< 2 minutes) are promising.