Micro Frontend
Wilson Mendes
@willmendesneto
Google Developer Expert Web technologies
in Angular Apps
Nodebots book free!
HI, IT'S ME
Companies have legacy code
in production
Monolith
Highly coupled code
Mix of layers
Initial version
<webapps/> are evolving
and we need to be up-to-date
The Micro * Way
how easy is to upgrade your app?
microservices, microframeworks, micro-whatever
Micro
frontend
Tool?
Framework?
Micro frontend ?
Tecnique
How to solve
architectural problems
Evolution in Steps
Evolutionary Architecture
will be crucial in your journey
/v1/items/123
/v1/about/123
/v1/gallery/123
...
{ }
team #1
team #2
team #3
Share components is <3
<ItemsList />
<About />
<Gallery />
...
<page1>
</page1>
<component1 />
<component2>
</component2>
<component3 />
Layout container
{ }
{ }
{ }
page #1
page #2
page #3
COMPONENTS
PAGES
ROUTING
small scope
boundaries
plug-and-play
Everything is a component
{ }
{ }
{ }
team #1
team #2
team #3
Ownership
Flexibility
Innovation
Migrate page by page
Impacts
The
Strangle
Pattern
Can I use
as a PWA application
?
using
microfrontend
bundle size
time to first render
prefetch
Concerns
ROUTING SOLUTION
stack #1
stack #2
x
ROUTING SOLUTION
stack #1
stack #2
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'
);
}DEMO
... or just "show me the code"
Monorepos
...can be a good solution
Organized
Tooling
Tasks
Traceability
Cross-project
Dependencies
Why monorepos
Angular Workspaces
...can be a good solution
yarn affected:build --base=master
// Running affected only
// E2E Tests
yarn affected:test --base=master
yarn affected:e2e --base=master
// Unit Tests
// Build
This can potentially
create new problems
Main goal
Easy to deploy
Release early
Release often
MASTER
BRANCH
Landkid
{1}
{2}
{3}
{4}
{5}
{2}
{6}
{5}
{1}
}
MASTER
BRANCH
{1}
{2}
{3}
{4}
{5}
{2}
{6}
{5}
{1}
}
MASTER
BRANCH
MASTER
BRANCH
{1}
{1}
{2}
{3}
{4}
{5}
{6}
}
{2}
{5}
{1}
MASTER
BRANCH
MASTER
BRANCH
Metrics
everywhere
ROUTING SOLUTION
stack #1
stack #2
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": {...}
}<ngx-recap/>
Think in architecture
Start with small steps
Migration plan
Define routing solution
Monorepos can help
Thank you
Wilson Mendes
@willmendesneto
Google Developer Expert Web technologies
Micro Frontend in Angular Apps
By willmendesneto
Micro Frontend in Angular Apps
The talk is sharing some common issues that happens in some projects and how to solve them. We start them with the goal of validate the business and after that we realise we have to improve the application. In some points the pages are so coupled that's hard to deliver fast, do it with proper confidence or even scale the project page by page having lot of benefits, such as start resilient decoupled applications! Even though examples are in Angular, the principles apply to any frontend framework.
