Micro Frontend
Wilson Mendes
@willmendesneto
Google Developer Expert Web technologies
microservice architecture
from your web apps
1. Access https://goo.gl/PibUcQ
2. Decrease the price to $0,00
3. Enjoy
Nodebots book free!
HI, IT'S ME
Once upon a time in
the web...
Our amazing app
Monolith
Highly coupled code
Mix of layers
Initial version
/v1/items/123
/v1/about/123
/v1/gallery/123
...
mobile website
is not
benevolent
if you're not following the rules
MVP
V2
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
microservices
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
reverse proxy
stack #1
stack #2
x
How to solve
the 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 -g update-yeoman-generator
cd my-component
update-yeoman-generator \
--generator <github-user>/<github-repository>
page1.js
page2.jspage3.js
...
page1.css
page2.css
page3.css
File invalidation
Frontend architecture
Component based
Web friendly
Checklist
Metrics
everywhere
Release early
Release often
Our amazing app V2
Our amazing app
Next steps
Because the improvement never ends!
https://github.com/willmendesneto/micro-frontend-pages
Are you ready?
Thank you
Wilson Mendes
@willmendesneto
Google Developer Expert Web technologies
Copy of Micro Frontend: a microservice architecture from your frontend web apps
By Maor Frankel
Copy of Micro Frontend: a microservice architecture from your frontend web apps
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.
