Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Macro Benefits of Micro Frontends

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on.
Avatar for Alex Alex
September 17, 2019

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.

Avatar for Alex

Alex

September 17, 2019
Tweet

Other Decks in Programming

Transcript

  1. Hi! I’m Gogan A German living in Toronto Software Engineer

    at @alexG0G https://keybase.io/alx_andru https://github.com/alx-andru/ngAirways
  2. 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
  3. 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
  4. @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
  5. @alexG0G ➜ ng-airways git:(master) yarn nx g @nrwl/angular:app flights ➜

    ng-airways git:(master) yarn ng add @angular/elements
  6. @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
  7. @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
  8. @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
  9. Add polyfills for es5 support (if you have to) ➜

    ng-airways git:(master) ✗ yarn ng g ngx-build-plus:wc-polyfill --project shell