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 im Frontend sowie die Umsetzung mit Nx Monorepos. Wir betrachten Ansätze zum Erzwingen von Architekturvorgaben und Inkrementelle Builds sowie den Build-Cache zum Beschleunigen von Builds und Testläufen.

Diese Ideen werden nach und nach ausgebaut und münden in der Realisierung von Micro Frontends mit dem brandneuen Webpack Module Federation und Web Components auf der Basis von Angular Elements.

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 Micro Frontends 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.

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
• Teilen von Widgets via Web Components (Angular Elements)