Die React-Boilerplate-Baugruppe wurde erst kürzlich, am 26. Juni
2018 , auf Version 3.6.0 aktualisiert. Diese Versammlung ist bereits mehr als drei Jahre alt, aber vor dem Hintergrund vieler
anderer (mehr als 18.000 Stars GitHub) deutlich erkennbar, wurde sie auf Habré fast nie gesehen. Was ist seine Funktion? Kurzum - die Baugruppe bietet dem Entwickler "alles auf einmal"!
Zuerst über traurig
Zunächst ein wenig über traurige Dinge. Der Wert von Starter Builds für Reaktionsprojekte ist enorm. Wie Sie wissen, ist React selbst nur eine Bibliothek, die die Präsentationsebene implementiert. Um eine vollwertige Anwendung zu erstellen, müssen Sie viele andere Bibliotheken verwenden, da das React-Ökosystem viele davon bietet. Aus diesem Grund ist die Konfiguration des React-Projekts ein ernstes Problem, dessen Lösung für einen einzelnen Entwickler äußerst schwierig zu finden ist. Dan Abramov selbst versteht dies perfekt und erklärt: „Die Konfiguration sollte den ersten Schritten nicht im Wege stehen.“ Und bietet eine Lösung - Create React App . In dieser Startbaugruppe, die eine beträchtliche Popularität erlangte (mehr als 51.000 Sterne GitHub), versuchten die Autoren, den Entwickler so weit wie möglich vor Konfigurationsproblemen zu schützen, indem sie die Standardkonfiguration versteckten, den Satz von Modulen auf ein Minimum reduzierten und die Möglichkeit der automatischen Generierung von Komponenten boten, wodurch ein Gefühl der Einfachheit und Einfachheit geschaffen wurde einfache Entwicklung einer Reaktionsanwendung. Darüber hinaus bieten sie auf der Grundlage derselben Nachricht eine Liste der empfohlenen Baugruppen an. Der Ansatz ist wahrscheinlich gut geeignet, um Neuankömmlinge anzulocken, erschöpft sich jedoch schnell mit seinen Einschränkungen und Konfigurationsproblemen, Problemen bei der Anwendung der besten Module und Best Practices, die noch angegangen werden müssen. Und was ist zum Beispiel mit einem Entwickler, der sein erstes Reaktionsprojekt entwickelt?
Es gibt einen Ausweg
Die React-Boilerplate-Baugruppe ist ein alternativer Ansatz zur Lösung des Problems und bietet "alles auf einmal". Hierbei handelt es sich um eine Reihe von Modulen, die als De-facto-Standard anerkannt und in der Arbeit getestet wurden. Dabei werden die Best Practices bei der Organisation des Projekts angewendet, einschließlich der Berücksichtigung von Skalierbarkeit und Leistung. Es werden Technologien eingeführt, die dem Programmierer helfen, Code schnell zu entwickeln und zu debuggen.
Baugruppenentwickler positionieren es als hoch skalierbar "offline-first" (sobald die heruntergeladene Anwendung offline funktioniert), wobei die Erfahrung der besten Entwickler berücksichtigt wird, die auf hohe Leistung abzielen und gemäß "Best Practice", stark, "produktionsbereit" erstellt wurden. kampferprobte Grundlage für die Entwicklung von Reaktionsanwendungen.
Anwendbare Bibliotheken
Weitere Informationen zu den verwendeten Modulen:
- React, v16.4 (Fibre) - eine schrittweise Implementierung des Key React-Algorithmus, der die Produktivität bei der Entwicklung von Aufgaben wie Animation, Organisation von Elementen auf der Seite und Bewegung von Elementen erhöht;
- React Router , v4.3 - ein De-facto-Router für React- Anwendungen ermöglicht das Erstellen von Anwendungen mit suchmaschinenfreundlichen URLs.
- Redux , v4 - eine Bibliothek, die einen streng unidirektionalen Datenstrom bereitstellt, wodurch die Anwendungslogik vorhersehbarer und verständlicher wird;
- Redux Saga , v0.16 - eine Bibliothek, die die Ausführung von Nebenwirkungen (d. H. Aktionen wie asynchrone Vorgänge wie das Laden von Daten usw.) in React / Redux-Anwendungen vereinfachen und verbessern soll;
- Reselect , v3 - eine Bibliothek, mit der Sie unnötiges Neuzeichnen und Nachzählen der empfangenen Daten verhindern können, was wiederum die React / Redux-Anwendung beschleunigt.
- ImmutableJS , v4 - eine Bibliothek, die das Arbeiten mit unveränderlichen Daten in React / Redux-Anwendungen erleichtert;
- Styled Components , v3.3 - eine Bibliothek, mit der Sie CSS-Klassen als Zwischenstufe zwischen einer Komponente und ihren Stilen entfernen können;
- React Loadable , v5.4 - eine Bibliothek, mit der Sie einen komponentenorientierten Ansatz zur Codetrennung implementieren und spätes Laden implementieren können;
- Jest v23.1, Enzyme v3.3 - Bibliotheken zum Testen von Reaktionsanwendungen.
Skalierbarkeit und Leistung
Die Baugruppe hat die Prinzipien der Unterstützung für Skalierbarkeit und Produktivitätssteigerung konsequent umgesetzt, die der Entwickler der Baugruppe Max Stoiber in seiner Vorlesung „Scaling ReactJS-Anwendungen“ und Dan Abramov in der Vorlesung „Präsentationskomponenten und Containerkomponenten“ ausführlich beschrieben haben.
Zu diesen Grundsätzen gehören insbesondere:
- Trennung von Komponenten in Präsentation und Behälter;
- Code-Platzierung nach dem Prinzip einer Komponente - eines Ordners;
- die Verwendung moderner Tools (Styled-Components, CSS-Module) zur Lösung von CSS-Vererbungsproblemen in großen Projekten;
- Redux / Saga-Anwendung zur Optimierung des Datenflusses zur Vereinfachung asynchroner Vorgänge.
Codieren, Debuggen, Testen
Die Assembly bietet zahlreiche Möglichkeiten, den Programmierer beim Schreiben und Debuggen von Code zu unterstützen:
- JavaScript der nächsten Generation (Vorlagen in Kleinbuchstaben, Objektumstrukturierung, JSX-Syntax usw.);
- schnelle Generierung von Komponenten / Containern / Routen mit ihren Selektoren, Sagen, Reduzierern und Tests über die Befehlszeile;
- "Hot-Swapping" der Module, so dass die Ergebnisse von Änderungen am Anwendungscode unverzüglich angezeigt werden können;
- Verwendung des Webpack Dll Plugins , das die Startzeit der Anwendung auf dem Server um 40% und während des "Hot Reload" von Modulen verbessert
- Verwenden von AppVeyor und TravisCI (Installationsdateien sind standardmäßig enthalten), mit denen Sie automatisch Anwendungstests unter Windows und Unix ausführen können.
- statische Code-Analyse: ESLint , Prettier und Stylelint überprüfen und formatieren den Code automatisch in Ihrem Editor (Konfiguration erforderlich, Konfigurationsdateien und Anweisungen sind beigefügt);
- Platzierung auf Heroku , AWS S3 Cloud-Diensten: (Konfiguration erforderlich, Anweisungen enthalten).
Befehlszeile
Die Assembly bietet, wie bereits erwähnt, eine Reihe von Befehlen für die Befehlszeile, in denen viele für den Entwickler erforderliche Funktionen implementiert sind, darunter:
- Initialisierung eines neuen Projekts mit 100% Testabdeckung;
- Starten der Anwendung auf dem Server des Entwicklers;
- Erzeugung von Komponenten, Behältern mit ihren Selektoren, Sagen, Reduzierern und Tests;
- Generierung der Produktionsversion des Projektcodes;
- Projekttests;
- Remote-Debugging, mit dem der Ngrok- Dienst verwendet werden kann , um einen sicheren Zugriff auf den lokalen Server aus dem Internet bereitzustellen;
- Flusen;
- Übersetzungsmanagement (Hinzufügen von Sprachen, Extrahieren von Nachrichten in i18n JSON-Dateien);
- Profiling wird leider nicht gefunden, obwohl es unter den Vorzügen der Build-Befehlszeile erwähnt wird.
Ist etwas überflüssig?
Wenn Sie entscheiden, dass Sie einige Module nicht benötigen, können Sie sie entfernen, und die Baugruppe hilft Ihnen bei Ihren Anweisungen ( hier und hier ).
Glaubst du, dass etwas fehlt?
Zusätzliche Funktionen der Baugruppe:
- "Offline-first" bedeutet, dass die heruntergeladene Anwendung auch in älteren Browsern offline funktioniert, sobald sie offline funktioniert.
- "Native Web-App" bedeutet, dass der Benutzer bei wiederholten Besuchen der Anwendung eine Einladung zum Hinzufügen eines Symbols zum Startbildschirm erhält und die Anwendung genau als "native" Anwendung verwendet werden kann (jedoch ohne Einschränkungen durch Anwendungsspeicher).
- Unterstützung für Suchmaschinenoptimierung (Verwaltung von Seitenkopf-Tags) für Suchmaschinen, die die Indizierung von JavaScript-Inhalten unterstützen;
- Schnelles Laden von Web-Schriftarten, wodurch die mit der Verzögerung beim Laden von Schriftarten verbundene Verzögerung der Seitenanzeige beseitigt wird.
- Bildoptimierung durch den Image-Loader von Webpack.
Die Dokumentation
Die Baugruppe ist gut dokumentiert und enthält beispielsweise sogar einen Abschnitt zur Lösung möglicher Probleme .
Updates, Bugs
Das Projekt wird regelmäßig aktualisiert und reagiert umgehend auf Änderungen in den einzelnen Modulen (zuletzt aktualisiert am 26.06.2008), löst aktiv Probleme : Beispielsweise wurden am 08.11.2008 1367 gelöst und 9 Probleme werden derzeit gelöst.
Also was?
Die Assembly bietet daher ein hervorragendes Beispiel für die vollständige Konfiguration des React-Projekts, schafft Bedingungen für den Programmierer, um das Schreiben und Debuggen des Codes zu beschleunigen, und bietet Beispiele für die Implementierung von Best Practices, die bei der Entwicklung hoch skalierbarer und produktiver Anwendungen verwendet werden.
Und schließlich - eine Nachricht des Autors der Versammlung Maximilian Stoiber und seines Teams:
"Wenn Sie eine solide, kampferprobte Grundlage für den Aufbau Ihres nächsten Superfoods benötigen und Erfahrung mit React haben, ist dies perfekt für Sie!"