Demonstrates how different Vue teams can work independently while building on the same app.
Most webpack tutorials describe how to bundle web apps into smaller 'chunks', lazy-loaded. In a complex ('Agile') organization multiple teams may be involved, building various parts of the app. Coming together for a unified build-and-chunk may not be efficient.
The assumption is that the engineering setup consists of the following (or a mix of):
- 1 Core team maintaining shared library build. Framework and Page teams consume this library.
- 1 Framework team designing the overall app UI layout and high-level framework. Loads code from Page teams on-demand.
- 1 or more Page teams owning various parts of the app (eg. Management, Reporting, Preferences).
This code uses Vue and Webpack to demonstrate how code can be written by above teams.
- Download code:
git clone https://github.com/jhfoo/vue-distributed.git
- Open ./app-main/dist/index.html on a browser (tested in Chrome)
Expectation: code from various bundles are rendered on the browser.
- Simplify/ dumbify index.html
Dynamic route registrationIntegration with VuetifyHot loading
- HMR works only on the codes Webpack is actively monitoring and rebuilding. How can HMR work for teams working on page bundles?
- index.html explicitly loads core-bundle.js because webpack-dev-server auto-injects the 'active' bundle (whichever Webpack is monitoring) at the end of the tag. Room for more simplification here.
- Dynamic route registration works through a 'proxy' page which exists only to pass the $router object to the registration function in the external bundle. There may be a better way to do this. Question: how will the app handle bookmarked pages pointing to the subapp?