preact - a smaller alternative to reactjs

and still standing on the shoulders of giants.

After doing some projects in react from 2018 on, I recently decide to switch to preact, because:

  • they way they configured webpack with all the required plugins and their choice of defaults. Also this setup guides you to structure your code.
  • how easy it is to setup the router and break the single-page-application-paradigma.
  • that its build for speed and allows you to reach 100% in performance score in lighthouse out of the box and does all these things like code-splitting, conditional-, lazy-loading, progressive enhancement, module/no-module for you.
  • they way css are handled and also this beautiful explanation why.
  • last but not least: Its small footprint which allows it to be integrated into existing sites.

And with react as a fallback you are still standing on the shoulders of giants.

Micro-Frontend / Web-Components

You (as a freelancer) are not always in the position to build a whole SPA. More often there is some existing website which can not be touched.
So you have to embed a component into an existing site. This is where the size of the library you use is is very important. So with preact its easier to build more web-components like components. The smaller the footprint, the less I’m afraid to bundle the application code, together with the library code into a single file and load it with a single page request.

Lighthouse scores of beem.studio
Lighthouse scores of b33m.studio


Here are some things I build with (p)react:

01

preact PWA

a personal website / pwa build with preact, routing, an SVG-Menu
more

02

preact onepager

a preact onpager including a responsive video solution which loads depending on pano / sky
more

03

react gutenberg

a gutenberg-block using native redux inside the wordpress-editor
wp plugin on github

04

redux filters

proving some filter mechanism to handle state
read more

05

react component

a react component for a wordpress site, consuming wordpress media rest-api
read more

06

micro frontend

a embeddable micro frontend made with preact
read more