“Micro Frontends”- You Keep Using That Word, I Don’t Think It Means What You Think It Means

Micro Frontends
You Keep Using That Word, I
Don’t Think It Means What You
Think It Means.
Shem Magnezi | @shemag8

@shemag8
Once upon a time in
WeWork, community managers
needed a managing tool

@shemag8
Things started to get bigger

@shemag8
2017
1 Team
~5 Eng
1 PM
2019
~10 Teams
~50 Eng
>5 PMs

@shemag8
At this point we have
2 options

@shemag8
Plan
ahead
Business
as usual

@shemag8
Shem Magnezi
Staff Engineer

@shemag8
This is a common pattern

@shemag8
Let’s frame the problem

@shemag8
#3: Limited blast radius

@shemag8
#5: Presenting an API

@shemag8
Why microservices for front-
end isn’t that simple?

@shemag8
#1: User should feel it’s a single app

@shemag8
#2: Keep bundle size small

@shemag8
#3: Responsive as fast as possible

@shemag8
But the concept is somehow
similar

@shemag8
Framework (AKA stiching layer)
Module 1 Module 2 Module 3 Module 4
Core library
Communication
between
modules
Update
modules
Notifications
User’s
session
Shared
components

@shemag8
Your mileage may vary

@shemag8
Questions you want to ask
● Do all teams work on same framework (and
version)?
● Single deploy or independent deploy for each
module?
● Modules should be shared between apps?
● Modules should be loaded dynamically?
● Do we need to support SSR?
● ...

@shemag8
Here we go:
Same framework:
1. NPM Modules
2. Lerna
Multiple frameworks:
3. Web Components
4. App per route
5. IFrames
6. Single SPA

@shemag8
NPM
module1
NPM
module2
App
NPM Modules

@shemag8
/package.json:
"dependencies": {
"@wework/moduleA": "0.1.6",
"@wework/moduleB": "1.1.6",
...
}
index.js:
import ModuleAComp from
'wework/modeulA'
<ModuleAComp />
moduleA/index.js:
export default ModuleAComp;
moduleA/package.json:
{
"name": "@wework/moduleA",
"author": ...
"main": ...,
"version": "0.1.6",
"peerDependencies": {
...
}
}

@shemag8
NPM
module1
NPM
module2
App
NPM Modules
● Develop each module
in its own separate
independent repo
● The main app is just
wiring NPM modules
packaged together

@shemag8
Package 1 Package 2
Main Package
Lerna

@shemag8
> lerna init
lerna-repo/
packages/
package-1/
package.json
package-2/
package.json
package.json
lerna.json

@shemag8
Package 1 Package 2
Main Package
Lerna
● Managing versioning
● Managing
dependencies
● Used by Babel, React,
Angular, Jest

@shemag8
<Module 1> <Module 2>
Plain old HTML (and JS)
Web Components

@shemag8
moduleA/fragments.js:
class ModuleA extends HTMLElement {
constructor() {
super();
this.innerHTML = `<button
type="button">Text</button>`;
}
}
window.customElements.define('moduleA',
ModuleA);
page.js:
$app.innerHTML = `
<moduleA id="buy"></moduleA>
`;
index.html:
<!doctype html>
<html lang="en">
<head>
</head>
<body>
<main id="app"></main>
<script src="./page.js" async></script>
<script src="./moduleA/fragments.js"
async></script>
</body>
</html>

@shemag8
<Module 1>
● Technology Agnostic
● The DOM is the API
● Native support by
most browsers
● No shared state
<Module 2>
Plain old HTML (and JS)
Web Components

@shemag8
/package1 /package2
API Proxy
App per route

@shemag8
server {
# Decide which HTML fragment to
insert based on the URL
location /browse {
set $PAGE 'browse';
}
location /order {
set $PAGE 'order';
}
location /profile {
set $PAGE 'profile'
}
error_page 404 /index.html;
}
<html lang="en" dir="ltr">
<body>
<h1>Common code</h1>

</body>
</html>

@shemag8
/package1
● Support SSR
● Each package has its
own dedicated page
● Can be divided into
fragments and not
full pages /package2
API Proxy
App per route

@shemag8
Frame 1 Frame 2
Main app
IFrames

@shemag8
<html>
<body>
<iframe id="micro-frontend-container"></iframe>
<script type="text/javascript">
const microFrontendsByRoute = {
'/': 'https://browse.example.com/index.html',
'/order-food': 'https://order.example.com/index.html',
'/user-profile': 'https://profile.example.com/index.html',
};
const iframe = document.getElementById('micro-frontend-container');
iframe.src = microFrontendsByRoute[window.location.pathname];
</script>
</body>
</html>

@shemag8
Frame 1
● No heavy lifting or
dependency
complexity
● Complete separation
● Very nostalgic
● Used by Spotify Frame 2
Main app
IFrames

@shemag8
App 1 App 2
single-spa-config
Single SPA

@shemag8
index.html:
<body>
<script
src="config.js"></script>
</body>
config.js:
import * as singleSpa from 'single-spa';
const loadingFunction = () =>
import('./app1/app1.js');
const activityFunction = location =>
location.pathname.startsWith('/app1');
singleSpa.registerApplication('app1',
loadingFunction, activityFunction);
singleSpa.start();
app1/app.js:
export function bootstrap(props) {
return Promise.resolve().then(() => {
domEl =
document.createElement('div');
domEl.id = 'app1';
document.body.appendChild(domEl);
});
}
export function mount(props) {
return Promise.resolve().then(() => {
domEl.textContent = 'App 1 is
mounted!'
});
}
export function unmount(props) {
...

@shemag8
App 1
● Use multiple
frameworks on the
same page
● No refresh
● Lazy load
App 2
single-spa-config
Single SPA

@shemag8
Wait, what about
communication?

@shemag8
Option #1:
State management

@shemag8
Option #2:
Event based communication
dispatchEvent EventEmitter

@shemag8
Breaking the monolith is inevitable

@shemag8
You have to plan ahead to scale fast

@shemag8
There are plenty of options out
there

@shemag8
It’s all about your team and
product

@shemag8
Thanks
You can find me at
blog.shem.dev

@shemag8
Resources
● Lerna- http://bit.ly/2VAelIc
● Web Components- http://bit.ly/2PyN5V1
● Single SPA- http://bit.ly/2DB1f3a
● Miro FE (by Martin Fowler)- http://bit.ly/2knpmMJ
● IFrames- http://bit.ly/2vse4IE
● Exploring micro-frontends- http://bit.ly/2ZIc8cX
● Micro Frontends - Think Smaller, Avoid the
Monolith Love the Backend- http://bit.ly/2DzB39e

“Micro Frontends”- You Keep Using That Word, I Don’t Think It Means What You Think It Means

More Related Content

What's hot (19)

Similar to “Micro Frontends”- You Keep Using That Word, I Don’t Think It Means What You Think It Means (20)

More from Shem Magnezi (16)

Recently uploaded (20)

“Micro Frontends”- You Keep Using That Word, I Don’t Think It Means What You Think It Means

Editor's Notes