Data-Driven Frontend Components and the New Jira Navigation
summary
Rebuilds the monolithic header into a new componentized navigation-next using async loading, route-level preloading and GraphQL with caching, and drops a 500KB gzipped navigation asset into a much smaller deploy by combining webpack entry-points, ESM imports and a Babel transform (main package size 120KB → 32KB). Page load improves ~2s on average and up to ~4s on some pages, experiments run as progressive rollout 10%→100% via feature flags, and the design system supports A/B tests at component level.
AI-written summary · about
chapters (14)
- 0:00Introduction and speaker intro
- 1:03Legacy JIRA navigation overview
- 3:16Problems with old navigation code
- 7:14New navigation component introduction
- 9:05Navigation Next architecture benefits
- 11:55Performance improvements with new nav
- 12:19Challenges in frontend migrations
- 16:20Bundle size optimization journey
- 19:32Breaking changes and lessons learned
- 21:43Code mods and developer experience
- 24:15A/B testing in design systems
- 28:19Shared experiments ownership
- 29:23Recap and future steps
- 30:48Q&A session
related talks
38mBreak Up With Your Frontend Monolith
30mComposition, Caching, and Architecture in modern
44mApplications instead of libraries: Micro frontends implemented through module federation
43mHundreds of components, hundreds of experiments and only one page
39mNavigating front-end architecture like a Neopian
22mHow micro-frontends and NextJS can 4x site performance
46mMicro Frontend: the microservice puzzle extended to frontend
31mSpeeding up Startup for Large React Apps