12 hilfreiche Tipps von einem erfahrenen React-Entwickler zur Entwicklung großer Anwendungen

Foto von Lautaro Andreani auf Unsplash

Eines Tages in Ihrer Entwicklung Karriere werden Sie auf eine riesige React-App stoßen. Und das wird ein Ding!

Die meisten kleinen bis mittelgroßen Projekte, die in React geschrieben werden, sind nicht so schwer zu handhaben. Aber bei den großen ist das anders. Wenn 10 Entwickler an einer React-App arbeiten, kann sich das wie ein harter Kampf anfühlen. Sie sollten einige Regeln und Tricks kennen, um die Komplikationen, die auf Sie zukommen, erfolgreich zu meistern.

In diesem Artikel finden Sie einige Tipps, die Ihnen dabei behilflich sein können. Befolgen Sie sie, wenn Sie an einer umfangreichen React-Anwendung arbeiten.

1. Befolgung von Codierungsstandards

Jedes große Unternehmen hat seine Leitlinien. Und diese sind unerlässlich. Davor gibt es einige Gemeinschaftsregeln, die sogenannten Best Practices. Der beste Code ist der, der von den fleißigsten React-Entwicklern für die faulsten geschrieben wird. Stellen Sie also sicher, dass Sie die Ideen von Ryan McDermott in Clean JavaScript, die Leute von Airbnb in ihrem JavaScript Style Guide, W3 JavaScript Best Practices) oder ähnliche Ressourcen kennen.

2. TypeScript verwenden

Strikte Typisierung hilft Ihrem Team beim Lesen des Codes und verhindert mögliche Laufzeitfehler. Der Compiler-Charakter von TypeScript mag einige Entwickler verwirren, aber er hat eine extreme Vorhersagegenauigkeit. Außerdem helfen Ihnen IDEs wie VSCode bei der Code-Vervollständigung.

3. Entkopplung von Logik und UI

Bei der Programmierung gibt es zwei schwierige Punkte: die Entkopplung der Geschäftslogik von der Benutzeroberfläche und die Benennung von Variablen. Obwohl sie kompliziert sind, erhöht ihre Verwendung die Lesbarkeit. Die Entkopplung kann datei- oder seitenbezogen sein. Vergleichen wir zwei Codeschnipsel, um die Vorteile zu verdeutlichen, die Sie erhalten.

// bad
<Button
onClick= {()=>{
dispatch(first)
dispatch(second)
dispatch(third)
}}
disabled={data.status === ‘loading’ && !inputState || otherCondition}

// good
<Button
onClick={handleClick}
disabled={!isReadyToSubmit}

4. Befolgung der SOLID-Grundsätze

Alle OOP-Entwickler sind mit den fünf SOLID-Regeln vertraut:

• Einzelne Verantwortung
• Öffnen-Schließen
• Liskov-Ersatz
• Trennung der Schnittstellen
• Grundsätze der Abhängigkeitsinversion

Denken Sie daran, dass diese Regeln auch für React gelten, obwohl es sich um eine funktionale Programmierbibliothek handelt. Diese Aussage ist durch zahlreiche praktische Beispiele belegt.

5. Lernen Sie Entwurfsmuster

Es gibt praktische Lösungen für häufige Softwareprobleme. Reactpatterns.com ist eine nützliche Website für weit verbreitete React-Muster. Andererseits sind einige der OOP-Entwurfsmuster bereits übersetzt worden.

6. Namenskonventionen einhalten

Eine gute Namensgebung ist ein Hort der Lesbarkeit und der Zusammenfassung des laufenden Prozesses. Das kann in den meisten Fällen eine echte Komplikation sein. Die Entwickler tappen häufig in die Falle der Unvollständigkeit oder Übertreibung.

So verwenden sie z. B. weit gefasste Wörter wie "prüfen" oder "nachsehen" anstelle der genaueren Begriffe "ist", "besteht", "bekommen", "holen", "hat" oder verwenden "handhaben" im Sinne von "etwas tun", obwohl es sich um die Handhabung von Ereignissen handelt.

Es gibt verschiedene Konventionen für die Benennung von React-Dateien, Modulen und Variablen. Sie sollten die bewährten Praktiken der JavaScript-Entwicklergemeinschaft befolgen und die Regeln für die Namensgebung verstehen - laden Sie ESLint-Regeln herunter oder erstellen Sie sie nach Ihren Wünschen.

// bad
var visible = true;

// good
var isVisible = true;

7. Verwenden Sie Recoil und React-query, nicht Redux und Saga

Mit diesem Tipp können Sie die Kodiergeschwindigkeit um bis zu drei Mal verringern. Sie verringern auch die Gefahr von Speicherlecks, die dadurch entstehen, dass die Redx-Saga alle Abfragedaten innerhalb von Redux speichert. Eine bessere Lesbarkeit des Codes wäre ein zusätzlicher Vorteil.

8. Einen gefälschten Datenserver erstellen

Das Hauptmerkmal von React-ähnlichen Frameworks ist die Trennung des Backend-Codes vom Frontend. Aber irgendwann wird man vom Backend abhängig, wenn ein Dienst einen 503-Fehler bekommt oder noch nicht bereit ist. Frontend-Entwickler sollten nicht darauf warten, dass Backend-Probleme gelöst werden. In solchen Fällen empfehle ich die Verwendung der connect-api-mocker-Bibliothek. MirageJS ist ebenfalls eine gute Wahl. Mit FakerJS können Sie zufällige, realitätsnahe Daten erstellen.

9. Modularisierung des Projekts

Grandparent (global) -> parent -> children (local) wie eine Baumkonfiguration ist die beste Option für die Ordner- und Codestruktur. Nehmen wir an, Sie haben Component1 und Component2, und sie haben Stile außerhalb ihrer Ordner. Das ist eine schlechte Praxis. Die abhängige Struktur sollte nicht über die vollständige Modularisierung erlaubt werden, da guter Code die Regel der Wartbarkeit und Lesbarkeit verfolgt.

10. Erstellen einer strengen Seitenordnerstruktur

Gelegentlich kann es vorkommen, dass ein React-Entwickler die Benutzeroberfläche zu einem Teil einer Seite macht und andere die weitere Entwicklung der Verbindung mit der API übernehmen. Wie bildet man eine lesbare Komponentenstruktur?

Ich habe eine Komponente und eine Ordnerstruktur erstellt, die erste überhaupt speziell für Seiten. Sie wird als Trenary-Ordnerstruktur bezeichnet und gliedert die Komponenten in Teilbereiche, Blöcke und Komponenten. Sie können unvollendete Arbeiten problemlos fortsetzen und die SOLID-Grundsätze befolgen.

11. Master-Versionskontrolle

Dies ist besonders wichtig für Teamleiter. React-Entwickler werden auf Git angewiesen sein, um den Prozess nicht zu verlieren. Es gibt so viele Probleme im Zusammenhang mit der Versionierung wie:

Verlust eines Codeblocks. Rückwärts rollen bis zu einem bestimmten Datum. Bearbeitung freigegebener Versionen ohne Änderung der laufenden Entwicklung. Erstellen, Verfolgen und Protokollieren von Änderungen.

All dies sind komplexe Aufgaben, die die Einhaltung strenger Regeln erfordern.

• Möglicherweise müssen Sie git commit, stash, cherry-pick, rebase, merge, fsck Befehle bis in die Tiefe lernen: Versuchen Sie ein cooles Spiel zum spielerischen Lernen.
• Denken Sie daran, dass Gitflow die erfolgreichste Verzweigungsstrategie ist
• Verwenden Sie die semantische Versionierung.
• Verwenden Sie einen geeigneten Software-Release-Lebenszyklus für die Benennung von Entwicklungsphasen.
• Verwenden Sie herkömmliche Commits, um Ihre Commits zu benennen und Aufgaben in Jira (oder der von Ihnen verwendeten Software) zu verfolgen. So können Sie automatische Freigaben auslösen, Änderungsprotokolle erstellen und semantische Versionen bestimmen.

12. Sorgfalt bei der Formularbearbeitung

Sie sollten Ihre Formulare genau planen. Einige dieser Bibliotheken könnten hilfreich sein:

• react-hooks-form ist ein großartiger Form-Handler mit isolierter und reduzierter Re-Rendering-Technologie und weniger kompliziertem Code.
• yup erstellt eine client-side Validierung, bevor es den Server befragt, und ist einfach mit Formularbibliotheken zu verwenden.

Abschließende Bemerkungen

React macht das Leben der Entwickler einfacher. Ich habe einige Tipps gegeben, die Ihnen bei der Bewältigung großer Projekte helfen können. Nutzen Sie sie und suchen Sie immer wieder nach neuen Möglichkeiten, Ihre Arbeit zu verbessern.