5 Steps to Your Frankenstein Micro Frontends

Transcript

1. @ManfredSteyer ManfredSteyer 5 Steps to Your Frankenstein Micro Frontends Manfred Steyer, ANGULARarchitects.io
2. @ManfredSteyer Egg-Laying Woolly Milk Pig (German Metaphor)
3. @ManfredSteyer Booking App Booking App Check-in App Check-in App Boarding App Boarding App Luggage App Luggage App Micro Frontends
4. @ManfredSteyer
5. @ManfredSteyer
6. @ManfredSteyer Booking App Booking App Check-in App Check-in App Boarding App Boarding App Luggage App Luggage App One Reason: Migrating Step by Step (1) (1) (2+) (2+)
7. @ManfredSteyer Booking App Booking App Check-in App Check-in App Boarding App Boarding App Luggage App Luggage App Onother Reason: Merger
8. @ManfredSteyer
9. @ManfredSteyer Contents #1: Module Federation 101 #2: Loading several SPAs #3: 5 Steps to Your Solution
10. @ManfredSteyer Manfred Steyer
11. @ManfredSteyer
12. @ManfredSteyer Idea const Component = await import('other-app/comp')
13. @ManfredSteyer Webpack 5 Module Federation Shell (Host) Microfrontend (Remote) // Maps Urls in // webpack config remotes: { mfe1: "http://..." } // Expose files in // webpack config exposes: { './Cmp': './my.cmp.ts' } import('mfe1/Cmp')
14. @ManfredSteyer How to Share Libs? Shell (Host) Microfrontend (Remote) shared: [ "@angular/core", "…" ] shared: [ "@angular/core", "…" ]
15. @ManfredSteyer ❤️
16. @ManfredSteyer await import('other-app/main'); const rootElm = document.createElement('my-element') document.body.appendChild(rootElm); WrapperComponent It's a bit easier if this is a web component
17. @ManfredSteyer The Best of Both Worlds
18. @ManfredSteyer https://red-ocean-0fe4c4610.azurestaticapps.net
19. @ManfredSteyer Free eBook ANGULARarchitects.io/book Updated for Module Federation and Alternatives
20. @ManfredSteyer
21. @ManfredSteyer Some Ugly Pitfalls and Workarounds Multiple Routers Bundle Size Cache Angular Platform Zone.js
22. @ManfredSteyer Further Reading on Tricky Details etc.
23. @ManfredSteyer
24. @ManfredSteyer // webpack.config.js in Micro Frontend plugins: [ new ModuleFederationPlugin({ name: "react", filename: "remoteEntry.js", exposes: { './web-components': './app.js', }, shared: ["react", "react-dom"] }), ]
25. @ManfredSteyer // Routing Config in Shell { //path: 'react', matcher: startsWith('react'), component: WebComponentWrapper, data: { type: 'script', remoteEntry: 'https://[…]/remoteEntry.js', remoteName: 'react', exposedModule: './web-components', elementName: 'react-element' } as WebComponentWrapperOptions },
26. @ManfredSteyer // Path Matcher in both, Shell and Micro Frontends { //path: 'react', matcher: startsWith('react'), component: WebComponentWrapper, data: { type: 'script', remoteEntry: 'https://[…]/remoteEntry.js', remoteName: 'react', exposedModule: './web-components', elementName: 'react-element' } as WebComponentWrapperOptions },
27. @ManfredSteyer // Bootstrapping in both, Shell and Micro Frontends bootstrap(AppModule, { production: environment.production });
28. @ManfredSteyer // app.component.ts // Make shell share zone.js shareNgZone(ngZone); // Only needed in MFEs: connectRouter(router);
29. @ManfredSteyer const sharedMappings = new mf.SharedMappings(); sharedMappings.register( path.join(__dirname, '../../tsconfig.json'), ['@my-project/local-lib-in-monorepo'],
30. @ManfredSteyer https://github.com/manfredsteyer/react-app
31. @ManfredSteyer
32. @ManfredSteyer // Path Matcher in both, Shell and Micro Frontends { //path: 'react', matcher: startsWith('react'), component: WebComponentWrapper, data: { type: 'script', remoteEntry: 'https://[…]/remoteEntry.js', remoteName: 'react', exposedModule: './web-components', elementName: 'react-element' } as WebComponentWrapperOptions },
33. @ManfredSteyer You Need a Good Reason! Module Federation: Sharing Code Web Components: Hiding Frameworks and Versions
34. @ManfredSteyer Take Care of the Egg-Laying Woolly Milk Pig!
35. @ManfredSteyer d Slides & Examples Remote Company Workshops and Consulting http://angulararchitects.io