Winzige Footprints im Sand

Preact: Eine schnelle und quelloffene 3kB-Alternative zu React

Dominik Mohilo

© Shutterstock.com / Liz Kcer

Wer kennt das nicht? Da baut man eine JavaScript-App und das UI-Framework ist im Vergleich zum Rest einfach gigantisch groß. Nicht so bei Preact, versprechen die Macher der Open-Source-Alternative zum bekannten Framework React. Wie das funktionieren soll und welchen Preis man dafür in Sachen Funktionsumfang zahlen muss, haben wir uns angesehen.

Über 74.000 Sterne auf GitHub, knapp 14.000 Forks und über 1000 Contributors: Das ist Facebooks JavaScript-Framework React. Betrachtet man sich die Vergleichswerte des Open-Source-Projektes Preact, denkt man zwangsläufig an die Bibel und den Kampf Davids gegen Goliath. Doch Preact verspricht genau dort anzusetzen, wo React schwächelt: In Sachen Leistung und Geschwindigkeit zum Beispiel, aber auch und vor allem im Hinblick auf die Größe.

Preact – die Features

Gerade einmal 3.5 Kilobyte soll das Framework, welches federführend von Jason Miller entwickelt wurde, an Speicherplatz benötigen. Für die Nutzer bedeutet dies in erster Linie weniger JavaScript, das sie herunterladen, analysieren und ausführen müssen. Das wirkt sich natürlich positiv auf die Geschwindigkeit aus, ist aber nicht der einzige Faktor, der Preact schneller als die Konkurrenz macht.

Damit hat auch die simple und vorhersehbare Differenzierungsimplementierung zu tun, die es zu einer der schnellsten Virtual-DOM-Bibliotheken überhaupt machen soll. Das integrierte Update Batching und DOM-Recycling, das optionale Async Rendering und die optimierte Ereignishandhabung mithilfe von Linked State sind ebenfalls Gründe dafür.

Ein Benchmark-Test mit verschiedenen Frameworks / Quelle: Preact

Preact bietet natürlich in jedem Fall die aus React bekannten APIs und Patterns, insbesondere die ES6 Klassenkomponenten und die funktionalen Komponenten. Dazu kommen Dinge wie die Unterstützung der statisch typisierten und objektorientierten Sprache JSX, virtuelle Domains, Hot Module Replacement und nahtloses serverseitiges Rendering.

Auch Kompatibilität wird bei Preact großgeschrieben: Das Framework gibt Usern die Möglichkeit, über das Hinzufügen eines einfachen Aliases (preact-compat) komplexe React-Komponenten auch in einer Preact-App zu verwenden. Preact kann außerdem – Dank des winzigen Footprints – sogar in Widgets eingebaut werden, sodass die gleichen Werkzeuge und Techniken wie in einer vollständigen App nutzbar sind.

Zu den weiteren Vorteilen von Preact gehört die Weitergabe von props, state und context an render(). Auch Standard-HTML-Attribute wie etwa class und for sind verwendbar und das Ganze soll dazu noch ohne Modifizierungen mit den React DevTools funktionieren.

Preact – die Nachteile

Natürlich kommt die hohe Geschwindigkeit und der minimale Footprint nicht kostenfrei in die App, auf manche Dinge müssen die Nutzer daher verzichten. Die Entwickler von Preact rechtfertigen dies damit, dass die weggelassenen Funktionen nicht den selbst gesetzten Grundsätzen (also Leistung, geringe Größe, Effizienz etc.) vereinbar oder schlicht nicht umsetzbar waren.

Wer sich also darauf gefreut hat, Preact an Stelle von React mit PropTypes verwenden zu können, wird bitter enttäuscht sein. Wer auf sie nicht verzichten will, kann zu einer eigens dafür erstellten Bibliothek greifen, PropTypes werden aber auch vollständig von preact-compat unterstützt. Synthetische Ereignisse werden in Preact ebenfalls nicht unterstützt, stattdessen nutzt das Framework den nativen addEventListener des Browsers für die Ereignishandhabung.

Weitere Informationen zum Framework gibt es auf der Homepage des Projektes, eine vollständige Liste der enthaltenen und fehlenden Features von Preact (im Vergleich zu React) findet sich im User Guide.

Lesen Sie auch: React Fiber versus Angular – wer gewinnt?

Das Projekt ist natürlich auch auf GitHub vertreten, wo es bereits über 13.000 Sterne gesammelt hat. Dort gibt es auch eine Liste mit Projekten, bei denen das Framework bereits genutzt wird und eine Sammlung von Add-ons.

Geschrieben von
Dominik Mohilo
Dominik Mohilo
Dominik Mohilo studierte Germanistik und Soziologie an der Goethe-Universität in Frankfurt. Seit 2015 ist er Redakteur bei S&S-Media.
Kommentare

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.