Wenn Sie ein neues Front-End-Projekt planen oder ein bestehendes Projekt umgestalten, müssen Sie sich darüber im Klaren sein, dass die aktuelle Front-End-Entwicklungsumgebung nicht mehr das ist, was sie einmal war viele Auswahlmöglichkeiten: React, Flux, Angular, Aurelia, Mocha, Jasmine, Babel, TypeScript, Flow ... Ihre ursprüngliche Absicht besteht darin, die Entwicklung zu vereinfachen, aber sie erhöhen praktisch die Lernkosten und bringen auch Ärger mit sich Aufrechterhaltung zukünftiger Projekte.
Glücklicherweise lässt dieses Phänomen nach und die Stärksten werden überleben. Exzellente Projekte etablieren sich langsam und die Entwicklungsmethoden werden immer klarer. Einige Entwickler versuchen, Frameworks zu verwenden, die auf den oben genannten Technologien für die Entwicklung basieren, wodurch auch die Lernkosten in gewissem Maße gesenkt werden.
In diesem Artikel werden hauptsächlich einige Technologien vorgestellt, die ich in die Entwicklung von Webanwendungen einbeziehe und empfehle. Einige davon sind technisch umstritten, daher gebe ich nur eine kurze Einführung und Analyse jeder Technologie. Alle diese Meinungen basieren auf meiner persönlichen Erfahrung und meinem Kontakt mit der Community. Bitte verwenden Sie sie also nach eigenem Ermessen.
Reagieren liegt voll im Trend:
Komponentisierung erleichtert Anwendungen Entwicklung und Wartung
Die Lernkurve ist sanft, die Kern-API ist prägnant und klar, leicht zu erlernen
JSX-Syntax ist unkonventionell und nutzt die Leistungsfähigkeit von JavaScript voll aus
Natürlich an Flux und Redux angepasst
Die Community ist aktiv und kreativ und hat viele hervorragende Entwicklungstools beigesteuert
Der unidirektionale Datenfluss eignet sich besser für komplexe Anwendungen und hat eine höhere Qualität als die bidirektionale Datenbindung
Unterstützt serverseitiges Rendering
Obwohl React im Vergleich zu funktionsreichen Frameworks wie Ember, Aurelia und Angular kein Allrounder ist, ist die Entwicklungsumgebung von React robuster. Derzeit ist die Verwendung von React keine Technologieentscheidung, sondern eine Geschäftspraxis, die eine effizientere und effektivere Produktivität ermöglicht.
Wenn Sie mobile Anwendungen entwickeln möchten und die React-Syntax bereits erlernt haben, können Sie direkt mit der Verwendung von React Native beginnen, um plattformübergreifende Anwendungen zu entwickeln.
Da wir nun die Möglichkeit haben, die Ansichtsebene zu entwickeln, müssen wir als Nächstes andere Tools verwenden, um den Status und den Lebenszyklus in der Anwendung zu verwalten, wie hier empfohlen Das Tool ist: Redux.
Um mit React zusammenzuarbeiten, hat Facebook Flux entwickelt, ein Tool zur Verwaltung des unidirektionalen Datenflusses. Obwohl Flux grundsätzlich einen einzelnen Datenfluss unterstützt, bringt es auch andere Probleme mit sich, z. B. wie und wo der Status gespeichert wird. Stellen Sie Ajax-Anfragen und mehr.
Um diese Probleme zu lösen, wurde eine Reihe von Frameworks abgeleitet, die das Flux-Modell imitieren: Fluxible, Reflux, Alt, Flummox, Lux, Nuclear, Fluxxor...
Derzeit Es wird von der Entwicklergemeinschaft häufig verwendet. Eine unterstützte Implementierung ist Redux.
In Redux sind die meisten Komponenten rein funktionale Komponenten und es gibt nur ein zentrales Speicher- und Ressourcenzentrum. Die Instanzmethoden von Redux sind für den Betrieb und die Wartung der gesamten Daten verantwortlich. Im Vergleich zu Flux sind die Ideen von Redux klarer.
Noch wichtiger ist, dass Redux sehr einfach zu erlernen ist. Dan Abramov, der Autor von Redux, ist ein ausgezeichneter Lehrer und hat eine Reihe ausführlicher und leicht verständlicher Redux-Video-Tutorials erstellt. Werden Sie ein Redux-Experte, indem Sie sich diese Videos ansehen. Ich habe einmal gesehen, wie ein Zero-Based-React-Team in nur wenigen Wochen schnell ein Beta-Produkt entwickelte, und der Code war sehr robust und anspruchsvoll.
Das Ökosystem rund um Redux ist so robust wie Redux selbst. Vom erstaunlichen Devtool bis zum leistungsstarken Memoization-Tool Reselect bietet die Redux-Entwicklergemeinschaft Entwicklern alles, was sie brauchen.
Entwickler versuchen möglicherweise instinktiv, eine Redux-Vorlage zu abstrahieren. Dies hat viele Vorteile, aber kapseln Sie die Vorlage bitte auf der Grundlage eines klaren Verständnisses der Anforderungen, anstatt es blind zu versuchen.
Es ist an der Zeit, CoffeeScript aufzugeben, da viele seiner Funktionen in ES6 eine ähnliche Syntax haben und ES6 ein Implementierungsstandard ist und die zukünftige Entwicklungsrichtung von JavaScript darstellt.
Die neuesten Browser unterstützen bereits die meisten Funktionen von ES6. Babel ist ein leistungsstarkes Konvertierungstool zum Konvertieren von ES6 in ES5. Darüber hinaus kann der Grad der Transkodierung je nach Zielbrowser angepasst werden.
Gibt es also ein Typensystem? Sowohl TypeScript als auch Flow bieten statische Typsysteme für JavaScript. Mithilfe der statischen Typprüfung können Fehler effektiv erkannt und der Testaufwand reduziert werden. Im Moment empfehle ich, diesbezüglich eine abwartende Haltung einzunehmen.
TypeScript versucht sein Bestes, um JavaScript in Richtung C# oder Java zu entwickeln, aber es fehlen viele erweiterte Typsystemfunktionen, wie etwa algebraische Datentypen. Darüber hinaus kann es Nullwerte nicht so effizient verarbeiten wie Flow.
Im Vergleich ist Flow leistungsfähiger und erfasst mehr Fehlertypen, ist jedoch schwieriger zu konfigurieren. Darüber hinaus ist die Unterstützung für neue JavaScript-Funktionen schwächer als bei Babel und es werden keine Windows-Systeme unterstützt.
Aus meiner persönlichen Sicht ist das Typsystem kein entscheidender Teil der Frontend-Entwicklung (es könnte hier umstritten sein). Warten wir ab, bis das Typsystem robuster und Babel-freundlicher wird.
Ein weiteres unbestrittenes Tool ist ESLint. ESLint unterstützt die ES6-Syntax und bietet auch React-Plug-Ins. Es ist nicht mehr nur ein Code-Review-Tool. Derzeit ist JSLint veraltet und ESLint kann JSHint und JSCS in einer eigenen Klasse ersetzen.
Entwickler können ESLint nach ihren eigenen Bedürfnissen konfigurieren, aber hier empfehle ich, es gemäß den Entwicklungsspezifikationen von AirBNB zu konfigurieren, oder Sie können die ESLint-Airbnb-Konfiguration direkt verwenden. Natürlich weist diese Spezifikation immer noch Mängel auf, aber die Aufrechterhaltung der Konsistenz des Gesamtcodes des Teams kann die Lesbarkeit des Codes effektiv verbessern.
Nachdem Sie sich mit ESLint vertraut gemacht haben, wird empfohlen, dass Entwickler die Regeln eingehend ausprobieren. Je mehr Fehler ESLint erkennt, desto stabiler ist das Produkt.
Vergessen Sie Bower, lassen Sie NPM übernehmen. Build-Tools wie Browserify und Webpack haben indirekt den Status von NPM in der Webentwicklung erhöht. Mit NPM wird die Versionsverwaltung einfacher und es wird mehr Kontakt zum Node.js-Ökosystem geben. Der aktuelle Umgang mit CSS ist noch nicht vollständig genug.
Überlegen Sie vielleicht, wie Sie den Build auf dem Bereitstellungsserver durchführen? Im Gegensatz zu Rubys Bundler verwendet NPM Platzhalter zum Abrufen von Dateien, und Pakete von Drittanbietern können während der Codeentwicklung und vor der Veröffentlichung des Projekts beliebig geändert werden. Verwenden Sie Shrinkwrap-Dateien, um Abhängigkeiten von Drittanbietern im Projekt einzufrieren. Ich empfehle die Verwendung von Shrinkwrap für Benutzer, um die Konsistenz der Ausgabe zu verbessern. Darüber hinaus können Entwickler auch den Einsatz von Tools wie Sinopia in Betracht ziehen, um ihre eigenen privaten NPM-Server zu hosten.
Babel konvertiert die ES6-Modulsyntax in CommonJS. CommonJS ist eine bewährte Syntax, die stabil und universell ist. Darüber hinaus können wir mithilfe von Mechanismen wie Tree Shaking eine statische Codeanalyse erreichen (Webpack 2.0 und Rollup unterstützen diese Funktion bereits).
Wenn Sie Ihrer Seite nicht gerne Hunderte von Skript-Tags hinzufügen möchten, sollten Sie versuchen, die Ressourcen der Seite mit einem Build-Tool zu packen. Darüber hinaus benötigen Sie einige Tools, um die Browserunterstützung für NPM-Drittanbieterpakete zu aktivieren. Hier empfehle ich Ihnen die Verwendung von Webpack.
Vor einem Jahr hatten Entwickler viele Tools zur Auswahl für die oben genannten Arbeiten, wie zum Beispiel JavaScript-basierte RequireJS-, Browserify- und Webpack-Lösungen sowie RollupJS, das als beste Optimierung für ES6-Module gilt .
Nachdem ich alle Tools ausprobiert habe, empfehle ich Entwicklern dringend, sich für Webpack zu entscheiden:
Konfiguration kann mit verschiedenen Situationen umgehen
Unterstützt gängige Modullademethoden (AMD, CommonJS, Globals)
Der interne Mechanismus kann defekte Module reparieren
Kann mit CSS umgehen
Umfassendes Caching-System
Unterstützt Hot Reload
Kann die meisten Ressourcen laden
Bietet effiziente Lösungen zur Leistungsoptimierung
Webpack eignet sich auch sehr gut für die Verarbeitung großer Einzelseitenanwendungen und unterstützt Codeaufteilung und Lazy Loading.
Aber es ist erwähnenswert, dass die Lernkurve von Webpack extrem steil ist. Aber sobald Sie es gelernt haben, steht Ihnen das leistungsfähigste Build-System zur Verfügung.
Was ist mit Gulp und Grunt? Im Vergleich dazu ist Webpack besser im Umgang mit verschiedenen Ressourcen. Gulp und Grunt sind immer noch nützlich, wenn Sie andere Arten von Build-Aufgaben ausführen müssen. Für grundlegende Aufgaben wie das Ausführen von Webpack empfehle ich die direkte Verwendung von NPM-Skripten.
In JavaScript gibt es eine große Anzahl optionaler Unit-Test-Tools, von denen jedes stabil und robust ist. Wenn Sie es nur für Unit-Tests verwenden, werden die vorhandenen Tools Ihre Anforderungen vollständig erfüllen.
Zu den gängigen Testtools gehören Jasmine, Mocha, Tape, Ava, Jest usw. Sie alle haben ihre eigenen Stärken.
Meine Anforderungen an ein Test-Framework sind wie folgt:
Kann für einfaches Debuggen im Browser ausgeführt werden
Schnell Ausführung
Einfach zu handhabende asynchrone Tests
Einfach in der Befehlszeile zu verwenden
Ja Bibliotheken von Drittanbietern, die mit beliebigen Behauptungen und Datensimulationen kompatibel sind
Das erste Kriterium schließt Ava und Jest aus.
Ich mag Chai Assertions wegen seiner großen Auswahl an Plugins mit vollem Funktionsumfang und Mocha wegen seiner guten Unterstützung für Async. Es wird dringend empfohlen, Dirty Chai zu verwenden, um bestimmte Probleme zu vermeiden. Mit dem Mocha-Leader-Plugin von Webpack können Entwickler Tests automatisieren.
Für React können sich Entwickler auf Enzyme und Teaspoon von AirBNB beziehen.
Ich liebe die Funktionen von Mocha sehr. Wenn Sie nur die grundlegendsten Funktionen wünschen, können Sie in diesem Artikel mehr über Tape erfahren.
JavaScript verfügt nicht über eine zentrale Tool-Bibliothek wie Java oder .NET, daher verweisen Entwickler meist von außen auf eine externe Tool-Bibliothek.
Derzeit ist Lodash der Marktführer in dieser Kategorie. Darüber hinaus ist es aufgrund seiner verzögerten Ausführungseigenschaften eines der leistungsstärksten verfügbaren Tools. Bei der Verwendung von Lodash ist es nicht erforderlich, alle Ressourcen zu referenzieren, Entwickler können die Funktionen nach Bedarf nutzen. In Version 4.x bietet Lodash einen „Functional Development“-Modus für Entwickler, die funktionale Programmierung bevorzugen.
Wenn Sie mit funktionaler Programmierung vertraut sind, können Sie mehr über Ramda erfahren. Wenn Sie sich für die Verwendung dieser Bibliothek entscheiden, müssen Sie möglicherweise auf einige Lodash-Funktionen verweisen.
Viele React-basierte Anwendungen verwenden jQuery nicht mehr. Sofern Sie kein altes Projekt pflegen oder eine Drittanbieterbibliothek verwenden, die von jQuery abhängt, besteht keine Notwendigkeit mehr, diese zu verwenden.
Ich halte Projekte gerne einfach und verwende in meinem Code nur Fetch. fetch basiert auf Promise und sowohl Firefox als auch Chrome kapseln diese Schnittstelle. Für andere Browser müssen Sie ein Putty-Skript bereitstellen. Ich empfehle die Verwendung von isomorphic-fetch, um die Funktionalität über Browser und Server hinweg konsistent zu halten.
Natürlich können Sie auch andere hervorragende Bibliotheken von Drittanbietern verwenden, um Daten asynchron abzurufen, aber ich denke, dass das Abrufen ausreicht.
Isomorphes JavaScript bezieht sich auf JavaScript, das sowohl auf dem Client als auch auf dem Server ausgeführt wird. Es wird häufig zum Vorabrendern von Seiten auf dem Server verwendet, um die Leistung zu verbessern und SEO zu erleichtern. Isomorphes JavaScript kann mit React implementiert werden, ist jedoch nicht einfach. Es erhöht die Komplexität des Programms und schränkt die den Entwicklern zur Verfügung stehenden Tools und Bibliotheken von Drittanbietern ein.
Wenn Sie eine B2C-Website erstellen, beispielsweise eine E-Commerce-Website, müssen Sie möglicherweise isomorphes JavaScript verwenden. Bei internen Websites oder B2B-Anwendungen ist die Leistung jedoch nicht das Wichtigste, daher ist isomorphes JavaScript nicht so wichtig.
Jeder scheint heutzutage darüber nachzudenken, was er mit APIs machen soll. Jeder springt auf den Zug der Nutzung von RESTfull-APIs auf und SOAP gehört der Vergangenheit an. Derzeit gibt es in der Branche verschiedene API-Protokolle wie HATEOAS, JSON API, HAL, GraphQL usw.
GraphQL gibt dem Client die Möglichkeit, beliebige Abfragen durchzuführen. In Kombination mit Relay können der Status und der Cache des Clients besser verwaltet werden. Allerdings ist es immer noch schwierig, eine GraphQL-Serverschnittstelle zu erstellen, und der Großteil der Dokumentation bezieht sich auf Node.js.
Falcor von Netflix scheint ähnliche Funktionen wie GraphQL/Relay zu bieten und gleichzeitig die serverseitigen Anforderungen zu reduzieren, befindet sich jedoch derzeit in der Entwicklervorschau und wurde noch nicht in der tatsächlichen Entwicklung verwendet.
Alle bekannten Spezifikationen weisen ihre eigenen Mängel auf, einige sind zu komplex, einige können nur das Lesen von Daten, aber keine Aktualisierung verarbeiten, und einige unterscheiden sich erheblich von REST. Viele Entwickler entscheiden sich dafür, selbst zu entwickeln, stoßen jedoch immer noch auf die oben genannten Probleme.
Ich glaube nicht, dass es für das oben Genannte eine perfekte Lösung gibt, aber ich habe mein eigenes Verständnis der API:
Vorhersehbar, befolgen Sie ein konsistentes Protokoll
Unterstützt das Abrufen mehrerer Entitäten in einer Abfrage
Unterstützt Aktualisierungsvorgänge
Einfach zu debuggen
Einfach zu bedienen
Bisher habe ich keine Lösung gefunden, die alle oben genannten Kriterien erfüllt.
Wenn Sie RESFful verwenden, wird empfohlen, sich zum Schreiben der API an Swagger zu wenden.
Electron kann Front-End-Technologie verwenden, um Desktop-Programme zu erstellen. Der vom GitHub-Team erstellte Atom-Editor basiert auf Electron. Im Wesentlichen kapselt Electron intern ein Node.js, das ein Chrome-Fenster zum Rendern der Benutzeroberfläche öffnen und auch auf die lokale API des Betriebssystems zugreifen kann, und es gibt keinen Sandbox-Mechanismus im Browser. Entwickler können Anwendungen über Electron verpacken und verteilen.
Dies ist der einfachste Weg, plattformübergreifende Software zu erstellen und alle oben genannten Tools zu nutzen. Darüber hinaus verfügt Electron über eine vollständige Dokumentation und eine aktive Entwickler-Community.
Sie haben vielleicht schon von dem Namen nw.js gehört, obwohl es ihn schon seit vielen Jahren gibt, ist Electron stabiler und einfacher zu verwenden.
Hier ist eine Vorlage basierend auf Electron, React und Hot Reload, probieren Sie es aus.
Hier sind einige Leute, denen ich auf Twitter folge:
Dan Abramov, Schöpfer von Redux
Christopher Chedeau, ein sehr aktiver React-Entwickler, der derzeit bei Facebook arbeitet
Jeff Morrison, einer der Hauptmitwirkenden von Flow
Sebastian Markbåge, einer der Schöpfer von React
Pete Hunt
React
Für weitere Objekte Aufmerksamkeit verdienen, siehe React Influencers
Es wird empfohlen, Pate Hunts Learning React zu lesen!
Dan Abramov hat eine Reihe von Video-Tutorials veröffentlicht. Erste Schritte mit Redux, Sehr empfehlenswert! Darüber hinaus hat Dan eine Beobachtungsliste veröffentlicht, die detaillierter ist als die oben genannte.
Mark Eriksons Sammlung von React/Redux-Links ist ebenfalls ein gutes Lernmaterial.
Das JavaScript-Ökosystem entwickelt sich rasant und wird immer leistungsfähiger. Best Practices in React festigen sich und die Verantwortlichkeiten und Fähigkeiten der umgebenden Tools werden immer klarer.
Das Wichtigste, das Sie sich merken sollten, ist: Halten Sie es einfach und verwenden Sie es nur, wenn Sie es brauchen.
Wenn Ihre Anwendung nur über zwei oder drei Bildschirme verfügt, müssen Sie kein Routing-System verwenden. Wenn Sie eine einseitige Anwendung erstellen, benötigen Sie nicht einmal Redux, sondern nur das Statusattribut von React Sie erstellen ein einfaches CRUD-Programm. Wenn Sie ES6 lernen, müssen Sie Async/Await oder Decorators nicht gründlich verstehen. Sie müssen kein Hot-Reloading und serverseitiges Rendering verwenden. Wenn Sie neu bei Webpack sind, müssen Sie den Code nicht trennen und mehrere Ressourcen zusammenführen. Wenn Sie gerade erst Redux lernen, müssen Sie die Verwendung von Redux-Form nicht verstehen und Redux-Sagas.
Halten Sie es einfach und erledigen Sie eine Sache nach der anderen!
Das obige ist der detaillierte Inhalt vonEine detaillierte Einführung in die Aussichten für den JavaScript-Technologie-Stack. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
