Heute veröffentlichen wir den zweiten Teil der Übersetzung des Artikels, der eine Reihe von Empfehlungen für Angular-Entwickler enthält. Im
vorherigen Teil wurden 11 Tipps vorgestellt, in denen wir den gleichen Betrag berücksichtigen werden.
1. Kleine Komponenten zur Wiederverwendung geeignet
Suchen Sie Fragmente in Komponenten, die wiederverwendet werden können, und erstellen Sie darauf basierend neue Komponenten. Machen Sie Komponenten so dumm wie möglich, damit sie in mehr Szenarien verwendet werden können. Eine "dumme" Komponente enthält keine spezifische Logik, deren Funktionsweise ausschließlich von den ihr zur Verfügung gestellten Eingabedaten abhängt.
Bei der Arbeit mit Komponenten sollte die folgende allgemeine Regel eingehalten werden: Die tiefste verschachtelte Komponente im Komponentenbaum sollte auch die „dümmste“ sein.
▍ Erklärungen
Durch die Wiederverwendung von Komponenten wird die Codeduplizierung reduziert, was die Projektunterstützung und Änderungen vereinfacht.
Dumme Komponenten sind einfacher als andere, daher ist es weniger wahrscheinlich, dass Fehler in ihnen auftreten. Durch die Verwendung solcher Komponenten kann der Entwickler besser über die offene API der Komponente nachdenken und Probleme lösen.
2. Über die von den Komponenten gelösten Aufgaben
Vermeiden Sie nach Möglichkeit das Vorhandensein von Logikkomponenten, die nicht zur Visualisierung von Daten verwendet werden.
▍ Erklärungen
Komponenten dienen als Werkzeuge zur Darstellung von Informationen und zur Steuerung der Funktionsweise von Schnittstellen. Jede Geschäftslogik sollte aus den Komponenten entfernt und nach Möglichkeit in getrennten Methoden oder Diensten platziert werden, um die Geschäftslogik von der Logik der Darstellung von Informationen zu trennen.
Wenn Geschäftslogik als separate Services dargestellt wird, ist der Unit-Test normalerweise einfacher. Mit diesem Ansatz kann es von verschiedenen Komponenten wiederverwendet werden, die dieselben Funktionen benötigen.
3. Über großartige Methoden
Wenn sich herausstellt, dass der Methodencode sehr lang ist, weist dies normalerweise darauf hin, dass ein solches Modul zu viele Probleme löst. Eine solche Methode als unabhängige Entität löst möglicherweise nur ein Problem, aber darin befindet sich möglicherweise Code, der mehrere verschiedene Operationen ausführt. Ein solcher Code kann in Form separater Methoden ausgegeben werden, von denen jede wiederum ein einzelnes Problem lösen muss. Danach sollten Sie diese Methoden anstelle der entsprechenden Codefragmente in der ursprünglichen Methode verwenden.
▍ Erklärungen
Long-Code-Methoden sind schwer zu lesen, zu verstehen und zu warten. Darüber hinaus sind solche Methoden fehleranfällig, da das Ändern einer dieser Methoden viele andere Mechanismen der Methode beeinflussen kann. Langer Code bedeutet komplizierteres Refactoring, und dieser Vorgang ist in jeder Anwendung sehr wichtig.
In diesem Zusammenhang können wir einen solchen Indikator wie die
zyklomatische Komplexität des Programms erwähnen. Es
gibt TSLint-
Regeln zum Identifizieren der zyklomatischen Komplexität, die in einem Projekt verwendet werden können, um Fehler zu vermeiden, die in zu komplexem Code auftreten können. Mit ihrer Hilfe können Sie die Qualität des Codes bewerten und mögliche Probleme mit seiner Unterstützung vermeiden.
4. DRY-Prinzip
DRY (Nicht wiederholen, nicht wiederholen) ist ein Prinzip, das befolgt werden sollte, um sicherzustellen, dass an verschiedenen Stellen des Projekts keine Kopien derselben Codefragmente vorhanden sind. Solche Codefragmente sollten in Form von unabhängigen Entitäten, beispielsweise Methoden, erkannt werden und ihre Aufrufe verwenden, wenn zuvor wiederholter Code verwendet wurde.
▍ Erklärungen
Wenn derselbe Code an verschiedenen Stellen der Anwendung verwendet wird, führt dies dazu, dass Sie dies an vielen Stellen tun müssen, wenn Sie Änderungen an diesem Code vornehmen müssen. Infolgedessen ist das Programm schwieriger zu warten, und es ist fehleranfällig, z. B. weil nicht alle Fragmente desselben Codes korrekt bearbeitet wurden. Dies erhöht außerdem die Zeit, die erforderlich ist, um Änderungen am Code vorzunehmen und ihn zu testen.
Wenn Sie auf etwas Ähnliches stoßen, formatieren Sie den sich wiederholenden Code als unabhängige Entität und verwenden Sie ihn, anstatt Fragmente zu wiederholen. Dies führt dazu, dass Sie Änderungen nur an einer Stelle vornehmen müssen, um Änderungen vorzunehmen, und während des Testens müssen Sie nur einen Code und nicht mehrere testen. Je weniger doppelter Code in der Anwendung vorhanden ist, desto schneller wird er von den Benutzern heruntergeladen.
5. Caching-Mechanismen
Wenn Sie verschiedene APIs aufrufen, werden Sie feststellen, dass sich die Antworten einiger von ihnen fast nie ändern. In solchen Fällen können Sie dem Programm Daten-Caching-Tools hinzufügen und im Cache speichern, was ähnliche APIs zurückgeben. Wenn Sie die nächste Anforderung ausführen, können Sie sich an den Cache wenden. Wenn dieser bereits über die erforderlichen Anforderungen verfügt, können Sie diese Daten verwenden. Wenn er nicht benötigt wird, führen Sie die eigentliche Anforderung aus und legen Sie eine Antwort darauf in den Cache.
Wenn sich die von bestimmten APIs empfangenen Daten in bestimmten Intervallen ändern, können Sie sie für eine bestimmte Zeit zwischenspeichern. Wenn Sie eine Anfrage an solche APIs stellen, können Sie entscheiden, woher die erforderlichen Daten stammen sollen.
▍ Erklärungen
Mit einem Caching-Mechanismus können Sie unnötige API-Anforderungen vermeiden. Wenn die Anwendungsaufrufe an die API nur ausgeführt werden, wenn dies unbedingt erforderlich ist, und die Daten, die die Anwendung bereits empfangen hat, nicht erneut angefordert werden, verbessert sich die Leistung der Lösung, insbesondere weil sie nicht ständig auf Antworten von bestimmten Netzwerkdiensten warten muss. Dieser Ansatz ermöglicht es außerdem, Datenverkehr zu sparen, da nicht immer wieder dieselben Daten heruntergeladen werden.
6. Anmeldemuster
Wenn Ihre Vorlagen mindestens eine Logik haben, sogar einen einfachen
&& Ausdruck, sollte diese Logik extrahiert und in die entsprechende Komponente eingefügt werden.
▍ Erklärungen
Wenn die Vorlage über eine Logik verfügt, bedeutet dies, dass eine solche Vorlage keinen Komponententests unterzogen werden kann und daher die Wahrscheinlichkeit von Fehlern beim Ändern des Codes der Vorlage zunimmt.
»Um
// <p *ngIf="role==='developer'"> Status: Developer </p> // public ngOnInit (): void { this.role = 'developer'; }
▍Nachher
// Vorlage
<p * ngIf = "showDeveloperStatus"> Status: Entwickler
// public ngOnInit (): void { this.role = 'developer'; this.showDeveloperStatus = true; }
7. Arbeiten Sie mit Linien
Wenn Sie eine Variable vom Typ Zeichenfolge haben, die Werte aus einer begrenzten Menge enthalten kann, geben Sie beim Deklarieren eine Liste möglicher Werte an, anstatt sie als reguläre Zeichenfolge zu deklarieren.
▍ Erklärungen
Eine durchdachte Beschreibung des Variablentyps erleichtert das Erkennen und Beseitigen von Fehlern, da diese bei diesem Ansatz in der Phase der Kompilierung des Programms und nicht zur Laufzeit erkannt werden.
»Um
private myStringValue: string; if (itShouldHaveFirstValue) { myStringValue = 'First'; } else { myStringValue = 'Second' }
▍Nachher
private myStringValue: 'First' | 'Second'; if (itShouldHaveFirstValue) { myStringValue = 'First'; } else { myStringValue = 'Other' } // Type '"Other"' is not assignable to type '"First" | "Second"' (property) AppComponent.myValue: "First" | "Second"
8. Informationen zur Verwaltung des Anwendungsstatus
Erwägen Sie die Verwendung von
@ ngrx / store , um den Status Ihrer Anwendung zu steuern, und
@ ngrx / effect, um Nebenwirkungen zu implementieren. Zustandsänderungen werden durch Aktionen beschrieben und von reinen Funktionen ausgeführt, die als Reduzierer bezeichnet werden.
▍ Erklärungen
@ ngrx / store isoliert die Logik zum Status der Anwendung an einem Ort und macht sie über das gesamte Projekt hinweg einheitlich. Hier gibt es außerdem einen Memoisierungsmechanismus, der beim Arbeiten mit Speicher funktioniert und die Anwendungsleistung verbessert. Der @ ngrx / store-Mechanismus führt in Kombination mit der Änderungserkennungsstrategie von Angular zu schnelleren Anwendungen.
9. Über die Unveränderlichkeit des Anwendungsstatus
Wenn Sie @ ngrx / store verwenden, sollten Sie
die Bibliothek
ngrx-store-freeze verwenden, um den Anwendungsstatus unveränderlich zu machen. Diese Bibliothek verhindert Zustandsmutationen, indem sie Ausnahmen auslöst. Dies vermeidet versehentliche Änderungen im Status der Anwendung, die zu unvorhersehbaren Konsequenzen führen.
▍ Erklärungen
Das Ändern des Status einer Anwendung in Komponenten führt dazu, dass sich das Verhalten der Anwendung in Abhängigkeit von der Reihenfolge ändert, in der die Komponenten geladen werden. Dies verstößt gegen das mentale Modell der Redux-Vorlage. Infolgedessen können Änderungen neu definiert werden, wenn sich der Status des Repositorys ändert und die anschließende Arbeit damit bereits den neuen Status verwendet. Hier wenden wir das Prinzip der Aufgabentrennung an, nach dem sich die Komponenten auf Präsentationsebene befinden und nicht wissen sollten, wie der Status der Anwendung geändert werden soll.
10. Tools zum Testen von Anwendungen
Verwenden Sie spezielle Tools zum Testen von Anwendungen. Unter ihnen sind
Scherz und
Karma .
▍ Erklärungen
Jest ist ein von Facebook entwickeltes Unit-Testing-Anwendungsframework. Es unterstützt parallele Testausführungsmechanismen, die die Arbeit beschleunigen. Aufgrund der Tatsache, dass er Änderungen in der Codebasis berücksichtigen kann, werden in der nächsten Testsitzung nur Tests durchgeführt, die sich auf den geänderten Code beziehen. Dies verbessert die Fähigkeit, Testergebnisse zu analysieren. Darüber hinaus bietet Jest Metriken für die Testabdeckung und wird vom VS-Code-Editor und der WebStorm-IDE unterstützt.
Karmas Testläufer wurde vom AngularJS-Team entwickelt. Um die Tests durchzuführen, benötigt er einen echten Browser und ein DOM. Mit Karma können Sie Tests in verschiedenen Browsern ausführen. Jest wiederum benötigt beispielsweise keinen Chrome-Browser ohne Benutzeroberfläche oder phantom.js, da nur die Node.js-Plattform benötigt wird, damit dieses Framework funktioniert.
11. Server-Rendering
Wenn Sie die
Angular Universal- Technologie noch nicht verwendet haben, können Sie sie jetzt ausprobieren. Hiermit können Sie das serverseitige Rendern von Angular-Anwendungen organisieren. Infolgedessen werden statische, vorgerenderte HTML-Seiten an den Benutzer gesendet. Dies macht Anwendungen unglaublich schnell, da ihre Inhalte fast sofort in Browsern angezeigt werden, da der Browser keine JS-Bundles herunterladen und analysieren muss und keine Zeit verschwendet, um den Betrieb von Angular-Mechanismen sicherzustellen.
Darüber hinaus haben auf dem Server gerenderte Angular-Anwendungen Vorteile gegenüber regulären Anwendungen in Bezug auf CEOs. Angular Universal erstellt statische Seiten. Dies erleichtert Suchmaschinen das Indizieren solcher Seiten, da sie keinen JavaScript-Code ausführen müssen, um Seiten zu bilden.
▍ Erklärungen
Die Verwendung von Angular Universal kann die Anwendungsleistung erheblich verbessern. Kürzlich haben wir unsere Anwendung aktualisiert und Server-Rendering-Funktionen hinzugefügt. Dies hat zu einer Verkürzung der Ladezeit des Standorts von einigen Sekunden auf einige zehn Millisekunden geführt.
Dank dieses Ansatzes werden Seiten außerdem in den in sozialen Netzwerken verwendeten Inhaltsvorschaubereichen korrekt angezeigt. Die Zeit für die erste aussagekräftige Seitenanzeige (First Meaningful Paint) ist sehr kurz, was den Benutzern unnötiges Warten erspart.
Zusammenfassung
Anwendungsentwicklung ist der Weg, über den der Programmierer ständig Möglichkeiten findet, das zu verbessern, was er erstellt. Wenn Sie diesem Pfad folgen, können Sie die hier gegebenen Tipps zur Optimierung von Angular-Anwendungen nutzen. Wir sind sicher, dass ihre konsistente Anwendung jedem Entwicklungsteam zugute kommt und dass das daraus resultierende Ergebnis die Benutzer ansprechen wird, da dies aus ihrer Sicht dazu führen wird, dass sie mit stabileren und produktiveren Anwendungen arbeiten.
Liebe Leser! Wenn Sie der Angular-Entwicklergemeinde nützliche Tipps zur Verbesserung von Anwendungen geben können, tun Sie dies bitte.
