The Microfrontend Revolution Module Federation with Angular -- Director's Cut

The Microfrontend Revolution Module Federation with Angular -- Director's Cut

15934fa2aa7b2ce21f091e9b7cffa856?s=128

Manfred Steyer

June 11, 2020
Tweet

Transcript

  1. @ManfredSteyer ManfredSteyer

  2. @ManfredSteyer Do you remember her?

  3. @ManfredSteyer Software Engineering is a Team Sport

  4. @ManfredSteyer Coordination b/w Teams

  5. @ManfredSteyer Monolith Flight System

  6. @ManfredSteyer Booking Service Check-in Service Boarding Service Luggage Service Microservices

    Sub-Domains (DDD)
  7. @ManfredSteyer Booking App Check-in App Boarding App Luggage App Microfrontends

  8. @ManfredSteyer How to implement Microfrontends? ?

  9. @ManfredSteyer Webpack 5 Module Federation

  10. @ManfredSteyer Contents #1: Consequences of Microfrontends #2: Module Federation #3:

    Microfrontends FAQ
  11. @ManfredSteyer About me… Manfred Steyer, ANGULARarchitects.io (Remote) Angular Workshops and

    Consulting Google Developer Expert for Angular Trusted Collaborator in the Angular Team Manfred Steyer
  12. @ManfredSteyer #1: Consequences of Microfrontends

  13. @ManfredSteyer Booking App Check-in App Boarding App Luggage App Autonomous

    Teams
  14. @ManfredSteyer Autonomous Teams Separate Development Separate Deployment Own architecture decisions

    Own technology descisions
  15. @ManfredSteyer Microfrontends are first and foremost about scaling teams!

  16. @ManfredSteyer Challenges

  17. @ManfredSteyer Challenges UI Composition UI Consistency Bundle Size/ Sharing Dependencies

    Version Conflicts between Microfrontends …
  18. @ManfredSteyer Module Federation Solves Some of Them! UI Composition UI

    Consistency Bundle Size/ Sharing Dependencies Version Conflicts between Microfrontends …
  19. @ManfredSteyer #2: Webpack 5 Module Federation

  20. @ManfredSteyer DEMO

  21. @ManfredSteyer How to load separately compiled code?

  22. @ManfredSteyer Idea const Component = import('http://other-app/xyz') Does not work with

    webpack/ Angular CLI Even lazy parts must be known at compile time!
  23. @ManfredSteyer Webpack 5 Module Federation Shell (Host) Microfrontend (Remote) //

    Maps Urls in // webpack config remotes: { mfe1: "mfe1" } // Expose files in // webpack config exposes: { Cmp: './my.cmp.ts' } import('mfe1/Cmp')
  24. @ManfredSteyer How to Get the Microfrontend's URL? Shell (Host) Microfrontend

    (Remote) RemoteEntrypoint.js <script src="…"></script>
  25. @ManfredSteyer How to Share Libs? Shell (Host) Microfrontend (Remote) shared:

    [ "@angular/core", "…" ] shared: [ "@angular/core", "…" ]
  26. @ManfredSteyer Conflicting Shared Libs Option A: Reuse it anyway Option

    B: Load own Both might be bad Prevent organizationally (e. g. conventions, contracts, monorepos) Integration-Testing
  27. @ManfredSteyer DEMO

  28. @ManfredSteyer Challenge for You

  29. @ManfredSteyer ngx-Snake MIT License Credits: Samir Hodzic

  30. @ManfredSteyer DEMO

  31. @ManfredSteyer Challenge • Create a proper snake strategy • Publish

    it as a Module Federation Remote • Award Ceremony: ngCopenhagen Online Meetup • June 23th, 2020 • https://www.meetup.com/de-DE/ngCopenhagen/ • All Details • https://github.com/manfredsteyer/snake
  32. @ManfredSteyer When can we have it?

  33. @ManfredSteyer Well … Webpack 5 is currently beta Shown examples:

    PoC w/ custom webpack conf + patched CLI lib CLI: Not before version 11 (fall 2020) Squeeze federation config into CLI's webpack config Custom Builder (e. g. ngx-build-plus)
  34. @ManfredSteyer #3: FAQ

  35. @ManfredSteyer How To Identify Good Sub-Domains and hence Microfrontends?

  36. @ManfredSteyer Request Product Specify Order Approve Order Send Order Budget

    Hierarchy Employee IT-Expert Manager Buying Agent Product
  37. @ManfredSteyer "Right" Domain Size Should mirror a real-world domain Large

    enough: Most use cases don't overlap domains Small enough: One team per domain
  38. @ManfredSteyer Domain Driven Design gives a lot of advice! Also

    see blog at: http://angulararchitects.io
  39. @ManfredSteyer Monorepo or Polyrepo

  40. @ManfredSteyer Catalog Approval Shared Feature Feature Feature Feature Feature …

    … … … … … … … … @ManfredSteyer Catalog App Approval App Option 1: One Monorepo w/ several Domains
  41. @ManfredSteyer Consequences Easy to share code Decoupling b/w domains: Conventions

    or Tools (Linting) Easy to enforce one version policy Different technologies: possible
  42. @ManfredSteyer Catalog Approval Shared Feature Feature Feature Feature Feature …

    … … … … … … … … @ManfredSteyer Catalog App Approval App Option 2: One Repo per Domains Publish shared libs seperately via npm
  43. @ManfredSteyer Consequences Enforces decoupling b/w domains Allows different versions (good

    or bad?) Allows different technologies Needs lots of automation Sharing Code via npm and versioning might be a pain
  44. @ManfredSteyer Recommentation, if you are not sure Start with a

    monorepo Enforce decoupling via linting Reconsider splitting into several repos later
  45. @ManfredSteyer Pro Tip: Tooling for Monorepos https://nrwl.io/nx

  46. @ManfredSteyer Communication

  47. @ManfredSteyer Communication is a Trade-Off Decoupled Sub-Domains Communication b/w Sub-Domains

  48. @ManfredSteyer Ideas As little as possible! Messaging/ Eventing: Loosly Coupling

    Trigger a (Domain) Event Don't expect an answer!
  49. @ManfredSteyer Very Simple Message Bus @Injectable({ providedIn: 'root' }) export

    class MessageBus { events$ = new ReplaySubject<DomainEvent>(1); }
  50. @ManfredSteyer Also Consider: Server-Side Messaging µService µFrontend µService µFrontend µService

    µFrontend
  51. @ManfredSteyer Redux for Communication?

  52. @ManfredSteyer Well … Don't directly share state b/w sub-domains (coupling!)

    You might use Redux for eventing (like a Message Bus)
  53. @ManfredSteyer Sharing Widgets

  54. @ManfredSteyer Sharing Widgets is a Trade-Off too Decoupled Sub-Domains Shared

    Widgets Prevent duplicate code (DRY) Separate Ways
  55. @ManfredSteyer Recommentation Technical Widgets (e. g. Design System): Sharing ok

    Use Case-specific widgets: Try to avoid (coupling!)
  56. @ManfredSteyer You can't have both: Decoupling and DRY ! Know

    your Architecture Goals!
  57. @ManfredSteyer Good Message: Very often, Separate Ways DOES NOT mean

    duplicate code!
  58. @ManfredSteyer Catalog Approval Bounded Context Ubiquitous Language

  59. @ManfredSteyer Bounded Context per Sub-Domain Also see blog at: http://angulararchitects.io

  60. @ManfredSteyer Web Components

  61. @ManfredSteyer

  62. @ManfredSteyer Recommentation Try to stick with one technology (e. g.

    Angular) --> Share framework-specific components Works in the short and mid run Eventually, when needed, export them as web components (e. g. w/ Angular Elements)
  63. @ManfredSteyer Authentication and Authorization

  64. @ManfredSteyer Possibilities HTTP Only Cookie: Tunnel through one origin (+XSRF

    Token) Token via Header: Different origins (consider OAuth2/OIDC) • Share token via message bus or session storage
  65. @ManfredSteyer Microservice per Microfrontend?

  66. @ManfredSteyer Recommendation: Verticals µService µFrontend µService µFrontend µService µFrontend

  67. @ManfredSteyer Backend for Frontend (BFF) BFF µFrontend BFF µFrontend BFF

    µFrontend µServices µServices µServices µServices
  68. @ManfredSteyer Nevertheless, try this approach if possible! µService µFrontend µService

    µFrontend µService µFrontend
  69. @ManfredSteyer Dashboards

  70. @ManfredSteyer Dashboard: Special Forces Decoupled Sub-Domains Dashboard Data and widgets

    from each subdomain
  71. @ManfredSteyer Approaches Dashboard loads widgets from each sub-domain • Flexibility

    • Needs stable contracts • Agreements on common look and feel • Lots HTTP Calls Dashboard as a own sub-domain • Pros and Cons are inversed
  72. @ManfredSteyer Backend for Frontend (BFF) Dashboard µBFF Dashboard µFrontend BFF

    µFrontend BFF µFrontend µServices µServices µServices µServices Messaging
  73. @ManfredSteyer Free eBook ANGULARarchitects.io/book Updated for Module Federation and Alternatives

  74. @ManfredSteyer Conclusion Main Purpose of µFrontends: Scaling Teams Decoupling Federation:

    Import From Other App Sharing Libs Take Care of Conflicts Know your Architecture Goals
  75. @ManfredSteyer Be like Bonnie and think first! Evaluate whether you

    need µFrontends No: Majestic Monolith Yes: Consider Module Federation
  76. @ManfredSteyer Contact and Downloads [web] ANGULARarchitects.io [twitter] ManfredSteyer d Slides

    & Examples Remote Company Workshops and Consulting