Evolving Web legacy systems with Microfrontends and Web Components
summary
Itaú Unibanco modernizes a huge legacy internet banking front end by shipping Angular components as Angular Elements (web components) to isolate features, add polyfills for IE, and let teams deploy independently while enforcing a common stack to avoid dependency drift. Performance targets constrain payloads (aiming ~300 KB JS; parsing can take ~2s average and up to ~6s on low-end mobiles), so technology diversity per page is limited. Build and CI automation uses a NX/Lerna mono-repo approach with affected-only builds and tests.
AI-written summary · about
chapters (13)
- 0:00Introduction and speaker background
- 3:58Legacy systems and digital evolution
- 6:26What are Microfrontends?
- 11:15Web architecture evolution
- 13:23Core principles of Microfrontends
- 16:53Web performance challenges
- 20:30Microfrontends and performance trade-offs
- 23:38Autonomy vs technology isolation
- 26:05Contexts requiring Microfrontends
- 28:17Web Components as a solution
- 30:01Future challenges and Mono repos
- 35:03Scaling with Mono repos
- 40:49Tooling for large Mono repos
related talks
56mModernizing Large Frontends with Web Components
33mMicro frontends: Unbelievably True Life Story
46mMicro Frontend: the microservice puzzle extended to frontend
25mMicrofrontends: a Modern Approach to Complex Web Applications
47mMicro Frontends Unmasked
40mAngular, React, Vue and Co. – peacefully united thanks to Web Components and Micro Apps
11mTransforming Enterprise Frontends with Micro-Frontend Architectures
22m'Centralizing the Frontend with Design Systems and Web Components'