Am 19. und 20. September nahmen meine Kollegen und ich an der AngularConnect-Konferenz teil. Dies ist eine der größten Angular-Konferenzen, dieses Jahr fand sie zum fünften Mal statt. Das Programm hatte 30 Berichte, von denen 8 vom Angular-Team stammten, 4 Workshops und 5 Expertenzonen. Aus diesem Grund hat es sich gelohnt, nach London zu fahren (na ja, es ist immer eine Reise nach London wert).
In diesem Artikel erklären wir, warum wir uns für AngularConnect entschieden haben, welche Themen für uns interessant waren, und helfen Ihnen bei der Entscheidung, die Berichte des ersten Konferenztages anzuzeigen.
Das Programm
Das erste, was uns bei der Entscheidung auffiel, ob wir gehen wollten oder nicht, war natürlich das Programm. 8 Berichte des Angular-Teams, die vielen Angular-Entwicklern bekannt sind, John Papa, Autor des Angular-in-Depth-Blogs Max Koretskiy, und viele andere berühmte Redner sind eine wirklich herausragende Besetzung.
Aber es geht nicht nur um große Namen. Die genannten Themen sahen für unsere Arbeitsaufgaben äußerst relevant aus.
Wir haben viel von Deep-Dive-Berichten erwartet -
Leistungsoptimierungen in Angular von Google-Ingenieur Mert Değirmenci und
Profiling Angular-Apps wie ein Hai über das Debuggen von Leistung und Speicherproblemen. Alles, was mit Leistung zu tun hat, ist uns wichtig, da wir komplexe interaktive Anwendungen erstellen.
Der Bericht "
Migrating Breaking Changes" mit TSLint und Schematics schien ebenfalls ein genauer Treffer zu sein. Wir haben eine interne UI-Kit-Bibliothek, bei deren Entwicklung wir häufig auf negative Ergebnisse gestoßen sind, wenn wir wichtige Änderungen vorgenommen haben. Wir kamen zu der Notwendigkeit automatischer Migrationen, daher war es interessant zu erfahren, wie andere dies tun.
Wir verwenden NgRx und überwachen dessen Best Practices. Aus diesem
Grund waren wir an einem weiteren Deep-Dive-Bericht interessiert -
Quantum Facades: Warum NgRx-Fassaden schrecklich oder fantastisch sind, je nachdem, wie Sie sie beobachten . Wir wollten uns die Schlussfolgerungen von Sam Julien anhören und sie mit unseren vergleichen.
Und es gab viele solcher Kreuzungen!
Berichte
Der erste Tag der Konferenz wurde von Stephen Fluin und Igor Minar eröffnet.
Stephen dankte der Community für ihre Unterstützung und sprach darüber, die Anzahl der Angular-Projekte von Google von 600 im Jahr 2018 auf 1.500 im Jahr 2019 zu erhöhen.
Igor sagte, dass in Angular CLI 8.3 die Montage für ES 5 vereinfacht wurde - dies ermöglichte es, den Zeitaufwand um 40% zu reduzieren. Er sprach auch über die Optimierung in Angular 9: Das Gewicht von Artefakten wird abnehmen, Anwendungen werden schneller arbeiten. Dies wird aufgrund des neuen Ivy-Renderings möglich sein. In der neunten Version des Frameworks werden Bibliotheken mit ViewEngine-Unterstützung geliefert. Und ab der zehnten Version - mit Ivy. Überprüfen Sie die Bibliothekskompatibilität über den
Link .
Tauchen Sie tief in den eckigen Compiler ein
Alex Rickabaugh, der Entwickler von Angular Compiler, spricht über die fünf Schritte zum Kompilieren eines Angular-Moduls in JavaScript-Code. Anhand eines Beispiels analysiert er das Kompilierungsmodell: Was es war und was in Ivy werden wird. NgModule-Bereiche, teilweise Codeausführung und verbesserte Typprüfung in Vorlagen sind laut Alex die Hauptvorteile von Ivy.
Der Bericht ist nützlich für diejenigen, die die Funktionen des Compilers im Detail verstehen und verstehen möchten, aus welchen Phasen seine Arbeit besteht.
Angular und die OWASP Top 10
Philippe De Ryck erinnert sich an die OWASP 10-Schwachstellenbewertung, geht jedoch nur auf drei davon im Detail ein: XSS, Broken Auth und die Verwendung von Abhängigkeiten mit Schwachstellen.
- Folgen Sie dem eckigen Weg - dem Schlüssel zum Fehlen von XSS.
- OAuth 2.0 und die Bibliothek helfen, Autorisierungsprobleme zu vermeiden.
- Ein mit ng new erstelltes Projekt verfügt über 20.000 installierte Dateien, die der Entwickler nicht kontrolliert. Angreifer verwenden dies: Das npm-Paket elektron-notify-native wurde dem beliebten Repository hinzugefügt. Nach einiger Zeit haben wir den Code geändert. Ein beliebtes Repository ist beim Aktualisieren von Abhängigkeiten anfällig.
Wir empfehlen diesen Bericht als Einführung in OWASP 10.
Meine Reise im eckigen Team
Manu Murthy trat im Oktober 2017 dem Angular-Team bei. In seinem Bericht spricht er über drei wichtige Punkte in dieser Zeit: Änderung des Fokus auf die Community, Verbesserung der Prozesse im Team und aktuelle Herausforderungen. Am Ende des Berichts spricht er über die internen Projekte von 2019: Hausmeister, Skalierte Suche in Code und Connecting Ecosystem.
Zwei Jahre Angular-Team sind in einer halben Stunde für uns geflogen. Sie langweilten sich nicht. Wenn Sie das Framework von innen kennen möchten, wird Ihnen der Bericht gefallen.
Wie wir eckig schnell machen
Während der Entwicklung von Ivy konzentrierte sich das Team auf die Leistung.
Der größte Teil des Vortrags von Miško Hevery befasst sich mit der Optimierung von JS-Skripten mit der V8-Engine. Am Beispiel von Benchmarks zeigt er die Ausführungszeit monomorpher und polymorpher Funktionen.
Miško stellt nützliche Programme für die Arbeit mit V8-Profilen fest. Am Ende des Berichts präsentiert er die Datenstrukturen in Ivy und kündigt ngDevMode an - einen Modus zum visuellen Debuggen Ihrer Anwendung in der Browserkonsole.
In den meisten Berichten werden Browseroptimierungen auf niedriger Ebene analysiert. Geeignet für Entwickler, die ihre Anwendungen so weit wie möglich optimieren möchten.
Winkel finden
Elana Olson spricht über das Angular-Ökosystem: wie man ein Projekt erstellt, wie man es mit Angular Material gestaltet, wie man Services hinzufügt und warum sie benötigt werden. Abschließend erklärt Elana Olson, wie Sie der Angular-Community helfen und Ihr Projekt zum Ökosystem hinzufügen können.
Der Bericht begründet die Starterstufe. Geeignet für neue Entwickler, die kürzlich die Tour of Heroes abgeschlossen haben.
Die Geheimnisse hinter Angulars Blitzgeschwindigkeit
Max Koretskyi befasst sich mit drei Optimierungsebenen: Codeausführungszeit, Verwendung von Datenstrukturen und Compiler-Betrieb.
- Inline-Caching und monomorphe Funktionen beschleunigen die Codeausführung.
- Der Bloom-Filter beschleunigt die Arbeit mit Strukturen.
- Der Ivy-Compiler konvertiert die HTML-Vorlage in optimierten JavaScript-Code.
- Ich empfehle Ihnen, sich vor dem Anschauen mit dem Video Miško vertraut zu machen. Der Max Koretskyi-Bericht ist leichter zu verstehen, da die Beispiele von Angular stammen. Jobbeschreibung Der Bloom-Filter wird für immer gespeichert.
Profiling Angular Apps wie ein Hai
Gil Fink beginnt mit einer Geschichte über den Renderprozess im Browser, seine Phasen, den Unterschied zwischen Reflow und Repaint, RAIL-Modell. Anschließend fährt Gil mit der Profilerstellung fort und zeigt anhand von Beispielen, wie Sie Problembereiche auf der Registerkarte Leistung in Chrome finden.
Der Bericht ist geeignet, um sich mit dem Prozess der Profilerstellung von Anwendungen vertraut zu machen. Es gibt keine Verbindungen zu Angular. Sie können Freunden Frontenddern jeglicher Spezialisierung Freunde empfehlen.
Automatisieren Sie Ihre Angular-Projekte mit Schematics
Brandon Roberts von Nrwl spricht über Funktionen von Angular Schematics. Sie können nützlich sein, um Routineaufgaben zu automatisieren: Festlegen von Abhängigkeiten beim Hinzufügen eines Pakets, Ausführen zusätzlicher Vorgänge beim Aktualisieren. Mithilfe von Schaltplänen können Sie Codevorlagen hinzufügen und die Erstellung von Standardentitäten erleichtern. Brandon zeigt beispielsweise, wie eine Vorlage für einen API-Dienst hinzugefügt wird.
Der Bericht beginnt mit den Grundlagen und eignet sich zur Erforschung der Technologie.
Der Skizzenbericht schloss das Programm des ersten Tages. Vor uns lag Angular-el, informelle Kommunikation, Spaziergänge durch London ... und der zweite Tag der Konferenz, den wir in einem separaten Artikel besprechen werden.
Die Eindrücke aus der ersten Hälfte der Konferenz blieben gemischt. Auf der einen Seite waren einige der Berichte wirklich tiefgreifend, wirklich tiefgreifend mit Inhalten aus erster Hand, oft von den Machern von Angular selbst. Auf der anderen Seite gab es Berichte, deren Niveau wir unter dem angegebenen Niveau bewerteten. Der Wert der Konferenz liegt jedoch nicht nur in den Berichten - wir werden im zweiten Teil auf dieses Thema zurückkommen.