Praktische Richtlinien für die Entwicklung umfangreicher React-Anwendungen. Planung, Aktionen, Datenquellen und APIs

Heute machen wir Sie auf den ersten Teil der Übersetzung des Materials aufmerksam, der der Entwicklung groß angelegter React-Anwendungen gewidmet ist. Wenn Sie eine einseitige Anwendung mit React erstellen, ist es sehr einfach, die Codebasis durcheinander zu bringen. Dies erschwert das Debuggen der Anwendung und erschwert das Aktualisieren oder Erweitern des Projektcodes.



Es gibt viele gute Bibliotheken im React-Ökosystem, mit denen bestimmte Aspekte einer Anwendung verwaltet werden können. Wir werden auf einige von ihnen im Detail eingehen. Darüber hinaus werden hier einige praktische Empfehlungen gegeben. Wenn das Projekt gut skaliert werden soll, ist es hilfreich, diese Empfehlungen von Beginn der Arbeit an zu befolgen. In diesem Teil der Übersetzung werden wir über Planung, Aktionen, Datenquellen und die API sprechen. Der erste Schritt bei der Entwicklung umfangreicher React-Anwendungen, die wir uns ansehen werden, ist die Planung.

Teil 1: Praktische Richtlinien für die Entwicklung umfangreicher React-Anwendungen. Planung, Aktionen, Datenquellen und APIs

Teil 2: Praktische Richtlinien für die Entwicklung umfangreicher React-Anwendungen. Teil 2: Zustandsverwaltung, Routing

Planung

In den meisten Fällen überspringen Entwickler diese Phase der Arbeit an der Anwendung. Dies liegt daran, dass während des Planungsprozesses keine Arbeiten zum Schreiben von Code ausgeführt werden. Die Bedeutung dieses Schrittes ist jedoch nicht zu unterschätzen. Sie werden bald erfahren, warum dies so ist.

▍Warum planen Sie bei der Entwicklung von Anwendungen?

Die Softwareentwicklung erfordert die Koordination vieler Prozesse. Gleichzeitig ist alles sehr leicht außer Kontrolle geraten. Hindernisse und Unsicherheiten im Entwicklungsprozess können den Zeitpunkt des Projekts gefährden.

Bei der Einhaltung von Fristen kann Ihnen die Projektplanungsphase helfen. Legen Sie zu diesem Zeitpunkt alle Funktionen, die die Anwendung haben sollte, in die Regale. Es ist viel einfacher vorherzusagen, wie lange es dauern wird, kleine separate Module zu erstellen, deren Liste bei den Programmierern liegt, als zu versuchen, die Entwicklungsbedingungen des gesamten Projekts abzuschätzen.

Wenn mehrere Programmierer an einem großen Projekt teilnehmen (wie es normalerweise der Fall ist), erleichtert das Vorhandensein eines vorentwickelten Plans, eines bestimmten Dokuments, die Interaktion untereinander erheblich. Tatsächlich können verschiedene in diesem Dokument formulierte Aufgaben einzelnen Entwicklern zugewiesen werden. Seine Anwesenheit wird den Teammitgliedern helfen, sich darüber im Klaren zu sein, was ihre Kollegen tun.

Und schließlich können Sie dank dieses Dokuments sehr deutlich sehen, wie die Arbeit am Projekt voranschreitet. Programmierer wechseln häufig von der Arbeit an einem Teil der Anwendung zu einem anderen und kehren viel später zu dem zurück, was sie zuvor getan haben, als sie möchten.
Betrachten Sie den Anwendungsplanungsprozess.

▍Schritt 1: Seiten und Komponenten

Es ist notwendig, das Erscheinungsbild und die Funktionalität jeder Seite der Anwendung zu bestimmen. Einer der besten Ansätze hier ist das Zeichnen jeder Seite. Sie können dies entweder mit dem Modellierungswerkzeug oder manuell auf Papier tun. Auf diese Weise erhalten Sie ein gutes Verständnis dafür, welche Informationen auf jeder Seite vorhanden sein sollten. So könnte ein Seitenlayout aussehen.


Seitenlayout ( von hier übernommen )

Im obigen Layout können Sie die übergeordneten Containerentitäten und ihre untergeordneten Container leicht identifizieren. Später werden die übergeordneten Container zu Seiten der Anwendung, und kleinere Elemente werden in den components des Projekts verschoben. Nachdem Sie die Layouts fertig gezeichnet haben, schreiben Sie auf jedes Layout die Namen der Seiten und Komponenten.

▍Schritt 2: Aktionen und Ereignisse

Nachdem Sie sich für die Komponenten der Anwendung entschieden haben, überlegen Sie, welche Aktionen in den einzelnen Komponenten ausgeführt werden. Später werden diese Aktionen von diesen Komponenten gesendet.

Stellen Sie sich einen Online-Shop vor, auf dessen Homepage eine Liste der empfohlenen Produkte angezeigt wird. Jedes der Elemente dieser Liste wird im Projekt als separate Komponente dargestellt. Der Name dieser Komponente sei ListItem .


Ein Beispiel für eine Online-Shop-Homepage ( von hier aus )

In dieser Anwendung heißt die Aktion, die die Komponente im Abschnitt " Product " getItems " getItems . Einige andere Aktivitäten, die möglicherweise auf dieser Seite enthalten sind, getSearchResults möglicherweise getUserDetails , getSearchResults usw.

▍Schritt 3: Daten und Modelle

Jeder Komponente der Anwendung sind einige Daten zugeordnet. Wenn dieselben Daten von mehreren Anwendungskomponenten verwendet werden, sind sie Teil eines zentralisierten Statusbaums. Der Statusbaum wird mit Redux verwaltet .

Diese Daten werden von vielen Komponenten verwendet. Wenn Daten von einer Komponente geändert werden, werden sie daher in anderen Komponenten wiedergegeben.

Erstellen Sie eine Liste ähnlicher Daten für Ihre Anwendung. Es wird ein Modelldiagramm. Basierend auf dieser Liste können Reduzierungen erstellt werden.

 products: {  productId: {productId, productName, category, image, price},  productId: {productId, productName, category, image, price},  productId: {productId, productName, category, image, price}, } 

Kehren wir mit einem Online-Shop zum obigen Beispiel zurück. Der Abschnitt "Empfohlene Produkte und neue Produkte" verwendet denselben Datentyp, der zur Darstellung einzelner Produkte verwendet wird (z. B. " product ). Dieser Typ dient als Grundlage für die Erstellung eines der Anwendungsreduzierer.

Nach der Dokumentation des Aktionsplans ist es Zeit, einige der Details zu berücksichtigen, die zum Einrichten der Anwendungsschicht erforderlich sind, die für die Arbeit mit den Daten verantwortlich ist.

Aktionen, Datenquellen und APIs

Wenn Ihre Anwendung wächst, kommt es häufig vor, dass dem Redux-Repository zu viele Methoden zugeordnet sind. Es kommt vor, dass sich die Verzeichnisstruktur verschlechtert und von den tatsächlichen Anforderungen der Anwendung abweicht. All dies wird schwierig zu warten, und das Hinzufügen neuer Funktionen zur Anwendung wird komplizierter.

Lassen Sie uns darüber sprechen, wie Sie einige Dinge anpassen können, um den Redux-Repository-Code langfristig sauber zu halten. Viele Probleme können vermieden werden, wenn Module von Anfang an für die Wiederverwendung geeignet gemacht werden. Es lohnt sich, genau das zu tun, auch wenn es auf den ersten Blick wie ein Übermaß erscheint, das das Projekt unnötig kompliziert.

▍ API-Design und Client-Anwendungen

Während der Ersteinrichtung des Repositorys wirkt sich das Format der Daten, die von der API stammen, stark auf die Struktur des Repositorys aus. Oft müssen Daten konvertiert werden, bevor sie an Reduzierungen übertragen werden können.

In letzter Zeit wurde viel darüber gesagt, was beim Entwerfen einer API benötigt wird und was nicht. Faktoren wie das Backend-Framework und die Anwendungsgröße wirken sich zusätzlich auf das Design der APIs aus.

Wie bei der Entwicklung von Serveranwendungen wird empfohlen, Zusatzfunktionen in einem separaten Ordner zu speichern. Dies können beispielsweise Funktionen zum Formatieren und Zuordnen von Daten sein. Stellen Sie sicher, dass diese Funktionen keine Nebenwirkungen haben (siehe diesen Artikel über reine Funktionen).

 export function formatTweet (tweet, author, authedUser, parentTweet) {  const { id, likes, replies, text, timestamp } = tweet  const { name, avatarURL } = author  return {    name,    id,    timestamp,    text,    avatar: avatarURL,    likes: likes.length,    replies: replies.length,    hasLiked: likes.includes(authedUser),    parent: !parentTweet ? null : {      author: parentTweet.author,      id: parentTweet.id,    } 

In diesem Codebeispiel fügt die Funktion formatTweet dem Tweet-Objekt der Front-End-Anwendung einen neuen Schlüssel ( parent ) hinzu. Diese Funktion gibt Daten basierend auf den an sie übergebenen Parametern zurück, ohne Daten außerhalb davon zu beeinflussen.

Hier können Sie noch weiter gehen, indem Sie Daten einem zuvor beschriebenen Objekt zuordnen, dessen Struktur den Anforderungen Ihrer Front-End-Anwendung entspricht. Sie können jedoch einige Schlüssel überprüfen.

Lassen Sie uns nun über die Teile der Anwendungen sprechen, die für das Aufrufen der API verantwortlich sind .

▍ Organisation der Arbeit mit Datenquellen

Worüber wir in diesem Abschnitt sprechen werden, wird von Redux direkt verwendet, um den Status der Anwendung zu ändern. Abhängig von der Größe der Anwendung (und zusätzlich von der Zeit, die der Programmierer hat) können Sie das Design des Data Warehouse mit einem der folgenden beiden Ansätze betrachten:

• Ohne den Einsatz eines Agenten (Kurier).
• Agent verwenden.

▍ Entwerfen eines Repositorys ohne Verwendung eines Agenten

Bei diesem Ansatz werden während der Konfiguration des Speichers die Mechanismen zum Ausführen von GET , POST und PUT Anforderungen für jedes Modell separat erstellt.


Komponenten interagieren mit der API, ohne einen Agenten zu verwenden

Das vorherige Diagramm zeigt, dass jede Komponente Aktionen sendet, die Methoden aus verschiedenen Datenspeichern aufrufen. Bei diesem Ansatz updateBlog die updateBlog Methode aus der BlogApi Datei folgendermaßen aus:

 function updateBlog(blog){   let blog_object = new BlogModel(blog)   axios.put('/blog', { ...blog_object })  .then(function (response) {    console.log(response);  })  .catch(function (error) {    console.log(error);  }); } 

Dieser Ansatz spart Zeit ... Und zunächst können Sie auch Änderungen am Code vornehmen, ohne sich um Nebenwirkungen sorgen zu müssen. Aus diesem Grund wird das Projekt eine große Menge an redundantem Code enthalten. Darüber hinaus erfordert das Ausführen von Operationen an Gruppen von Objekten viel Zeit.

▍ Entwerfen eines Repositorys mithilfe eines Agenten

Mit diesem Ansatz ist das Projekt auf lange Sicht einfacher zu warten und es ist einfacher, Änderungen vorzunehmen. Die Codebasis wird im Laufe der Zeit nicht verschmutzt, da dem Entwickler das Problem erspart bleibt, parallele Abfragen mit Axios auszuführen.


Komponenten interagieren mit der API über einen Agenten

Bei diesem Ansatz ist jedoch eine gewisse Zeit für die Ersteinrichtung des Systems erforderlich. Sie ist weniger flexibel. Dies ist sowohl gut als auch schlecht, da der Entwickler dadurch nichts Ungewöhnliches tun kann.

 export default function courier(query, payload) {   let path = `${SITE_URL}`;   path += `/${query.model}`;   if (query.id) path += `/${query.id}`;   if (query.url) path += `/${query.url}`;   if (query.var) path += `?${QueryString.stringify(query.var)}`;     return axios({ url: path, ...payload })     .then(response => response)     .catch(error => ({ error })); } 

Der Code für die courier wird courier . Alle API-Handler können es aufrufen und die folgenden Daten übergeben:

• Anforderungsobjekt mit URL-bezogenen Informationen. Zum Beispiel der Modellname, die Abfragezeichenfolge usw.
• Die Nutzdaten, die die Anforderungsheader und ihren Hauptteil enthalten.

▍ API-Aufrufe und anwendungsinterne Aktionen

Bei der Arbeit mit Redux wird besonderes Augenmerk auf die Verwendung vordefinierter Aktionen gelegt. Dies macht Datenänderungen in der Anwendung vorhersehbar.

Das Definieren einer ganzen Reihe von Konstanten in einer großen Anwendung scheint eine unmögliche Aufgabe zu sein. Die Umsetzung dieser Aufgabe wird jedoch dank der zuvor besprochenen Planungsphase erheblich vereinfacht.

 export const BOOK_ACTIONS = {   GET:'GET_BOOK',   LIST:'GET_BOOKS',   POST:'POST_BOOK',   UPDATE:'UPDATE_BOOK',   DELETE:'DELETE_BOOK', } export function createBook(book) {   return {      type: BOOK_ACTIONS.POST,   book  } export function handleCreateBook (book) {   return (dispatch) => {      return createBookAPI(book)         .then(() => {            dispatch(createBook(book))         })         .catch((e) => {            console.warn('error in creating book', e);            alert('Error Creating book')         })  } export default {   handleCreateBook, } 

Das obige Code-Snippet zeigt eine einfache Möglichkeit, createBookApi Datenquellenmethoden mit Redux-Aktionen zu verwenden. Die createBook Methode kann problemlos an die Redux- dispatch werden.

Beachten Sie außerdem, dass dieser Code in dem Ordner gespeichert ist, in dem die Projektaktionsdateien gespeichert sind. Ebenso können Sie JavaScript-Dateien erstellen, die Aktionen und Handler für andere Anwendungsmodelle deklarieren.

Zusammenfassung

Heute haben wir über die Rolle der Planungsphase bei der Entwicklung von Großprojekten gesprochen. Wir haben hier auch die Merkmale der Organisation der Anwendung mit Datenquellen erörtert. Der nächste Teil dieses Artikels befasst sich mit der Verwaltung des Status einer Anwendung und der Entwicklung einer skalierbaren Benutzeroberfläche.

Liebe Leser! Wo fangen Sie an, React-Anwendungen zu entwickeln?