Sustainable Client Architectures with Micro Apps
summary
A runnable Angular shell loads independently deployed micro apps on demand, demonstrating dynamic loading, routing prefixes and state loss tradeoffs; legacy apps are wrapped as web components or isolated with iframes; hyperlinks remain a valid zero‑cost option. The demo shows component bundles loaded via script tags, lazy loading to avoid upfront bundle bloat, and three bundling strategies (duplicate libs for isolation, shared UMD global, compile-down with Stencil/Angular Ivy). A simple decision tree matches hyperlinks, shell, or iframe to shared state, navigation frequency, and legacy needs.
AI-written summary · about
chapters (14)
- 0:00Start
- 0:28About me...
- 2:49Coordination b/w teams
- 10:01UI Composition w/ Hyperlinks
- 13:57Providing a (SPA based) Shell
- 22:37Communication b/w Web Components
- 24:16Routing
- 25:01Lazy Loading
- 26:39Bundles
- 28:36Compiling down to JavaScript (more or less) e. g. w/ Stencil, Angular Ivy
- 30:03Sharing Libs
- 32:47Some General Advice
- 37:25Conclusion
- 38:37Contact and Downloads
related talks
31mArchitectures for huge Angular based enterprise applications npm Packages, Monorepos and Micro Apps
45mA Software Architect's Approach towards SPA Based Micro Apps
40mAngular, React, Vue and Co. – peacefully united thanks to Web Components and Micro Apps
20mArchitectures for huge Angular based Enterprise Applications...
58mWeb components and micro apps, the web technologies peacekeeper
34mWeb Components & Micro Apps: Angular, React & Vue peacefully united?- 34mWeb Components & Micro Apps: Angular, React & Vue peacefully united?
35mArchitectures for Huge Angular Based Enterprise Applications