Macro Benefits of Micro Frontends

Is the frontend experiencing the same change the backend saw years ago when Microservices were introduced? Discover what Micro Frontends are and how it can benefit on a macro level your entire organization.
Get started with a minimal starter package using the Nx Monorepo with an Angular application shell to host inside a Micro Frontend build with Angular Elements.

Transcript

1. The Macro Benefits of Micro Frontends
2. Hi! I’m Gogan A German living in Toronto Software Engineer at @alexG0G https://keybase.io/alx_andru https://github.com/alx-andru/ngAirways
3. @alexG0G
4. @alexG0G
5. @alexG0G https://www.thoughtworks.com/radar/techniques/micro-frontends April 2019 November 2017 March 2016
6. Team Development Database Backend Frontend @alexG0G
7. Database Backend Frontend Team Development Monolith Database Backend Frontend Team Frontend Team Backend @alexG0G
8. Database Backend Frontend Team Development Monolith Database Backend Frontend Team Frontend Team Backend Frontend / Backend Database Backend Frontend Team Frontend Aggregation Layer Search Products Payment @alexG0G
9. Team Discovery Help to discover new products Database Backend Frontend @alexG0G Team Search Find the right product fast Team Product Explain the product Team Checkout Best checkout experience
10. @alexG0G
11. @alexG0G
12. @alexG0G Remain User-Centric Incremental updates Maintainable architecture Autonomous Teams Several projects Distributed Data Design Systems ? UI Libraries ?
13. @alexG0G 1. Prepare the monorepo using Nx 2. Create a Micro App as a Web Component using Angular Elements 3. Create an application Shell 4. Embed the Micro Frontend into the Shell https://github.com/alx-andru/ngAirways
14. @alexG0G ➜ ngToronto yarn create nx-workspace ngAirways --preset=empty ➜ ng-airways git:(master) yarn add --dev @nrwl/angular
15. @alexG0G ➜ ng-airways git:(master) yarn nx g @nrwl/angular:app flights ➜ ng-airways git:(master) yarn ng add @angular/elements
16. @alexG0G
17. @alexG0G
18. @alexG0G ➜ ng-airways git:(master) ng serve --project flights --port 4230
19. @alexG0G ➜ ng-airways git:(master) yarn nx g @nrwl/angular:app shell
20. @alexG0G
21. @alexG0G
22. @alexG0G ➜ ng-airways git:(master) ng serve --project shell --port 4200
23. @alexG0G ➜ ng-airways git:(master) yarn ng add ngx-build-plus --project flights ➜ ng-airways git:(master) ng serve --project flights --single-bundle --port 4230
24. @alexG0G
25. @alexG0G Manfred Steyer https://www.softwarearchitekt.at/ Michael Geers https://micro-frontends.org/ Handling Data https://itnext.io/handling-data-with-web-components-9e7e4a452e6e Micro Frontends collection by Elisabeth Engel https://micro-frontends.zeef.com/elisabeth.engel?ref=elisabeth.engel&share=ee5 3d51a914b4951ae5c94ece97642fc Awesome Micro frontends https://github.com/rajasegar/awesome-micro-frontends https://github.com/alx-andru/ngAirways
27. @alexG0G Communication between Shell <--> Micro Apps ? - attributes / properties / custom events Bundle sizes ? - potential changes with ivy to reduce bundle size and share runtimes Lazy Loading => Ivy will help IE11? - @webcomponents/webcomponentsjs - @webcomponents/custom-elements - polyfills.ts! SEO => Angular Universal
28. Add polyfills for es5 support (if you have to)
29. Add polyfills for es5 support (if you have to) ➜ ng-airways git:(master) ✗ yarn ng g ngx-build-plus:wc-polyfill --project shell