Die fehlende Einführung in eckige und moderne Entwurfsmuster

Angular (aka Angular 2, 4, 5, 6…) ist ein neues Framework, das von Grund auf neu geschrieben wurde und das nun bekannte AngularJS-Framework (aka Angular 1.x) ersetzt.

Angular ist nicht nur ein Framework, sondern sollte auch als eine Plattform betrachtet werden, die über einen vollständigen Satz von Tools verfügt, z. B. eine eigene CLI, Debug-Dienstprogramme oder Leistungstools.

Angular gibt es schon seit einiger Zeit, aber ich habe immer noch das Gefühl, dass es nicht die Liebe bekommt, die es verdient, wahrscheinlich wegen anderer Spieler auf dem Gebiet wie React oder VueJS. Die Einfachheit hinter diesen Frameworks kann auf jeden Fall attraktiv sein, aber meiner Meinung nach fehlt ihnen das Wesentliche bei der Erstellung großer Apps für Unternehmen: ein solider Rahmen, der sowohl erfahrene Entwickler als auch Anfänger in die gleiche Richtung führt, und eine rationale Konvergenz von Tools und Mustern und Dokumentation. Ja, die Angular-Lernkurve scheint etwas steil zu sein, aber es lohnt sich auf jeden Fall.

Beginnen

Neuling

Wenn Sie noch nicht mit Angular vertraut sind, werden Sie möglicherweise von der Menge neuer Konzepte überwältigt sein. Bevor Sie sich mit der Dokumentation befassen, sollten Sie mit diesem fortschrittlichen Lernprogramm beginnen, das Sie Schritt für Schritt bei der Erstellung einer vollständigen Angular-Anwendung unterstützt.

AngularJS-Veteran

Wenn Sie aus AngularJS kommen und direkt in der neuen Version arbeiten möchten, sollten Sie sich unbedingt die Kurzreferenz AngularJS vs. Angular ansehen.

Spickzettel

Bis Sie die vollständige Angular-API auswendig können, möchten Sie diese möglicherweise beibehalten
Cheatsheet, das die Syntax und Funktionen auf einer einzelnen Seite wieder aufnimmt.

Gestaltungsrichtlinie

Gute Nachrichten, es gibt einen offiziellen Angular Style Guide, den das Team geschrieben hat.

Dieser Styleguide enthält nicht nur Codierungsregeln, sondern auch Ratschläge und Best Practices für eine gute Anwendungsarchitektur und ist eine wichtige Lektüre für den Anfang. Wenn Sie weiter unten nachlesen, finden Sie sogar viele Erklärungen für einige Entwurfsoptionen des Frameworks.

FAQ

In Angular gibt es viel zu graben und einige Fragen beschäftigen die Leute häufig. Tatsächlich scheinen die meisten unklaren Dinge mit Modulen zu tun zu haben, zum Beispiel die gefürchtete Frage „Core vs. Shared Module“.

Die Jungs von Angular haben vielleicht bemerkt, dass sie auf ihrer Website eine nette FAQ finden, die alle gängigen Fragen zu Modulen beantwortet. Zögern Sie nicht, einen Blick darauf zu werfen, auch wenn Sie glauben, mit Angular genug Erfahrung zu haben

Tiefer gehen

Auch wenn sie nicht obligatorisch sind, wurde Angular für die Verwendung von Entwurfsmustern entwickelt, an die Sie möglicherweise nicht gewöhnt sind, z. B. reaktive Programmierung, unidirektionaler Datenfluss und zentrales Statusmanagement.

Diese Konzepte lassen sich nur schwer in wenigen Worten zusammenfassen, und obwohl sie eng miteinander verbunden sind, betreffen sie bestimmte Teile eines Anwendungsflusses, von denen jeder für sich genommen recht tief greifend ist.

Hier finden Sie im Wesentlichen eine Liste guter Ansatzpunkte, um mehr zu diesen Themen zu erfahren.

Reaktive Programmierung

Sie wissen es vielleicht nicht, aber Angular ist nun ein reaktives System. Obwohl Sie nicht gezwungen sind, reaktive Programmiermuster zu verwenden, bilden sie den Kern des Frameworks, und es wird definitiv empfohlen, sie zu erlernen, wenn Sie das Beste aus Angular herausholen möchten.

Angular verwendet RxJS, um das Observable-Muster zu implementieren.

Ein Observable ist ein Strom von asynchronen Ereignissen, die mit Array-ähnlichen Operatoren verarbeitet werden können.
Beispiel Beobachtbarer Ereignisstrom

Vom Versprechen zum Observablen

Während AngularJS bei der Verarbeitung asynchroner Ereignisse stark auf Promises angewiesen war, werden in Angular jetzt Observables verwendet. Auch wenn ein Observable in bestimmten Fällen, z. B. bei HTTP-Anfragen, in ein Promise umgewandelt werden kann, wird empfohlen, das neue Paradigma zu übernehmen, da es viel mehr kann als Promises, und zwar mit viel weniger Code. Dieser Übergang wird auch im Lernprogramm Angular erläutert. Sobald Sie den Wechsel vorgenommen haben, werden Sie nie wieder zurückblicken.

Referenzen lernen

  • Was ist reaktives Programmieren ?, schön erklärt durch eine einfache abgebildete Geschichte (5 min)
  • Die Einführung in die reaktive Programmierung, die Sie vermisst haben, der Titel sagt alles (30 min)
  • Funktionale reaktive Programmierung für Angular 2-Entwickler, siehe die Prinzipien der funktionalen reaktiven Programmierung in der Praxis mit Angular (15 min)
  • RxMarbles, eine grafische Darstellung von Rx-Operatoren, die das Verständnis ihrer Verwendung erheblich erleichtern

Unidirektionaler Datenfluss

Im Gegensatz zu AngularJS, dessen Verkaufsargument die bidirektionale Datenbindung war, die bei komplexen Anwendungen große Probleme bereitete, erzwingt Angular jetzt einen unidirektionalen Datenfluss.

Was bedeutet das? Mit anderen Worten bedeutet dies, dass die Änderungserkennung keine Zyklen verursachen kann, was einer der problematischen Punkte von AngularJS war. Es hilft auch dabei, einfachere und vorhersehbarere Datenflüsse in Anwendungen beizubehalten und die Leistung erheblich zu verbessern.

Datenfluss in eine Richtung

Warten Sie, warum wird in der Angular-Dokumentation eine bidirektionale Bindungssyntax erwähnt?

Wenn Sie genau hinschauen, ist die neue bidirektionale Bindungssyntax nur syntaktischer Zucker, um zwei bidirektionale Bindungen (eine Eigenschafts- und eine Ereignisbindung) zu kombinieren und den Datenfluss in einer Richtung zu halten.

Diese Änderung ist sehr wichtig, da sie häufig zu Leistungsproblemen bei AngularJS führte und eine der Säulen darstellt, die eine bessere Leistung in neuen Angular-Apps ermöglichen.

Während Angular versucht, musterunabhängig zu bleiben und mit herkömmlichen MV * -Mustern verwendet werden kann, wurde es mit Blick auf reaktive Programmierung entwickelt und glänzt wirklich, wenn es mit reaktiven Datenflussmustern wie verwendet wird
Redux, Flux oder MVI.

Zentrales Staatsmanagement

Wenn die Größe von Anwendungen zunimmt, kann es mühsam werden, den Überblick über den Zustand und den Datenfluss aller einzelnen Komponenten zu behalten, und es ist in der Regel schwierig, diese zu verwalten und Fehler zu beheben.

Das Hauptziel einer zentralisierten Statusverwaltung besteht darin, Statusänderungen vorhersehbar zu machen, indem bestimmte Einschränkungen für die Art und Weise und den Zeitpunkt von Aktualisierungen mithilfe eines unidirektionalen Datenflusses festgelegt werden.

Dieser Ansatz wurde erstmals bei React mit der Einführung der Flux-Architektur populär gemacht. Viele Bibliotheken entstanden, als sie versuchten, das ursprüngliche Konzept anzupassen und zu verfeinern, und eine davon gewann durch die Bereitstellung einer einfacheren und eleganteren Alternative massive Popularität: Redux.

Redux ist gleichzeitig eine Bibliothek (mit dem großen R) und ein Entwurfsmuster (mit dem kleinen R), wobei letzteres Framework-unabhängig ist und sehr gut mit Angular zusammenarbeitet.

Das Redux-Designmuster basiert auf diesen drei Prinzipien:

  • Der Anwendungsstatus ist eine einzelne unveränderliche Datenstruktur
  • Eine Zustandsänderung wird durch eine Aktion ausgelöst, ein Objekt, das beschreibt, was passiert ist
  • Reine Funktionen, die Reduzierer genannt werden, nehmen den vorherigen Zustand und die nächste Aktion, um den neuen Zustand zu berechnen

Die Kernkonzepte hinter diesen Prinzipien werden in diesem Beispiel gut erklärt (3 Minuten).

Der Redux-Statusaktualisierungszyklus

Für die Interessenten war das Redux-Muster vor allem von The Elm Architecture und dem CQRS-Muster inspiriert.

Welche Bibliothek soll verwendet werden?

Sie können Angular mit jeder beliebigen Zustandsverwaltungsbibliothek arbeiten lassen. Am besten verwenden Sie jedoch NGXS oder @ngrx. Beide funktionieren genauso wie die beliebte Redux-Bibliothek, jedoch mit einer engen Integration in Angular und RxJS und einigen netten zusätzlichen Entwickler-Dienstprogrammen.

NGXS basiert auf den gleichen Konzepten wie @ngrx, jedoch mit weniger Boilerplate und einer schöneren Syntax, was es weniger einschüchternd macht.

Einige Ressourcen für den Einstieg:

  • Angular NGXS Tutorial mit Beispiel von Grund auf neu, ein geführtes Tutorial für NGXS (10 min)
  • Erstellen Sie eine bessere Angular 2-Anwendung mit Redux und ngrx, ein nettes Tutorial für @ngrx (30 min)
  • Umfassende Einführung in @ ngrx / store, eine ausführliche Einführung in diese Bibliotheksnutzung in Angular (60 Minuten)

Wann benutzt man es?

Möglicherweise haben Sie bemerkt, dass die meisten Starter-Vorlagen kein sofort einsatzbereites zentrales Statusverwaltungssystem enthalten.
Warum das? Obwohl die Verwendung dieses Musters viele Vorteile bietet, liegt die Wahl letztendlich bei Ihrem Team und dem, was Sie mit Ihrer App erreichen möchten.

Beachten Sie, dass die Verwendung eines einzelnen zentralen Status für Ihre App eine neue Ebene mit einer Komplexität einführt, die je nach Ihrem Ziel möglicherweise nicht erforderlich ist.

Performance optimieren

Während die neue Angular-Version die meisten Leistungsprobleme, die mit AngularJS auftreten können, konstruktionsbedingt behebt, gibt es immer Raum für Verbesserungen. Denken Sie jedoch daran, dass die Bereitstellung einer App mit guter Leistung häufig eine Frage des gesunden Menschenverstands und vernünftiger Entwicklungspraktiken ist.

Hier ist eine Liste der wichtigsten Punkte, die Sie in Ihrer App überprüfen müssen, um sicherzustellen, dass Sie Ihren Kunden die bestmögliche Erfahrung bieten:

Stellen Sie nach Durchlaufen der Checkliste sicher, dass Sie auch eine Überprüfung Ihrer Seite mit Lighthouse, dem neuesten Google-Tool, durchführen. Mit diesem Tool erhalten Sie aussagekräftige Informationen über die Leistung Ihrer App, die Barrierefreiheit, die Kompatibilität mit Mobilgeräten und vieles mehr.

Angular auf dem Laufenden halten

Die Winkelentwicklung schreitet schnell voran, und Aktualisierungen der Kernbibliotheken und -tools werden regelmäßig durchgeführt.

Glücklicherweise stellt das Angular-Team Tools zur Verfügung, mit denen Sie die Aktualisierungen durchführen können:

  • Mit npm run ng update können Sie Ihre App und ihre Abhängigkeiten aktualisieren
  • Die Angular-Update-Website führt Sie durch Angular-Änderungen und -Migrationen und bietet schrittweise Anleitungen von einer Version zur anderen.

Diese Anleitung ist in allen von ngX-Rocket erstellten Angular-Projekten enthalten. Wenn Sie ein erweiterbares, gut dokumentiertes Starterkit für Unternehmen suchen, sollten Sie es ausprobieren!