Vamos Falar Sobre Micro Frontends

VAMOS FALAR SOBRE MICRO FRONTEND Palestrante: Nélio Frazão Email: [email protected]

SOBRE NÉLIO Nélio Frazão, Frontend, com 12 anos de experiência.
Possui MBA em Marketing Digital, pela Faculdade Estácio/Idez em /João Pessoa/PB. e especialista em Desenvolvimento de Aplicações para WEB pelo UNIPÊ

ENTENDENDO O PROBLEMA SPA (MONOLITO) DB Backend (MONOLITO) A P
I G A T W A Y

DESVANTAGENS MONOLITO Baixa Escalabilidade Falta de Flexibilidade Code Base Gigante
Complexidade Preso a uma única tecnologia. Exige que todo o sistema seja replicado. Quanto maior o sistema, maior é a base de código. Diﬁculdade nas entregas contínuas.

MICRO SPA (MONOLITO) DB CHECKOUT SERVICE A P I G
A T W A Y DB CATALOG SERVICE

E SE O FRONT END...

MICRO FRONT END CHECKOUT FRONT END DB CHECKOUT SERVICE A
P I G A T W A Y DB CATALOG SERVICE CATALOG FRONT END B A S E A P P

MICRO FRONT END Base APP

DEFININDO MICRO FRONTEND Um estilo de arquitetura onde podem ser
feitas entregas independentes de fragmentos de frontend que compõem uma aplicação maior.

VANTAGENS MICRO FRONTEND DEPLOY INDEPENDENTE UPGRADES INCREMENTAIS MÚLTIPLAS TECNOLOGIAS TIMES
AUTONOMOS

O QUE DEVEMOS ESPERAR DE UM MICRO FRONTEND? AGNÓSTICO DE
TECNOLOGIA ISOLAR CÓDIGO DA EQUIPE DEPLOY INDEPENDENTE CONVENÇÕES DE TRABALHO

IMPLEMENTAÇÃO BUILD-TIME COMPOSITION RUN-TIME COMPOSITION VS

BUILD-TIME COMPOSITION CHECKOUT FRONT END CATALOG FRONT END Base APP
PACKAGE REGISTRY

BUILD-TIME INTEGRATION { "name": "@ecommerce/container" , "version": "1.0.0", "description": "some
ecommerce app" , "dependencies": { "@ecommerce/checkout": "^1.2.3", "@ecommerce/catalog": "^4.5.6", } }

BUILD-TIME COMPOSITION Bundles Independentes Times separados por contexto Arquitetura monolítica
para diferentes times Sem deploys independentes

RUN-TIME COMPOSITION CHECKOUT FRONT END CATALOG FRONT END BASE APP

BUILD-TIME COMPOSITION Times independentes Deploys indepentes Pode haver muitas requisições
no lado do usuário

SERVER-SIDE TEMPLATE COMPOSITION USER'S BROWSER SERVICE 2 N G I
N X CONTAINER APP SERVER SERVICE 1 <esi:include src="include/service1" />

SERVER-SIDE TEMPLATE COMPOSITION <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Feed
me</title> </head> <body> <h1> Feed me</h1> <esi:include src="/order" /> </body> </html> server { listen 8080; server_name localhost; root /usr/share/nginx/html; index index.html; ssi on; rewrite ^/$ http:/ /localhost:8080/browse redirect; location /browse { set $PAGE 'browse'; } location /order { set $PAGE 'order'; } location /proﬁle { set $PAGE 'proﬁle' } error_page 404 /index.html; } variável $PAGE guarda a URL que está sendo solicitado:

RUN-TIME INTEGRATION VIA IFRAMES <iframe src="http:/ /micro2.com"/> <iframe src="http:/micro3.com"/> <iframe
src="http:/ /www.micro1.com"/>

RUN-TIME INTEGRATION VIA WEB COMPONENTS MICRO-APP2 MICRO-APP3 MICRO-APP1

<h1>Welcome to Feed me!</h1> <script src="https:/ /browse.example.com/bundle.js"></script> <script src="https:/ /order.example.com/bundle.js"></script>
<script src="https:/ /profile.example.com/bundle.js"></script> <div id="micro-frontend-root"></div> <script type="text/javascript"> const webComponentsByRoute = { '/': 'micro-frontend-browse-restaurants', '/order-food': 'micro-frontend-order-food', '/user-profile': 'micro-frontend-user-profile', }; const webComponentType = webComponentsByRoute[window.location.pathname]; const root = document.getElementById('micro-frontend-root'); const webComponent = document.createElement(webComponentType); root.appendChild(webComponent); </script> EXEMPLO

SINGLE-SPA BOOTSTRAP MOUNT( ) UNMOUNT( )

COMPARTILHANDO DADOS

PROPS <ContainerApp className={classes.root}> <Product item={this.props.selectedItem} /> <ProductReview item={this.props.selectedItem} /> </ContainerApp>

STATE MANAGEMENT TOOLS

DOM EVENTS let event = new Event(click) elem.dispatchEvent(event) elem.addEventListener(click, e
=> { /* code */}, false ) DISPATCH O EVENTO ESCUTA O EVENTO

DESIGN DESIGN

TESTS TESTS

CONSIDERAÇÕES FINAIS CONSIDERAÇÕES FINAIS

OBRIGADO [email protected] http:/ /www.linkedin.com/in/neliofrazao

Vamos Falar Sobre Micro Frontends

Vamos Falar Sobre Micro Frontends

Nélio Frazão

More Decks by Nélio Frazão

Other Decks in Technology

Featured

Transcript

VAMOS FALAR SOBRE MICRO FRONTEND Palestrante: Nélio Frazão Email: [email protected]

SOBRE NÉLIO Nélio Frazão, Frontend, com 12 anos de experiência.

ENTENDENDO O PROBLEMA SPA (MONOLITO) DB Backend (MONOLITO) A P

DESVANTAGENS MONOLITO Baixa Escalabilidade Falta de Flexibilidade Code Base Gigante

MICRO SPA (MONOLITO) DB CHECKOUT SERVICE A P I G

E SE O FRONT END...

MICRO FRONT END CHECKOUT FRONT END DB CHECKOUT SERVICE A

MICRO FRONT END Base APP

DEFININDO MICRO FRONTEND Um estilo de arquitetura onde podem ser

VANTAGENS MICRO FRONTEND DEPLOY INDEPENDENTE UPGRADES INCREMENTAIS MÚLTIPLAS TECNOLOGIAS TIMES

O QUE DEVEMOS ESPERAR DE UM MICRO FRONTEND? AGNÓSTICO DE

IMPLEMENTAÇÃO BUILD-TIME COMPOSITION RUN-TIME COMPOSITION VS

BUILD-TIME COMPOSITION CHECKOUT FRONT END CATALOG FRONT END Base APP

BUILD-TIME INTEGRATION { "name": "@ecommerce/container" , "version": "1.0.0", "description": "some

BUILD-TIME COMPOSITION Bundles Independentes Times separados por contexto Arquitetura monolítica

RUN-TIME COMPOSITION CHECKOUT FRONT END CATALOG FRONT END BASE APP

BUILD-TIME COMPOSITION Times independentes Deploys indepentes Pode haver muitas requisições

SERVER-SIDE TEMPLATE COMPOSITION USER'S BROWSER SERVICE 2 N G I

SERVER-SIDE TEMPLATE COMPOSITION <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Feed

RUN-TIME INTEGRATION VIA IFRAMES <iframe src="http:/ /micro2.com"/> <iframe src="http:/micro3.com"/> <iframe

RUN-TIME INTEGRATION VIA WEB COMPONENTS MICRO-APP2 MICRO-APP3 MICRO-APP1

<h1>Welcome to Feed me!</h1> <script src="https:/ /browse.example.com/bundle.js"></script> <script src="https:/ /order.example.com/bundle.js"></script>

SINGLE-SPA BOOTSTRAP MOUNT( ) UNMOUNT( )

COMPARTILHANDO DADOS

PROPS <ContainerApp className={classes.root}> <Product item={this.props.selectedItem} /> <ProductReview item={this.props.selectedItem} /> </ContainerApp>

STATE MANAGEMENT TOOLS

DOM EVENTS let event = new Event(click) elem.dispatchEvent(event) elem.addEventListener(click, e

DESIGN DESIGN

TESTS TESTS

CONSIDERAÇÕES FINAIS CONSIDERAÇÕES FINAIS

OBRIGADO [email protected] http:/ /www.linkedin.com/in/neliofrazao