Digital First: Loading

React
im
kleinen
Rahmen

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.

Top Highlight

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.

Diskutieren Sie mit uns auf Facebook und Twitter . Natürlich freuen wir uns auch über ein E-Mail von Ihnen.

Mehr Blogartikel zum Thema:

loading
Nach oben
 

Hallo!
Sie möchten mit uns zusammenarbeiten? 

Welche Themen sind für Sie interessant?

ICH

Erzählen Sie uns doch bitte ganz kurz worum es geht.

ICH

Gerne würden wir mehr darüber erfahren! Wie dürfen wir Sie denn kontaktieren?

Wie dürfen wir Sie denn kontaktieren?


ICH

An welche Addresse sollen wir die Mail schicken?

Unter welcher Nummer sind Sie am besten erreichbar?

Leider sind zur Zeit alle MASSIVE DOVES auf Urlaub ;) Wollen Sie uns alternativ vielleicht eine Telefonnummer oder E-Mail Adresse hinterlassen, unter der Sie erreichbar sind?

ICH

Bitte geben Sie eine gültige E-mail Adresse ein.


Verraten Sie uns noch Ihren Namen?

ICH

Zum Schluss noch etwas Bürokratie #DSGVO:

Vielen Dank für Ihre Anfrage! Wir werden uns so rasch wie möglich bei Ihnen melden.

Es ist etwas schiefgelaufen.
Bitte lade die Seite neu und versuch es noch einmal.