Little JavaScript Bundles of Joy
summary
Monzo splits a large React BizOps monolith into independently deployed, dynamically loaded JS task modules so teams can ship without rebuilding the core app. Builds use webpack to output SystemJS-compatible bundles loaded via system.import, uploaded as static files to S3 discovery with git-hash URLs cached in Apollo, and shared deps handled by SystemJS named registers. Initial bundles hit ~3MB so minification and dependency pruning are applied. The system works: task renderers deploy independently and developer deployment friction drops significantly.
AI-written summary · about
chapters (11)
- 0:00Introduction to the problem
- 1:11Understanding the monolith
- 3:43The case for decomposition
- 7:51Exploring micro frontends
- 11:08Designing the Weblit solution
- 13:25Implementation details
- 17:36Importing and loading modules
- 20:23Overcoming technical challenges
- 23:26Migration and organizational impact
- 25:33Developer and customer experience
- 28:35Q&A session
related talks
30mWebpack – The React Parts
36mUnbundling the JavaScript module bundler
30mPackWars: Webpack vs Browserify vs SystemJS vs require.js
44mApplications instead of libraries: Micro frontends implemented through module federation
29mFrom Monolithic Web App to Micro-Frontends – Extending Microservices Architecture to the Frontend
51mUnpacking Bundling
30mTowards a simpler JavaScript ecosystem
47m2017 DevFestMN Eric Brandes