angular microfrontend

with nx

salimchemes

angular && gemini cli

​

salimchemes

Agenda

​

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

​

​

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.

​

​

​

​

What is microfrontend?

​

​

​

​

​

​

​

What is microfrontend?

​

​

​

​

​

​

​

What is microfrontend?

​

​

​

​

​

​

​

What is microfrontend?

​

​

​

​

​

​

​

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

​

​

​

​

​

​

​

​

​

​

When NOT microfrontend?

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

​

​

​

​

​

​

​

​

​

​

How to implement microfrontend in Angular?

​

• By using nx monorepo https://nx.dev
• Module federation https://webpack.js.org/concepts/module-federation/ or Native federation https://www.angulararchitects.io/en/blog/announcing-native-federation-1-0/

​

​

​

​

​

​

​

​

​

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

​

​

​

​

​

​

​

​

​

​

​

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

​

​

​

​

​

​

​

​

​

​

Demo

nx monorepo with module federation and angular

​

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

​

​

​

​

​

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

​

​

​

​

​

​

​

​

​

​

​

​

​

​

Q&A

​

​

​

​

​

​

​

​