Preact: Alternative zu React

In diesem Blogpost will ich euch Preact vorstellen. In einem Spike vor knapp einem Jahr durfte ich es testen. Es war spannend für mich, da ich als React-Fan eine sehr gute Alternative testen durfte und von der Performanz begeistert war. Vor Kurzem wurde die neue Version 10 “Preact X” veröffentlicht und bringt weitere Neuerungen mit sich.

Was ist Preact?

Preact ist eine schnelle 3kB-Alternative zu React mit derselben ES6-API. Es ist einer der schnellsten Virtual DOM-Bibliotheken, die derzeit existieren. Darüber hinaus ist es mit den meisten React-Bibliotheken kompatibel.

Was macht Preact so besonders?

Das Preact-Team legt viel Wert auf Leistung und Performanz, ohne die Kompatibilität zu React zu verlieren. Dies schaffen sie, indem sie Preact selbst schmal halten und gleichzeitig interne Algorithmen, wie zum Beispiel DOM-Diffing, optimieren, aber auch zusätzliche Performanz-Features anbieten (z.B. Linked State). Jason Miller, der Erfinder von Preact, erzählt in diesem Talk mehr über die Interna seiner Bibliothek.

Im modernen Web ist es wichtig, dass man Benutzer nicht lange warten lässt, bis eine Seite geladen ist. Ist die Verbindung noch dazu schlecht, hat man im Endeffekt keine gute UX. Stellt euch vor, ihr müsstet jedes mal 5 bis 6 Sekunden warten, bis ihr Twitter besuchen könnt. Würdet ihr nach einer Weile Twitter immer noch besuchen wollen? Bestimmt nicht.

Genau solche Szenarien sind sehr wichtig für Unternehmen. So etwas entscheidet meistens, ob man Kunden gewinnt oder verliert. Das ist einer der Gründe, weshalb Unternehmen wie Uber, Pepsi oder die New York Times Preact benutzen.

Wie lege ich los?

Am besten startet man mit der Preact-CLI.

npm install -g preact-cli
preact create <template-name> <project-name>

Das Besondere am CLI ist, dass es beispielsweise 100 von 100 Punkten in Lighthouse erzielt und dem PRPL-Pattern folgt. PRPL steht kurz für:

• Push critical resources for the initial URL route
• Render initial route
• Pre-cache remaining routes
• Lazy-load and create remaining routes on demand

Darüber hinaus werden Aspekte wie Code-Splitting, Service-Worker und Server-Side-Rendering (SSR) von der CLI behandelt.

Der Spike

In einem Spike wollte ich Preact für unseren Kunden testen. Sie nutzen für eine kleine Frontend-Anwendung noch Dojo 1, was in der Frontend-Welt schon praktisch tot ist. Wir hatten einige Probleme damit:

• Das Framework selbst hatte Bugs, die man meistens selbst beheben musste.
• Die Dokumentation war mangelhaft.
• Die Lernkurve war flach.
• Unser Code wurde mit der Zeit komplex und abschreckend für neue Kollegen im Projekt.
• Bugs im eigenen Code waren durch das instabile Framework prädestiniert.
• Client-Side-Rendering (CSR) war langsam.

Wir hatten dem Kunden zu der Zeit React empfohlen, da es de-facto Standard war. Einige Kollegen und ich waren fit darin und würden es den anderen im Projekt schnell beibringen. Der Kunde bat aus internen Gründen um eine Alternative. Deshalb boten wir ihnen Preact an. Aus unserer Sicht sprach dafür:

– Divide & Conquer

• das Kapseln von UI-Elementen in wiederverwendbare Komponenten
• diese Komponenten können unabhängig voneinander getestet werden
• Code wird sauberer
• Separation of Concerns

– durch Komponenten-Architektur

• Flache Lernkurve
• Verwenden eines modernen Frameworks
• SSR für schnelles Laden der Seiten
• viel bessere Developer-Experience (DX)

Fazit des Spikes

Wie zu erwarten schlug sich Preact wesentlich besser als Dojo 1. Es bot alle Funktionalitäten an, die man für das moderne Web brauchte. Der Code war viel schlanker und leserlicher. Seiten wurden, dank SSR, super schnell geladen. Es fühlte sich einfach zeitgemäß an!

Im Großen und Ganzen denke ich, dass Preact sich perfekt für Anwendungsfälle eignet, wo React möglicherweise nicht die beste Wahl ist (etwa Widgets, Eingebettete Systeme und kleine Seiten).

Und heute?

Nun, der Spike ist schon eine Weile her. Preact war zu der Zeit noch nicht groß bekannt und die Frontend-Welt entwickelt sich rasant.

Zum Zeitpunkt des Spikes war Dojo 2 noch nicht erschienen. Das Dojo-Team hat aus Feedback gelernt und einiges verbessert. Man hat auf die Konkurrenz geschaut und Konzepte übernommen.

React wurde noch populärer und hat auch in der Performanz zugelegt. Die kürzlich veröffentlichte Hooks-API bringt Aufregendes mit sich. Der Kunde selbst ist jetzt eher an einer React-Lösung interessiert. Was hat Preact in der Zeit gemacht?

Das Preact-Team arbeitet weiterhin an den eigenen Zielen. Anfang März wurde Preact X in der Alpha-Version veröffentlicht. Es wird das nächste Major-Release und führt neue Features wie Fragments und Hooks ein. Darüber hinaus arbeitet man weiterhin an der Kompatibilität mit React und man versucht eine noch bessere DX zu liefern.

Ich bin gespannt, wie sich das Feld weiter entwickelt.

---

Über den Autor