Role of UI in Microservices Architecture

Recently while working with various client engagements focusing on gradual microservices deployments which will co-exist with monolith a big question which stands before the team is “what is the best strategy for creating UI in MSA?”.

Question very critical to understand and design the system as there will be too many things at stake in the current existing system as well as new design and its impact to application user base which most of the time is an omni-channel interface.

Business View :

We are okay with microservices implementation as long as we don’t make any change to user experience and the business functionality remains intact.

 IT View: 

Address the business need and ensure the design is not breaking the application , microservices advantages are not compromised and operational needs with process is defined. In case of failure system is fault tolerant.

Let us check some of the questions which can be discussed in JAD team session before finalizing the design approach

Questions to probe:

  •  Is it web UI’s?
  • Native mobile UI’s?
  • Desktop UI’s?
  • All of the above?
  • Impact on your scalability?
  • Team structures responsible for delivery of the components in whole assembly group to present final solution
  • How many consumers or apps will use the services? etc

Approaches:

Evaluate all the approaches to see the proper fitment, multiple factors are at play:

  •  UI making individual calls to API (assembling the UI from various modules)
  • Server side backend responsible
  • Treat UI as client application ( Bundling UI with MS to serve bits and pieces will bring lot of chaos
  • Break the entire web application in SPA – Single Page Applications which can be deployed independently relying on the microservices
  • If network is good client can call multiple services although there may be many round trip requests ( else change the composition of the service by bundling the services into one service to reduce round trip requests which allows us to transform the data from all the services to minimize the traffic)

Solution Design:

There is no one size fit all the solution for this scenario, we have to adjust our solution according to the context & need of business

  • API gateway pattern :
    • Microservices are behind the gateway and UI on top of it.
    • Limit to aggregation and lookup to serve a specific UX flow.
  • UI Composition pattern :
    • Each MS output its own UI elements or combined with another monolith on the server side
      • Challenges
        • Pros : Provides service decoupling & individual testing
        • Cons: Creates tactical coupling to maintain UX across each services output
        • Cons: Team collaboration on the UI & scripts requires cross-element operation binds into type of monolith
        • Cons: Multiple apps or consumer scenario will have lot of challenges if this option is leveraged

Summary

If it is an ecommerce situation with pages and product listings pattern #2 is best option. Once set of services provide container UI and another set of services feed product results. If scenario is tightly controlled rich UX you might have to co-odrinate the deliverables from multiple teams

  • Logic in UI should be primarily view logic only and avoid business logic ( UI is the layer which plays the data)
  • MS teams publish API docs and version accordingly to ensure proper consumption
  • Focus on service discovery
  • Conway’s Law is very important ( Organization has to support MSA initiative)
  • Keep things simple

I know this very limited view of the scenarios that will arise while designing for these kind of systems, would be keen to hear from you what approaches worked in your scenarios. In this distributed systems world the architectures and systems are changing at rapid pace and we need to learn them and keep up with pace 🙂

References:

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s