Micro Frontend Architecture Building an Extensible UI Platform
summary
New Relic consolidates multiple product SPAs into a single platform called New Relic One using runtime-composed micro frontends, with a small platform shell that lazy-loads nerdlets (UI fragments) built in React, published via the New Relic One CLI to a registry that stores JS/CSS on S3 and metadata in a DB. Teams use GraphQL with schema stitching and Apollo Client; webpack externals + CDN deduplicate dependencies. Third-party extensions run in iframe sandboxing with an RPC bridge. Outcome: faster parallel delivery, better consistency and improved perceived performance.
AI-written summary · about
chapters (16)
- 0:00Introduction
- 1:03The Why: New Relic's Journey
- 2:54Evolution to Microservices
- 5:23Goals of New Relic One
- 7:30Defining Micro Front-ends
- 8:50Implementing the Architecture
- 12:19User Experience and Performance
- 14:40Composition Strategies
- 17:36The CLI and Nerdpacks
- 22:52Nerdlets and Hooks
- 25:36Platform Shell and API
- 28:30Layout and Rendering
- 32:19Platform SDK and Communication
- 35:12Data Fetching and GraphQL
- 37:22Third-Party Extensibility
- 39:33Conclusion and Lessons Learned
related talks
44mMicro Frontend: the microservice puzzle extended to frontend
57mMicro Frontends – a strive for fully verticalized systems
25mMicro Frontend: a microservice architecture from your frontend web apps
47mMicro Frontends Unmasked
21mMicro-frontends: 3 years ago
36mMicro Frontends - Breaking Monoliths
45mMicro Frontends in Action!
36mMicro Frontends in Action!