Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Vamos Falar Sobre Micro Frontends

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
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
We Built for Predictability; The Workloads Didn’t Care
Avatar for Michael Stahnke stahnma
0
140
All About Sansan – for New Global Engineers
Avatar for Sansan, Inc. sansan33
PRO
1
1.4k
ブロックテーマ、WordPress でウェブサイトをつくるということ / 2026.02.07 Gifu WordPress Meetup
Avatar for Toro_Unit (Hiroshi Urabe) torounit
0
190
Introduction to Sansan for Engineers / エンジニア向け会社紹介
Avatar for Sansan, Inc. sansan33
PRO
6
68k
インフラエンジニア必見!Kubernetesを用いたクラウドネイティブ設計ポイント大全
Avatar for 高棹大樹 daitak
1
370
OpenShiftでllm-dを動かそう！
Avatar for jpishikawa jpishikawa
0
130
Oracle AI Database 移行・アップグレード勉強会 - RAT活用編
Avatar for oracle4engineer oracle4engineer
PRO
0
100
Red Hat OpenStack Services on OpenShift
Avatar for Tatsuya Amemiya tamemiya
0
120
予期せぬコストの急増を障害のように扱う――「コスト版ポストモーテム」の導入とその後の改善
Avatar for Masahiro Yoshizawa muziyoshiz
1
2k
22nd ACRi Webinar - NTT Kawahara-san's slide
Avatar for Nao Sumikawa nao_sumikawa
0
100
AWS Network Firewall Proxyを触ってみた
Avatar for nagisa_53 nagisa53
1
240
Context Engineeringが企業で不可欠になる理由
Avatar for Hirosato Gamo hirosatogamo
PRO
3
620

Featured

See All Featured
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k
HU Berlin: Industrial-Strength Natural Language Processing with spaCy and Prodigy
Avatar for Ines Montani inesmontani
PRO
0
220
Building the Perfect Custom Keyboard
Avatar for Naoto Takai takai
2
690
16th Malabo Montpellier Forum Presentation
Avatar for AKADEMIYA2063 akademiya2063
PRO
0
52
Crafting Experiences
Avatar for Bethany Jepchumba bethany
1
49
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
77
5.3k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
57
6.8k
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
Avatar for UX Y'all uxyall
0
170
The Mindset for Success: Future Career Progression
Avatar for Greg Gifford greggifford
PRO
0
240
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
57
14k
The Director’s Chair: Orchestrating AI for Truly Effective Learning
Avatar for Mike Taylor tmiket
1
97
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.7k

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