MAD Summit 2022
Modularisierung, API-Design und Domain-driven Design
28. - 30. November 2022 in Berlin Juni 2023 in München

Angular Architektur Workshop: Vom Modulithen zu Micro Frontends

Workshop
Very-Early-Bird Bis 29. Sepetmber anmelden und bis zu 300 € sparen! Jetzt anmelden
Very-Early-Bird Bis 29. September anmelden und bis zu 300 € sparen! Jetzt anmelden
Jetzt noch
Teamrabatt
sichern!
Jetzt anmelden
Zu dritt anmelden
und bis zu 100 €
sparen!
Jetzt anmelden
Jetzt noch
Teamrabatt
sichern!
Jetzt anmelden
Zu dritt anmelden
und bis zu 100 € pro Ticket
sparen!
Jetzt anmelden
Infos
Mittwoch, 30. November 2022
09:10 - 12:30

In diesem interaktiven Workshop lernen Sie von Manfred Steyer – Angular GDE und Trusted Collaborator im Angular-Team –, wie sich große und skalierbare Geschäftsanwendungen mit Angular entwickeln lassen.
Dazu betrachten wir zunächst die Nutzung von Strategic Domain Design zur Schaffung eines gut strukturierten Frontend Modulithen. Für die Umsetzung nutzen wir das populären Werkzeug Nx und Monorepos. Wir betrachten Ansätze zur Modularisierung und zum Erzwingen von Architekturvorgaben. Außerdem nutzen wir inkrementelle Builds sowie den Build-Cache zum Beschleunigen der CI/CD-Pipeline.
 
Diese Ideen werden nach und nach zu einer Micro Frontend-Architektur ausgebaut. Hierzu kommt das brandneue webpack 5 Module Federation, das als Missing Link für solche Architekturen gilt, zum Einsatz. Abgesehen von den Schön-Wetter-Szenarien betrachten wir auch weiterführende Konzepte, wie dem Umgang mit Versionskonflikten, Dynamic Federation oder die Kombination verschiedener Frameworks und Versionen.
 
Nach den einzelnen Übungen haben Sie eine Fallstudie, die Sie als Vorlage für eigene Vorhaben nutzen können. Am Ende wissen Sie nicht nur, wie sich Microfrontends mit dem Stand der Technik umsetzen lassen, sondern auch, ob dieser Architekturstil zu Ihnen passt, und welche Alternativen Sie haben. Außerdem sind Sie in der Lage, die einzelnen Optionen vor dem Hintergrund Ihrer Vorhaben zu bewerten.
 
Inhalt & Ablauf
 
Teil 1: Strategic Domain-Design (DDD) mit Nx
– Implementieren eines Strategischen Designs (DDD) in einem Nx Monorepo
– Visualisieren der Architektur
– Kategorisierung von Bibliotheken
– Erzwingen von Architekturvorgaben
– Inkrementelle Builds und Tests zur Beschleunigung des CI-Prozesses
– Lokale und verteilte Build-Caches
 
Teil 2: Microfrontends mit Webpack Module Federation
– Nutzung von Module Federation zum Laden von separat entwickelten und veröffentlichten Micro Frontends
– Integration in Angular und die Angular CLI
– Dynamisches Module Federation
– Teilen von Abhängigkeiten
– Umgang mit Versionskonflikten
– Kommunikation zwischen Micro Frontends
– Kombination verschiedener Frameworks und Versionen mit Web Components (Angular Elements) und Module Federation
 
Zielgruppe & Anforderungen
 
Voraussetzung: Sie sollten ein wenig Erfahrung mit Angular haben.
Benötigte Software:

– NodeJS in aktueller LTS-Version (nodejs.org)
– Visual Studio Code (frei, https://code.visualstudio.com/) oder WebStorm/IntelliJ (kommerziell)
– Git (https://git-scm.com/)
– Angular CLI (npm i -g @angular/cli)

Take me to the full program of Zum vollständigen Programm von Berlin Berlin .

This Session belongs to the Diese Session gehört zum Programm vom BerlinBerlin program. Take me to the program of . Hier geht es zum Programm von München München .

This Session Diese Session belongs to the gehört zum Programm von BerlinBerlin program. Take me to the current program of . Hier geht es zum aktuellen Programm von Berlin Berlin or oder München München .