Review your UI monolith approach

Embrace the digital world

Review your UI monolith approach

It is now popular to use micro-services approach in application design to take advantages of new technologies and create a scalable, relialable and performant product

But the user interface (UI) is often the left over in this transformation and start to be a challenge when the application grows and new functionalities are coming to the customer.

In his book “Micro-frontends in action”, Michael Geers has done a good job approaching the need of developping a UI with multiple teams with a vertical and independant approach.

His book gives you a great overview of the different techniques that can be used to apply Micro-frontends approach.

But, what is a micro-frontend ?

To quote the author :

The idea behind Micro Frontends is to think about a website or web app as a composition of features which are owned by independent teams. Each team has a distinct area of business or mission it cares about and specialises in. A team is cross functional and develops its features end-to-end, from database to user interface.

Michael Geers

Like Chris Richardson, in his book “Microservices Pattern” (see my previous post From software architecture to digital architecture), the author use the example of a company “Tractor Models, Inc” to illustrate the techniques and the operational reasons that push the team to evolve in their practices.


Among many others benefits, his approach allows to

  • Deliver UI evolution of each business area at different paces
  • Combine differents technical stacks (or versions) at runtime
  • Reduce the overhead of interteam alignement
  • Use server-side or client-side composition to adapt to devices or performances

The book also comes with source code for each chapters so that you can test and evaluate the proposed solution.


You can purchase the book on the site of the editor Manning at this URL
https://www.manning.com/books/micro-frontends-in-action

Or visit his website on https://micro-frontends.org/