Micro Frontend

Wilson Mendes

@willmendesneto

Google Developer Expert Web technologies

A microservice Architecture from your webapps

- Access bit.ly/nodebots-book-en

- Decrease the price to $0,00

- Enjoy

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

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

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!

Thank you

Wilson Mendes

@willmendesneto

Google Developer Expert Web technologies