Naser Hassani
Front-End Developer
Micro Frontends
A look at the micro-frontends architecture
Nov 2022 - Naser Hassani
Index
Is there a problem?
Can micro-frontends help?
ٰBonus: the islands architecture
MONOLITH Problem
We have many frontend developers but still we're not able to ship front stuff fast enough!
Problem
LET'S IMAGINE A (FREEANTASY) WORLD WITHOUT THESE MEN
The only EVIL IS THE BIG FAT A** monolith CODE BASE
I mean c'mon seriously, what's the problem with a big fat A** MONOLITH code base?
Nothing really! Organising people and developing software is hard at scale.
Applications are getting bigger and more complex every day.
Monolithic web applications, usually built with JavaScript span thousands, or even millions of lines of code.
SCALING a MONOLITH (SPA), scenarios:
1. GOT LARGE AND OLD OVER TIME
- Slow builds (took hours or even a day)
- Complex and slow deployments
- Inheriting decisions
- Legacy code
2. IT'S ABOUT TO GROW FAST
- Many features
- Many new frontend developers
Frontend teams face the same organizational and scalability challenges as backend teams. Shouldn’t they—shouldn’t you—have other options?
Micro frontends
Container is the new black!
The term Micro Frontends first came up in ThoughtWorks Technology Radar at the end of 2016.
microservices
Allow you to work independently, deploy autonomously, scale individual services, and pick the right technical solutions for the job.
Monolithic Frontends
Enhancing collaboration and offering developers more freedom to innovate and responsibility for their choices. This solution is called micro-frontends.
Some aspects of micro-frontends
- MODELING MICRO-FRONTENDS AROUND BUSINESS DOMAINS
- A CULTURE OF AUTOMATION
- HIDING IMPLEMENTATION DETAILS
- DECENTRALIZATION
- INDEPENDENT DEPLOYMENTS
The micro-frontends decisions framework
- DEFINING MICRO-FRONTENDS
- COMPOSING MICRO-FRONTENDS
- ROUTING MICRO-FRONTENDS
- COMMUNICATION BETWEEN MICRO-FRONTENDS
- MANAGING MICRO-FRONTENDS
DEFINING MICRO-FRONTENDS
COMPOSING MICRO-FRONTENDS
ROUTING MICRO-FRONTENDS
- Server-side
- Client-side
- Edge-side
As with compositions, there are three ways to route the micro-frontends:
COMMUNICATION BETWEEN Horizontal MICRO-FRONTENDS
COMMUNICATION BETWEEN VERTICAL MICRO-FRONTENDS
MANAGING MICRO-FRONTENDS
- Bit: a micro-frontend framework by Microsoft
- Single SPA: a meta-framework for piecing a UI together using any combination of frontend frameworks
- Webpack Module Federation + Turbo
- Systemjs: offers a solution for cross-browser management of independent modules
- Ragu: a framework of frameworks. It allows us to embed code written in any framework as widgets.
- Piral: implements isolated components called pilets. Pilets are modules that bundle content and behavior
- OpenComponents: provides a registry for a small units of isomorphic components
- Qiankun: a micro-frontend framework based on Single-SPA
- Luigi: a micro-frontend framework
- Frint: a modular JavaScript framework for building Scalable & Reactive applications
- Puzzle-js: creates gateways and storefront projects that talk each other. Inspired by Facebook's BigPipe
- Podium: server side composition of the micro-frontends
Potential issues WITH micro-frontends
- Accessibility
- Performance pitfalls
- Inconsistent look and feel
- Dependency management
- Requires strong governance, oversight and guidelines
Island architecture
Bonus time!
the "Component Islands" pattern was coined by Etsy's frontend architect Katie Sylor-Miller in 2019.
The guiding principle for the island architecture pattern is:
- To default to server side rendering over client side rendering.
- Only send what is absolutely necessary to the client for interactivity.
PHILOSOPHY
In a nutshell, instead of hydrating the entire page, only the “islands” visible to the users will be hydrated immediately and the others will be hydrated if/when the user will visualise them.
The focus is on minimizing any unnecessary overhead of Javascript.
slide.print("THE END")QUESTIONS?
Micro Frontends
By Naser Hassani
Micro Frontends
A look at the micro frontend architecture trend. Understand the core problems micro frontends aim to solve.
