A Software Architect's Approach towards SPA Based Micro Apps
summary
Presents three concrete integration patterns with tradeoffs: deployment monolith using NPM packages or a mono repo with TypeScript path mappings (demo: flight-search app showing mapped imports), hyperlinks / separate SPAs and optional web components for shared widgets, and a shell that loads micro apps (iframes for strong isolation or bootstrapped bundles wrapped as web components, demo: shell loading Angular and legacy AngularJS clients). Gives a decision tree: choose by shared state, cross-app navigation, legacy integration, separate deployment needs; worked demos expose bundle-size and contract-change costs.
AI-written summary · about
chapters (13)
- 0:00Start
- 2:40Contents
- 5:40Structure of an npm-Package
- 6:11Publish Library
- 7:27npm Registries
- 13:50Moving back and forth
- 18:44Disadvantages
- 24:57Custom Elements vis
- 26:59Providing a (SPA based) Shell
- 30:31Loading MicroApps
- 38:45Some General Advice
- 42:44Architecture within Micro-Apps
- 44:15Conclusion
related talks
20mArchitectures for huge Angular based Enterprise Applications...
31mArchitectures for huge Angular based enterprise applications npm Packages, Monorepos and Micro Apps
39mSustainable Client Architectures with Micro Apps
35mArchitectures for Huge Angular Based Enterprise Applications
47mCamel and Eye of a Needle: Integration Approaches for SPA-based Micro Frontends
33mArchitectures for huge Angular based Enterprise Applications: npm Packages, Monorepos and Microservices
55mSingle Page Apps in a Microservice Architecture
36mAngular, React, Vue and co: Harmoniously united by web components and micro apps?