Winkel: Status im Jahr 2019

Jetzt ist der Sommer die Jahreszeit, in der verschiedene Konferenzen und andere Veranstaltungen auf der ganzen Welt stattfinden. Programmierer überwältigen derzeit buchstäblich mit neuen Informationen, die normalerweise nur schwer zu verarbeiten sind.

Das Front-End-Entwicklungsuniversum ähnelt einem Zug, der sich ohne Unterbrechung bewegt. Wir alle wissen, wie schwierig es ist, mit diesem Zug Schritt zu halten. Das Anschauen von Videos von Konferenzen nimmt viel Zeit in Anspruch. Daher ist klar, dass viele von uns nach der Büroarbeit lieber Filme auf Netflix ansehen.



Der Autor des Materials, dessen Übersetzung wir veröffentlichen, sagt, dass er sich deshalb entschlossen hat, allen zu helfen, die die Innovationen von Angular verstehen wollen. Hier werden wir über den aktuellen Zustand von Angular, über die neuen Funktionen dieses Frameworks und über aktuelle Trends sprechen.

Informationen zur Winkelvergrößerung

Laut Daten, die Brad Green, ein Mitglied des Angular-Entwicklungsteams, auf der ng-conf 2019 zur Verfügung gestellt hat, ist der Umfang von Angular im Laufe des Jahres um etwa 50% gewachsen!

Es ist klar, dass diese Daten durch die Tatsache beeinflusst werden könnten, dass viele Projekte gerade von Angular 1.X auf neuere Versionen des Frameworks umsteigen. Aber 50% sind immer noch ein beeindruckender Indikator.

Angular wächst nicht so schnell wie Svelte oder Vue. Dieses Framework wird nicht so häufig verwendet wie React. Im Gegensatz zu anderen Frameworks zu Ressourcen wie Reddit oder Twitter ist Angular jedoch bei guter Gesundheit und wird von Millionen von Entwicklern und Teams verwendet.

Angular verfügt über eine große und dynamische Infrastruktur.

Obwohl Angular über viele nützliche integrierte Tools verfügt, die von einem zentralen Entwicklungsteam erstellt wurden, ist sein Ökosystem, eine Community von Enthusiasten, die zu seiner Entwicklung beitragen, extrem groß. Sie ist außerdem mit Projekten von sehr hoher Qualität vertreten.

Zusammen mit dem Grundgerüst können Sie viele interessante Werkzeuge verwenden. Wir sprechen nämlich über Folgendes:

• Tiefe Integration mit exzellenten, sich dynamisch entwickelnden Tools. Unter diesen können TypeScript und RxJS notiert werden. Die Entwicklung dieser Technologien wirkt sich direkt positiv auf Angular aus.
• Verschiedene Arten von Bibliotheken zum Verwalten des Anwendungsstatus.
• Tools zur Analyse und Verbesserung der Codequalität. Wie Codelyzer .
• Bibliotheken mit Elementen, Komponenten, Anweisungen, Pipelines usw. der Benutzeroberfläche.
• Große Auswahl an Plugins für verschiedene IDEs.
• Bibliotheken und Frameworks zum Testen von Anwendungen.
• Hochwertige, detaillierte Dokumentation, an der sowohl die Community-Mitglieder als auch das Angular-Team arbeiten. Dies umfasst praktische Richtlinien, Leitfäden, Schulungsmaterialien, Bücher und Videokurse. Obwohl dies der letzte Punkt auf dieser Liste ist, ist er dennoch genauso wichtig wie die anderen.

In den folgenden Abschnitten konzentrieren wir uns auf einige besonders interessante Tools, die Sie bei der Entwicklung von Angular-Projekten verwenden können.

Angular CLI

▍Angular CLI und extrem einfacher Angular-Aktualisierungsprozess

Dies sind keine leeren Wörter. Hier finden Sie eine gute Geschichte darüber, wie das BlueWeb-Projekt, das jährlich eine halbe Milliarde Benutzer bedient, an einem Arbeitstag von Angular 7 auf Angular 8 aktualisiert wurde. Dies ist eine beeindruckende Leistung, da der Übergang von der zweiten zur vierten Version von Angular 30 Tage nach demselben Projekt dauerte.

Dies beweist den großen Wert der Angular CLI. Die Verwendung dieses Tools kann die Produktivität auf ein Niveau steigern, das ich persönlich noch nicht erreicht habe.

Heutzutage ist es sehr schwierig, sich vorzustellen, ohne die Angular CLI zu arbeiten.

▍ Schaltplan-Tool

Das Angular Schematics-Tool wird von Angular-Entwicklern wahrscheinlich täglich verwendet. Ich bin mir zum Beispiel sicher, dass Sie diesen Befehl häufig verwenden:

ng generate component my-component 

Es basiert auf dem in die Angular CLI integrierten Schematics-Tool.

Vielleicht ist es für Sie neu, dass Entwickler die Möglichkeit haben , ihre eigenen Schaltplanregeln zu erstellen . Ihre Verwendung erleichtert die Arbeit mit häufig verwendeten Codefragmenten.

▍API Builder

Mit API Builders können Sie vorhandene Teams erweitern oder erweitern . Sie können beispielsweise ein Team erstellen, das Tests mit Jest und Cypress anstelle von Jasmine und Protractor ausführt. Sie können beispielsweise einen alternativen Linter verwenden.

Neue interessante Funktionen des Frameworks

Zum Zeitpunkt des Schreibens dieses Materials wurde bereits Version 8 von Angular veröffentlicht, die verschiedene Verbesserungen und neue Funktionen enthält.

Hier gibt es nichts, was die Art und Weise, wie dieses Framework verwendet wird, ernsthaft ändern würde. Eine ähnliche Aussage bezüglich einer neuen Version eines Tools wird normalerweise als gute Nachricht angesehen. Aber in Angular 8 gibt es viele Verbesserungen, die sozusagen mit bloßem Auge nicht sichtbar sind. Dank ihnen werden Angular-Projekte kleiner und schneller. Diese Verbesserungen machen den Entwicklungsprozess von Angular-Anwendungen noch angenehmer als zuvor. Darüber hinaus verfügt die neue Version des Frameworks über ein neues Rendering-System, das fast vollständig einsatzbereit ist.

▍ Differenzbelastung

"Differenzielle Belastung", gemessen am Namen dieser Technologie, mag sehr kompliziert erscheinen, ist es aber nicht. Kurz gesagt, dank dieser Funktion generiert der Compiler zwei Bundles. Einer ist für moderne Browser. Es ist kein Polyfill-Code enthalten. Die zweite ist für ältere Versionen von Browsern.

Die neuesten Browser laden moderne Bundles herunter. Und ältere Browser, die speziell für sie entwickelte Polyfill-Download-Assemblys benötigen.

Dies ist eine sehr nützliche Innovation. Da die meisten Benutzer sehr wahrscheinlich mit den neuesten Versionen von Browsern arbeiten, führt dies dazu, dass Bundles mit Polyfills, die größer als moderne Bundles sind, nur von einer kleinen Anzahl von Benutzern verwendet werden.

EbWeb Worker

Sie haben wahrscheinlich bereits von Web-Workern gehört, daher werden wir uns nicht mit der Erklärung des Wesens dieser Technologie befassen. Möglicherweise wissen Sie jedoch nicht, wie einfach es ist, Web-Worker in Anwendungen in der neuen Angular-Version zu integrieren. Hier können Sie mehr darüber lesen.

▍ CDK Toolbox

CDK ist ein Toolkit, das von einem Team veröffentlicht wurde, das Angular-Komponenten entwickelt. Darin finden Sie von Angular Material verwendete Abstraktionen, die unabhängig von Stilen sind.

Dank des CDK verfügt der Entwickler beispielsweise über Anweisungen, mit denen Sie die folgenden Funktionen implementieren können:

• Arbeiten Sie mit Objekten im Stil von "Drag & Drop".
• Verwenden Sie Textbereiche, deren Größe automatisch geändert wird.
• Popups.
• Virtuelles Scrollen.

CDK ist ein äußerst nützliches Tool, da die meisten Anwendungen weit verbreitete Abstraktionen von hoher Qualität verwenden können, von denen jede nur eine eingeschränkte Funktionalität implementiert. Dies ist viel besser als die weit verbreitete und nicht immer gerechtfertigte Verwendung ausgewachsener Komponenten. Angular Material ist ein wunderbarer Satz von Komponenten, aber die Stärke von CDK besteht darin, dass der Entwickler seine eigenen Komponenten aus den Grundbausteinen erstellen kann.

▍ Ivy-Rendering-Engine

Ivy ist eine sehr interessante Neuentwicklung, bei der es sich um eine Rendering-Engine handelt. Die Arbeit an Ivy ist noch nicht abgeschlossen. Standardmäßig ist diese Engine deaktiviert. Ab Angular 7 kann es jedoch bereits aktiviert und verwendet werden. Ivy wird voraussichtlich die Haupt-Rendering-Engine in Angular 9 sein.

Folgendes können Sie von einem Ivy-Motor mit vollem Funktionsumfang erwarten:

• Reduzierung der Bündelgröße.
• Debuggen von Vorlagen.
• Schnellere Projektmontage, schnelleres Testen.
• Korrektur bestehender Fehler.

Wenn wir über das Debuggen sprechen, sehen Sie hier einen Screenshot, in dem Sie sehen können, wie der Haltepunkt in der Chrome-Konsole ausgelöst wird.


Code-Debugging

Wie Sie sehen können, gibt uns die ngForOf Direktive Informationen über den übergebenen Wert.

Winkel- und mobile Plattformen

OnicIonic

Ionic ist ein Framework für die Entwicklung mobiler Anwendungen. Obwohl die grundlegenden Komponenten mit Stencil erstellt wurden, bieten sie den Entwicklern Abstraktionen, mit denen Ionic mit Angular und anderen Frameworks verwendet werden kann.

▍NativeScript

NativeScript ist ein natives Framework für die Entwicklung mobiler Apps, das React Native ähnelt. Es bietet eine umfassende Integration in Angular - zusammen mit der Vue-Unterstützung und der Möglichkeit, es für die Entwicklung in reinem JavaScript zu verwenden. Leider war meine Erfahrung mit ihm nicht besonders erfolgreich. Ich kann es nicht mit React Native gleichsetzen. Wenn Sie jedoch ernsthaft mobile Anwendungen entwickeln möchten, probieren Sie NativeScript aus.

Testen

AsmJasmin und Winkelmesser

Jasmin und Winkelmesser brauchen keine Einführung. Dies sind Standardwerkzeuge zum Testen von Angular-Anwendungen. Sie sind zeitlich gut getestet, werden regelmäßig aktualisiert und funktionieren hervorragend mit Angular.

»Scherz und Zypresse

Das Testen von Angular-Anwendungen mit Jest und Cypress wurde dank neuer Tools ermöglicht, die auf den API-Buildern basieren, die Teil der Angular-CLI sind.

Jest ist ein auf Jasmin basierendes Unit-Testing-Framework. Es wird auf Facebook entwickelt. Dies ist ein Standard-Framework zum Testen von React-Projekten. Aufgrund seiner Geschwindigkeit ist es weit verbreitet. Viele Leute ziehen es vor, es Jasmin vorzuziehen. Wenn Sie auch zum Scherzen neigen, können Sie es jetzt zum Testen von Angular-Anwendungen verwenden.

Cypress ist ein hoch angesehenes End-to-End-Framework für Anwendungstests. Es ist kein Zufall, dass die Entwicklergemeinschaft das sehr gut behandelt. Es ist unabhängig von Selenium oder WebDriver. Mit Cypress können Sie mit Teamprotokollen arbeiten und wissen, wie der Netzwerkverkehr verwaltet wird. Es ist ziemlich stabil, so dass Sie erwarten können, dass die mit seiner Hilfe erzielten Ergebnisse ziemlich verständlich und vorhersehbar sind.

▍ Angular Testing Library Toolbox

Angular Testing Library ist eine Reihe von Tools zum Testen von Benutzeroberflächenkomponenten mit Schwerpunkt auf der Reproduktion von Benutzeraktionen.

Dies bedeutet, dass diese Bibliothek den Programmierer dazu drängt, sicherzustellen, dass er nicht programmgesteuert mit Komponenten arbeitet. Ziel ist es, das Verhalten von Komponenten zu testen. Die Bibliothek führt die Aktionen aus, die Benutzer normalerweise ausführen.

Wenn Sie beispielsweise mit Tools aus dieser Bibliothek arbeiten, werden solche Konstruktionen nicht verwendet:

 myComponent.onClick(); 

Stattdessen wird das natürliche Verhalten des Benutzers simuliert:

 const { getByText, click } = await render(CounterComponent, {    componentProperties: { counter: 5 } }); click(getByText('+')); 

Staatsverwaltung

▍NgRx

NgRx ist eine Bibliothek zur Verwaltung des Status von Anwendungen, die unter dem Einfluss von in Redux eingebetteten Ideen erstellt wurde. NgRx ist höchstwahrscheinlich die am häufigsten verwendete State-Management-Bibliothek in der Angular-Entwicklung. Der Name der Bibliothek deutet darauf hin, dass RxJs-Streams ernsthaft verwendet werden.

▍NGXS

NGXS ist eine alternative Bibliothek zum Verwalten des Status in Angular-Anwendungen, ähnlich wie Redux. Wenn Sie NGXS und RxJS vergleichen, stellt sich heraus, dass NGXS viele Klassen und Dekoratoren verwendet. Dies geschieht, um die Menge des Boilerplate-Codes zu reduzieren. Wahrscheinlich kann diese Funktion von NGXS bei der Auswahl einer Bibliothek für die Statusverwaltung entscheidend werden, wenn jemand, der nach einer solchen Bibliothek sucht, an die Verwendung von Klassen gewöhnt ist.

»Akita

Akita ist eine von Datorama entwickelte staatliche Verwaltungsbibliothek. Diese Bibliothek basiert ebenfalls auf RxJS. Wenn Sie es mit den beiden vorherigen Bibliotheken vergleichen, stellt sich heraus, dass es in Projekten verwendet werden kann, in denen Angular nicht verwendet wird. Dies bedeutet, dass die langfristige Auswahl der Akita-Bibliothek zu verbesserten Möglichkeiten für die Wiederverwendung von Projektcode führen kann.

▍ Vielleicht einfach RxJs nehmen?

Ich kann die im Titel dieses Abschnitts gestellte Frage positiv beantworten. Es hängt alles davon ab, ob Sie Bibliotheken mögen, die an Redux erinnern, und ob das Projekt eine Bibliothek benötigt, um den Status zu verwalten. Bei Bedarf können Sie Dienste erstellen, die den Status mithilfe von Standard- RxJS- Tools speichern.

Komponentenbibliotheken der Benutzeroberfläche

▍StoryBook

StoryBook ist nicht wirklich eine Bibliothek von UI-Komponenten. Dies ist ein Tool, mit dem Sie isolierte Komponenten erstellen und Komponenten und ihre Varianten untersuchen können.

Dies ist ein großartiges Werkzeug. Bisher war es nur für React-Entwickler verfügbar. Ich habe sie damals beneidet. Aber jetzt können Angular-Entwickler es verwenden, also kann ich einfach nicht anders, als es zu erwähnen.

NgAngulares Material

Hier werden wir ein paar Worte über die berüchtigte Angular Material- Bibliothek sagen, die den Händen eines modernen Entwicklers einen schönen Satz von Komponenten bietet, die für die neueste Version von Angular entwickelt wurden.

Backends für Winkelanwendungen

▍Feuerbasis

Firebase ist eine Anwendungsentwicklungsplattform von Google. Dies hat zur Folge, dass es eine offizielle Bibliothek für Firebase und Angular - AngularFire gibt . Diese Bibliothek verwendet RxJS-Observables zum Streamen von Daten. Es ist tief und effizient in Angular integriert.

▍GraphQL

Vielleicht denken Sie, dass die Freude an der Arbeit mit GraphQL nur React-Programmierern zur Verfügung steht. Wenn ja, dann irren Sie sich. Es gibt auch eine Version der Apollo- Bibliothek für Angular. Was Sie mit dieser Bibliothek erstellen können, ist eine großartige Alternative zu Firebase. Apollo ist für diejenigen, die lieber mit GraphQL arbeiten.

EstNestJS

NestJS ist ein Webframework für Node.js, das für die Entwicklung von Serveranwendungen entwickelt wurde. Aus den Beispielen können wir schließen, dass die Grundkonzepte von Angular einen großen Einfluss darauf hatten. Dies sind Module, Steuerungen, Förderer usw. Wenn Sie Angular mögen, werden Sie wahrscheinlich auch NestJS mögen.

Wenn Sie Nx Workspaces verwenden , müssen Sie zum Erstellen eines Frameworks für eine Full-Stack-Anwendung auf der Basis von Angular und NestJS einen Befehl in der Konsole ausführen.

Zusammenfassung

Infolgedessen können wir sagen, dass das riesige Ökosystem, das sich um Angular entwickelt hat, jedem bietet, der qualitativ hochwertige und zuverlässige Werkzeuge zur Lösung einer Vielzahl von Problemen wünscht.

Natürlich kann ich hier nichts über Dutzende meiner Lieblingsbibliotheken und -werkzeuge erzählen. Wenn ich das getan hätte, wäre dieses Material endlos gewesen. Ich hoffe jedoch, dass dieser Artikel Ihnen einen Überblick über das Phänomen der modernen Webentwicklung namens Angular gegeben hat. Ich hoffe, dass Sie hier etwas gefunden haben, das Sie in Zukunft in Ihren Projekten verwenden können.

Liebe Leser! Was magst du am besten (oder nicht magst) in Angular 8?