2

I checked few tutorials and videos on Angular Elements and NX. Personally, I found NX more powerful but still do not know all the available possibilities/libraries/frameworks to deal with micro frontends using Angular.

Please suggest the best way to deal with it.

Nishant
  • 155
  • 11

1 Answers1

1

A "true" microfrontend architecture should follow:

  • Each microfrontend is a separate service in your infrastructure
  • You have an ingress/reverse proxy in front of these services that allows routing to a specific service based on path
  • You have a single domain name: app.yoursite.com
  • You configure the ingress to route to the correct microfrontend based on path (e.g. /namespace/accounting goes to the accounting frontend)
  • The microfrontends themselves control how they make requests (e.g. the accounting frontend serves some accountingPage.js, and code within that page will make all fetch requests with prefix: /namespace/accounting)
  • Your base app will fetch a self contained "root component" that's loaded into your page. This can be done with either Web Components (more generic), or vue/react/angular components (easier if you don't mind the lockin)

Summary:
It really depends on what you mean by "microfrontend" though. Often when people say microfrontend, they refer to creating separate JS bundles, but still sharing a single backend.

A "true" microfrontend architecture achieves total encapsulation of both the static assets/javascript and the backend/request handlers. Separation of concerns, not separation of technologies. Code served by one microfrontend is totally isolated from code served by another... stitched together by a common "platform" service.

The framework you use shouldn't impact how your microfrontends are designed as the whole point is there's a separation of concerns between the services so should be framework agnostic. e.g. in pure microfrontends, one frontend could be in Vue, and another in Angular, and you'd have some build process to export them as a Web Component

Coincidentally, I'm actually planning to post a full reference architecture for how to implement microfrontends (with code on github) in the next week or so, if you want to follow along: adamarthur.io

Adam Arthur
  • 409
  • 3
  • 10