Evolving compositional user interfaces

on YouTube ↗01h 03m

" summary

Shows that splitting UI into per-service fragments lets teams ship independent interface pieces: a toy admin app with authorization, customer, navigation and transaction services proves composition via edge‑side includes (Varnish/SSI), server‑side fragments, and client composition with custom elements (web components + polyfills). Adds a lightweight protocol layer using JSON‑LD hypermedia and schema.org operations so the shell only renders models, not business logic. Demo changes UI by editing a service’s HTML/JS without redeploying the shell; cache and versioning misconfigurations are the main gotchas.

AI-written summary · about

" chapters (12)

1. 0:00Start
2. 3:12Organization
3. 3:46Needs, requirements and expectations
4. 4:30Skills and existing architecture
5. 7:09Monolithic frontend
6. 15:56Edge-Side / Server-Side Includes
7. 20:46Server-side composition
8. 22:29Client-side composition
9. 32:55Classifying your needs
10. 35:29Transaction Details.cshtml
11. 49:53Hypermedia: Affordances
12. 52:31Hypermedia-based composition

" related talks

• 01h 02mCompositional UIs - the Microservices Last MileJimmy Bogard · NDC London 2018
• 56mCompositional UIs - the Microservices Last MileJimmy Bogard · NDC Oslo 2017
• 34mMicroservices, but what about the UIMarten Deinum · Spring I/O 2017
• 36mMicro Frontends - Breaking MonolithsBipul Kumar · Developer Summit 2020
• 51mMicrofrontends and UI Composition - a Code-First DiveWilliam Brander · DevConf 2018
• 01h 06mA High-Performance Solution to Microservices UI CompositionArif Wider, Alexey Gravanov · NDC Oslo 2016
• 22mBreak Up With Your Frontend MonolithElisabeth Engel · JS Kongress 2017
• 35mSSR with Micro-Frontends: How Composition Works with Modern FrameworksLuca Mezzalira · JetBrains JavaScript Day 2025