Micro Frontends: Solving the Monolith Issue - Part 1

By
Aoife McCardle
Digital Marketing Executive
&
Igor Moskal
Head of Front-End Development

Frontend Monoliths

In any application, as the front end is developed it gets more difficult to maintain and becomes fondly named a Frontend Monolith. I like to imagine it all as map, the larger the map grows the more difficult it is for everyone working on it to remember where everything is inside it. 


There are multiple problems with these Monoliths including long hours of CI / CD and integration tests, issues with synchronization of the teams, high complexity of project understanding, waiting for approval from other teams and division of responsibility.


In short, there is just too much. A rule of thumb in life when there is too much of something is to break it down into smaller sections!


How does the 'Human Computer' Cope with Overload?

“Chunking” is a term first introduced in a 1956 psychology paper by George A. Miller. He explains that because the brain’s capacity for processing information is limited, you can increase the amount being processed at a given time by breaking up the long strings of information into units or “chunks”. 


In truth this method can be applied throughout life, everything is more manageable if you break it down into smaller groups to be processed. Whether you are trying to remember a phone number, bake a cake or knit a jumper, splitting the task into smaller units makes it far easier to complete.


Microservices and Micro Frontend


Microservices for Backend Developers

Microservices have enabled backend developers to do this when building an application. Also known as the microservice architecture, it is an architectural style that structures an application as a collection of smaller services that are highly maintainable and testable, loosely coupled, independently deployable, organized around business capabilities and owned by small teams each specialising in a section of the app.


Micro Frontend for Frontend Developers

Micro Frontend architecture is an approach to developing a web application as a composition of small frontend apps, similar to the microservice structure. Instead of writing a large monolith frontend application, break it down into domain specific micro frontends, which are self-contained and can be developed and deployed independently.


There are many benefits to using Micro Frontend architecture:

Facilitates task coordination

  • Teams are more focused on their subject areas, clear area of responsibility

Independent deployment option

  • Allows teams to be more autonomous

Shorter delivery cycle

  • Faster builds and tests, as a new functionality, and bug fixes.

Reduced complexity

  • Individual parts are smaller and easier to understand than a large, complex monolith.

Error Isolation

  • It may be easier to isolate bugs in specific parts of the application, while the rest of the app is running.


What are the differences between Microservices and Micro Frontend?

In development, they are very similar as they have different repositories, different CI / CD and different teams. However in runtime, Micro Frontends have to deal with general event loop, shared DOM with events, a general address bar and common globals.



------------  Part 2 coming soon -------------

Written by:
Aoife McCardle
Igor Moskal