Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

Vamos Falar Sobre Micro Frontends

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

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
Tweet

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
27
Aula de introdução a JS
Avatar for Nélio Frazão neliofrazao
0
39
Vamos falar sobre TDD
Avatar for Nélio Frazão neliofrazao
0
20

Other Decks in Technology

See All in Technology
会社紹介資料 / Sansan Company Profile
Avatar for Sansan, Inc. sansan33
PRO
11
390k
Agent Skillsがハーネスの垣根を超える日
Avatar for Gota gotalab555
6
4k
2025-12-18_AI駆動開発推進プロジェクト運営について / AIDD-Promotion project management
Avatar for yayoi_dd yayoi_dd
0
150
AI駆動開発の実践とその未来
Avatar for Ikko Eltociear Ashimine eltociear
1
480
Identity Management for Agentic AI 解説
Avatar for Naohiro Fujie fujie
0
440
TED_modeki_共創ラボ_20251203.pdf
Avatar for AIxIoTビジネス共創ラボ iotcomjpadmin
0
140
Bedrock AgentCore Memoryの新機能 (Episode) を試してみた / try Bedrock AgentCore Memory Episodic functionarity
Avatar for hoshi7_n hoshi7_n
2
1.7k
Microsoft Agent Frameworkの可観測性
Avatar for tomokusaba tomokusaba
1
100
20251222_サンフランシスコサバイバル術
Avatar for ponponmikan ponponmikankan
2
140
LayerX QA Night#1
Avatar for koyaman2 koyaman2
0
250
フルカイテン株式会社 エンジニア向け採用資料
Avatar for FULL KAITEN fullkaiten
0
9.9k
テストセンター受験、オンライン受験、どっちなんだい？
Avatar for Yuuki Yamashita yama3133
0
100

Featured

See All Featured
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.6k
Lightning Talk: Beautiful Slides for Beginners
Avatar for Ines Montani inesmontani
PRO
1
400
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
120k
技術選定の審美眼（2025年版） / Understanding the Spiral of Technologies 2025 edition
Avatar for Takuto Wada twada
PRO
115
91k
KATA
Avatar for Megan Lloyd mclloyd
PRO
33
15k
Writing Fast Ruby
Avatar for Erik Berlin sferik
630
62k
Prompt Engineering for Job Search
Avatar for Mfonobong Umondia mfonobong
0
120
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
791
250k
Amusing Abliteration
Avatar for ianozsvald ianozsvald
0
69
Darren the Foodie - Storyboard
Avatar for Kevinho.art khoart
PRO
0
1.9k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
50
14k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
527
40k

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