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

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.

  • 3,539
Loading comments...

More from willmendesneto