Micro Frontend

Wilson Mendes

@willmendesneto

Google Developer Expert Web technologies

microservice architecture

for 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

ROUTING SOLUTION

stack #1

stack #2

x

ROUTING SOLUTION

stack #1

stack #2

Client-side Routing

Server-side Routing

How to solve

architectural problems

Evolution in Steps

Evolutionary Architecture

will be crucial in your journey

{ }

{ }

{ }

team #1

team #2

team #3

Ownership

Flexibility

Innovation
Migrate page by page

Impacts

Metrics

everywhere

Main goal

Easy to deploy

Release early

   Release often

Blue Green dep

Canary release

Dark launch

Feature Flag Rollout

Release Strategy

ROUTING SOLUTION

stack #1

stack #2

What if your

API goes down?

EVENTUAL CONSISTENCY

// GET listings/1234

{
  "location": [...]
}
// GET listings/1234

{
  "location": [...],
  "listing": {...}
}

Expose what's happening

Broken builds

Deployments

Maintainers

Communication

Migration docs

Roadmap

How to solve

code problems

<page1>
</page1>
<component1 />
<component2>
</component2>
<component3 />

{ }

{ }

{ }

page #1

page #2

page #3

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: http://bit.ly/update-yeoman-generator
# Usage: In your CLI

npm install -g update-yeoman-generator

cd my-component

update-yeoman-generator \
  --generator <github-user>/<github-repository>
page1.js
page2.js
page3.js
...
page1.css
page2.css
page3.css

File invalidation

Frontend architecture

Component based

Web friendly

Checklist

Our amazing app V2

Our amazing app

<recap/>

Think in architecture

Zero-config ...always!

Choose carefully

Automate everything

Next steps

Because the improvement never ends!

Greenkeeper

https://github.com/willmendesneto/micro-frontend-pages

Thank you

Wilson Mendes

@willmendesneto

Google Developer Expert Web technologies

Micro Frontend: a microservice architecture for your frontend web apps

By willmendesneto

Micro Frontend: a microservice architecture for 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.

  • 2,801
Loading comments...

More from willmendesneto