The Recipe For Scalable Frontends

on YouTube ↗30m

" summary

Claim: move microservices to the front end so independent teams ship UI pieces that scale. Implementation: Project Mosaic (fragment services render HTML), the router Skipper and Taylor (Taylor composes fragments from templates and streams pages), and Tessellate bundler and renderer (JSON/JSX → Webpack UMD bundles, server-side render + client rehydration). Runs on React/Webpack, assets served from CDN, fragments call backend APIs. Proven at scale: Skipper handled ~21,000 req/s on Black Friday; fragments deploy independently and keep consistent look and feel.

AI-written summary · about

" chapters (7)

1. 0:00Introduction to scaling
2. 1:48Scaling the tech team
3. 5:16Architectural challenges
4. 8:00Project Mosaic
5. 15:39Dynamic content challenges
6. 18:36Tessellate implementation
7. 27:34Conclusion and Q&A

" related talks

• 40mThe Recipe For Scalable FrontendsZalando · code.talks 2017
• 51mMicro Frontend: the microservice puzzle extended to frontendaudrey neveu · JAX London 2019
• 39mScaling Frontend DevelopmentLuis Vieira · NDC Porto 2019
• 57mMicro Frontends – a strive for fully verticalized systemsDavid Leitner · NDC London 2020
• 46mMicro Frontend: the microservice puzzle extended to frontendaudrey neveu · Voxxed Days Microservices 2019
• 25mMicro Frontend: a microservice architecture from your frontend web appsWilson Mendes · JSConf.Asia 2018
• 40mScaling Frontend DevelopmentLuis Vieira · NDC London 2019
• 47mThe Micro Frontend Architecture: How to Turn Your Website into a Giant Collaborative PuzzleMaxime Ribera, Ludovic Lagatie · Devoxx France 2024