How do Micro Frontends differ from traditional monolithic architectures?
How do Micro Frontends work?
Micro Frontends break down the architecture of a website or app into smaller features. Each feature is managed by a separate cross-functional team, based on customer needs or specific use cases (such as ‘payment module’ or ‘search module’). Unlike traditional approaches that focus on individual skill sets or specific technologies, micro frontends allow for more flexibility and agility.
When combined with server-side microservices, developers can split an entire web solution into multiple end-to-end verticals, enhancing scalability and maintainability.
Why are Micro Frontends important?
That’s the what – now, the why. When would implementing Micro Frontends be advantageous to a build? Broadly, the core and overarching benefits of Micro Frontends include...
- More team and system autonomy: Product teams work on features which are self-contained and running with minimal codependency on other features. This means that the customer-facing app or site can function even when some components are temporarily out of action.
- More manageable codebases: Micro Frontends have their own individual codebases, which will inevitably be lighter and easier to keep under control when it comes to their organisation and growth. Dedicated, smaller teams are allocated to each of these code bases, helping to simplify code reviews etc.
- More streamlined growth: Features operate independently, so scaling can also happen independently. It’s typically more cost and time efficient to scale where the need is, without having to scale the entire application.
- More productive dev teams: Finally, with clear focus and a lower barrier to entry (thanks to the simplified nature of Micro Frontend code bases), it’s easier for your developers to rapidly bring value to a project, enhancing cohesion, morale and productivity.
The legacy of sites built on this traditional architecture can all too easily become one of complexity and commitment – deployments are slow and rebuilds are a colossal undertaking. Issues can fly under the radar and, even when they are identified, there can be limited scope for creative problem-solving.
Within our builds, we’ve seen success by including a Micro Frontend aggregator fronted by a content delivery network (CDN) within our architecture. This enables fragments (which are all fronted by our CDN) and the cache to be configured independently – a big win in terms of optimisation. Additionally, this architecture allows both vertical and horizontal slicing (of page slices and specific fragments within a certain page).
There are other wins for performance too. Micro Frontends allow for the introduction of "Island architecture" – where interactive UI components render in insolation to a surrounding “sea” of static HTML. This means slow rendering Javascript can be minimised, and allows for prioritised parallel loading.
For a deeper technical dive into our approach to the deployment of Micro Frontends, our Head of Engineering Austin Weight has written a piece that goes into a good deal of detail, and outlines some of the improvements that he’s seen linked to the rollout of this architecture.
Is Micro Frontends the Emerging Breakthrough?
Micro Frontends are gaining interest and are seen as offering significant development benefits. Linked with the advantages of Composable Commerce, they can help teams move away from the traditional monolithic approach that has dominated many projects until now.
