I just stumbled upon mic…

2 minute read

I just stumbled upon microfrontends. I didnt know about splitting your front-end; I knew about microservices. Does nx offer some of the benefits that microfrontends offer or the latter builds upon the former? Is it like express and node? Related, but not the same thing.

Responses:

I know wrote an article on microfrontends maybe he can provide some additional context.

He also did a great talk on Micro frontends a few days back on NgVikings. He’s also a big fan of Nx so I assume his builder nx-build-plus can be uses in an Nx Workspace with no issues

I read articles and checked out ngx-build-plus. I have the feeling that angular microfrontends is in the baby stages. I think it is too early to use in production. I understood the difference between the shell and microfrontend(host and remotes), and i dont know if I need my microfrontend to be able to run independently. On the other hand, I revisited the angular documentation and now I understand the difference between an app and lib. The app can run standalone. Which will make it a microfrontend. I could use the angular apps as my microfrontends and use angular libs to share code among them. Harnessing the power of nx. The main benefit is that it can be built and deployed independently. For now the main question I have is how to share common ui behavior and state(ngrx).By common behavior I mean, for example, a vertical menu that has added behavior. Not just routing. I guess everything would depend on the url state.

Yes, it’s quite a young idea. Here I’m describing an approach which is quite strightforward: Loading separately compiled libs (no ngx-build-plus etc. needed, only CLI/Nx default build processes):

https://www.angulararchitects.io/aktuelles/module-federation-light-using-microfrontends-with-angular-already-today/

Truly a pioneer article. Quick question. Would it still work if my shell is in angular one microfrontend is in any other js framework(react/vue)?

I don’t have anything useful to add i just want to let you know that i love the image you chose for that article.

I read that one while trying to re-hydrate the front-end. From what i gather the new webpack version offers somewhat of the technique as well, to lazy load the javascripts when required only. But it has to be integrated with what you are doing. At the momment you have to do all the work, no framework support

For mixing frameworks we can use the more heavy weight approach you’ve mentioned above or we could use this approach here + web components created with other frameworks. Honestly, I’d try to avoid mixing frameworks if it’s somehow possible.

Updated: