Create an AngularJS front end for a Microservices application

angularjsfront-endmicroservices

I want to create a Microservices application, in which every microservice is responsible for its own part of the front end. At the same time, I want to create the front end in AngularJS as a Single Page Application (SPA). When a new microservice gets deployed, the web front end would automatically pick up the new front end part and add it to the SPA. What would be the best way of realising this?

This is what I came up with. Each microservice could be responsible for its own Angular module. Then when the customer navigates to the application, a server component (ASP.NET or JSP) could see which microservices are online and create an html page which includes the angular modules from those microservices.

What the front end component can also do, is enable some microservices to some specific customers which have extended privileges, like admins or VIP customers.

Of course, for this to work, I need a nice structured way for each microservice to take up a part of the screen, without 'knowing' what other microservices are on the screen. A simple solution would be to create a tab for each microservice. On the tab, the microservice in charge can put its functionality on the page. The front end component would be responsible for general stuff like (angular-)routing and look-and-feel.

Is this the best way of realising this goal? Does anyone have experience with this?

Best Answer

Disclaimer: I have not built an application with a microservices architecture, I'm simply using my intuition here, and what I consider being mostly common sense.

I believe that trying to manage this on the front-end is overkill. I would recommend that you build a backend for your single page application, which knows about which microservices are available or not (be it by checking user credentials like you mentioned, or the service being down for maintenance, etc), and that will orchestrate everything. I would call this the application layer, which glues everything together, and acts as a facade to access your different microservices.

Your SPA does not need to know that it's getting its data from microservices. It should definitely request the data from a single entry-point, which dispatches the queries to the appropriate services.

Related Topic