Defrost: Eine JavaScript-Library

Von Alexander Schuster am 22.09.2021

Für reaktive JavaScript-Web-Applikationen gibt es bereits seit geraumer Zeit eine Vielzahl an Librarys und Frameworks. Dabei ist das Konzept meist ähnlich: Der Client erhält mit dem HTML-Dokument ein Skript-Bundle, welches ihn dazu befähigt, dynamisch Änderungen im DOM anzuzeigen. Das ist in vielen Fällen eine performante Herangeheinweise, wird doch der Server entlastet, da der Browser die mit dem Rendern verbundene Arbeit übernimmt. Allerdings ist es somit nicht mehr möglich, Inhalte direkt aus dem HTML-Dokument auszulesen. Bekanntlich können zwar die wichtigsten Suchmaschinen Skripte ausführen und gelangen so doch zu Texten, Bildern etc., jedoch sind auch Szenarien bekannt, in welchen direkt das erhaltene HTML-Dokument ausgelesen werden soll und somit eine zumindest teilweise vorgerenderte Antwort von Server nötig erscheint. Hier kommt Defrost ins Spiel.

Was ist Defrost?

Defrost ist ein Open-Source-Projekt (siehe GitHub und npm), welches es erlaubt, Templates für anzuzeigende Webseiten zwischen dem Backend und dem Frontend zu teilen (um bloß nicht an mehreren Stellen im Projekt Dateien duplizieren zu müssen) und diese dann server-seitig anhand vorhandener Daten zu rendern und anschließend client-seitig wieder zu entschlüsseln, welche Daten am Server gerendert wurden. Somit kann ein Ausgangszustand für eine Web-App hergestellt werden, welcher sich direkt aus dem HTML-Dokument ergibt. Darüber hinaus kann durch simple Reaktivität anschließend der „State“ wieder abgeändert und ein Update gerendert werden.

Es sei erwähnt, dass sich die Verwendung von Defrost und bekannten Frontend-Frameworks zugleich nicht unbedingt ausschließt. Da Defrost nicht unbedingt ein einzelnes leeres DOM-Element als Basis nutzt, sondern im gesamten Dokument inklusive <head> funktioniert, können somit etwa <meta>-Tags dynamisch gerendert und das eigentliche User-Interface mit anderen Librarys umgesetzt werden.

Wie kann ich ein Defrost-Projekt am einfachsten anlegen?

Dafür gibt es ein CLI-Tool, welches via npm installiert werden kann. Führe npm i -g @alex-schuster/defrost-cli aus, um es global zu installieren. Anschließend kann mit defrost create <Projektname> ein neues Projekt innerhalb des gegenwärtigen Ordners angelegt werden. Darauf kann anschließend aufgebaut werden.

Learnings

Für mich gab es einige wichtige Learnings während der Arbeit am Projekt. Zumal ich gerne zusammengehörige Teilprojekte (in diesem Fall CLI und Library) an einem zentralen Ort managen möchte, habe ich mich hier für den Monorepo-Ansatz entschieden. Dabei ist npm mit entsprechender Funktionalität behilflich, welche ich im Zuge des Projekts kennenlernen durfte – Stichwort „Workspaces“. Ebenso wichtig erscheint mir die weitgehende Konformität der Library mit Ansätzen aus dem „Functional Programming“-Paradigma, mit welchem ich mich neuerdings vermehrt befasst habe. Und schließlich sein auch noch mein (zwar nicht überwältigender, aber dennoch stattgefundener) Fortschritt in Bezug auf TypeScript erwähnt.

Schlusswort

Wie erwähnt handelt es sich bei Defrost um ein Open-Source-Projekt. Pull-Requests sind entsprechend ausdrücklich willkommen. Es gibt mit Version 0.0.0 – wie man vermutlich beim Verwenden der Library recht schnell feststellen wird – noch einige Features nicht, welche äußerst wünschenswert zu haben wären, wie z. B. If-Bedingung oder Loops in Templates etc. Dies könnte auch noch in naher Zukunft folgen.