Hatsilau_Microfrontends_MITCon_2019

Transcript

1. Microfrontends April 20, 2019
2. 2 • 5 years of experience in Software Development • Over 3 years at EPAM • Focused on frontend development MIKHAIL HATSILAU
3. 3 Tech stack
4. 4 Monolithic frontend application
5. 5 Monolithic frontend application
6. 6 Monolithic frontend application
7. 7 Monolithic frontend application Pros ▪ Simpler configuration ▪ Simpler infrastructure setup ▪ Simpler and faster development Cons ▪ Not reusable ▪ Hard to scale ▪ Hard to maintain ▪ Invalid segment can negatively influence the stability of work of the entire app ▪ Hard to separate teams
8. 8 Monolithic frontend application
9. 9 Microfrontends
10. 10 Microfrontends: example
11. 11 Microfrontends: app structure
12. 12 NPM Registry
13. 13 NPM Registry options • Nexus • Azure artefacts • NPM Registry
14. 14 Micro app main files
15. 15 entry.js file structure export const reducers = [] // micro app reducers export const routes = ( <Fragment> <Route>...</Route> </Fragment> )
16. 16 routes-map.json structure [ { "mountPath": "/dashboard", "exact": true, "namespace": "dashboard" } ]
17. 17 Micro app webpack output config output: { filename: '[name].[hash].js’, path: 'dist’, library: '__systemJsonpLoader__’, libraryTarget: 'jsonp' },
18. 18 Micro app bundle structure __systemJsonpLoader__({ reducers: [...], routes: React.createElement(…) // Fragment with routes })
19. 19 Chunks [ { id: 'dashboard’, config: { mountPath: '/dashboard’, exact: true }, script: 'dashboard/dashboard.123abc.js’ } ]
20. 20 Global __INITIAL_STATE__ <script> window.__INITIAL_STATE__ = <%= htmlWebpackPlugin.options.initialState %>; </script>
21. 21 Core app routes <Switch> {window.__INITIAL_STATE__.chunks.map((chunk) => ( <Route> key={chunk.config.mountPath} path={chunk.config.mountPath} exact={chunk.config.exact} render={() => ( <LazyComponent chunk={chunk} /> )} </Route> ))} </Switch>
22. 22 LazyComponent implementation const useLazy = (chunk) => { const [stateChunk, setChunk] = useState(null); useEffect(async () => { const loadedChunk = await loadChunk( chunk.id, chunk.script ); setChunk(loadedChunk); replaceReducers(loadedChunk.reducers) // store.replaceReducers }, []); return stateChunk; };
23. 23 loadComponent implementation const loadChunk = (chunkId, scriptName) => ( new Promise((resolve) => { const script = document.createElement('script’); script.onload = () => { resolve(loadedChunks[chunkId]); }; script.src = scriptName; document.head.appendChild(element); }) );
24. 24 LazyComponent implementation const { routes, reducers } = useLazy(props.chunk);
25. 25 Global JSONP loader window.__systemJsonpLoader__ = (entry) => { loadedChunks[entry.namespace] = entry; }
26. 26 loadedChunks object { dashboard: { reducers: [...], routes: [...] } }
27. 27 Microfrontend vs Monolithic application Pros ▪ Easy to scale ▪ Easy to maintain ▪ Partial deployment ▪ Can be developed by separate teams w/o hard dependencies ▪ No need to rebuild the whole app when a micro app is changed Cons ▪ Hard to develop ▪ Slower development ▪ Complicated deployment process and configuration ▪ Hard to start the whole application locally
28. 28 Monorepo approach
29. 29 Monorepo approach lerna-repo/ package.json packages/ core-app/ package.json dashboard/ package.json components/ package.json
30. 30 Lazy loading chunk with the monorepo approach const useLazy = (chunk) => { const [stateChunk, setChunk] = useState(null); useEffect(async () => { const loadedChunk = await loadChunk(chunk.id); setChunk(loadedChunk); replaceReducers(loadedChunk.reducers) // store.replaceReducers }, []); return stateChunk; };
31. 31 Load chunk with the monorepo approach const loadChunk = async (chunkId) => { const chunk = await import(`@app/${chunkId}`); return chunk.default; }
32. 32 Monorepo app with lerna Pros ▪ Easy to scale ▪ Easy to develop ▪ Faster development ▪ Easy to maintain ▪ Can be developed by separate teams w/o hard dependencies Cons ▪ Repository size ▪ Individual parts can’t be deployed w/o rebuilding the whole app