Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Vamos Falar Sobre Micro Frontends

Avatar for Nélio Frazão Nélio Frazão
March 12, 2020
Technology
160
0

Vamos Falar Sobre Micro Frontends

Talk apresentada no 8° Meet-up do Paraíba JS

Avatar for Nélio Frazão

Nélio Frazão

March 12, 2020

More Decks by Nélio Frazão

See All by Nélio Frazão
Trabalhando com Arrays e Objetos
Avatar for Nélio Frazão neliofrazao
0
33
Aula de introdução a JS
Avatar for Nélio Frazão neliofrazao
0
42
Vamos falar sobre TDD
Avatar for Nélio Frazão neliofrazao
0
23

Other Decks in Technology

See All in Technology
Rustuna: Rustによる高速なOptuna実装
Avatar for Preferred Networks pfn
PRO
0
190
しろおびから始める！ログ活用の第一歩
Avatar for Shumei Ito shumei_ito
0
950
JAWSUG TOHOKU 青森支部 「LoGoチャット」のAWS移行で 乗り越えたこと
Avatar for たけだ taketakekaho
0
330
「事実」を「計測」して、「解釈」する 〜AWS Lambdaのメモリ最適解の見つけ方〜
Avatar for maimyyym maimyyym
0
170
PHPカンファレンス関西の招待状 / Invitation to PHP Conference Kansai
Avatar for Y-KANOH ykanoh
0
130
Active Record Connection Adaptersにおける長年の課題に再び取り組む
Avatar for Yasuo Honda yahonda
0
150
ストレスなくAIと付き合いたい！こんなときどうしてる？
Avatar for Nami Kimura namiki64
3
540
WasmをRustにする
Avatar for SansanTech sansantech
PRO
0
250
hackers_champloo_2026_tidb
Avatar for makocchi makocchi
0
160
その Valkey 使いこなしていますか？
Avatar for Takafumi ONAKA onk
PRO
5
1.5k
LambdaWebFunctionsを試してみた / exploring-lambda-web-functions
Avatar for koukihosaka koukihosaka
1
340
「Docker Desktop不要の時代」は 来たのか？
Avatar for ueponx ueponx
0
770

Featured

See All Featured
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
53
4k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
301
52k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
141
35k
Designing for Timeless Needs
Avatar for Cassini Nazir cassininazir
1
530
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
220k
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
192
12k
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
Avatar for David Neal reverentgeek
1
640
Neural Spatial Audio Processing for Sound Field Analysis and Control
Avatar for NII S. Koyama's Lab skoyamalab
0
570
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
Avatar for Mine Cetinkaya-Rundel minecr
1
440
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
66
8.6k
Groundhog Day: Seeking Process in Gaming for Health
Avatar for Sebastian Deterding codingconduct
0
410
Side Projects
Avatar for Sacha Greif sachag
456
43k

Transcript

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

  2. 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Ê

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

    I G A T W A Y

  4. 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. Dificuldade nas entregas contínuas.

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

    A T W A Y DB CATALOG SERVICE

  6. E SE O FRONT END...

  7. 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

  8. MICRO FRONT END Base APP

  9. DEFININDO MICRO FRONTEND Um estilo de arquitetura onde podem ser

    feitas entregas independentes de fragmentos de frontend que compõem uma aplicação maior.

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

    AUTONOMOS

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

    TECNOLOGIA ISOLAR CÓDIGO DA EQUIPE DEPLOY INDEPENDENTE CONVENÇÕES DE TRABALHO

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

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

    PACKAGE REGISTRY

  14. 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", } }

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

    para diferentes times Sem deploys independentes

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

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

    no lado do usuário

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

    N X CONTAINER APP SERVER SERVICE 1 <esi:include src="include/service1" />

  19. 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 /profile { set $PAGE 'profile' } error_page 404 /index.html; } variável $PAGE guarda a URL que está sendo solicitado:

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

    src="http:/ /www.micro1.com"/>

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

  22. <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

  23. SINGLE-SPA BOOTSTRAP MOUNT( ) UNMOUNT( )

  24. COMPARTILHANDO DADOS

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

  26. STATE MANAGEMENT TOOLS

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

    => { /* code */}, false ) DISPATCH O EVENTO ESCUTA O EVENTO

  28. DESIGN DESIGN

  29. TESTS TESTS

  30. CONSIDERAÇÕES FINAIS CONSIDERAÇÕES FINAIS

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