JavaScript

Preact X: Was ändert sich mit dem Major Release?

„Unsere Stärke ist definitiv die winzig kleine Größe von Preact, ohne dabei auf Features verzichten zu müssen“: Marvin Hagemeister im Interview zu Preact X
Keine Kommentare

Mit Preact X steht eine neue Major-Version der Library kurz vor der Veröffentlichung, mit der sich einiges ändern soll. Wir haben mit Marvin Hagemeister, Core-Entwickler von Preact, über die anstehenden Neuerungen gesprochen. Wann braucht man die neu eingeführten Fragments und wie gelingt es dem Preact-Team, die Library bei einer Größe von rund 3kB zu halten?

Entwickler: Preact X ist derzeit in Arbeit. Was ändert sich mit dieser neuen Major-Version an Preact?

Marvin Hagemeister: Preact X ist für uns ein Meilenstein, da wir Preact von Grund auf neu geschrieben haben. Unsere vorherige Code-Basis war ein wenig in die Jahre gekommen und hat in unseren Augen nicht mehr die Anforderungen für ein modernes Frontend-Framework erfüllt. Sehr begehrte Features wie Fragments ließen sich damit nicht umsetzen. Mit Preact X haben wir uns zwei wesentliche Ziele gesetzt: Native Unterstützung für Fragments und eine stark verbesserte Zusammenarbeit mit dem bestehenden React-Ökosystem.

Wir befinden uns gerade in der Alpha-Phase und sind nach den Anstrengungen der letzten Monate überglücklich, beide Ziele erreicht zu haben. Fragments sind nun ein fester Bestandteil von Preact! Ganz neu dabei ist auch die componentDidCatch-Methode, die es erlaubt, selbst auf Exceptions beim rendern zu reagieren. Dazu kommen das neue createContext-API, eine komplett überarbeitete Anbindung an die DevTools mit dem neuen Profiler und viele Kompatibilitätsverbesserung in unserem preact/compat-Addon, welches das Ziel hat, das API von React eins zu eins nachzubilden.

Einen besonderen Fokus haben wir dabei auch auf die Developer Experience gelegt. Wir haben deutlich bessere TypeScript-Typings und haben viel mehr Warnungen in unser Debug-Modul eingebaut. An den Formulierungen wurde ebenso geschraubt, sodass sie für neuere Entwickler leichter verständlich sind.

Und das Beste daran ist, dass wir trotz der zahlreichen neuen Features und Verbesserungen unserem 3kB-Limit treu geblieben sind. Bis zum finalen Release mag sich daran noch etwas ändern.

Entwickler: Wie geht ihr vor, um die geringe Größe von Preact zu erreichen?

Marvin Hagemeister: Unsere Stärke ist definitiv die winzig kleine Größe von Preact, ohne dabei auf Features verzichten zu müssen. Damit wir unsere selbst gesetzten Grenzen nicht überschreiten, ist ein anderer Arbeitsmodus notwendig. Oft scheint es uns selbst unmöglich, ein bestimmtes Feature kleiner zu kriegen, aber meistens meldet sich einer von uns wenige Tage später mit der zündenden Idee, den Code noch effektiver zu gestalten.

Dazu trägt unsere warme und performance-orientierte Kultur viel bei. Wir versuchen stets, uns die Größe vor Augen zu halten. Bei jedem Build ist sie sichtbar. Bei jedem Pull Request geben wir die Auswirkung in Bytes an. Das hilft uns abzuwägen, wie viel ein Feature kostet und zu schauen, ob es mit unseren Vermutungen übereinstimmt.

Die größten Ersparnisse haben wir durch den neuen Reconciler-Algorithmus gewonnen. Vorher basierte er auf der Annahme, dass es für jedes virtuelle DOM-Element (kurz vnode) ein entsprechendes Pendant im DOM geben muss. Wir haben also immer eine virtuelle Datenstruktur gegen das echte DOM verglichen. Diese beiden Strukturen unterscheiden sich allerdings deutlich und wir mussten einige Tricksereien einbauen, um z. B. Text-Elemente richtig zu vergleichen. Mit Preact X fällt das alles weg. Wir vergleichen stattdessen zwei virtuelle Bäume und konnten dadurch viele Ausnahmen entfernen und unseren Code entschlacken.

Bei jedem Pull Request geben wir die Auswirkung in Bytes an. Das hilft uns abzuwägen, wie viel ein Feature kostet

Dicht dahinter folgen Gewinne durch ein besseres Know-How, wie moderne Minifier hinter der Kulisse arbeiten. Wir haben immer wieder den Code unter die Lupe genommen und geschaut, was daraus nach dem minifizieren gemacht worden ist. Nach einer Weile bekommt man ein gutes Gespür, was gut funktioniert und was nicht. Ein Trick, den wir immer wieder anwenden, ist, bereits bestehende Wörter im Code bei neuen Namen wiederzuverwenden. Damit spielen wir der GZIP-Kompression in die Hände, denn diese ist darauf ausgelegt, Patterns zu erkennen. Wörter, die bereits im GZIP-Dictionary vorhanden sind, kann man ohne Größenverlust wiederverwenden.

Die meiste Zeit der Entwicklung haben wir uns bei 2-2.5kB bewegt. Allerdings haben sowohl das createContext-API als auch das Hydrieren für Server-Side-Rendering dann doch ihren Preis und uns zurück in die 3kB Region befördert.

Entwickler: Du hast erwähnt, dass die neu eingeführten Fragments besonders begehrt unter Entwicklern sind. Wozu werden sie benötigt?

Marvin Hagemeister: In modernen Frameworks spielen Fragments eine besonders wichtige Rolle, um eine optimale HTML Struktur erzeugen zu können. In Projekten haben wir vermehrt Komponenten gesehen, die mehrere Elemente auf einmal gerendert haben.

Ein weiteres Beispiel sind Features in CSS, wie Flexbox oder CSS-Grid. Sie alle operieren mit den direkten Kind-Elementen des selektierten Elements. Wenn man dazwischen Elemente einfügt, verliert man diese Eigenschaft und muss sich mit Workarounds helfen. Das alles ist nun nicht mehr notwendig.

Entwickler: Eine der größten Neuerungen bei React aus der letzten Zeit sind die Hooks. Wie sieht es damit in Preact aus?

Marvin Hagemeister: Hooks sind eine fantastische Idee, die es viel einfacher macht, Komponenten-Logik wieder zu verwenden. In den letzten Monaten haben wir mit vielen verschiedenen Interpretationen davon experimentiert. Viele Varianten davon hätten wir gerne weiterverfolgt, allerdings liegt uns sehr viel daran, reibungslos mit den bestehenden Drittanbieter-Bibliotheken auf npm zu funktionieren. Daher bieten wir alle Hooks an, die es auch in React gibt.

Entwickler: Wie aufwändig wird das Upgrade bestehender Preact-Projekte auf die neue Version?

Marvin Hagemeister: Für uns war sehr wichtige, dass ein Upgrade auf Preact X in unter 5 Minuten machbar ist. Das ist keine Zahl, die wir erfunden haben, sondern wir haben es selbst bei mehreren Projekten ausprobiert und die Zeit gestoppt. Unsere Liste an den so genannten „Breaking Changes“ ist daher entsprechend kurz. Für ein Upgrade muss der Import von preact-compat durch preact/compat und preact/devtools durch preact/debug entsprechend ersetzt werden.

Lediglich Projekte die direkt mit den internen Datentypen arbeiten, benötigen etwas mehr Anpassungen. In unseren Release Notes pflegen wir eine sehr übersichtliche Liste von allen Änderungen mit Code-Beispielen, wie man das Update vollziehen kann.

Entwickler: Was ist für dich persönlich die spannendste Entwicklung an Preact X?

Marvin Hagemeister: Die spannendsten Aspekte an Preact X sind für mich die Community und das Wachstum unseres Teams. Ein Open-Source-Projekt wie Preact verlangt eine andere Dynamik, als man es aus dem alltäglichem Job gewohnt ist. Die internationale Zusammenarbeit ist extrem spannend und produktiv trotz verschiedener Zeitzonen.

Hooks sind eine fantastische Idee, die es viel einfacher macht, Komponenten-Logik wieder zu verwenden.

Auch unsere Community hat einen riesen Sprung gemacht und immer mehr Entwickler tragen zu Preact durch PRs oder Bug-Reports bei. Wir freuen uns über jeden Bug-Report, da er uns die Chance gibt Preact noch besser und stabiler zu machen. Immer mehr davon beinhalten sogar einen Link zu einem Repo oder einer Codesandbox, wo das Problem direkt nachvollziehbar ist. Davon kann man als Entwickler sonst nur träumen!

Von unseren OSS-Kollegen von anderen Frameworks haben wir immer wieder viel Lob dafür bekommen, dass unsere Community so willkommend und positiv ist. Unsere Community wird oft als das Parade-Beispiel bezeichnet, wie eine gesunde OSS-Community aussehen sollte.

Im Interview: Marvin Hagemeister
Marvin Hagemeister (28 Jahre) war mehrere Jahre als freiberuflicher Fotograf tätig und arbeitet heute als Frontend-Entwickler in einem Kölner Unternehmen, wo er zahlreiche Anwendungen für Enterprise Kunden entwickelt hat. Seine Spezialgebiete sind Web-Apps in JavaScript und TypeScript mit React oder Preact. Daneben verantwortet er die Schulung von Mitarbeitern in Preact/React. Seit Mitte 2018 ist er Core-Mitglied von Preact und hat wesentliche Teile von Preact X konzipiert und implementiert. Er ist Teilnehmer von internationalen „State of JavaScript Frameworks“ Meetings und fördert durch die Publikation von ausführlichen Release Notes die Bekanntheit von Preact.
Unsere Redaktion empfiehlt:

Relevante Beiträge

Hinterlasse einen Kommentar

Hinterlasse den ersten Kommentar!

avatar
400
  Subscribe  
Benachrichtige mich zu:
X
- Gib Deinen Standort ein -
- or -