Wir helfen Ihnen bei der strategischen Entscheidung und der passenden Architekturwahl.

• Bedarfsanalyse und Zielarchitektur: Bewertung Ihrer Ausgangslage und Definition einer tragfähigen Frontend-Architektur.

• Modulschnitt und Domänenmodellierung: Sinnvolle Aufteilung Ihrer Anwendung anhand fachlicher Domänen und Teamstrukturen.

• Technologie- und Patternauswahl: Auswahl der passenden Composition-Strategie und Tools für Ihre Anforderungen.

Umsetzung und schrittweise Einführung von Micro Frontends in Ihrem Projekt.

• Module Federation und Single-SPA: Technische Umsetzung mit modernen Frameworks und Build-Tools.

• Schrittweise Migration aus Monolithen: Strangler-Pattern und inkrementelle Modernisierung bestehender Anwendungen.

• Framework-übergreifende Integration: Kombination von React, Angular, Vue und Web Components in einer Anwendung.

Visuelle und technische Konsistenz über alle Module hinweg sicherstellen.

• Aufbau eines Design Systems: Wiederverwendbare Komponenten, Design Tokens und Patterns für alle Teams.

• Shared Dependencies Management: Versionierung, Verteilung und Konfliktvermeidung gemeinsamer Bibliotheken.

• Governance und Weiterentwicklung: Prozesse und Strukturen für die nachhaltige Pflege gemeinsamer Assets.

Praxisnahe Trainings für Ihre Teams rund um Micro-Frontend-Architekturen.

• Einführungsseminare für Entwickler: Grundlagen, Konzepte und erste praktische Umsetzungen mit modernen Tools.

• Architektur-Workshops für Tech Leads: Entscheidungshilfen, Patterns und Trade-offs für verantwortliche Rollen.

• Hands-on-Workshops für Teams: Praktische Übungen am konkreten Projekt mit individueller Begleitung.

• Frontend-Entwickler mit fundierten JavaScript-Kenntnissen, die ihre Architekturkompetenzen für große Anwendungen erweitern möchten

• Softwarearchitekten, die skalierbare Frontend-Strukturen für Enterprise-Projekte konzipieren und etablieren wollen

• Tech Leads und Engineering Manager, die mehrere Teams parallel an einer großen Webanwendung koordinieren

• Verständnis der Kernprinzipien von Micro Frontends und Abgrenzung zu monolithischen Frontend-Architekturen

• Bewertung und Auswahl geeigneter Micro-Frontend-Patterns für unterschiedliche Projektanforderungen

• Praktische Implementierung von Micro Frontends mit Webpack Module Federation und Single-SPA

• Interaktive Workshops mit praktischen Übungen am eigenen Laptop zur Konzeption und Implementierung von Micro Frontends

• Live-Coding-Sessions zur Demonstration von Module Federation, Single-SPA und Web Components

• Fallstudien aus realen Enterprise-Projekten zur Veranschaulichung erfolgreicher und gescheiterter Migrationen

• Solide Kenntnisse in JavaScript, TypeScript und modernen Frontend-Frameworks (React, Angular oder Vue)

• Erfahrung mit Build-Tools wie Webpack, Vite oder vergleichbaren Bundlern

• Grundverständnis von Web-Standards (HTML, CSS, DOM-API)

• Befähigung zur Konzeption und Umsetzung skalierbarer Frontend-Architekturen für Enterprise-Projekte

• Schnellere Time-to-Market durch unabhängige Entwicklungs- und Deployment-Zyklen einzelner Teams

• Reduzierung technischer Schulden durch klar abgegrenzte Module mit definierten Schnittstellen

• Dauer: 1-3 Tage

• Ort: Online oder Inhouse

• Teilnehmer: ab 1 Person

• Netto-Preis 1.200 EUR pro Tag bis einschließlich drei Personen

• Brutto-Preis: 1.428 EUR pro Tag bis einschließlich drei Personen

• Auf Anfrage findet das Seminar mit individuellen Inhalten und Termin vor Ort in Ihrem Unternehmen oder online statt.

• Definition, Motivation und historische Entwicklung der Micro-Frontend-Idee

• Vergleich mit Microservices: Gemeinsamkeiten und entscheidende Unterschiede

• Vor- und Nachteile gegenüber monolithischen Single-Page-Applications

• Conway's Law und der Einfluss von Teamstrukturen auf die Architektur

• Typische Einsatzszenarien und Anti-Patterns

• Domain-Driven Design als Grundlage für sinnvolle Modulgrenzen

• Entscheidungskriterien: Wann lohnt sich der Einsatz von Micro Frontends?

• Build-time Integration über npm-Pakete und Monorepos

• Server-side Composition mit SSI, Edge-Side Includes und Tailor

• Client-side Composition mit JavaScript-Loadern und Iframes

• Edge-side Composition mit CDN-basierten Tools

• Vertikale vs. horizontale Aufteilung von Modulen

• Routing-Strategien in Micro-Frontend-Architekturen

• Auswahl der passenden Composition-Strategie für Ihre Anforderungen

• Konzepte und Funktionsweise von Webpack Module Federation

• Konfiguration von Host- und Remote-Anwendungen

• Shared Dependencies und Versions-Handling

• Dynamic Remotes und Runtime-Konfiguration

• Module Federation mit Vite und modernen Build-Tools

• Typsicherheit über Modulgrenzen hinweg mit TypeScript

• Debugging und Fehleranalyse in föderierten Anwendungen

• Architektur und Funktionsweise des Single-SPA-Frameworks

• Integration von React, Angular, Vue und Svelte in einer Anwendung

• Lifecycle-Management von Micro Frontends

• Root-Config und Application-Registrierung

• SystemJS und Import Maps zur Modulauflösung

• Migration bestehender Anwendungen auf Single-SPA

• Performance-Optimierung in framework-gemischten Umgebungen

• Custom Elements, Shadow DOM und HTML Templates im Überblick

• Framework-Agnostik durch standardbasierte Web Components

• Lit und Stencil als Frameworks für wiederverwendbare Komponenten

• Kapselung von Styles und Verhalten

• Kommunikation zwischen Web Components

• Server-Side Rendering von Web Components

• Integration in bestehende Framework-Anwendungen

• Custom Events und Event Bus für lose gekoppelte Kommunikation

• Shared State mit Browser-APIs und Storage-Lösungen

• URL als Kommunikationskanal zwischen Modulen

• Props und Callbacks bei direkter Komponenten-Einbindung

• Vermeidung von Shared Mutable State zwischen Modulen

• Authentifizierung und Session-Handling über Modulgrenzen

• Strategien zur Konfliktvermeidung bei globalem Zustand

• Aufbau eines übergreifenden Design Systems für Micro Frontends

• Distribution von Design Tokens, Komponenten und Patterns

• Versionierungsstrategien für gemeinsame UI-Bibliotheken

• CSS-Isolation: Shadow DOM, CSS Modules, CSS-in-JS

• Vermeidung von Stilkonflikten zwischen Modulen

• Theming und Branding in verteilten Architekturen

• Governance und Weiterentwicklung des Design Systems

• Bundle-Size-Management in Micro-Frontend-Architekturen

• Lazy Loading und Code Splitting auf Modul-Ebene

• Vermeidung doppelter Abhängigkeiten und Framework-Duplikate

• Caching-Strategien für föderierte Module

• Core Web Vitals und Performance-Monitoring

• Skeleton Screens und progressive Ladestrategien

• Optimierung der wahrgenommenen Performance

• Unabhängige Build- und Deployment-Pipelines pro Micro Frontend

• Versionierung und Kompatibilitätssicherung zwischen Modulen

• Canary Releases und Feature Flags für einzelne Module

• Monitoring, Logging und Tracing in verteilten Frontends

• Fehlerbehandlung und Resilience-Patterns

• Hosting-Strategien: CDN, Container, Edge

• Governance, Standards und Cross-Team-Koordination