Modern Angular at Scale – Performance und Architektur

---

Workshop am 6. Mai, 2025, 10–17 Uhr

---

Dies ist ein Workshop über Angular-Architektur der nächsten Generation. Lerne alles über die neuen Signal APIs und Features. Verstehe die Technologie im Vergleich zu bestehenden Anwendungen und entdecke, wo es den meisten Mehrwert bringt zu migrieren. “Modern Angular at Scale - Performance und Architektur” ist ein Workshop, der die nicht nur die neuesten Features vermittelt, sondern auch Erkenntnisse im Skalieren von Anwendungen und Web Performance bringt.

Im Detail geht es um folgende Themen:

Master Signals

• Ein Deep Dive:
  Gehe über die Grundlagen hinaus und verstehe die inneren Abläufe von Signals, dem neuen leistungsstarken Reaktivitätssystem in Angular.
  
• Praxisnahe Übungen:
  Sammle praktische Erfahrungen, indem du Best Practices für Signale anwendest, um dein Verständnis dafür zu vertiefen, wie Signale tatsächlich funktionieren.

Craft Modern, Efficient Components

• Moderne APIs:
  Nutze Signal-Inputs, Model-Inputs, funktionsbasierte Outputs, Signalabfragen und mehr, um noch intelligentere und reaktivere Komponenten zu erstellen.
  
• @defer wie ein Profi:
  Reduziere die Bundle-Größe und die anfängliche Ladezeit deutlich mit @defer. Erhalte tiefgehende Einblicke in alle Funktionen von @defer – und wie du es richtig verwendest, ohne etwas zu “zerstören”.
  
• Zonenlos & Signal-basierte Change Detection:
  Mach dir Angulars neue, schnellere und effizientere zonenlose Change Detection mit Signals zunutze und lerne, wie du davon profitieren kannst.

Architect Angular Workspaces like a Pro

• Standalone:
  Verstehe und nutze die Vorteile einer modulareren Architektur mit eigenständigen Komponenten, Direktiven und Pipes.
  
• Funktionsbasierte APIs und provide*:
  Lerne, wie du APIs erstellst, die leichter zu warten und wiederzuverwenden sind und somit perfekt zu Angulars Vision passen.

Enhance Development Techniques

• Inject-Patterns meistern:
  Gehe über die einfache Service-Injektion hinaus und entdecke innovative Code-Muster, die Wiederverwendbarkeit, Wartbarkeit und Skalierbarkeit in deinen Angular-Projekten fördern.
  
• Build-Geschwindigkeit steigern:
  Profitiere von den Performance-Vorteilen bei der Migration von webpack zu esbuild.

Optimize User Experience with Server Side Rendering

• Hydration:
  Verstehe, wie sie funktioniert und warum sie das Benutzererlebnis zusammen mit Event Replaying optimiert.
  Bonus: Ein Einblick in globale Event-Delegierung und partielle Hydration

Vorkenntnisse

• Gute Kenntnisse in Angular
  
• Grundkenntnisse der neuen Angular APIs und Features wie Signals

Lernziele

• Erweitere dein Angular-Know-how und entwickle leistungsstarke Anwendungen
  
• Beherrsche die inject-Funktion und entwirf moderne Apps mit eigenständigen Komponenten
  
• Steigere die Performance mit esbuild
  
• Erstelle intelligentere Komponenten mithilfe funktionsbasierter APIs und Signals
  
• Optimiere die Geschwindigkeit durch fortgeschrittenes Lazy Loading und partielle Hydration