🍿 🍨 🤷🏻 6 Konzepte, die ein Angular-Anwendungsarchitekt beherrschen muss ⛹🏿 💑 🌟

Angular ist eines der größten existierenden Web-Frameworks. Es enthält viele integrierte Funktionen. Und dies bedeutet, dass Sie sich für die vollständige Entwicklung von Angular mit einer ganzen Reihe von Konzepten befassen müssen. Der Autor des Materials, dessen Übersetzung wir heute veröffentlichen, glaubt, dass es sechs Konzepte gibt, die Angular-Entwickler benötigen, um fundierte Kenntnisse zu haben, um gut gestaltete Anwendungen zu erstellen. Er spricht jedoch nicht davon, den Quellcode für die Implementierung dieser Konzepte zu studieren, obwohl er selbst manchmal in den Code schauen muss. Es geht darum, die relevanten Mechanismen zu verstehen und sie in die Praxis umzusetzen.

1. Architektur, Module und Bibliotheken

In der Welt der Webentwicklung ist die modulare Architektur von Angular etwas Besonderes. Wahrscheinlich ist dies eine dieser Ideen, die schlechter sind als andere, die von Anfängern übernommen wurden.

Das Schwierigste dabei ist, dass die Webentwicklung bereits eine modulare Architektur verwendet. Natürlich spreche ich von ES6-Importen.

Da Angular-Module dem System eine zusätzliche Ebene der logischen Gruppierung hinzufügen, ist es wichtig, dass ihre Struktur so gut wie möglich den mit ihrer Hilfe gelösten Aufgaben entspricht.

Das Wissen, wie Anwendungsfunktionen mithilfe gut gestalteter Module getrennt und kombiniert werden, ist ein wesentlicher Bestandteil der Erstellung einer Angular-Anwendungsarchitektur.

▍Verschiedene Arten von Winkelmodulen

Es gibt verschiedene Arten von Winkelmodulen, die Sie beachten sollten:

Deklarationen / Widget-Modul. Module mit Deklarationen verschiedener Entitäten. Ein Beispiel für solche Module ist der Satz von Komponenten, Anweisungen und Pipes der Benutzeroberfläche.
Servicemodul. Servicemodule Zum Beispiel - HttpClientModule.
Routing-Modul. Routing-Module
Domain Feature Module. Module, die die Hauptaufgaben der Anwendung implementieren.
Core / Shared Module. Ein Kernmodul ist ein Modul zum Deklarieren globaler Dienste. Ein freigegebenes Modul ist ein Modul, in dem Komponenten für die Freigabe deklariert werden.

In diesem Material finden Sie Details zu Angular-Modulen.

▍ Bibliothek oder Modul?

Ich würde sagen, dass die obige Unterscheidung zwischen Modulen auf Bibliotheken ausgedehnt werden kann. Bei diesem Ansatz stellt sich heraus, dass es möglicherweise eine Bibliothek gibt, die nur Dienste enthält, eine Bibliothek, die die Route darstellt, und so weiter.

Ob ein Modul oder eine Bibliothek erstellt wird, hängt jedoch vom Projekttyp ab und davon, ob das Projekt durch ein Mono-Repository oder mehrere Repositorys dargestellt wird.

▍ Fragen, die Sie sich stellen müssen, bevor Sie ein Modul erstellen

Hier sind einige Fragen, die Sie stellen müssen, bevor Sie ein Modul schreiben:

? — , . , . , .
, ? . , , . , , .

2. ,

Das Teilen von Verantwortlichkeiten ist theoretisch einfach. In der Praxis ist es aber schon schwieriger. Entwickler wussten seit der Zeit von Angular.js, dass Komponenten so kompakt wie möglich und Services größer gemacht werden sollten. In neuen Versionen von Angular haben sich diese Ideen nicht wesentlich geändert.

Und heutzutage ist es wichtig, eine Vorstellung davon zu haben, was genau Teil der Komponenten sein sollte, was Teil der Dienste ist, und auch die Tatsache zu berücksichtigen, dass Direktiven wahrscheinlich ein sehr unterschätztes Merkmal von Angular sind.

▍Zustand

Die Antwort auf die Frage, wo genau der Status der Komponente gespeichert werden soll, hängt davon ab, wo die entsprechenden Daten benötigt werden. Sie können nämlich nur in der Komponente benötigt werden, da sie lokal und gekapselt sind, oder sie können außerhalb der Komponente benötigt werden.

Wenn die Komponenten den Status gemeinsam nutzen oder von Diensten auf den Status zugegriffen werden muss, sollte der Status im Dienst gespeichert werden. Wenn der Status im Dienst gespeichert ist, spielt es außerdem keine besondere Rolle, welche speziellen Statusverwaltungstools verwendet werden.
Wenn der Status lokal ist (wir sprechen beispielsweise über das Formular) und nur innerhalb der Komponente verwendet wird, sollte der Status einfach in der Komponente gespeichert werden.

▍Arbeiten mit dem DOM

Wahrscheinlich sollten die meisten DOM-Manipulationen in Direktiven durchgeführt werden. Stellen Sie sich vor, eine der Komponenten ist mit Drag-and-Drop-Funktionen ausgestattet.

Ich bin sicher, dass Sie in dieser Situation eine Komponente erstellen und die entsprechenden Ereignisse daraus binden können, aber wenn Sie dies tun, werden zwei Phänomene gemischt:

Beschreibung des Aussehens der Komponente.
Bestimmung des Komponentenverhaltens.

Direktiven sind eine Winkelfunktion, mit der Sie wiederverwendbare Mechanismen beschreiben können. In fast jedem Projekt, an dem ich gearbeitet habe, habe ich die unzureichende Verwendung von Richtlinien festgestellt. Richtlinien können einen erheblichen Teil der Verantwortung von Komponenten übernehmen.

Hier ist eine Übung für Sie: Finden Sie die größte Komponente in Ihrem aktuellen Projekt anhand der Anzahl der Codezeilen. Wird es darin verwendet Rendereroder ElementRef? Entsprechende Logik kann höchstwahrscheinlich auf die Richtlinie übertragen werden.

3. Ändern Sie die Erkennung und das Rendern

Wenn es darum geht, die Benutzeroberfläche neu zu rendern, wird in Angular alles wie von Zauberhand unter Verwendung der internen Mechanismen des Frameworks ausgeführt.

Wenn Sie die Anwendung jedoch so optimieren müssen, dass die Benutzeroberfläche nur dann neu gerendert wird, wenn dies erforderlich ist, müssen Sie sich mit dieser „Magie“ auseinandersetzen. Um das Rendering zu verbessern, müssen Sie sich nicht nur auf Wissen, sondern auch auf Intuition verlassen.

Ein Angular-Anwendungsarchitekt sollte sich wahrscheinlich bewusst sein, dass eine Änderungserkennungsstrategie verwendet wird, um die Renderleistung zu optimieren onPush. Aber im Laufe der Arbeit läuft nicht immer alles wie erwartet. Insbesondere, wenn die Vorlagen keine beobachtbaren Objekte und asynchronen Pipes verwenden.

▍ Verbesserte Änderungserkennung

Um den im Projekt verwendeten Änderungserkennungsprozess zu verbessern, ist es sinnvoll, mit den folgenden Ideen zu beginnen:

Es ist notwendig, alle Daten als unveränderlich zu betrachten. Rx-basierte Statusverwaltungsbibliotheken können hier sehr nützlich sein.
Um Daten in Vorlagen auszugeben, sollten nur (oder hauptsächlich) beobachtbare Objekte verwendet werden. Bei Verwendung eines lokalen Staates lohnt es sich, sich zu bewerben BehaviorSubject.

Wenn Sie leistungsstarke Angular-Anwendungen entwickeln möchten, müssen Sie sich nur sehr gut mit Problemen bei der Änderungserkennung befassen. Tatsache ist, dass bei hoher Leistung nicht einmal „die Schnittstelle bei Bedarf aktualisiert wird“. Dies ist "Aktualisieren der Schnittstelle nur, wenn es benötigt wird."

▍ Überwindung von Einschränkungen der Winkelleistung

Das Reduzieren der Anzahl von Re-Renderings der Anwendungsoberfläche ist eines der Geheimnisse, mit denen Sie schnelle und effiziente Anwendungen erstellen können. Manchmal muss die Anwendungsleistung jedoch die vom Angular-Gerät selbst festgelegten Grenzen überschreiten. Zu solchen Anwendungen zählen Spiele, Projekte, deren Daten häufig aktualisiert werden, Seiten mit großen und komplexen Listen usw.

Wenn Sie wirklich das absolute Maximum aus der Angular-Leistung herausholen müssen, bedeutet dies, dass Sie auf eine Technik zurückgreifen sollten, bei der Zone.js entfernt und die Benutzeroberfläche mithilfe der neuesten Ivy-Funktionen genau aktualisiert wird. Hier ist das Material dazu.

4. Routing

Routing ist nicht nur eine Darstellung von SPA in Form vieler virtueller Seiten. Außerdem werden Anwendungspakete bei Bedarf mithilfe der Funktionen zum verzögerten Laden von Materialien für das Angular-Routing-Subsystem geladen.

Wenn Sie an einer großen Anwendung arbeiten und die Bundle-Größe dieser Anwendung 1 MB überschreitet, wissen Sie wahrscheinlich bereits, warum dies wichtig ist. In der Tat wird niemand die Aussicht finden, große Datenmengen herunterzuladen, um mit einer bestimmten Anwendung zu arbeiten.

Das Routing sollte nicht nur zum Trennen von Routen der obersten Ebene verwendet werden, sondern auch zum Organisieren der Arbeit mit den flacheren und tieferen Teilen der Schnittstelle.

Auf diese Weise können Sie den Inhalt von Bundles nach Hauptrouten aufteilen und Anwendungen in kleine Teile aufteilen, die erst dann an Benutzer übertragen werden müssen, wenn eine explizite Aufforderung zum Herunterladen erfolgt.

▍ Beispiel: Komponente mit Registerkarten

Angenommen, wir entwickeln eine Benutzeroberfläche, die Registerkarten verwendet. Darüber hinaus ist jede Registerkarte unabhängig von den anderen. Dies ist eine ideale Situation, in der jeder Registerkarte ihre eigene Route zugewiesen werden kann und das verzögerte Laden von Daten organisiert werden kann, während der nur die Daten der ausgewählten Registerkarte an den Client übertragen werden.

Willst du ein anderes Beispiel? Was ist mit Popups und modalen Fenstern? Ihr Code muss unbedingt nicht in den Materialien enthalten sein, die im Originalpaket des Projekts enthalten sind. Der Code solcher Fenster ist sinnvoll, nur dann geladen zu werden, wenn sie benötigt werden, jedoch nicht früher.

Wenn Sie sich vor dem Anwenden solcher Ideen inspirieren lassen möchten, empfehlen wir Ihnen einen Blick auf die Dokumentation der Komponente @ angle / material / tabs , in der das obige Muster implementiert ist.

5. Formulare

Die meisten CRUD-Anwendungen bestehen im Wesentlichen aus vielen Formen. Es ist sehr wahrscheinlich, dass Sie viel Zeit damit verbringen, Formulare zu erstellen. Daher ist es wichtig, dass jemand, der Angular-Architekt werden möchte, die Arbeit mit Formularen richtig beherrscht.

Die meisten Ihrer Formulare verwenden wahrscheinlich ein Modul ReactiveFormsModule. Und wenn sie nicht aus einem einzigen Steuerelement bestehen, wird bei Verwendung ngModelder bidirektionalen Datenbindung implementiert.

Die Angular-API für die Arbeit mit Formularen ist ziemlich einfach zu erlernen. Um eine hervorragende Verwendung dieser API zu erreichen, reicht es im Allgemeinen aus, die Dokumentation ordnungsgemäß zu studieren und zu wissen, welche Probleme bei der Arbeit mit Formularen auftreten können.

Das wichtigste wissenswerte Problem ist, dass die Formulare in Angular nicht an die zugrunde liegenden Datentypen gebunden sind. Dies ist wahrscheinlich das Unangenehmste an der Arbeit mit Mechanismen, die ansonsten sehr gut gemacht sind. Infolgedessen stellt sich heraus, dass der Entwickler sorgfältig überwachen muss, ob die Formulare den Datenstrukturen entsprechen, die bei der Arbeit mit ihnen verwendet werden.

6. RxJS

Und das letzte auf unserer Liste, wenn auch nicht das geringste, ist die RxJS-Technologie.

Ich bin überzeugt, dass eines der mächtigsten Merkmale von Angular die tiefe Integration dieses Frameworks in Rx und funktionale reaktive Programmierung ist.

Um Angular wirklich zu beherrschen und den Weg für das Design hochwertiger Anwendungen zu ebnen, müssen Sie zuerst Rx oder zumindest die wichtigsten Bediener untersuchen. Es ist schwer, ein wirklich fortgeschrittener Angular-Entwickler zu sein, ohne viele Stunden damit zu verbringen, Rx zu verstehen.

Es gibt zwei Gründe, Rx zu lernen, um Angular-Anwendungen zu entwickeln: Leistung und asynchrone Datenverarbeitung.

Die asynchrone Datenverarbeitung ist eine besonders schwierige Aufgabe in modernen, hoch interaktiven Anwendungen. Deshalb sollten Sie Versprechen vergessen, oh setTimeoutund oh setInterval, und anfangen, im Rx-Stil zu arbeiten.

Ein weiterer wichtiger Grund, Rx zu lernen, ist die Optimierung der Anwendungsleistung. Für den Anfang ist es natürlich ausreichend, asynchrone Pipes zu verwenden, aber manchmal reicht dies nicht aus. Sie können beispielsweise das erneute Rendern von Komponenten steuern, indem Sie nur die Ereignisse durch die Pipe leiten, deren Auftreten die Notwendigkeit eines erneuten Renderns impliziert.

Rx bietet dem Entwickler viele Operatoren, mit denen er etwas zwischenspeichern oder in Pakete einbauen kann. Dies führt zu einer optimierten Anwendungsleistung. Hier Material über die RxJS-Muster.

Zusammenfassung

Ich habe hier eine kurze Liste von Themen aufgeführt, die es wert sind, für jemanden untersucht zu werden, der ein leistungsstarker Angular-Entwickler werden möchte, oder für jemanden, der Angular-Anwendungsarchitekt werden möchte.

Sie können dieser Liste noch viel mehr hinzufügen. Aber unter anderem möchte ich nicht vergessen, dass Sie mit den Grundlagen beginnen müssen, um wirklich etwas über die Welt der Webentwicklung zu lernen. Dies sind JavaScript, CSS, Entwurfsmuster, saubere Code-Schreibtechniken, Tools und vieles mehr.

Und was würden Sie für diejenigen empfehlen, die lernen möchten, wie man hochwertige Angular-Anwendungen entwirft?

6 Konzepte, die ein Angular-Anwendungsarchitekt beherrschen muss