Micro Frontend
Wilson Mendes
@willmendesneto
Google Developer Expert Web technologies
A microservice Architecture from your webapps
Nodebots book free!
HI, IT'S ME
My amazing app
Monolith
Highly coupled code
Mix of layers
Initial version
/v1/listings/123
/v1/agency/123
/v1/agents/123
...
mobile website
is not
benevolent
if you're not following the rules
MVP
V2
A
S
A
P
fter
eptember,
pril
robably
S.E.O.
Easy to maintain
Reusable
Let's make it better
* however...
No more mobile website
Component based
Web friendly
Migrate page by page
Constraints
WAT ?!?!
Can I use
as a PWA application
?
using
microservice
How easy it is to upgrade
your app?
The micro * way
microservices, microframeworks, micro-whatever
Micro
frontend
Tool?
Framework?
Micro frontend ?
Tecnique
The
Strangle
Pattern
ROUTING SOLUTION
stack #1
stack #2
x
Server-side Routing
Client-side Routing
...
import('./new-page.component')
.then(({ default: NewPageComponent }) => {
// Logic to add
// your experimental feature
});
.catch(e =>
console.log(`
Error loading the component ${e}
`)
);
...import('in-load-time')
Feature Toggle Service
let asyncModule;
if (isFeatureFlagTurnedOn('new-page')) {
asyncModule = import(
/* webpackChunkName: "new-page" */
'./new-page'
);
} else {
asyncModule = import(
/* webpackChunkName: "old-page" */
'./old-page'
);
}
{ }
{ }
{ }
page #1
page #2
page #3
COMPONENTS
PAGES
ROUTING
{ }
{ }
{ }
team #1
team #2
team #3
How to solve
code problems
<page1>
</page1>
<component1 />
<component2>
</component2>
<component3 />
small scope
boundaries
plug-and-play
Everything is a component
Demo page, please
Zero Config
or boilerplates if there's no other way
bundle
test
publish
lint
Opinions ?
reporter
dev server
types
coverage
# Github: https://goo.gl/jkvYT8
# Usage: In Your CLI
npm install -b update-yeoman-generator
cd my-component
update-yeoman-generator \
--generator <github-user>/<github-repository>
page1.js
page2.js
page3.js
File invalidation
page1.css
page2.css
page3.css
Frontend Architecture
Component based
Web friendly
Checklist
Metrics
everywhere
Release early
Release often
Our amazing app
Our amazing app
Next steps
Because the improvement never ends!
What if your
API goes down?
What if your
API have
optional attributes?
What if your
types are not
assertive?
// GET api/endpoint/1234
{
"location": [...],
}type ApiEndpointResponse = {
location?: Array<...>;
listing?: {
[k: string]: | string
| boolean
| number;
}
};// GET api/endpoint/1234
{
"location": [...],
"listing": {...}
}
Thank you
Wilson Mendes
@willmendesneto
Google Developer Expert Web technologies
Micro Frontend: A Microservice Architecture from your frontend WebApps
By willmendesneto
Micro Frontend: A Microservice Architecture from your frontend WebApps
Are you working with a big Frontend application and you are facing some problems in your project? Do you want migrate your frontend from another framework or library and don’t know how? Don't you know how to manage different layers of complexity in your application or share these components between applications? In this talk, I will share my experience and decisions creating micro frontend applications, how to manage quality, deployment and more that makes your team deliver more valuable features giving you the power to migrate, improve, evolve and experiment in your product.
