👉 We're hiring!
Zur Ăśbersicht

React im kleinen Rahmen

Michael Scharl
Michael Scharl Aktualisiert am 17. Aug. 2020
React im kleinen Rahmen

Wenn man an React oder ähnliche Frontend-Frameworks (Vue.js, Angular, etc.) denkt, denken die meisten vermutlich auch an eine PWA (Progressive Web Application) mit Javascript-Router und REST-API Calls. Im Kontrast dazu denkt man bei kleinen Widgets, auf einer ansonsten serverseitig gerenderten Seite, an Libraries wie jQuery (oder mittlerweile hoffentlich an moderne Javascript APIs – aber das ist ein anderes Thema).

Muss das denn so sein?

Wer sagt denn, dass man mit den groĂźen modernen Frameworks nicht auch kleine Dinge umsetzen kann. NatĂĽrlich macht es keinen Sinn 106 kB Javascript Code in eine Website einzubinden, nur um beispielsweise ein Element per Klick ein- oder auszublenden. Allerdings ist jQuery, wie es zum Beispiel von Bootstrap verwendet wird, nur 10 - 20 kB kleiner – dafĂĽr ist kein performance-optimiertes DOM-Manipulating dabei. Diese ganzen Scripte sind ja fĂĽr gewöhnlich auch nicht zwingend erforderlich, um den Initialzustand der Website zu rendern. Wenn diese also asynchron geladen werden behindert das den FMP kaum. Bis der User die besagten Funktionen benötigt ist normalerweise bereits alles geladen und einsatzbereit. Im Zweifelsfall bekommt der User das notwendige visuelle Feedback, um ihm zu zeigen, dass etwa der Button (noch) nicht funktionstĂĽchtig ist.

Es lassen sich ja bereits kleine Tools damit umsetzen. Nehmen wir zum Beispiel ein Collapse Element. Ja, da gibt es einen Haufen fertige Libraries und auch im oben erwähnten Bootstrap gibt es das bereits. Aber angenommen, wir verwenden React bereits auf der Seite und möchten auch nichts anderes dazu einbinden. Ein Hindernis ist, dass wir nicht ohne Umwege ein “Template” aus unserem HTML-Dokument in einer React-Komponente rendern können. Ein Work-Around ist allerdings nicht allzu kompliziert.

See the Pen JwKeav by Michael Scharl (@mscharl) on CodePen.

Wenn diese also asynchron geladen werden behindert das den FMP kaum.

Wenn ich jetzt aber eine Liste von X-Elementen aus meiner Datenbank anzeigen will? Muss ich dazu einen API-Endpunkt zur VerfĂĽgung stellen? Nein, nicht unbedingt. Ich hatte einmal den Fall, dass ein Kunde Events auf einer Seite auflisten wollte. Die notwendigen Daten waren kompakt genug, um alles in einem HTML-Script-Tag in eine Variable zu packen und dann von der Komponente auslesen zu lassen. So haben wir die Filterung, Sortierung und sogar die Suche nach Adressen ĂĽber Google Maps im Frontend integriert â€“ und so dem Benutzer ein fast wartezeitenfreies Erlebnis geboten und den Kunden glĂĽcklich gemacht.

Diese Herangehensweisen sind trotzdem nur situationsbedingt sinnvoll. Ich behalte sie aber gerne im Hinterkopf, um mir je nach Anwendung die effizienteste Variante aussuchen zu können. Selbstverständlich lässt sich das auch mit (vermutlich) jedem anderen Framework umsetzen. Nur die Implementierung ist auf jeden Fall anders.

MASSIVE-ART_Michael_Scharl_640x640_circle
Michael Scharl
Technischer Projektmanager & Senior Web Developer
Michael hat als Senior Web Developer bei MASSIVE ART begonnen und ist jetzt technischer Projektmanager. Er ist Experte für Frontend-Entwicklung und dem dazugehörigen Toolset. Michael ist der Meister der Automatisierung, denn er mag es nicht, wenn er immer dieselben Abläufe wiederholen muss und vereinfacht so nicht nur seinen Alltag, sondern auch den seiner Kollegen. Nach Feierabend geht Michael zum Kampfsport oder raus in die Natur – Hauptsache es kommt keine Langeweile auf!
Schreiben Sie mir