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

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
SRE Enabling戦記 - 急成長する組織にSREを浸透させる戦いの歴史
Avatar for Masaki Ishigaki markie1009
0
140
Ruby版 JSXのRuxが気になる
Avatar for SansanTech sansantech
PRO
0
160
データの整合性を保ちたいだけなんだ
Avatar for ShoheiMitani shoheimitani
8
3.2k
生成AIを活用した音声文字起こしシステムの2つの構築パターンについて
Avatar for Kazuki Miura miu_crescent
PRO
3
210
Kiro IDEのドキュメントを全部読んだので地味だけどちょっと嬉しい機能を紹介する
Avatar for khmoryz khmoryz
0
210
【Ubie】AIを活用した広告アセット「爆速」生成事例 | AI_Ops_Community_Vol.2
Avatar for Yoshiki yoshiki_0316
1
110
AzureでのIaC - Bicep? Terraform? それ早く言ってよ会議
Avatar for Toru Makabe torumakabe
1
590
AIエージェントに必要なのはデータではなく文脈だった/ai-agent-context-graph-mybest
Avatar for Jun Naito jonnojun
0
170
フルカイテン株式会社 エンジニア向け採用資料
Avatar for FULL KAITEN fullkaiten
0
10k
usermode linux without MMU - fosdem2026 kernel devroom
Avatar for Hajime Tazaki thehajime
0
240
Webhook best practices for rock solid and resilient deployments
Avatar for Guillaume Laforge glaforge
2
300
Embedded SREの終わりを設計する　「なんとなく」から計画的な自立支援へ
Avatar for SansanTech sansantech
PRO
3
2.6k

Featured

See All Featured
AI in Enterprises - Java and Open Source to the Rescue
Avatar for ivargrimstad ivargrimstad
0
1.1k
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
Avatar for David Neal reverentgeek
1
350
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
340
58k
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
91
590k
Visualization
Avatar for Eitan Lees eitanlees
150
17k
Money Talks: Using Revenue to Get Sh*t Done
Avatar for Nikki Halliwell nikkihalliwell
0
150
Introduction to Domain-Driven Design and Collaborative software design
Avatar for Kenny Baas-Schwegler baasie
1
590
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
162
24k
Efficient Content Optimization with Google Search Console & Apps Script
Avatar for Katarina Dahlin katarinadahlin
PRO
1
330
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
31k
The Language of Interfaces
Avatar for Des Traynor destraynor
162
26k
Primal Persuasion: How to Engage the Brain for Learning That Lasts
Avatar for Mike Taylor tmiket
0
260

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