Migrieren Sie Ihr Frontend zu React, Schritt für Schritt.

Um Sie herum verwenden kleine Unternehmen und Startups React. Sie nutzen die Vorteile der komponierbaren Architektur von React und der modernen Werkzeuge und bringen neue Funktionen in einer Geschwindigkeit heraus, von der Sie nur träumen können. Sie würden auch gerne mit React anfangen oder haben es vielleicht schon für einige kleine Komponenten eingeführt. Aber Sie können es sich einfach nicht leisten, Ihr gesamtes Frontend neu zu schreiben! Ihre Kunden nutzen Ihr Frontend täglich und erwarten Wartung und neue Funktionen! Zum Glück müssen Sie nicht alles neu schreiben, und das sollten Sie auch nicht! Sie können Stück für Stück zu React migrieren. In diesem Artikel zeige ich Ihnen, wie Sie Ihren bestehenden Code in eine React-Komponente verpacken, die Zustände Ihrer Anwendung und deren Darstellung entwirren und das Potenzial für weitere Refactoring-Maßnahmen erschließen können, ohne Ihre aktuelle Anwendung zu zerstören.

Warum sollte ich das tun wollen?

Große Überarbeitungen sind riskant. Wenn Sie Ihre Anwendung neu schreiben, müssen Sie einen schwierigen Kompromiss eingehen: Entweder Sie stellen Ihre neue Version schnell den Kunden zur Verfügung, aber mit weit weniger Funktionen als die aktuelle Anwendung, oder Sie warten, bis Sie sich der Funktionsgleichheit nähern, verzögern das Feedback zum Endprodukt und liefern eine unerprobte Anwendung aus. Und je länger Sie warten, desto länger müssen Sie zwei Anwendungen pflegen.Um sich sicher und zuversichtlich verbessern zu können, ist es wichtig, so früh wie möglich Feedback einzuholen, indem Sie Ihren Kunden kontinuierlich neue Versionen zur Verfügung stellen. Wenn Sie die in diesem Artikel beschriebenen Schritte befolgen, können Sie Ihre erste React-Komponente noch heute sicher einführen . Auf diese Weise können Sie Ihren Ansatz validieren und schnell herausfinden, ob dies der richtige Weg für Sie ist. Der offensichtliche Nachteil ist, dass es durch die Arbeit in der bestehenden Anwendung etwas mehr Zeit braucht, bis Sie die Vorteile von React voll ausschöpfen können. Aber durch die wiederholte Anwendung dieser Schritte werden Sie in der Lage sein, diesen Punkt mit einem Bruchteil des Risikos zu erreichen.

Die Bühne bereiten

Ich gehe davon aus, dass Ihre Anwendung aus einem HTML-Markup besteht, das vom Server gesendet wird, und einem JavaScript, das Interaktivität auf dieser Seite erzeugt.

Wenn das JavaScript geladen wird, fügt es Event-Handler hinzu (entweder mit addEventListener oder einer Bibliothek wie jQuery) und aktualisiert das DOM, wenn diese Ereignisse eintreten. Normalerweise wird das DOM manipuliert, indem CSS-Klassen hinzugefügt oder entfernt werden oder das Stilattribut aktualisiert wird.

Wahrscheinlich ruft Ihr Client-Code auch Ihren Backend-Dienst auf und aktualisiert die aktuelle Seite entsprechend dem Ergebnis. Ob Sie nun einige Klassen im DOM aktualisieren oder die gesamte Seite auf der Grundlage einer HTTP-Anfrage neu schreiben, die Migrationsstrategie ist ähnlich.

Wenn Sie in einer Legacy-Codebasis arbeiten, ist es wahrscheinlich, dass diese DOM-Manipulationen direkt oder mit einer imperativen DOM-Manipulationsbibliothek wie jQuery erfolgen. Oft gibt es keine separate Darstellung des Zustands der Anwendung, sondern nur eine direkte Manipulation des DOMs. Das macht es schwierig, den Überblick über die verschiedenen Zustände zu behalten, in denen sich die Anwendung befinden kann, welche Übergänge jederzeit möglich sind und wie man das DOM korrekt aktualisiert, damit es mit diesem Zustand übereinstimmt.

Im schlimmsten Fall befindet sich der Code, der das DOM aktualisiert, an mehreren Stellen, oder nicht zusammenhängender Code ist ineinander verschachtelt, so dass es schwierig ist, die verschiedenen Anliegen zu entwirren.

Wenn Sie diesen "Spaghetti-Code" in React-Komponenten umwandeln, werden Sie einige Vorteile haben. Erstens wird das Konzept der Komponenten eingeführt, das es Ihnen ermöglicht, zusammenhängenden Code zu gruppieren und kleinere Teile zu einer größeren Komposition zusammenzufügen. Zweitens können Sie mit den folgenden Schritten die Zustände Ihrer Anwendung von ihrer Darstellung im DOM trennen. Dadurch verringert sich die Wahrscheinlichkeit, dass Sie in einen inkonsistenten Zustand geraten, und die Änderbarkeit wird verbessert. Und schließlich können Sie andere React-spezifische Funktionen wie die Fehlergrenzen nutzen, um die Stabilität Ihrer Anwendung weiter zu verbessern.

Was soll ich also tun?

Nun, zunächst einmal müssen Sie entscheiden, ob React der richtige Weg für Sie ist. Ich werde hier nicht versuchen, Sie zu überzeugen, es gibt bereits viele gute Ressourcen. Wenn Sie sich jedoch dafür entscheiden, eine React-Anwendung zu entwickeln, können Sie die folgenden Schritte befolgen.

Bereiten Sie sich vor

Der erste Schritt besteht darin, Ihr Tooling vorzubereiten. Im weiteren Verlauf dieses Artikels gehe ich davon aus, dass Sie einen Build-Schritt haben (mit einem Tool wie webpack) und in der Lage sind, JavaScript mit modernen Funktionen zu transpilieren (mit einem Transpiler wie babel).

Packen Sie ein

Unser Ziel ist es, sicher auf React-Komponenten umzusteigen. Daher werden wir zunächst versuchen, so wenig Code wie möglich zu ändern. Stellen Sie sich vor, dass Ihr Code wie folgt aussieht:

Sehen Sie sich das Pen Simple JS Akkordeon von Reinier Hartog(@rmhartog) auf CodePen an.

Diese Implementierung einer 'Akkordeon'-Komponente in JavaScript ist ein sehr minimales Beispiel für den Code, der Ihnen begegnen könnte. Natürlich wird Ihr Code komplizierter sein, aber die Idee ist, dass wir Event-Handler anhängen und das DOM innerhalb dieser Handler verändern.

Unser zweiter Schritt ist die Einführung von React. Wir werden diesen zwingenden Code in eine neue React-Komponente verpacken. Sie können dies für einen zusammenhängenden Teil des Codes in Ihrer Codebasis tun. Am besten fangen Sie mit einer ganzen Datei an oder mit einem großen Block verwandter Funktionen, wenn Ihre Dateien sehr groß sind. Keine Sorge, Sie können später kleine Teile herausnehmen und die Dinge aufräumen.

Während die meisten Einführungen in React mit der Methode render einer Komponente beginnen, werden wir unseren gesamten zwingenden Code in die Methode componentDidMount lifecycle packen, die aufgerufen wird, wenn die Komponente in das Dokument eingebunden wurde. Da eine render -Methode erforderlich ist, wird sie null zurückgeben, damit React das DOM nicht verändert.

Dann rendern wir diese Komponente sofort mit ReactDOM.render(element, root), wobei wir einen leeren Container für die Wurzel verwenden, der vom Dokument losgelöst ist, und erhalten so etwas wie dieses Ergebnis:

Sehen Sie sich das Pen Simple JS accordion wrapped in React von Reinier Hartog(@rmhartog) auf CodePen an.

Was haben wir also bisher erreicht? Nun, eigentlich nicht viel. Was wir bisher getan haben, entspricht in etwa dem, den Code in eine Funktion zu packen und sie sofort aufzurufen! Aber... wir haben React eingebaut und alles funktioniert noch immer, das war's. Wenn Sie Tests für diesen Code durchgeführt haben (TIPP: das sollten Sie wirklich tun!), sollten diese auch nach diesem Schritt noch funktionieren. Wenn dies nicht der Fall ist, sind sie wahrscheinlich zu stark an das DOM gekoppelt, z.B. weil Sie die Methoden des DOM-Baums zu streng gespottet haben.

Einer meiner Kollegen wies mich darauf hin, dass dieser erste Schritt dem Strangler-Muster ähnelt, und er hat absolut Recht. Der Ansatz für die Arbeit mit Legacy-Code folgt immer ähnlichen Mustern.

Bitte geben Sie Ihr Unternehmen an

Wie ich bereits erwähnt habe, ist es in der Regel schwierig, den Überblick über alle Zustände und Übergänge zu behalten, da Zustandsübergänge und DOM-Aktualisierungen miteinander vermischt sind. Unser nächster Schritt besteht darin, die beiden zu trennen, indem wir einen Zustand in unsere Komponente einführen.

In der Komponente Accordions aus dem Beispiel gibt es einen Zustand und einen Übergang: das aktive Panel in jedem Akkordeon und die Aktivierung und Deaktivierung eines Panels in einem Akkordeon. Beachten Sie, dass der zwingende Code mehrere Akkordeons auf der Seite zulässt und wir diese Funktionalität auch bei unserer Migration beibehalten wollen.

Wir beginnen damit, die Form des Status für diesen speziellen Übergang zu entwerfen. Für jedes Akkordeon auf der Seite muss es das aktive Panel enthalten. Dies ist ein perfekter Anwendungsfall für ein JavaScript Objekt. Da der zwingende Code mit dem im DOM beschriebenen 'Zustand' beginnt (d.h. das Panel mit der Klasse accordion-expanded ist automatisch aktiv), benötigen wir dieses Verhalten auch in unserer Komponente: Wir lesen den Ausgangszustand aus dem DOM in constructor der Komponente, indem wir in jedem Akkordeon nach einem Panel mit der Klasse accordion-expanded suchen und dieses Panel in den Eintrag des Akkordeons in der Map platzieren. Am Ende des Konstruktors setzen wir die Karte in this.state.

Nachdem wir den Status aus dem DOM gelesen haben, müssen wir ihn als Aktualisierungsmechanismus verwenden. Wir ersetzen den Click-Event-Handler, der das DOM aktualisiert hat, durch einen Handler, der einfach die Methode setState der Komponente aufruft. setState kann eine Updater-Funktion als erstes Argument annehmen, die von React mit dem aktuellen Status aufgerufen wird und einen neuen (Teil-)Status zurückgeben sollte. Das von dieser Funktion zurückgegebene Objekt wird mit dem aktuellen Status zusammengeführt. Alles, was instate enthalten ist, sollte als unveränderlich betrachtet werden: Wenn wir wollen, dass React die Aktualisierung aufgreift, sollten wir den aktuellen Map durch einen neuen ersetzen, anstatt set direkt aufzurufen.

Wenn schließlich der Zustand der Komponente aktualisiert wird, wird eine weitere Lifecycle-Methode mit der Bezeichnung componentDidUpdate aufgerufen, und dorthin sollte nun die Aktualisierungslogik aus dem Click-Handler gehen. Die Methode componentDidUpdate erhält die vorherigen Requisiten und den Status als Argumente, so dass Sie feststellen können, was sich geändert hat. Noch besser wäre es jedoch, sich nur auf den neuen Zustand zu verlassen, da dies beim Hinzufügen neuer Übergänge und Zustände viel weniger wahrscheinlich zu Fehlern führt.

Wenn Sie diese Schritte befolgt haben, erhalten Sie in etwa den unten stehenden Code:

Sehen Sie sich das Pen Simple JS accordion wrapped in React with State von Reinier Hartog(@rmhartog) auf CodePen an.

Jetzt haben wir tatsächlich etwas erreicht: Wir haben den Zustandsübergang (Aktivierung eines Panels bei Klick) von der Darstellung dieses Zustands (aktives Panel hat die Klasse accordion-expanded ) getrennt. Wenn Sie dies bei einer komplexeren Anwendung wiederholt für mehrere Zustände tun, erhalten Sie ein klareres Bild davon, was der Code tut, und können ihn leichter ändern.

Die Größe spielt eine Rolle

Die zur Demonstration verwendete Komponente ist noch relativ klein, aber wenn Sie dieselben Schritte in einer größeren Anwendung ausführen, wird das Ergebnis (zumindest anfangs) definitiv eine riesige Komponente sein, die alle möglichen Dinge tut. An diesem Punkt ist es wahrscheinlich eine gute Idee, sich das Komponentenmodell von React zu eigen zu machen und damit zu beginnen, diese Komponente in kleinere Komponenten mit unterschiedlichen Verantwortlichkeiten aufzuteilen. Sie können verschiedene Wege einschlagen, und die beste Richtung hängt ganz von den Anforderungen Ihrer Anwendung ab. Sie müssen es nicht gleich beim ersten Mal richtig machen, denn dies ist ein fortlaufender Prozess, während Sie Ihre Anwendung erforschen und verändern.

Wir könnten z.B. eine kontrollierte Accordion Komponente extrahieren und eine für jedes im DOM gefundene Akkordeon rendern, so dass sie die Aktualisierung eines einzelnen Akkordeons übernehmen kann:

Sehen Sie sich das Pen Simple JS accordion wrapped in React with State (extract controlled Component) von Reinier Hartog(@rmhartog) auf CodePen an.

Bonuspunkte

Der Ansatz, den wir gewählt haben, hat noch einige andere Vorteile. Zum Beispiel werden alle Fehler im Code in den Lebenszyklusmethoden der Komponente sowie in der Funktion setState updater automatisch von (neueren Versionen von) React abgefangen und an eine übergeordnete Komponente gemeldet. Im 'alten' Code würde ein kleiner Fehler Ihre Anwendung einfach zerstören oder sie in einem inkonsistenten Zustand belassen. Mit der React-Komponente haben wir eine Möglichkeit, diesen Fehler zu behandeln. Im folgenden Beispiel sollte das Erweitern der ersten beiden Felder wie gewohnt funktionieren. Das dritte Feld löst einen gefälschten Bug aus und verursacht einen Fehler. Wir blockieren weitere Eingaben und zeigen an, dass ein Fehler aufgetreten ist:

Sehen Sie sich das Pen Simple JS accordion wrapped in React with State and Error Boundary von Reinier Hartog(@rmhartog) auf CodePen an.

In diesem Beispiel werden alle Akkordeons blockiert, da dies die Granularität ist, auf der sich der Code jetzt befindet. Wenn Sie mehr modulare Komponenten erstellen, haben Sie natürlich auch die Möglichkeit, den Fehler auf einer feineren Ebene zu behandeln.

Der Weg nach vorn

Jetzt, wo wir unseren Code so migriert haben, dass er in einer React-Anwendung verwendet werden kann, sieht die Zukunft rosig aus. Sobald größere Mengen an Code auf React portiert sind, können Sie Bäume von Komponenten zusammenstellen und mit Props und Callbacks zwischen ihnen kommunizieren. Sie können, wie bereits gezeigt, Fehlergrenzen hinzufügen und global relevante Daten über den React-Kontext austauschen. Schließlich können Sie auch mit dem Rendern von HTML aus Ihrer render Methode beginnen. Wenn Ihr keine vorherigen Requisiten oder Zustände benötigt, sollte die Übersetzung in die Funktion ganz einfach sein. Und keine Sorge, Komponenten, die null rendern, werden Ihnen nicht im Weg stehen.

Wenn Sie Fragen haben oder einen Fall, den Sie nicht lösen können, hinterlassen Sie bitte unten einen Kommentar und wir melden uns bei Ihnen!