1 of 18

angular microfrontend

with nx

salimchemes

2 of 18

angular && gemini cli

salimchemes

3 of 18

Agenda

  • What is microfrontend?
  • Why microfrontend?
  • When (not) microfrontend?
  • How to implement microfrontend in Angular?
  • Who is using microfrontends?
  • Demo
  • Conclusion
  • Q&A

4 of 18

What is microfrontend?

Microfrontends (singular: microfrontend) is a front-end web development pattern in which a single application may be built from disparate builds. It is analogous to a microservices approach but for client-side single-page applications written in JavaScript.

5 of 18

What is microfrontend?

6 of 18

What is microfrontend?

7 of 18

What is microfrontend?

8 of 18

What is microfrontend?

9 of 18

When microfrontend?

  • Big organizations with independent teams and defined domains
  • Company culture supports automation
  • Need to face a complex migration
  • New engineers are familiar with mfe complexity and challenges

10 of 18

When NOT microfrontend?

  • Small development team
  • Early phase companies
  • Not all engineers are familiar with tech stack
  • Limited devOps

11 of 18

How to implement microfrontend in Angular?

12 of 18

Who is using microfrontends? - IKEA - “Think big, start small”

13 of 18

Who is using microfrontend? - Dutch Railways

  • Independent releases
  • Performance improvement (module federation / native federation) up to 70% loading time vs traditional web components
  • Development speed up
  • Multiple instances of same MFE

Challenges

  • Version conflicts
  • Ensure MFE will solve performance issues
  • Team communication/collaboration
  • User centered approach

https://www.youtube.com/watch?v=Dby4etBk4VE

14 of 18

Demo

nx monorepo with module federation and angular

https://github.com/salimchemes/mfe-nx-angular

15 of 18

Conclusion

  • mfe follows the same principle of backend microservices, does not apply for all projects/organizations
  • It’s helpful for scaling up and deploy applications independently
  • mfe’s should not talk to each other too much
  • having multiple mfe’s with different technologies, could impact performance and new engineers onboarding
  • In small teams, could be an overkill and hard to orchestrate
  • If you are not IKEA size, don't use it

16 of 18

17 of 18

18 of 18

Q&A