ng best practices
1.0.0
Dieses Projekt soll das Beispiel für ein Tutorial sein, das Sie durch Best Practices der Front-End-Entwicklung (Web/Mobile) mit einem konkreten Beispiel basiert, das auf einem Winkelprojekt basiert.
Um das Tutorial so schnell wie möglich zu sehen, können Sie hier abstimmen.
Dieses Projekt ist das Ergebnis meiner Erfahrung, Startups und traditionellere Branchen (in Finanzen und Luft- und Raumfahrt) zu helfen, um ihre Front-End-Projekte (Web und Mobule) zu definieren und zu entwickeln.
Mir ist bemerkt, dass jedes Mal eines der schwierigsten Teile beim Start eines Produkts darin besteht, die Best Practices zu definieren und die besten Werkzeuge zu finden, um den Entwicklungsworkflow einzulegen.
Deshalb habe ich mich entschlossen, dieses Projekt zu erstellen, ein Konzentrat Best Practices zu sein, das für die Nutzung des Boxs bereit ist. Dadurch können Entwickler und technische Leads/technische Architekten Tage und sogar Monate harter Arbeit retten, um den besten Workflow für ihre Projekte zu finden und zu definieren.
Dieses Projekt/Tutorial -Hauptaugenmerk liegt auf Best Practices der Entwicklung. Zu Beginn wird kein Material in Bezug auf kontinuierliche Integration oder Anwendungsbereitstellung enthalten.
Hinweis 1: Viele der in diesem Projekt vorhandenen Best Practices sind, wie bereits erwähnt, allgemein für die Front-End-Entwicklung und sogar für die Entwicklung im Allgemeinen (nicht nur Front-End). Selbst wenn Sie Angular in Ihrem Projekt nicht verwenden, können Sie es durchgehen, um einige interessante Ideen zu erhalten.
Hinweis 2: Sie können den Inhalt verschiedener Projektparke sehen, um eine Vorstellung von der Entwicklung des Projekts und den Schritten zum Hinzufügen/Einfügen eines bestimmten Tools, einer bestimmten Bibliothek oder des Projekts zum Projekt zu haben.
Dieses Projekt wurde mit Angular CLI Version 7.3.1 erzeugt.
Für dieses Projekt benutze ich hauptsächlich Garn. Sie können jedoch die gleichen Skripte/Befehle mit NPM ausführen.
Zum Beispiel, um das Projekt mit yarn zu starten, führen Sie yarn start aus. Um dasselbe mit npm zu tun, können Sie npm run start ausführen.
Um dieses Projekt starten zu können, müssen Sie installieren:
npm , um verschiedene Skripte auszuführen. (optional)Bevor Sie das Projekt starten können, müssen Sie die verschiedenen Abhängigkeiten/Bibliotheken installieren. Um zu tun, rennen Sie:
# if npm
npm install
# if yarn
yarn
Hier finden Sie eine Liste der optionalen Tools, die Sie im Allgemeinen für die Entwicklung Ihrer Projekte benötigen:
Der Hauptzweig, in dem Sie den neuesten Arbeits- und getesteten Code finden, ist der Master.
Sie können den täglichen Commits und die Entwicklung in der Entwicklungszweig verfolgen.
Ein Tagging -System wird verschiedene Upgrades und Veröffentlichungen des Projekts entstehen.
Führen Sie yarn start für einen Dev -Server aus. Navigieren Sie zu http://localhost:4200/ . Die App wird automatisch neu laden, wenn Sie eine der Quelldateien ändern.
Führen Sie ng generate component component-name um eine neue Komponente zu generieren. Sie können auch ng generate directive|pipe|service|class|guard|interface|enum|module .
Führen Sie yarn build , um das Projekt zu erstellen. Die Build -Artefakte werden im dist/ Verzeichnis gespeichert. Verwenden Sie die Flagge --prod für einen Produktionsbau.
Tatsächlich verwendet ein standardmäßiges Angular-CLI-erzeugter Projekt Karma-Tool für Unit-Tests. Das Problem mit Karma (es kann in einigen Fällen von Vorteil sein) ist, dass es einen Browser starten muss, um einen Test durchzuführen, der in vielen Fällen nicht erforderlich ist und gleichzeitig die Testausführungszeit verlängert. Darüber hinaus haben Sie möglicherweise eine kontinuierliche Integration in Ihren Entwicklungs-/Lieferprozess integriert, der auf einer Umgebung ausgeführt wird, in der Sie einen Browser haben können.
Es gibt eine interessante Alternative zu Karma , die scherzhaft ist. Es macht es schneller und einfacher, Tests zu schreiben. Es wird kein Browser benötigt. Es wird mit integrierten Verspottungs- und Behauptungsfähigkeiten geliefert. Darüber hinaus führt Scherze Ihre Tests gleichzeitig parallel aus und bieten einen glatteren und schnelleren Testlauf.
Scherz-Preset-Angular: Wird verwendet, um die Scherzkonfiguration zu vereinfachen. Die tatsächliche verwendete Version ist 6.0.2, daher unterscheidet sich die Dokumentation und die Konfiguration für die Futur -Versionen dieser Bibliothek.
Führen Sie yarn test:all , um die Unit -Tests über das gesamte Projekt durch Scherz durchzuführen.
Wenn Sie Unit -Tests in einem bestimmten Projekt wie dem connection Project -Run yarn test:connection . Vergessen Sie nicht, das benötigte Skript zu Ihrer package.json -Datei in Addiion zur Datei der passenden Scherzkonfiguration hinzuzufügen, um den Test in einer neuen Bibliothek zu starten. Sie können das Beispiel dafür nehmen, wie es für die connection durchgeführt wird.
Sie können auch Sie testen und nach Änderungen beobachten, indem Sie für den Exmaple yarn test:all:watch .
VS -Code und Scherzdebug: Wenn Sie VS -Code verwenden, können Sie Ihre scherzbasierten Unit -Tests debuggen, indem Sie eine Datei launch.json unter Ihrem .vscode -Ordner hinzufügen (Sie können eine Beispieldatei im tatsächlichen Repo finden). Der Debugger wird den integrierten Knoten-Debugger verwenden. Eine umfassendere Dokumentation kann hier lieben.
Führen Sie yarn e2e aus, um die End-to-End-Tests über den Prognraktor auszuführen.
Wenn wir eine Komponente aus connection importieren möchten, können wir die @connection -Annotation verwenden.
Beispiel: import { ConnectionModule } from '@connection' ;
Dies ist dank des Hinzufügens des paths zur Datei tsconfig.json möglich.
"compilerOptions" : {
...,
"paths" : {
"@connection" : [
" projects/connection/src/public_api "
],
...
},
...
} Wenn wir den Pfad genauer werden möchten (z. B. im Falle einer kreisförmigen Abhängigkeit), können wir der Datei tsconfig.json einen anderen Pfad hinzufügen, wie folgt:
"compilerOptions" : {
...,
"paths" : {
"@connection" : [
" projects/connection/src/public_api "
],
"@connection/*" : [
" projects/connection/src/* "
]
...
},
...
}Es ermöglicht das Importieren von Komponenten oder anderen eckigen exportierten Funktionen wie dem folgenden Beispiel:
Beispiel: import { ConnectionComponent } from '@connection/lib/modules/main/pages'; ;
Um sicherzustellen, dass Entwickler einen präzisen Worklow befolgen, während Sie den Code beginnen und drücken, damit Sie keine Verfaszungen durchführen und Skripte manuell ausführen müssen, sind die folgenden Tools sehr nützlich:
In package.json fügen Sie hinzu:
" scripts " {
"commit" : " git-cz " ,
...
} Wenn Sie yarn commit ausführen, wird das cz-cli verwendet. Also kein direkter git commit mehr.
cz-cli Plugin vervollständigt. In package.json fügen Sie hinzu:
"config" : {
"commitizen" : {
"path" : " node_modules/cz-customizable "
},
"cz-customizable" : {
"config" : " path/to/custom/cz-config.js "
}
},
... Wenn Sie in der Konfiguration ( config.cz-customizable.config ) keine benutzerdefinierte Datei angeben, wird die am Stamm des Projekts vorhandene .cz-config.js Datei verwendet.
Hinweis: Um VS -Code zum Bearbeiten von GIT -Commit -Kommentaren oder anderen Dateimanipulationsaufgaben anstelle von Standard vim zu verwenden, können Sie git config --global core.editor "code --wait" code --help .
Weitere Informationen hier.
Fügen Sie die husky -Konfiguration zum Root der package.json -Datei hinzu:
"husky" : {
"hooks" : {
"pre-commit" : " yarn lintstaged " ,
"prepush" : " yarn prod "
}
} Wenn Sie die Hools überspringen möchten, fügen Sie Ihrem Git-Befehl einfach die --no-verify Flagge hinzu. Beispiel: git push --no-verify
Zu der bereits definierten husky Hooks-Konfiguration können Sie den commit-msg Hook hinzufügen:
"husky" : {
"hooks" : {
...,
"commit-msg" : " commitlint -E HUSKY_GIT_PARAMS "
}
} commit-msg Hook können Sie sich vor dem Erstellen von FINT-Commits für FININT-SCHWEISEN.
Sie können eine Datei commitlint.config.js zum Stammvermögen des Projekts hinzufügen, um Lining -Regeln/-konventionen zu definieren.
commitlint.config.js Beispiel:
module . exports = {
// we use the default @commitlint/config-conventional rules.
// you have to install @commitlint/config-conventional library to be able to use it.
extends : [ '@commitlint/config-conventional' ] ,
// Any rules defined here will override rules from @commitlint/config-conventional
// => custom rules
rules : {
'header-max-length' : [ 2 , 'always' , 100 ] ,
'subject-case' : [
2 ,
'never' ,
[ 'sentence-case' , 'start-case' , 'pascal-case' , 'upper-case' ]
] ,
...
}
} ; Hinweis: Wenn Sie ein Commit wiederholen möchten, damit Sie nicht wieder die gleichen Informationen eingeben müssen, leiten Sie einfach yarn commit:retry .
Das Routerodule des Angulars wurde verwendet. Die Dokumentation des Angulars ist sehr vollständig und ich rate Ihnen, einen Blick darauf zu werfen.
In diesem Projekt habe ich die Wahl getroffen, dass ich für die app (Standalone) Projekte das direkte Routing/Laden verwende. Andererseits ist das Modul für die Haupt -App (Root App) faul geladen und wirkt sich auf die Art und Weise aus, wie das Routing funktioniert.
Um zu sehen, wie die Lzay -Ladevorgänge mit Ihnen behandelt werden, können Sie sich das Verzeichnis src/app/lazy ansehen, in dem die faul geladenen Module definiert sind. Dann sind diese Module "wirklich" faul in der Datei src/app/app-routing.module.ts geladen. Für jedes faul geladene Modul wird ein Pfad definiert. Dieser Pfad muss alle im ursprünglichen Modul definierten Pfade vorausgehen.
Exemple: Nehmen wir an, dass Sie in Ihrem Orignalmodul über die URL localhost:4200/page-one beim direkten Laden (wie im App/Standalone-Projekt) auf den Inhalt der page-one zugreifen. Gleichzeitig ist der Pfad my-lazy-loaded-path Sie für faules Laden definiert haben. Um auf denselben Inhalt/die gleiche Seite zuzugreifen, sollten Sie stattdessen den URL localhost:4200/my-lazy-loaded-path/page-one verwenden.
Und hier, damit mein Modul während faul geladen oder direkt geladen ist, wird eine Kombination aus forRoot -Methode gegenüber den geladenen Modul- und Umgebungsvariablen verwendet.
Wenn es darum geht, Formen zu manipulieren, haben Sie in Angular die Wahl zwischen reaktiven Formen und vorlagengetriebenen Formen.
In der offiziellen Winkeldokumentation finden Sie:
Reaktive Formen sind robuster: Sie sind skalierbarer, wiederverwendbarer und überprüfbarer. Wenn Formulare ein wesentlicher Bestandteil Ihrer Anwendung sind oder Sie bereits reaktive Muster zum Erstellen Ihrer Anwendung verwenden, verwenden Sie reaktive Formulare.
Vorlagengesteuerte Formulare sind nützlich, um einer App ein einfaches Formular hinzuzufügen, z. B. ein E-Mail-List-Anmeldeformular. Sie sind leicht zu einer App hinzuzufügen, aber sie skalieren nicht so gut wie reaktive Formulare. Wenn Sie sehr grundlegende Formularanforderungen und Logik haben, die ausschließlich in der Vorlage verwaltet werden können, verwenden Sie vorlagengesteuerte Formulare.
Hier finden Sie eine Tabelle mit wichtigen Unterschieden.
Für dieses Projekt habe ich beschlossen, reaktive Formulare für alle Vorteile zu verwenden, die mit einem Strcuterd -Datenmodell oder einer Synchronizität zwischen Ihrer Vorlage (View/HTML) und Ihrem Controller (Komponentenklasse/Modell) verwendet werden. Außerdem haben Sie in großen Projekten im Allgemeinen möglicherweise komplexe Formen und die reactive forms erleichtern die Aufgabe sie für Sie einfacher.
Wenn Sie Ihr Projekt starten, können Sie es zuerst auf einer bereits vorhandenen Styling -Bibliothek stützen. Es hilft Ihnen, Zeit beim Stylen Ihrer Anwendung zu sparen.
Hier sind einige Beispiele für Bibliotheken, die Sie verwenden können:
Tatsächlich ist es für dieses Projekt bootstrap , der verwendet wurde (nicht ng-boostrap ).
Die meisten Bibliotheken wie React, Angular usw. sind mit einer Möglichkeit für Komponenten erstellt, ihren Zustand intern zu verwalten, ohne dass eine externe Bibliothek oder ein Tool erforderlich ist. Es eignet sich gut für Anwendungen mit wenigen Komponenten, aber da die Anwendung größer wird, wird das Verwalten von Staaten, die über Komponenten geteilt werden, zu einer Aufgabe.
In einer App, in der Daten unter den Komponenten geteilt werden, kann es verwirrend sein, tatsächlich zu wissen, wo ein Staat leben soll. Idealerweise sollten die Daten in einer Komponente in nur einer Komponente leben. Das Teilen von Daten zwischen Geschwisterkomponenten wird daher schwierig (Quelle).
Die Art und Weise, wie eine staatliche Verwaltungsbibliothek funktioniert, ist einfach. Es gibt ein zentrales Geschäft, das den gesamten Zustand der Anwendung hält. Jede Komponente kann auf den gespeicherten Status zugreifen, ohne Requisiten von einer Komponente an eine andere zu entfernen.
Zum Beispiel ist eine der am häufigsten verwendeten staatlichen Verwaltungsbibliotheken Redux. Und die Verwendung des React-Redux-Pakets erleichtert es. Natürlich haben Sie andere staatliche Verwaltungsbibliotheken für react wie Facebooks Fluss. Wählen Sie also, was Sie am meisten entsprechen, dass redux diesen flux mehr verwendet wird, da er nicht auf react zentriert ist und mit jeder anderen Ansichtsbibliothek verwendet werden kann.
Für angular haben Sie viele Optionen für das Staatsmanagement wie:
Nach dem Untersuchung der verschiedenen Optionen finde ich, dass Angular die beste Option ngxs . Es wird an erster Stelle für Angular geschrieben, sodass es nach dem Codestil des Angulars implementiert wird und die von Angular bereitgestellte Dependency Injection nimmt. Darüber hinaus ist es weniger ausführlich als andere Bibliotheken. Aus diesen Gründen haben wir die Wahl getroffen, es in vielen Unternehmen zu verwenden, mit denen ich zusammengearbeitet habe. Hier finden Sie eine vollständige Erklärung, warum ngxs verwendet werden soll.
Gebrauchte ngxs -Plugins für dieses Repo:
Das Fassadenmuster ist ein Software-Design-Muster, das üblicherweise in objektorientierter Programmierung verwendet wird. Analog zu einer Fassade in der Architektur ist eine Fassade ein Objekt, das als Front-Schnittstellenmaskierung komplexere zugrunde liegende oder strukturelle Code dient. Eine Fassade kann:
Während dies eine ziemlich triviale Veränderung (und eine zusätzliche Schicht) erscheint, hat die Fassade einen enormen positiven Einfluss auf die Produktivität der Entwickler und liefert in den Sichtschichten (Quelle) deutlich weniger Komplexität.
Ein weiterer Vorteil besteht darin, dass Ihre Controller (z. B. Angularkomponenten), Unabhängigkeit von der staatlichen Verwaltungsbibliothek, die Sie verwendet haben, unabhängig machen.
Für die Internationalisierung haben Sie zwei Optionen:
1 - Verwenden Sie das I18N -System des Angulars
2 - Verwenden Sie die NGX -Translate -Bibliothek.
Ich werde nicht in Details eingehen, aber die Wahl für dieses Projekt und viele andere Produktion wie Projekte bestand darin, ngx-translate zu verwenden. Die Hauptgründe sind, dass es für dasselbe Ergebnis einfacher ist, mit und Angular i18n zu verwenden und zu entwickeln, die Sie dazu zwingen, die Anwendung pro Sprache zu erstellen und die Anwendung auf Sprachänderung neu zu laden.
Um mehr Hilfe bei der Angular CLI zu erhalten, verwenden Sie ng help oder schauen Sie sich das Angular CLI Readme an.
Wenn Sie VS -Code verwenden, finden Sie möglicherweise die folgenden Plugins sehr hilfreich:
Copyright von @haythem-Ouederni. Alle Projektquellen werden unter der Apache -Lizenzlizenz veröffentlicht.
