microfrontend.md

theme	blood
transition	slide
title	Micro Frontend
enableMenu	true
enableSearch	false
enableChalkboard	true
slideNumber	true

Micro Frontend

Luís Antônio (tonhao.dev)

---

---

Objetivo

• O que é
• Como funciona
• Exemplo

---

Um pouco de história

---

Monolito

{width=70%}

---

Monolito - Características

1. Sistema único
2. Não dividido
3. Vários componentes ligados a uma plataforma

---

Monolito - Vantagens

1. Mais simples de desenvolver
2. Simples de testar
3. Simples de fazer o deploy

---

Monolito - Desvantagens

1. Manutenção
2. Alterações vs Deploy
3. Não há flexibilidade quanto a linguagem

---

Em resumo: acoplamento

---

Front & Back

---

A medida que o problema cresceu

---

Micro serviços

(mas só no backend)

---

O que são os micro serviços

é um estilo de arquitetura que estrutura um aplicativo como uma coleção de serviços

microservices.io

---

Características

1. Deploy independente
2. Baixo acoplamento
3. Reflete as necessidades de negócio
4. Responsabilidade de um time pequeno

---

Recaptulando

---

Próximo passo natural?

---

Integração Frontend para Sistemas Verticalizados

---

Ou então

---

Microfrontend

---

Core Ideas

• Be Technology Agnostic

• Be Technology Agnostic
• Isolate Team Code

• Be Technology Agnostic
• Isolate Team Code
• Establish Team Prefixes

• Be Technology Agnostic
• Isolate Team Code
• Establish Team Prefixes
• Favor Native Browser Features over Custom APIs

• Be Technology Agnostic
• Isolate Team Code
• Establish Team Prefixes
• Favor Native Browser Features over Custom APIs
• Build a Resilient Site

---

Uma aplicação de exemplo

{width=100%}

---

Mas antes

---

Problemas

1. Cargas úteis aumentadas
2. Baixo desempenho
3. Coding e Deploy mais complexo
4. Dependências redundantes
5. Risco de falta de comunicação (teams)

---

Como dividir?

---

Botão de comprar - Web Components

class BlueBuy extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `<button type="button">buy for 66,00 €</button>`;
  }

  disconnectedCallback() { ... }
}
window.customElements.define('blue-buy', BlueBuy);

---

Botão de comprar

{width=100%}

---

Usuário escolhe algum trator

{width=100%}

---

const prices = {
  t_porsche: '66,00 €',
  t_fendt: '54,00 €',
  t_eicher: '58,00 €',
};

class BlueBuy extends HTMLElement {
  static get observedAttributes() {
    return ['sku'];
  }
  connectedCallback() {
    this.render();
  }
  render() {
    const sku = this.getAttribute('sku');
    const price = prices[sku];
    this.innerHTML = `<button type="button">buy for ${price}</button>`;
  }
  attributeChangedCallback(attr, oldValue, newValue) {
    this.render();
  }
  disconnectedCallback() {...}
}
window.customElements.define('blue-buy', BlueBuy);

---

Comunicação via props

Funciona bem para pai-filho, mas e no nosso exemplo?

---

Usuário clicou para comprar

---

Problema

Como fazer para que os componentes do time azul se comuniquem?

---

Resposta

Favor Native Browser Features over Custom APIs

---

O botão de comprar

class BlueBuy extends HTMLElement {
  [...]
  connectedCallback() {
    [...]
    this.render();
    this.firstChild.addEventListener('click', this.addToCart);
  }
  addToCart() {
    // maybe talk to an api
    this.dispatchEvent(new CustomEvent('blue:basket:changed', {
      bubbles: true,
    }));
  }
  render() {
    this.innerHTML = `<button type="button">buy</button>`;
  }
  disconnectedCallback() {
    this.firstChild.removeEventListener('click', this.addToCart);
  }
}

---

O carrinho de compras

class BlueBasket extends HTMLElement {
  connectedCallback() {
    [...]
    window.addEventListener('blue:basket:changed', this.refresh);
  }
  refresh() {
    // fetch new data and render it
  }
  disconnectedCallback() {
    window.removeEventListener('blue:basket:changed', this.refresh);
  }
}

---

Vamos olhar on the fly

https://micro-frontends.org/1-composition-client-only/

---

Microfrontend architecture

Luis Antonio (tonhao.dev)

---

Referências

1. https://www.youtube.com/watch?v=KZpSghOWOnE&t=1418s&ab_channel=FullCycle
2. https://www.youtube.com/watch?v=SC1QkRfFccE&t=359s&ab_channel=Codeminer42
3. https://dev.to/jpbrab0/o-que-e-micro-front-end-4kci#:~:text=Micro%20Front-end%20%C3%A9%20um,dessas%20funcionalidades%20de%20forma%20independente
4. https://micro-frontends.org/