Die Library der Herzen

ReactJS einfach erklärt

Als eine der mittlerweile beliebtesten JavaScript Bibliotheken unter Frontend-Entwickler:innen darf ReactJS natürlich auch bei bitperfect nicht fehlen. In diesem Artikel tauchen wir hier ein wenig tiefer ein und schlüsseln auf, was diese Library so mächtig macht und wieso sie nicht nur Entwicklern, sondern auch Benutzern das Leben erleichtert.

ReactJS ist, ohne jeglichen Zweifel, eine unserer Lieblings-JavaScript Libraries. Wer mit der Welt von bitperfect und insbesondere diesem Blog vertraut ist, weiß, dass wir React JS nicht nur für unsere Benutzeroberflächen verwenden, sondern ausgesprochen begeistert davon sind.

Wer sich jetzt denkt, dass wir ein Haufen klischeehafter Nerds sind, für die romantisch-verträumte Momente mit JavaScript-Libraries normal sind…tja, das ist nicht ganz unrichtig. ABER wir haben sehr gute Gründe, die nichts mit unserer IT-Affinität zu tun haben, aber so ziemlich alles mit Effizienz.

Wer bis zum Ende liest, wird verstehen, wovon wir sprechen.

Das Wichtigste zuerst: Was ist ReactJS? #

ReactJS ist eine JavaScript-Bibliothek, die Entwickler:innen verwenden, um Benutzeroberflächen für Webanwendungen zu erstellen.

Jordan Walke, Softwareingenieur bei Facebook, entwickelte ReactJS erstmals im Jahr 2011 und veröffentlichte es 2013 (Streber!). Walke wollte sich das Entwickeln von Benutzeroberflächen erleichtern, das bis vor seinem Eingreifen ein relativ aufwendiger und langwieriger Prozess sein konnte. Wenn man sich also online schöne Webseiten und Weboberflächen ansieht, dann weiß jede:r Webentwickler:in sofort, wie viel Schweiß und Verzweiflung da hineingeflossen sind.

Wodurch wird Webentwicklung mit ReactJS so viel einfacher? #

Nehmen wir LinkedIn als Beispiel für eine Webanwendung. Wenn man sich LinkedIn als Ganzes ansieht, sieht man wahrscheinlich einfach nur eine Weboberfläche mit verschiedenen Bereichen:

Eine Menüleiste
Die Suchleiste
Den Feed mit allen Beiträgen
Die eigenen Profilinformationen
Links und so weiter

Viele Teile einer einzigen Oberfläche…oder?

Mit React sehen diese Dinge ein bisschen anders aus. Vor React, wenn man zB eine Änderung an einer Webseite wie LinkedIn vornehmen wollte, musste man tatsächlich mit der gesamten Struktur arbeiten. React ermöglicht es, eine Web-App wie LinkedIn in Komponenten aufzubrechen. Es sieht die Profilinformationen als eine Komponente, die Suchleiste als eine andere, dann die Menüleiste, den Feed und so weiter. All die einzelnen Bereiche, die oben aufgelistet sind, werden mit React JS als eigener Bereich gesehen, der auch individuell von allen anderen bearbeitet werden kann. Wie Legosteine. Zusammen ergeben sie das gesamte Bild.

Hier ist ein kleines Beispiel, das die Situation viel verständlicher machen sollte: #

Wir bauen ein Haus. Dafür beauftragen wir zwei Architekten.

Der erste baut einfach einen riesigen Raum mit einem Dach und stellt die Möbel in diesen riesigen Raum - fertig. Ist ein Haus, oder?

Der zweite plant jedes Zimmer separat, baut sie sogar separat und setzt sie dann in der Reihenfolge zusammen, in der sie zusammengehören. So, jetzt wollen wir den Wasserhahn im zweiten Badezimmer wechseln. Wie soll das gehen?

Der erste Architekt schaut dich ungläubig an, denn wie zum Teufel soll er diesen Wasserhahn finden? Er ist bestimmt da, aber es gibt keine Trennung wie “Badezimmer”, “Wohnzimmer”, “Esszimmer”. Es ist nur EIN Raum. Jetzt muss er jeden Stein umdrehen, unter den Teppichen nachsehen, alle Fenster öffnen, nur um den richtigen Wasserhahn zu finden. Nicht nur, dass es ewig dauert, jedes einzelne Möbelstück zu überprüfen, um zu sehen, ob er das Richtige gefunden hat. Er muss auch sehr darauf aufpassen, dass er währenddessen nichts kaputt macht. Nein danke!

Die zweite Architektin versteht dieses Problem nicht. Sie sucht den Block, den sie als “zweites Badezimmer” entworfen hat. Dort findet sie den richtigen Wasserhahn. Sie tauscht ihn aus. Fertig. Simpel.

Wo in diesem Beispiel ist nun ReactJS? #

Jetzt tauschen wir das Haus gegen eine Web-App aus. Nehmen wir noch einmal LinkedIn. Der Wasserhahn ist nur ein Aspekt von LinkedIn, der geändert werden muss, wie zum Beispiel die Suchfunktion. Und tauschen wir die Architekten gegen Frontend-Entwickler:innen aus. Die zweite Entwicklerin verwendete React JS, der erste nicht.

Der erste muss, wenn er eine winzige Änderung wie die Suchfunktion vornehmen möchte, die gesamte Benutzeroberfläche von LinkedIn als Ganzes betrachten und jedes Objekt der Oberfläche einzeln prüfen, ob es geändert werden muss, damit die neue Suchfunktion funktioniert. Er muss nicht nur alles auseinandernehmen, sondern auch sicherstellen, dass er nichts Wichtiges beschädigt.

Die zweite Entwicklerin ist eine kleine Füchsin. Sie hat React JS verwendet, um ihre Website zu erstellen. Das bedeutet, dass sie in Komponenten unterteilt ist, ähnlich wie die Räume in einem Haus. Sie muss nicht in jedes Zimmer schauen bzw. muss sich nicht jedes einzelne Objekt anschauen, weil sie genau weiß, welche Komponente die Suchfunktion enthält und was geändert werden muss. Easy!

Aber die Magie geht weiter #

Gehen wir zurück zu unserem Haus. Nehmen wir an, wir möchten ein AirBnB daraus machen und wir bekommen unseren ersten Gast. Er betritt das Haus und will das Licht einschalten.

Unsere erste Version des Hauses, der einzelne Raum mit Dach, weiß nicht wirklich, wie es mit dieser Anfrage umgehen soll. Also reißt es sich komplett ab und baut sich dann wieder auf, aber diesmal mit eingeschaltetem Licht. Scheint etwas dramatisch, aber das Licht ist an, also nennen wir es einen Erfolg.

Das zweite Haus weiß genau, welcher Lichtschalter gerade betätigt wurde, in welchem Raum sich dieser Schalter befindet und tauscht somit Dunkelheit gegen Licht. Fertig.

Kehren wir zurück zu unserer LinkedIn-Webanwendung anstelle des Hauses. Unser AirBnB-Gast ist im Grunde unser regulärer LinkedIn-Nutzer. Anstatt das Licht in einem Haus einzuschalten, klickt unser Nutzer auf "Gefällt mir" bei einem Beitrag, den er gerade gesehen hat. In beiden Fällen geschieht eine Veränderung: In unserem Haus wechselt die Glühbirne von dunkel zu leuchtend gelb. Auf unserer LinkedIn-Seite wird das kleine Herz am unteren Rand des Beitrags rot.

In unserem ersten Szenario, in dem unsere Benutzeroberfläche nicht mit React JS erstellt wurde, passiert Folgendes: LinkedIn erhält die Benutzeranfrage, reißt die gesamte Seite ab und lädt die Seite neu, diesmal jedoch mit dem ausgefüllten Herz. Es funktioniert, aber zu viel Drama.

Mit React JS erhält LinkedIn die Like-Anfrage, aber anstatt neu zu laden, wird die Anfrage zunächst von etwas verarbeitet, das als "virtueller DOM" bezeichnet wird. Dieser virtuelle DOM betrachtet die Änderung und wo sie aufgetreten ist, berechnet den schnellsten und einfachsten Weg, um die Änderung in die Benutzeroberfläche zu integrieren, und tauscht dann nur die benötigte Komponente aus. Die komplette User-Experience wird dadurch besser. Wenn ich das Herz klicke, wird es sofort rot, weil die Anfrage extrem effizient und schnell verarbeitet wird. NUR die Komponente mit dem Herz wird neu geladen, nicht die komplette Seite.

Webentwicklung einfach und effizient #

Lustigerweise wurde LinkedIn tatsächlich mit React JS erstellt. Genauso wie AirBnB, Reddit, Facebook (aus offensichtlichen Gründen), WhatsApp Web, Netflix, Dropbox, Instagram und viele mehr. Inzwischen ist es wahrscheinlich klar, warum wir Jedes. Einzelne. Mal. React JS auswählen. Es macht Änderungen und Wartungen so viel einfacher und effizienter. Dadurch macht unsere Arbeit einfach mehr Spaß und wenn unsere Kunden Änderungswünsche haben, können wir das schnell und leicht bearbeiten. Wir hoffen, dass diese Einführung in React JS einen leichten und verständlichen Einblick in die Welt dieser leistungsstarken JavaScript-Library gegeben hat.

Jetzt kann man verstehen, warum wir und so viele andere Entwickler:innen auf der ganzen Welt eine emotionale Bindung zu React haben. Es vereinfacht und verbessert unseren Arbeitsalltag immens und ermöglicht es uns, effizientere und besser funktionierende Webanwendungen zu erstellen. Vielleicht teilt ihr sogar unsere Begeisterung und möchtet selbst in die Welt von React JS eintauchen? In diesem Fall wünschen wir euch viel Spaß und Erfolg auf eurer Reise!