Forem: Marcus Vinicius

Micro Frontends: Um guia completo

Marcus Vinicius — Sun, 16 Apr 2023 14:07:00 +0000

Micro frontends é uma abordagem arquitetônica para desenvolver aplicações web que divide a interface do usuário (frontend) em componentes menores e independentes. Neste artigo, vamos explorar os fundamentos dos micro frontends e como criar sua primeira aplicação.

1. Fundamentos

Antes de começar a desenvolver sua primeira aplicação, é importante entender os conceitos fundamentais dos micro frontends:

Componentes independentes: Cada componente é desenvolvido, testado e implantado de forma independente, permitindo que as equipes trabalhem em paralelo sem interferir no trabalho umas das outras.
Escalabilidade: Micro frontends são projetados para lidar com o crescimento do projeto e a complexidade do código.
Flexibilidade tecnológica: Diferentes componentes podem usar diferentes tecnologias, frameworks e bibliotecas, facilitando a experimentação e adoção de novas tecnologias.

2. Sua primeira aplicação

2.1 UI Frameworks
Escolha os frameworks de UI que você deseja usar em seus micro frontends, como React, Vue, Angular, Svelte, etc. Você pode usar diferentes frameworks para diferentes componentes ou combinar componentes de um mesmo framework.

2.2 Root config
A configuração raiz (root config) é o ponto de entrada da aplicação. Ela é responsável por carregar e gerenciar os micro frontends, definindo a lógica de montagem e desmontagem dos componentes.

2.3 Routing
O roteamento é um aspecto importante dos micro frontends, pois determina quais componentes serão exibidos com base na URL atual. Você pode usar soluções de roteamento específicas do framework ou um roteador independente, como o single-spa-router.

2.4 CSS
Para manter o isolamento entre os micro frontends, é importante gerenciar o CSS de forma eficiente. Algumas abordagens incluem o uso de CSS-in-JS, CSS Modules, ou a adoção de convenções de nomenclatura como BEM para evitar conflitos de estilo.

2.5 Layout
O layout da aplicação é responsável pela organização e posicionamento dos micro frontends na tela. Você pode criar um componente de layout dedicado ou utilizar uma biblioteca de layout como CSS Grid, Flexbox ou Bootstrap para organizar os componentes na página.

2.6 Shared dependencies
As dependências compartilhadas são bibliotecas ou recursos usados por vários micro frontends. É importante gerenciá-las de forma eficiente para evitar duplicação de código e garantir uma experiência consistente. Algumas soluções incluem o uso de um gerenciador de pacotes como Yarn ou NPM, ou a configuração de importações externas no Webpack.

2.7 Compartilhando componentes, lógica e estado
É possível compartilhar componentes, lógica e estado entre os micro frontends. Isso pode ser feito através de uma biblioteca compartilhada, ou utilizando uma solução de gerenciamento de estado global, como Redux ou Vuex.

2.8 Desenvolvimento local
O desenvolvimento local é uma parte crucial da criação de micro frontends, pois permite que as equipes trabalhem em seus componentes de forma independente e vejam as mudanças em tempo real.

2.9 CLI
A interface de linha de comando (CLI) é uma ferramenta útil para automatizar tarefas comuns no desenvolvimento de micro frontends, como criar projetos, executar testes e implantar componentes. Algumas soluções, como single-spa, fornecem sua própria CLI, enquanto outras podem ser construídas usando ferramentas populares como Yarn ou NPM scripts.

3. Implementando sua primeira aplicação micro frontend

Agora que você conhece os fundamentos dos micro frontends, é hora de criar sua primeira aplicação. Siga estas etapas para começar:

Planeje os componentes e escolha os frameworks de UI e outras tecnologias a serem usadas.
Configure a aplicação principal (root config) e registre os micro frontends.
Crie os micro frontends e configure suas dependências, roteamento e estilos.
Adicione um componente de layout e organize os micro frontends na página.
Gerencie as dependências compartilhadas e compartilhe componentes, lógica e estado quando necessário.
Configure o ambiente de desenvolvimento local e use uma CLI para automatizar tarefas comuns.

4. Conclusão

Os micro frontends são uma abordagem arquitetônica poderosa que permite dividir a interface do usuário em componentes menores e independentes. Ao seguir os fundamentos e as etapas descritas neste artigo, você pode criar aplicações escaláveis e flexíveis que são mais fáceis de manter e desenvolver.

Lembre-se de que a adoção dos micro frontends também apresenta desafios, como a complexidade adicional na coordenação e comunicação entre os componentes e a necessidade de gerenciar várias dependências. Portanto, é fundamental considerar os prós e contras dessa abordagem antes de adotá-la em seu projeto.

Na próxima etapa, vamos criar nosso primeiro projeto de micro frontend com dois componentes em React, um componente em Vue e um componente em Angular. Isso nos permitirá explorar a interoperabilidade entre diferentes frameworks e aprimorar nossa compreensão de como os micro frontends funcionam na prática. Através dessa experiência prática, você poderá avaliar melhor se os micro frontends são a escolha certa para seu projeto e sua equipe.

React 18 - Batching updates e Selective Rendering

Marcus Vinicius — Sat, 01 Apr 2023 14:41:16 +0000

No React 18, a estratégia de "batching updates" foi aprimorada para tornar o processo de renderização e atualização de componentes ainda mais eficiente e otimizado. O "batching updates" é uma técnica usada pelo React para agrupar várias atualizações de estado em uma única renderização, reduzindo o número total de renderizações e melhorando o desempenho da aplicação.

Nas versões anteriores do React, o "batching updates" ocorria principalmente dentro de manipuladores de eventos e funções do ciclo de vida dos componentes. No entanto, fora desses contextos, o React não conseguia agrupar as atualizações, o que resultava em várias renderizações e possíveis problemas de desempenho.

No React 18, a estratégia de "batching updates" foi aprimorada e agora é aplicada em todos os contextos, independentemente de onde as atualizações de estado são acionadas. Isso significa que, mesmo se você estiver atualizando o estado fora de um manipulador de eventos ou de uma função do ciclo de vida, o React irá agrupar as atualizações automaticamente, resultando em um processo de renderização mais eficiente.

Aqui está um exemplo simples que ilustra o "batching updates":

import { useState, useEffect } from "react";

function App() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState("");

  useEffect(() => {
    const interval = setInterval(() => {
      // Ambas as atualizações de estado serão agrupadas automaticamente
      setCount((prevCount) => prevCount + 1);
      setText((prevText) => prevText + ".");
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  return (
    <div>
      <p>Contador: {count}</p>
      <p>Texto: {text}</p>
    </div>
  );
}

export default App;

Neste exemplo, criamos um componente App que atualiza duas variáveis de estado (count e text) a cada segundo usando um intervalo. No React 18, mesmo que as atualizações de estado ocorram fora de um manipulador de eventos ou função do ciclo de vida, elas são agrupadas automaticamente, resultando em apenas uma renderização.

Isso é especialmente benéfico em cenários onde várias atualizações de estado ocorrem em rápida sucessão ou simultaneamente, como em casos de carregamento de dados, atualizações em tempo real ou animações complexas. O "batching updates" aprimorado no React 18 garante um processo de renderização mais eficiente e otimizado, melhorando o desempenho da aplicação e proporcionando uma experiência de usuário mais fluida e responsiva.

O "batching updates" aprimorado no React 18 também é compatível com a API de Transitions (expliquei nesse artigo), permitindo que você gerencie animações e transições de forma mais eficiente em conjunto com as atualizações de estado agrupadas. Isso resulta em uma maior capacidade de resposta da interface do usuário e em um melhor desempenho geral da aplicação.

É importante notar que, embora o "batching updates" aprimorado no React 18 seja automático na maioria dos casos, você ainda pode usar a função ReactDOM.unstable_batchedUpdates para forçar o agrupamento de atualizações de estado em casos muito específicos. No entanto, essa função deve ser usada com cautela e somente quando estritamente necessário, pois o uso indevido pode levar a comportamentos inesperados ou problemas de desempenho.

Em resumo, o aprimoramento do "batching updates" no React 18 garante uma renderização mais eficiente e otimizada em todos os contextos, independentemente de onde as atualizações de estado ocorram. Isso melhora o desempenho geral das aplicações e proporciona uma experiência de usuário mais fluida e responsiva. Como desenvolvedor, você pode se beneficiar dessa melhoria simplesmente atualizando para o React 18 e aproveitando os novos recursos e melhorias sem a necessidade de mudanças significativas no seu código.

Falando um pouco agora sobre a Selective Rendering, é uma técnica de otimização no React que envolve a escolha consciente de quais partes da aplicação devem ser atualizadas e renderizadas em resposta a uma mudança de estado. Isso pode melhorar significativamente o desempenho da aplicação e a experiência do usuário, especialmente em casos de atualizações frequentes ou complexas.

No React 18, a Selective Rendering pode ser alcançada usando a API de Transitions e o conceito de "priorização de renderização" que foi introduzido com a nova versão.

Com a priorização de renderização, você pode controlar quais atualizações de estado são consideradas de alta prioridade e quais são de baixa prioridade, permitindo que o React adie atualizações de baixa prioridade se necessário. Isso é especialmente útil em cenários onde há várias atualizações ocorrendo simultaneamente ou em rápida sucessão.

Para implementar a Selective Rendering no React 18, você pode usar o hook useTransition. O useTransition permite que você controle e priorize a renderização de componentes e atualizações de estado, ajudando a criar experiências de usuário mais suaves e responsivas.

Aqui está um exemplo básico de como usar o useTransition para implementar a Selective Rendering:

import { useState, useTransition } from "react";

function App() {
  const [data, setData] = useState(null);
  const [background, setBackground] = useState("#fff");
  const [startTransition, isPending] = useTransition();

  const fetchData = async () => {
    startTransition(() => {
      setData(null);
    });

    const response = await fetch("/api/data");
    const result = await response.json();

    startTransition(() => {
      setData(result);
    });
  };

  const changeBackground = () => {
    setBackground((prevBackground) => (prevBackground === "#fff" ? "#f0f0f0" : "#fff"));
  };

  return (
    <div style={{ background }}>
      <button onClick={fetchData}>Carregar dados</button>
      {isPending && <p>Carregando...</p>}
      {data && <div>{JSON.stringify(data)}</div>}
      <button onClick={changeBackground}>Alterar plano de fundo</button>
    </div>
  );
}

Neste exemplo, a função fetchData é chamada quando o usuário clica no botão "Carregar dados". A transição é iniciada com a função startTransition e, enquanto a transição estiver ativa, o componente exibirá "Carregando...". Quando a transição terminar e os dados forem carregados, o componente exibirá os dados na tela.

A função changeBackground é chamada quando o usuário clica no botão "Alterar plano de fundo". Embora essa atualização de estado não esteja usando o useTransition, ela ainda será renderizada de forma eficiente devido à priorização de renderização introduzida no React 18.

A Selective Rendering no React 18 permite que os desenvolvedores criem experiências de usuário mais fluidas e otimizadas, oferecendo maior controle sobre o processo de renderização e atualização dos componentes.

React 18 - Transitions

Marcus Vinicius — Mon, 27 Mar 2023 13:11:56 +0000

No React 18, foi introduzido um novo recurso chamado Transitions. Transitions é uma API que permite aos desenvolvedores gerenciar animações e transições durante as renderizações, de forma a evitar que o usuário perceba interrupções ou atrasos ao interagir com a interface.

As Transitions do React 18 ajudam a criar experiências de usuário mais suaves e responsivas, permitindo que os desenvolvedores controlem e priorizem a renderização de componentes e atualizações de estado. Isso é especialmente útil quando há muitas mudanças no DOM, como em casos de carregamento de dados, atualizações em tempo real ou animações complexas.

A API de Transitions introduz o hook useTransition, que pode ser usado para definir e controlar uma transição. O useTransition retorna um array com dois elementos: o primeiro é uma função que pode ser usada para iniciar uma transição, e o segundo é um booleano que indica se a transição está ativa ou não.

Aqui está um exemplo básico de como usar o useTransition:

import { useState, useTransition } from "react";

function App() {
  const [data, setData] = useState(null);
  const [startTransition, isPending] = useTransition();

  const fetchData = async () => {
    startTransition(() => {
      setData(null);
    });

    const response = await fetch("/api/data");
    const result = await response.json();

    startTransition(() => {
      setData(result);
    });
  };

  return (
    <div>
      <button onClick={fetchData}>Carregar dados</button>
      {isPending && <p>Carregando...</p>}
      {data && <div>{JSON.stringify(data)}</div>}
    </div>
  );
}

As Transitions no React 18 permitem que os desenvolvedores criem experiências de usuário mais fluidas e otimizadas, oferecendo maior controle sobre o processo de renderização e atualização dos componentes.

Vamos criar um exemplo mais complexo usando Transitions no React 18 para gerenciar a exibição de uma lista de itens com animações de entrada e saída. Para isso, utilizaremos a biblioteca react-spring para criar as animações.

Criaremos o componente AnimatedList:

import { useState, useTransition } from "react";
import { useTransition as useSpringTransition, animated } from "react-spring";

function AnimatedList() {
  const [items, setItems] = useState([]);
  const [inputValue, setInputValue] = useState("");
  const [startTransition, isPending] = useTransition();

  const transitions = useSpringTransition(items, {
    from: { opacity: 0, transform: "translate3d(0, -40px, 0)" },
    enter: { opacity: 1, transform: "translate3d(0, 0, 0)" },
    leave: { opacity: 0, transform: "translate3d(0, -40px, 0)" },
    config: { duration: 300 },
  });

  const addItem = () => {
    startTransition(() => {
      setItems((prevItems) => [...prevItems, inputValue]);
      setInputValue("");
    });
  };

  const removeItem = (index) => {
    startTransition(() => {
      setItems((prevItems) => prevItems.filter((_, i) => i !== index));
    });
  };

  return (
    <div>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        disabled={isPending}
      />
      <button onClick={addItem} disabled={isPending}>
        Adicionar item
      </button>
      <ul>
        {transitions((style, item, _, index) => (
          <animated.li key={item} style={style} onClick={() => removeItem(index)}>
            {item}
          </animated.li>
        ))}
      </ul>
    </div>
  );
}

export default AnimatedList;

Neste exemplo, criamos um componente AnimatedList que permite adicionar e remover itens com animações suaves de entrada e saída. A lista é gerenciada usando o estado items, e as transições são criadas usando a API useTransition do React 18 e a API useTransition do react-spring.

Ao clicar no botão "Adicionar item", a função addItem é chamada e inicia uma transição para adicionar o item à lista. Da mesma forma, ao clicar em um item da lista, a função removeItem é chamada para iniciar uma transição e remover o item. Enquanto a transição estiver ativa, o input e o botão são desabilitados para evitar interações adicionais.

As animações de entrada e saída são definidas no objeto de configuração passado para a função useSpringTransition. Neste caso, os itens da lista são animados com uma mudança de opacidade e uma transformação de posição no eixo Y.

Esse exemplo demonstra como combinar as Transitions do React 18 com animações CSS usando a biblioteca react-spring para criar experiências de usuário mais fluidas e interativas.

Vamos criar o mesmo exemplo usando a biblioteca framer-motion.

import { useState, useTransition } from "react";
import { AnimatePresence, motion } from "framer-motion";

function FramerMotionList() {
  const [items, setItems] = useState([]);
  const [inputValue, setInputValue] = useState("");
  const [startTransition, isPending] = useTransition();

  const addItem = () => {
    startTransition(() => {
      setItems((prevItems) => [...prevItems, inputValue]);
      setInputValue("");
    });
  };

  const removeItem = (index) => {
    startTransition(() => {
      setItems((prevItems) => prevItems.filter((_, i) => i !== index));
    });
  };

  return (
    <div>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        disabled={isPending}
      />
      <button onClick={addItem} disabled={isPending}>
        Adicionar item
      </button>
      <ul>
        <AnimatePresence>
          {items.map((item, index) => (
            <motion.li
              key={item}
              initial={{ opacity: 0, y: -20 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: -20 }}
              transition={{ duration: 0.3 }}
              onClick={() => removeItem(index)}
            >
              {item}
            </motion.li>
          ))}
        </AnimatePresence>
      </ul>
    </div>
  );
}

export default FramerMotionList;

Neste exemplo, criamos um componente FramerMotionList que permite adicionar e remover itens com animações suaves de entrada e saída. A lista é gerenciada usando o estado items, e as transições são criadas usando a API useTransition do React 18 e a API AnimatePresence e motion do framer-motion.

As animações de entrada e saída são definidas nos objetos initial, animate e exit dos componentes motion.li. Neste caso, os itens da lista são animados com uma mudança de opacidade e uma transformação de posição no eixo Y.

Esse exemplo demonstra como combinar as Transitions do React 18 com animações CSS usando a biblioteca framer-motion para criar experiências de usuário mais fluidas e interativas.