Forem: Dev Maiqui 🇧🇷

⚛️⏳Parte 4: Criando um Timer com Histórico em React

Dev Maiqui 🇧🇷 — Wed, 12 Mar 2025 11:37:53 +0000

Esta é a quarta parte do projeto que construí na formação React da Rocketseat, um projeto de duas páginas/telas, onde uma tela contém o timer, e a outra tela contém o histórico dos ciclos realizados.

Nesta quarta parte do projeto vamos focar nas funcionalidades da aplicação.

Caso queira adquirir os cursos da Rocketseat com o meu cupom de desconto Acesse esse link

Links úteis:

Capítulos:

1 - Iniciando novo ciclo
- 1.1 - Closures no React
- 1.2 - Apenas um ciclo ativo
2 - Criando countdown
- 2.1 - Separando minutos e segundos
- 2.2 - Instalando date-fns
- 2.3 - Reduzindo countdown com useEffect
- 2.4 - Usando return dentro do useEffect
4 - Timer no título do navegador
5 - Interrompendo o ciclo

1 - Iniciando novo ciclo

Até agora o que nós temos é uma função chamada handleCreateNewCycle fazendo um console.log dos dados:

Mas, na verdade, queremos que essa função inicie um novo ciclo, queremos que a aplicação tenha um ciclo ativo.

E, para refletir isso na interface, que um novo ciclo iniciou, precisamos ter um estado, que é a única forma de armazenar alguma informação no componente que vá fazer com que a interface reaja a essa informação, ou seja, que a interface mude.

Como vamos ter uma página de histórico dos ciclos, precisamos de uma lista, e precisamos que cada ciclo tenha um identificador.

Então, vamos criar um estado e uma interface no arquivo src/pages/Home/index.tsx:

import { useState } from "react";

interface Cycle {
  id: string;
  task: string;
  minutesAmount: number;
}

export function Home() {
  const [cycles, setCycles] = useState<Cycle[]>([]);
...

e vamos setar o novo ciclo:

function handleCreateNewCycle(data: NewCycleFormData) {
  const newCycle: Cycle = {
    id: String(new Date().getTime()), // retorna em milissegundos
    task: data.task,
    minutesAmount: data.minutesAmount,
  };

  // [...cycles, newCycle] está criando uma nova lista, seguindo a recomendação de imutabilidade
  setCycles([...cycles, newCycle]);

  reset();
}

no fim temos esse código adicionado:

1.1 - Closures no React

Precisamos fazer uma pequena correção no código abaixo:

setCycles([...cycles, newCycle]);

Precisamos usar uma função para pegar sempre o estado atual. Isso é chamado de Closure:

setCycles((state) => [...state, newCycle]);

Agora o state sempre trará a lista de ciclos mais recente antes da gente incluir o novo ciclo. Após a alteração, o state atual terá o nosso novo ciclo.

1.2 - Apenas um ciclo ativo

Temos a página com a lista de ciclos, mas, apenas um ciclo estará ativo, apenas um ciclo terá a condição Em andamento.

E podemos pensar em duas formas de fazer isso. Uma delas seria colocando isActive no Cycle:

interface Cycle {
  id: string;
  task: string;
  minutesAmount: number;
  isActive: boolean
}

Mas qual o problema de fazer assim?

O problema é quando eu setar um novo ciclo como ativo, eu vou ter que percorrer todos os ciclos e verificar qual estava ativo antes para setar como inativo. Então toda vez que a gente for setar um ciclo como ativo, vamos ter que fazer duas operações.

Existe uma alternativa melhor, que é manter um estado com o ID do ciclo ativo:

const [activeCycleId, setActiveCycleId] = useState<string | null>(null);

Quando a aplicação inicializa, não terá nenhum ciclo ativo, então o activeCycleId começa com null.

Precisamos agora setar o activeCycleId quando um novo ciclo for criado:

E percorrer os ciclos para encontrar qual ciclo possui o ID do ciclo ativo:

Quando abrir a aplicação pela primeira vez, o console.log(activeCycle) mostrará undefined, pois não há um ciclo ativo.

Após iniciar um novo ciclo clicando no botão ▶️ Começar, podemos ver os dados do ciclo ativo no console:

OBS: Toda vez que colocamos um console.log no React, acaba que aparece duas vezes o mesmo resultado no console. Isso acontece apenas em desenvolvimento e tem relação com o <React.StrictMode> no arquivo main.tsx. Isso acontece para o React conseguir detectar alguns tipos de bugs.

commit: feat: ✨ add newCycle and setActiveCycleId

2 - Criando countdown

Nesta parte, quando o ciclo ativo iniciar vamos fazer com que o timer vá reduzindo.

No arquivo src/pages/Home/index.tsx dentro da função Home.

O usuário informa em minutos, mas o timer irá reduzir em segundos:

const totalSeconds = activeCycle 
  ? activeCycle.minutesAmount * 60 
  : 0;

Para transformar minutos em segundos, precisamos multiplicar por 60.

Como o timer irá reduzir a cada um segundo, precisamos de um estado que irá guardar a quantidade de segundos que já se passaram desde que o ciclo ativo iniciou:

const [amountSecondsPassed, setAmountSecondsPassed] = useState(0);

Assim podemos calcular totalSeconds menos amountSecondsPassed para mostrar o tempo que já passou na tela. Existem várias estratégias, mas vamos usar essa.

const currentSeconds = activeCycle
  ? totalSeconds - amountSecondsPassed
  : 0;

2.1 - Separando minutos e segundos

Precisamos calcular e separar currentSeconds em minutos e segundos para mostrar em tela.

const minutesAmount = String(
  Math.floor(currentSeconds / 60)
).padStart(2, "0");

const secondsAmount = String(
  currentSeconds % 60
).padStart(2, "0");

Entendendo esse cálculo:

Para transformar segundos em minutos, precisamos dividir por 60.

25 minutos * 60 = 1500 segundos

1500 segundos / 60 = 25 minutos

se tiver passado 1 segundo, ao invés de 1500 segundos, teremos 1499 segundos:

1499 segundos / 60 = 24,9833333333 minutos

24,9833333333 por ser um número quebrado não podemos mostrar assim em tela.

Quantos minutos cheios nós temos em 1499 segundos tirando os quebrados????

Temos 24 minutos! O outro minuto (0,9833333333) falta 1 segundo.

Então podemos sempre arredondar essa divisão para baixo usando Math.floor.

E para pegar os segundos, usamos o operador de resto (Operador Mod) % que pega o resto da divisão:

1499 segundos % 60 = 59 segundos

E esse padStart serve para quê???

O método padStart() preenche a string com outra string (várias vezes, se necessário) até que a string resultante atinja o comprimento fornecido. O preenchimento é aplicado do início dessa string.

Quando um número for abaixo de 10, exemplo 9, quebraria o layout, mas com padStart garantimos que o 9 se torne 09.

Só falta agora mostrar em tela:

<CountdownContainer>
  <span>{minutesAmount[0]}</span>
  <span>{minutesAmount[1]}</span>
  <Separator>:</Separator>
  <span>{secondsAmount[0]}</span>
  <span>{secondsAmount[1]}</span>
</CountdownContainer>

commit: feat: ✨ add countdown

2.2 - Instalando date-fns

Daqui a pouco precisaremos usar a função differenceInSeconds do pacote date-fns, por isso já vamos fazer a instalação dele:

$ npm i date-fns

commit: chore: ➕ add date lib $ npm i date-fns

2.3 - Reduzindo countdown com `useEffect`

Existe o método setInterval que possibilita chamar uma função a cada um segundo, ou o tempo que você desejar. Mas esse tempo no navegador não é preciso, é apenas uma estimativa, ou seja, se você setar o tempo de 1 segundo, não quer dizer que sempre será 1 segundo exato. Essa estimativa de tempo leva em consideração desempenho da máquina, aba do navegador em segundo plano, entre outras coisas.

Então não podemos nos basear no tempo do setInterval para reduzir o contador, pois pode ser que o timer não fique correto!

Por isso, vamos gravar o exato momento em que o ciclo ativo iniciou, adicionando startDate ao Cycle:

const newCycle: Cycle = {
  id: String(new Date().getTime()),
  task: data.task,
  minutesAmount: data.minutesAmount,
  startDate: new Date(), // Date() grava data e horário
};

Usando `useEffect`

Para reduzir o countdown vamos utilizar o setInterval dentro de um hook chamado useEffect. Se você não tem conhecimento sobre esse hook, deixarei uma sugestão de vídeo explicando sobre: Aprenda useEffect de uma vez por todas 🔥

Como visto no texto mais acima, existe um jeito onde o timer não ficará 100% certo, vamos ver a forma errada de usar o setInterval nesse caso:

Pra nos ajudar a fazer da forma correta, vamos importar differenceInSeconds do pacote date-fns:

import { differenceInSeconds } from "date-fns";

differenceInSeconds calcula a diferença de duas datas em segundos.

useEffect(() => {
  if (activeCycle) {
    setInterval(() => {
      setAmountSecondsPassed(
        differenceInSeconds(new Date(), activeCycle.startDate)
      );
    }, 1000);
  }
}, [activeCycle]);

activeCycle entre colchetes ([activeCycle]) significa que toda vez que activeCycle mudar, o código dentro do useEffect será acionado.

O countdown está reduzindo, mas ainda existem bugs que vamos precisar corrigir ao longo do desenvolvimento.

commit: feat: ✨ add countdown

2.4 - Usando `return` dentro do `useEffect`

Existe um bug no nosso contador. Podemos perceber que após um ciclo de 10 minutos ter iniciado, ao tentar iniciar um novo ciclo de 20 minutos, por exemplo, o timer não começará nos 20 minutos.

Etapas para solucionar o Bug:

O useEffect será acionado toda vez que um novo ciclo iniciar, ou seja, quando a variável activeCycle mudar.
O que está acontecendo é que quando o useEffect é chamado, um novo setInterval está sendo criado, ou seja, não estamos usando sempre o mesmo setInterval.
Precisamos então reiniciar/resetar o setInterval quando um novo ciclo iniciar, ou seja, quando o useEffect for chamado novamente.
Para resetar precisamos usar a função clearInterval()
E para usar a função clearInterval no momento certo, ou seja, quando o useEffect for chamado novamente, precisamos usar o return de dentro do useEffect, mas também de dentro da condição if.

useEffect(() => {
  let interval: number;

  if (activeCycle) {
    interval = setInterval(() => {
      setAmountSecondsPassed(
        differenceInSeconds(new Date(), activeCycle.startDate)
      );
    }, 1000);
  }

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

Resumindo, o return dentro do useEffect não será executado na primeira vez que o useEffect for chamado, o return será executado nas próximas vezes que o useEffect for chamado.

E para finalizar a correção do bug, precisamos resetar o valor amountSecondsPassed, usando setAmountSecondsPassed(0); dentro da função handleCreateNewCycle:

  function handleCreateNewCycle(data: NewCycleFormData) {
    const newCycle: Cycle = {
      id: String(new Date().getTime()),
      task: data.task,
      minutesAmount: data.minutesAmount,
      startDate: new Date(),
    };

    setCycles((state) => [...state, newCycle]);
    setActiveCycleId(newCycle.id);
    setAmountSecondsPassed(0); // Adicione essa linha

    reset();
  }

4 - Timer no título do navegador

Vamos agora alterar o title da página para mostrar o timer, ou seja, mostrar o timer na aba do navegador.

  useEffect(() => {
    if (activeCycle) {
      document.title = `${minutes}:${seconds}`
    }
  }, [minutes, seconds, activeCycle])

OBS: Se não estiver na mesma aba, o timer no título não vai aparecer de 1 em 1 segundo certinho, pela questão que já foi comentada anteriormente sobre o setInterval.

commit: feat: ✨ add clearInterval and add timer to document.title

5 - Interrompendo o ciclo

⚛️⏳Parte 3: Criando um Timer com Histórico em React

Dev Maiqui 🇧🇷 — Tue, 25 Feb 2025 23:26:30 +0000

Seguindo com a terceira parte do projeto que construí na formação React da Rocketseat, um projeto de duas páginas/telas, onde uma tela contém o timer, e a outra tela contém o histórico dos ciclos realizados.

Nesta terceira parte do projeto vamos focar no formulário, validação e desempenho.

Caso queira adquirir os cursos da Rocketseat com o meu cupom de desconto Acesse esse link

Links úteis:

Capítulos:

1 - Controlled vs Uncontrolled
2 - O melhor dos dois mundos com React Hook Form
3 - Usando React Hook Form
4 - Validação com Zod
5 - Validação com o botão habilitado
6 - TypeScript no Formulário
7 - Resetando o Formulário

1 - Controlled vs Uncontrolled

Neste conteúdo vamos entender como podemos criar bons formulários em React.

Olhando o nosso formulário da página Home temos o campo onde colocamos o nome da tarefa e outro campo onde informamos por quanto tempo iremos trabalhar nessa tarefa. E, a primeira coisa que precisamos é de validação nesses campos, para que o usuário não faça o submit desse formulário sem preencher esses campos, ou preenchendo com o valor errado.

Outra coisa é o botão que fica ativo somente quando todos os campos estiverem preenchidos. Então, precisamos monitorar de alguma forma se o usuário está preenchendo, se já preencheu esses campos, podemos dizer em tempo real, para só depois habilitar o botão.

Há duas formas de trabalhar com formulários, a forma controlada e a forma não controlada (Controlled / Uncontrolled), e é muito importante entender esses dois termos, porque eles têm muito a ver como o React funciona.

A forma controlada (Controlled) é sobre manter em tempo real o estado, a informação que o usuário insere na nossa aplicação numa variável do componente. Então há todo momento que o usuário estiver digitando no input, o estado é atualizado com a nova informação, assim sempre teremos o valor mais atual do que o usuário digitou.

Estamos falando de formulário, mas isso pode ser usado em qualquer lugar que tenha um input.

Um exemplo fazendo da forma controlada:

Como temos esse valor em tempo real, a gente consegue facilmente ter acesso a esse valor no momento de fazer o submit. E, facilmente, conseguimos refletir visualmente alterações na interface, baseado no valor desses inputs.

Um exemplo disso é quando queremos habilitar o botão apenas quando o valor da tarefa esteja preenchido:

Então Controlled Components dentro do React, ou seja, qualquer componente que seja monitorado em tempo real o input do usuário, traz muita fluidez para mostrar ou deixar de mostrar algo na interface da aplicação, baseado nesse input do usuário.

O lado negativo do componente controlado

Toda vez que a gente faz uma atualização de estado, a gente provoca uma nova renderização, ou seja, toda vez que o setTask é chamado por qualquer motivo, o React precisa recalcular todo o conteúdo do componente, do estado que mudou. Isso de recalcular todo o conteúdo do componente, não necessariamente é lento, mas se a interface for muito complexa, com muita informação, pode, sim, virar um gargalo.

Então em alguns casos, lidar com formulários desta maneira controlada, pode ser um problema para a aplicação em questão de desempenho. Na maioria das vezes não vai ser um problema, mas em alguns momentos, vai ser.

A forma Uncontrolled

Como seria então a forma Uncontrolled?

Desta forma Uncontrolled a gente acaba perdendo a fluidez.

Quando é indicado cada?

Controlled (Monitorado em tempo real):
- formulários simples com poucos campos;
- interface simples;
- formulário de login, por exemplo;
Uncontrolled (Não Monitorado):
- formulários gigantes com muitos campos;

2 - O melhor dos dois mundos com `React Hook Form`

Nessa parte vamos utilizar a biblioteca React Hook Form. Ela nos ajuda a trabalhar com Controlled Components sem perder o desempenho, evitando renderizações desnecessárias.

O React Hook Form é uma biblioteca popular para gerenciar formulários em React por várias razões importantes:

Performance otimizada - Minimiza a quantidade de re-renderizações usando um sistema de registro de campos não controlados, o que melhora significativamente a performance comparado com formulários controlados tradicionais.
Menos código - Reduz significativamente a quantidade de código necessário para gerenciar formulários. Você não precisa criar estados para cada campo nem gerenciar suas atualizações manualmente.
Validação eficiente - Oferece validação integrada e fácil de implementar, incluindo:
- Validação em tempo real
- Validação personalizada
- Integração com bibliotecas como Yup, Zod ou Joi
Melhor experiência de desenvolvimento - Fornece:
- Tipagem forte com TypeScript
- DevTools para debugar
- Tratamento de erros intuitivo
Gerenciamento de estados do formulário - Gerencia automaticamente estados como:
- touched/untouched
- dirty/pristine
- validação
- submissão

Para fazer a instalação execute o comando em seu terminal:

$ npm i react-hook-form

commit: build: ➕ add react-hook-form lib $ npm i react-hook-form

3 - Usando `React Hook Form`

No arquivo src/pages/Home/index.tsx vamos importar a função useForm:

import { useForm } from 'react-hook-form'

useForm é um hook. Por convenção, um hook começa com use no nome. Os hooks são funções que acoplam uma funcionalidade em um componente existente.

useForm() retorna um objeto, então conseguimos fazemos a desestruturação desse objeto, e as funções principais são register e handleSubmit:

export function Home() {
  const { register, handleSubmit } = useForm()
}

register é uma função que vai adicionar um input ao nosso formulário. useForm() é como se a gente tivesse criado um novo formulário para a aplicação. E a função register diz quais os campos que vamos ter no nosso formulário.

Para registrar o TaskInput:

<TaskInput
 id="task"
 list="task-suggestions"
 placeholder="Dê um nome para o seu projeto"
 {...register("task")}
/>

A função register recebe o nome do input como argumento/valor e retorna vários métodos/funções e propriedades usadas no HTML:

Então com o spread operator {...register("task")} estamos pegando todos os métodos e as propriedades do register e passando para o componente TaskInput.

E o mesmo para o MinutesAmountInput:

<MinutesAmountInput
  type="number"
  id="minutesAmount"
  placeholder="00"
  step={5}
  min={5}
  max={60}
  {...register("minutesAmount", { valueAsNumber: true })}
/>

{ valueAsNumber: true } é para transformar de string para number.

Usando `handleSubmit`

Habilitando o botão (usando o watch)

Com a função watch podemos observar o campo e saber em tempo real o valor dele:

Usando variáveis auxiliares

Variáveis auxiliares são variáveis que não alteram a funcionalidade do código, mas melhoram a legibilidade do código.

O commit desta parte infelizmente eu acabei deixando junto com a parte 5 e a parte 6 😕 recomendo fazer a separação 😅

commit: feat: ✨ add controlled form with react-hook-form and validation with zod

4 - Validação com `Zod`

Por padrão, a biblioteca React Hook Form não traz nenhuma funcionalidade de validação. Ela prefere ser uma biblioteca enxuta, com menos funcionalidades, assim o usuário consegue escolher bibliotecas complementares de sua preferência, como, por exemplo, bibliotecas de validação de formulários baseada em esquema, já que existem ótimas opções como: Yup, Zod, Superstruct e Joi.

Aqui vamos utilizar a Zod, pois traz mais integração com TypeScript:

$ npm i zod

commit: build: ➕ add validation lib $ npm i zod

E para o React Hook Form fazer a integração com essas bibliotecas de validação, precisamos instalar o pacote @hookform/resolvers:

$ npm i @hookform/resolvers

commit: build: ➕ add lib to integrate react-hook-form with other libs $ npm i @hookform/resolvers

5 - Validação com o botão habilitado

Podemos ver na imagem abaixo que o botão fica desabilitado quando o campo está vazio:

Neste caso, não precisaríamos de validação, mas como em muitos formulários não acontecem isso e necessitam informar ao usuário qual informação está incorreta, vamos habilitar o botão e realizar a validação do formulário.

No arquivo src/pages/Home/index.tsx vamos fazer a importação do Zod:

import { zodResolver } from "@hookform/resolvers/zod";
import * as zod from "zod";

O código * as zod é uma técnica do ECMAScript Modules usado para importar tudo do pacote zod, já que ele não possui export default.

Antes de utilizar o zod, podemos ver no console.log(data) que adicionamos anteriormente neste mesmo arquivo, o formato do data como sendo um objeto:

No mesmo arquivo vamos realizar a validação então de um objeto com zod.object():

Vamos verificar a validação dos minutos com o Zod, mas para fazer isso, precisamos comentar o código HTML que já faz essa validação:

Agora podemos testar a validação do Zod. Quando clicamos no botão, percebemos que nenhum resultado aparece no console do navegador, ou seja, não está chegando no console.log pois estamos com erros de validação:

Visualizando os erros de validação do Zod

Para visualizar os erros de validação do Zod, temos que usar o formState.

Perceba que o console.log(formState.errors) está fora da função handleCreateNewCycle:

Assim já conseguimos visualizar a mensagem de erro:

Caso eu queira colocar uma mensagem diferente:

Essas mensagens podem ser mostradas em tela para o usuário, mas nesse projeto, como temos a validação do campo númerico pelo HTML e o botão que só habilita quando há algo no campo de descrição, não iremos precisar mostrar essas mensagens ao usuário.

Assim podemos remover o formState e colocar o max={60} devolta.

O commit desta parte infelizmente eu acabei deixando junto com a parte 3 e parte 6 😕 recomendo fazer a separação 😅

commit: feat: ✨ add controlled form with react-hook-form and validation with zod

6 - TypeScript no Formulário

Agora vamos colocar uma tipagem para o data: any como mostrado na imagem abaixo:

Podemos já deduzir qual será a tipagem olhando para o nosso formulário, um objeto; com esses dois campos:

Podemos criar a tipagem de forma manual com interface:

Existe uma propriedade chamada de defaultValues que podemos passar pra o objeto de configuração dentro do useForm, que nos permite setar valores iniciais para os campos:

Se tentarmos usar o comando de autocomplete Ctrl + Space, não há sugestões válidas:

Para obtermos o autocomplete precisamos usar um generic, como mostrado quando paramos o mouse em cima do useForm, assim visualizamos os valores padrão <{}, any>:

Adicionando o generic obtemos o autocomplete:

Tipagem automática por inferência

Olhando para o código abaixo jé podemos perceber os tipos pela estrutura:

Usando infer do TypeScript conseguimos extrair a tipagem do zod.object() e, assim, podemos remover o interface:

Note que usamos a palara type, podemos assumir interface quando criamos o tipo manualmente, e type quando o tipo vem de forma automática.

Qual o benefício de usar o infer?

Se no futuro precisássemos adicionar um campo novo, por exemplo, chamado de owner, automaticamente o infer adicionaria o tipo do campo. Parando o mouse em cima de NewCycleFormData podemos notar o campo novo adicionado automaticamente:

Isso é o diferencial do Zod e você pode conferir tudo isso na documentação oficial da bilioteca.

O commit da parte 6 infelizmente eu acabei deixando junto com a parte 3 e parte 5 😕 recomendo fazer a separação 😅

feat: ✨ add controlled form with react-hook-form and validation with zod

7 - Resetando o Formulário

Ao iniciar o timer clicando no botão Começar, os campos não estão sendo resetados para o valor original. A biblioteca React Hook Form fornece a função reset para resetar os campos para os valores originais do defaultValues:

⚛️⏳Parte 2: Criando um Timer com Histórico em React

Dev Maiqui 🇧🇷 — Sat, 01 Feb 2025 23:03:25 +0000

Seguindo com a segunda parte do projeto que construí na formação React da Rocketseat, um projeto de duas páginas/telas, onde uma tela contém o timer, e a outra tela contém o histórico dos ciclos realizados.

Nesta segunda parte do projeto vamos focar na criação das rotas, no layout e estilização das páginas.

Caso queira adquirir os cursos da Rocketseat com o meu cupom de desconto Acesse esse link

Links úteis:

Capítulos:

1 - Criando as rotas
- 1.1 - React Router DOM
- 1.2 - Criando as páginas
- 1.3 - Removendo o componente Button
- 1.4 - Criando o arquivo de rotas
- 1.5 - Context Providers
2 - Layout de rotas
- 2.1 - Criando o componente Header
- 2.2 - Criando o DefaultLayout
3 - Estilizando o Header
- 3.1 - Instalando o Phosphor Icons
- 3.2 - Criando pasta para cada componente
- 3.3 - Estilizando o DefaultLayout
- 3.4 - Código do Header/styles.ts
4 - Timer da Home Page
5 - Finalizando a Home Page
6 - Aprimorando inputs
7 - Tabela da History Page
8 - Status da Tabela da History Page 🟡🔴🟢
9 - 🐛 statusColour ➡️ $statusColour

1 - Criando as rotas

Nesta primeira parte vamos focar na criação das rotas da aplicação.

Uma rota é um padrão de URL que corresponde a uma determinada página ou recurso.

Vamos supor que você tenha um blog com as seguintes URLs:

/ (página inicial)
/sobre (página sobre)
/contato (página de contato)

Você pode definir as seguintes rotas para essas URLs:

/ -> home() (função que renderiza a página inicial)
/sobre -> about() (função que renderiza a página sobre)
/contato -> contact() (função que renderiza a página de contato)

Quando um usuário acessar /sobre, o sistema de roteamento irá identificar a rota correspondente e executar a função about(), que irá gerar o HTML da página "Sobre" e enviá-lo ao navegador do usuário.

E, para criar as rotas, precisamos instalar a biblioteca que nos ajudará a fazer isso de uma forma mais fácil.

1.1 - React Router DOM

Vamos instalar a biblioteca de roteamento com o comando:

$ npm i react-router-dom

commit: chore: ➕ add route lib $ npm i react-router-dom

1.2 - Criando as páginas

Para testarmos as rotas, precisamos possuir as páginas, ou seja, os componentes que serão renderizados em tela quando uma URL for acessada.

Vamos criar o arquivo src/pages/History.tsx com o conteúdo:

export function History() {
  return <h1>History</h1>;
}

E também o arquivo src/pages/Home.tsx com o conteúdo:

export function Home() {
  return <h1>Home</h1>;
}

1.3 - Removendo o componente Button

Vamos apagar os arquivos src/components/Button.tsx e src/components/Button.styles.ts, já que eles eram apenas para mostrar como o Styled Components funcionava.

E no arquivo src/App.tsx vamos remover o componente Button:

1.4 - Criando o arquivo de rotas

Poderíamos colocar as rotas no arquivo src/App.tsx, mas para uma melhor organização, vamos criar o arquivo src/Router.tsx e colocar as rotas em um componente separado:

import { Route, Routes } from "react-router-dom";
import { History } from "./pages/History";
import { Home } from "./pages/Home";

export function Router() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/history" element={<History />} />
    </Routes>
  );
}

E no arquivo src/App.tsx adicionamos o <BrowserRouter>:

import { ThemeProvider } from "styled-components";
import { BrowserRouter } from "react-router-dom";
import { Router } from "./Router";

import { GlobalStyle } from "./styles/global";
import { defaultTheme } from "./styles/themes/default";

export function App() {
  return (
    <ThemeProvider theme={defaultTheme}>
      <BrowserRouter>
        <Router />
      </BrowserRouter>
      <GlobalStyle />
    </ThemeProvider>
  );
}

Executando a nossa aplicação com npm run dev no endereço http://localhost:3000 podemos ver a página Home:

E no endereço http://localhost:3000/history podemos ver a página History:

commit: feat: ✨ add Router

1.5 - Context Providers

Você pôde perceber no arquivo src/App.tsx, que tanto o <ThemeProvider> quanto o , que não produzem nada visualmente na tela, são componentes que precisam ficar por fora dos nossos componentes que produzem algo visual na tela. E, tanto o <ThemeProvider> como o , são chamados de Context Providers.

Os Context Providers não produzem nenhum visual em tela, mas produzem um contexto para os componentes que estão dentro deles, ou seja, passam informações para esses componentes que estão dentro, no intuito desses componentes interiores saberem do contexto de fora.

2 - Layout de rotas

Nesta parte vamos entender o que é Layout de Rotas e como isso pode ajudar no desempenho da aplicação.

Olhando para as páginas, podemos observar que o Header se repete, independente da rota que acessarmos:

Se em cada componente de página, nós adicionarmos o código do Header dentro, cada acesso do usuário em cada página, o Header estará sendo recriado, construído em tela do absoluto zero.

Podemos então deixar o código do Header em um único lugar para ser criado do zero apenas uma vez, melhorando assim o desempenho da aplicação.

2.1 - Criando o componente Header

Vamos criar o arquivo src/components/Header.tsx com o conteúdo:

export function Header() {
  return <h1>Header</h1>;
}

E poderíamos ter em cada página o Header:

Podemos ver que funciona:

Mas se o Header vai estar em todas as páginas, tem jeito melhor de fazer, mais performático!

2.2 - Criando o `DefaultLayout`

Vamos criar o Layout Padrão que também será um componente, criando por primeiro o arquivo src/layouts/DefaultLayout.tsx com o conteúdo:

import { Outlet } from "react-router-dom";
import { Header } from "../components/Header";

export function DefaultLayout() {
  return (
    <div>
      <Header />
      <Outlet />
    </div>
  );
}

O <Outlet /> é um espaço para inserir um conteúdo, um conteúdo que irá mudar dependendo da rota. Se a rota for / então o conteúdo de Outlet será do componente Home, se a rota for /history então o conteúdo de Outlet será do componente History. Ainda não irá funcionar, pois precisamos alterar as nossas rotas.

No arquivo src/Router.tsx:

import { Route, Routes } from "react-router-dom";
import { DefaultLayout } from "./layouts/DefaultLayout";
import { History } from "./pages/History";

import { Home } from "./pages/Home";

export function Router() {
  return (
    <Routes>
      <Route path="/" element={<DefaultLayout />}>
        <Route path="/" element={<Home />} />
        <Route path="/history" element={<History />} />
      </Route>

      {/* 
      - Um Exemplo de um layout diferente:

      - Para acessar a rota: "/admin/products"

      <Route path="/admin" element={<AdminLayout />}>
        <Route path="/" element={<Home />} />
        <Route path="/products" element={<History />} />
      </Route> 

      - Nesse caso todas as rotas que começarem com `path="/admin"` terão `<AdminLayout />` aplicado.
      */}
    </Routes>
  );
}

O <Route path="/" element={<DefaultLayout />}> envolve as rotas Home e History, e o path="/" foi colocado, pois queremos aplicar o DefaultLayout para todas as rotas.

Se ao invés de path="/" fosse path="/teste", o DefaultLayout seria aplicado para todas as rotas que começassem com /teste.

commit: feat: ✨ add DefaultLayout

3 - Estilizando o Header

Nesta parte vamos estilizar o Header e a caixa por volta como na imagem abaixo:

3.1 - Instalando o Phosphor Icons

Vamos utilizar uma família de ícones chamada Phosphor Icons e instalar a bilioteca phosphor-react

$ npm i phosphor-react

Atualmente já existe uma biblioteca mais nova renomeada de @phosphor-icons/react.

commit: build: ➕ add icon lib $ npm i phosphor-react

3.2 - Criando pasta para cada componente

Vamos adotar apartir de agora uma organização para cada componente, já que vamos ter um arquivo de estilização no formato ts do Styled Components para cada componente.

Vamos fazer a refatoração do arquivo src/layouts/DefaultLayout.tsx, renomeando ele para src/layouts/DefaultLayout/index.tsx. Na mesma pasta vamos criar o arquivo de estilização src/layouts/DefaultLayout/styles.ts:

Na mesma pasta do componente também podemos ter futuramente arquivos de teste e arquivos de tipagem, tudo relacionado ao componente por exemplo.

Vamos fazer outra refatoração parecida, agora com o Header:

src/components/Header.tsx -> src/components/Header/index.tsx

E vamos criar o arquivo src/components/Header/styles.ts

3.3 - Estilizando o DefaultLayout

Vamos criar um componente estilizado chamado LayoutContainer no arquivo src/layouts/DefaultLayout/styles.ts:

import styled from "styled-components";

export const LayoutContainer = styled.div`
  max-width: 74rem;
  height: calc(100vh - 10rem);
  margin: 5rem auto;
  padding: 2.5rem;
  background: ${(props) => props.theme["gray-800"]};
  border-radius: 8px;
  display: flex;
  flex-direction: column;
`;

E no arquivo src/layouts/DefaultLayout/index.tsx:

import { Outlet } from "react-router-dom";
import { Header } from "../../components/Header";
import { LayoutContainer } from "./styles";

export function DefaultLayout() {
  return (
    <LayoutContainer>
      <Header />
      <Outlet />
    </LayoutContainer>
  );
}

Explicação do CSS:

1 - styled.div: A tag div foi escolhida pois se encaixa melhor nesse cenário, já que estamos criando a caixa onde ficará todo o conteúdo da página. A tag main NÃO foi escolhida nesse caso pois haverá o header e o footer dentro dessa tag, e a main seria mais apropriada para conter a funcionalidade principal da página.

2 - max-width: 74rem;: 70rem (1120px) é a largura da caixa, e somando mais o padding 2rem (32px) para cada lado, temos os 74rem de largura.

Podemos ver o tamanho da caixa no Figma conforme a imagem abaixo:

E conforme a gente dominui o tamanho no navegador, os 2rem de padding se mantém:

Para essa margem de 2rem funcionar tive que adiconar margin: 2rem no arquivo src/styles/global.ts:

margin-inline: 2rem; é a mesma coisa que margin: 0 2rem;.

OBS: Essa alteração não estatá junto do commit desta parte do artigo, pois apenas verifiquei isso no momento que eu estava escrevendo essa parte do artigo, já que não foi explicado nas aulas da Rocketseat.

3 - height: calc(100vh - 10rem);: 100vh é para que a caixa ocupe a altura inteira da página menos os 10rem da margem (5rem de margem no topo e 5rem de margem no bottom).

4 - margin: 5rem auto;: A margem possui 5rem (80px) de top e 5rem (80px) de bottom, como mostrado na imagem do Figma abaixo:

OBS: Para essas linhas laranjas com os valores das margens aparecerem no Figma, é preciso clicar na caixa e depois segurar a tecla option no Mac ou alt no Windows/Linux, e mover o mouse para a área desejada.

Já o valor auto para as laterais faz com que automaticamente seja calculado um valor de forma igual para cada margem lateral, assim o conteúdo acaba ficando centralizado.

3.4 - Código do `Header/styles.ts`

Vamos adicionar o CSS no arquivo src/components/Header/styles.ts:

import styled from "styled-components";

export const HeaderContainer = styled.header`
  display: flex;
  align-items: center;
  justify-content: space-between;
  nav {
    display: flex;
    gap: 0.5rem;
    a {
      width: 3rem;
      height: 3rem;
      display: flex;
      justify-content: center;
      align-items: center;
      color: ${(props) => props.theme["gray-100"]};
      border-top: 3px solid transparent;
      border-bottom: 3px solid transparent;
      &:hover {
        border-bottom: 3px solid ${(props) => props.theme["green-500"]};
      }
      &.active {
        color: ${(props) => props.theme["green-500"]};
      }
    }
  }
`;

Caso você não esteja familizarizado com essa sintaxe &.active e &:hover recomendo olhar sobre CSS nesting. Essa sintaxe começou a aparecer no SASS e depois introduzido no CSS, por isso, favor verificar a compatibilidade dos navegadores no Can I use.

No arquivo src/components/Header/index.tsx:

import { HeaderContainer } from "./styles";
import { Scroll, Timer } from "phosphor-react";
import logoIgnite from "../../assets/logo-ignite.svg";
import { NavLink } from "react-router-dom";

export function Header() {
  return (
    <HeaderContainer>
      <span>
        <img src={logoIgnite} alt="" />
      </span>
      <nav>
        <NavLink to="/" title="Timer">
          <Timer size={24} />
        </NavLink>
        <NavLink to="/history" title="Histórico">
          <Scroll size={24} />
        </NavLink>
      </nav>
    </HeaderContainer>
  );
}

O SVG do logo você pode pegar no Figma do projeto feito pela Rocketseat ou também está disponível no commit: feat: 💄 style Header and DefaultLayout

4 - Timer da Home Page

Nesta parte vamos começar a estilizar a página Home e, ao final, teremos esse resultado:

Após criar a pasta Home em src/pages/Home, coloque o arquivo src/pages/Home.tsx dentro desta pasta Home e renomeie o arquivo de Home.tsx para index.tsx:

src/pages/Home.tsx ➡️ src/pages/Home/index.tsx

Nesse novo arquivo src/pages/Home/index.tsx adicione o código abaixo:

import { Play } from "phosphor-react";
import {
  CountdownContainer,
  FormContainer,
  HomeContainer,
  Separator,
} from "./styles";

export function Home() {
  return (
    <HomeContainer>
      <form>
        <FormContainer>
          <label htmlFor="task">Vou trabalhar em</label>
          <input id="task" />
          <label htmlFor="minutesAmount">durante</label>
          <input type="number" id="minutesAmount" />
          <span>minutos.</span>
        </FormContainer>
        <CountdownContainer>
          <span>0</span>
          <span>0</span>
          <Separator>:</Separator>
          <span>0</span>
          <span>0</span>
        </CountdownContainer>
        <button type="submit">
          <Play size={24} />
          Começar
        </button>
      </form>
    </HomeContainer>
  );
}

Nas aulas da Rocketseat não foi usada a unidade relativa rem para os ícones, mas eu acho bem interessante manter tudo com rem. Caso você queira usar o tamanho relativo do ícone em rem você pode usar desta forma abaixo como explicado na documentação:

{/* 24/16 = 1.5 */}

<Play size="1.5rem" />

Vamos criar o arquivo de estilos src/pages/Home/styles.ts com o código:

export const HomeContainer = styled.main`
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3.5rem;
  }
`;

export const FormContainer = styled.div`
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: ${(props) => props.theme["gray-100"]};
  font-size: 1.125rem;
  font-weight: bold;
  flex-wrap: wrap;
`;

export const CountdownContainer = styled.div`
  font-family: "Roboto Mono", monospace;
  font-size: 10rem;
  line-height: 8rem;
  color: ${(props) => props.theme["gray-100"]};
  display: flex;
  gap: 1rem;
  span {
    background: ${(props) => props.theme["gray-700"]};
    padding: 2rem 1rem;
    border-radius: 8px;
  }
`;

export const Separator = styled.div`
  padding: 2rem 0;
  color: ${(props) => props.theme["green-500"]};
  width: 4rem;
  overflow: hidden;
  display: flex;
  justify-content: center;
`;

Essa parte do Timer da Home Page a princípio não há nenhuma novidade, nada que a gente não tenha visto antes mas, caso você esteja com dúvida ainda com esse código, incentivo você a voltar para a Parte 1 onde é explicado detalhadamente sobre Styled Components.

Segue o commit desta parte: feat: 💄 style home countdown

5 - Finalizando a Home Page

Ao finalizar essa parte teremos a Home assim:

Vamos criar mais componentes estilizados. Uma dica quando estamos utilizando Styled Components é evitar usar código em cascata e focar em criar componentes estilizados.

Por exemplo, poderíamos fazer o seguinte código para estilizarmos o botão, conforme mostra a imagem abaixo:

Mas isso não é indicado, dê preferência para criar um componente estilizado para esse botão, e é isso que vamos fazer nomeando esse componente de <StartCountdownButton>.

E o código final do aqruivo src/pages/Home/index.tsx será esse:

import { Play } from "phosphor-react";
import {
  CountdownContainer,
  FormContainer,
  HomeContainer,
  MinutesAmountInput,
  Separator,
  StartCountdownButton,
  TaskInput,
} from "./styles";

export function Home() {
  return (
    <HomeContainer>
      <form>
        <FormContainer>
          <label htmlFor="task">Vou trabalhar em</label>
          <TaskInput id="task" placeholder="Dê um nome para o seu projeto" />
          <label htmlFor="minutesAmount">durante</label>
          <MinutesAmountInput
            type="number"
            id="minutesAmount"
            placeholder="00"
          />
          <span>minutos.</span>
        </FormContainer>
        <CountdownContainer>
          <span>0</span>
          <span>0</span>
          <Separator>:</Separator>
          <span>0</span>
          <span>0</span>
        </CountdownContainer>
        <StartCountdownButton disabled type="submit">
          <Play size={24} />
          Começar
        </StartCountdownButton>
      </form>
    </HomeContainer>
  );
}

E o código final do arquivo de estilização src/pages/Home/styles.ts:

import styled from "styled-components";

export const HomeContainer = styled.main`
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3.5rem;
  }
`;

export const FormContainer = styled.div`
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: ${(props) => props.theme["gray-100"]};
  font-size: 1.125rem;
  font-weight: bold;
  flex-wrap: wrap;
`;

const BaseInput = styled.input`
  background: transparent;
  height: 2.5rem;
  border: 0;
  border-bottom: 2px solid ${(props) => props.theme["gray-500"]};
  font-weight: bold;
  font-size: 1.125rem;
  padding: 0 0.5rem;
  color: ${(props) => props.theme["gray-100"]};
  &:focus {
    box-shadow: none;
    border-color: ${(props) => props.theme["green-500"]};
  }
  &::placeholder {
    color: ${(props) => props.theme["gray-500"]};
  }
`;

export const TaskInput = styled(BaseInput)`
  flex: 1;
`;

export const MinutesAmountInput = styled(BaseInput)`
  width: 4rem;
`;

export const CountdownContainer = styled.div`
  font-family: "Roboto Mono", monospace;
  font-size: 10rem;
  line-height: 8rem;
  color: ${(props) => props.theme["gray-100"]};
  display: flex;
  gap: 1rem;
  span {
    background: ${(props) => props.theme["gray-700"]};
    padding: 2rem 1rem;
    border-radius: 8px;
  }
`;

export const Separator = styled.div`
  padding: 2rem 0;
  color: ${(props) => props.theme["green-500"]};
  width: 4rem;
  overflow: hidden;
  display: flex;
  justify-content: center;
`;

export const StartCountdownButton = styled.button`
  width: 100%;
  border: 0;
  padding: 1rem;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: bold;
  cursor: pointer;
  background: ${(props) => props.theme["green-500"]};
  color: ${(props) => props.theme["gray-100"]};
  &:disabled {
    opacity: 0.7;
    cursor: not-allowed;
  }
  &:not(:disabled):hover {
    background: ${(props) => props.theme["green-700"]};
  }
`;

Nesse código temos algo novo que é o styled(BaseInput):

const BaseInput = styled.input`
  background: transparent;
  height: 2.5rem;
  border: 0;
  border-bottom: 2px solid ${(props) => props.theme["gray-500"]};
  font-weight: bold;
  font-size: 1.125rem;
  padding: 0 0.5rem;
  color: ${(props) => props.theme["gray-100"]};
  &:focus {
    box-shadow: none;
    border-color: ${(props) => props.theme["green-500"]};
  }
  &::placeholder {
    color: ${(props) => props.theme["gray-500"]};
  }
`;

export const TaskInput = styled(BaseInput)`
  flex: 1;
`;

export const MinutesAmountInput = styled(BaseInput)`
  width: 4rem;
`;

Usando o styled(BaseInput) estamos criando um componente tendo como base o componente BaseInput, ou seja, estamos fazendo herança de estilização, assim evitamos repetir código.

commit dessa parte: feat: 💄 finish styling the home

6 - Aprimorando inputs

Vamos adicionar step={5} para quando clicado na seta ir aumentando de 5 em 5 minutos, um min={5} para aceitar no mínimo 5 minutos, e max={60} para aceitar no máximo 60 minutos, ou seja, uma hora.

E também vamos adicionar o <datalist> que trará sugestões de projetos já feitos:

Altere o arquivo src/pages/Home/index.tsx:

Caso queira sumir com a seta do <datalist> no arquivo src/pages/Home/styles.ts:

Esse código para sumir com a seta é específico para o browser Google Chrome. Para cada browser há uma maneira específica de sumir com a seta.

commit: feat: ✨ add datalist

7 - Tabela da History Page

Nesta parte iremos construir e estilizar a tabela, no final o resultado será esse:

Após criar a pasta History em src/pages/History, coloque o arquivo src/pages/History.tsx dentro desta pasta History e renomeie o arquivo de History.tsx para index.tsx:

src/pages/History.tsx ➡️ src/pages/History/index.tsx

Nesse novo arquivo src/pages/History/index.tsx adicione o código abaixo:

import { HistoryContainer, HistoryList } from "./styles";

export function History() {
  return (
    <HistoryContainer>
      <h1>Meu histórico</h1>
      <HistoryList>
        <table>
          <thead>
            <tr>
              <th>Tarefa</th>
              <th>Duração</th>
              <th>Duração</th>
              <th>Status</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Tarefa</td>
              <td>20 minutos</td>
              <td>Há 2 meses</td>
              <td>Concluído</td>
            </tr>
            <tr>
              <td>Tarefa</td>
              <td>20 minutos</td>
              <td>Há 2 meses</td>
              <td>Concluído</td>
            </tr>
            <tr>
              <td>Tarefa</td>
              <td>20 minutos</td>
              <td>Há 2 meses</td>
              <td>Concluído</td>
            </tr>
            <tr>
              <td>Tarefa</td>
              <td>20 minutos</td>
              <td>Há 2 meses</td>
              <td>Concluído</td>
            </tr>
            <tr>
              <td>Tarefa</td>
              <td>20 minutos</td>
              <td>Há 2 meses</td>
              <td>Concluído</td>
            </tr>
            <tr>
              <td>Tarefa</td>
              <td>20 minutos</td>
              <td>Há 2 meses</td>
              <td>Concluído</td>
            </tr>
            <tr>
              <td>Tarefa</td>
              <td>20 minutos</td>
              <td>Há 2 meses</td>
              <td>Concluído</td>
            </tr>
          </tbody>
        </table>
      </HistoryList>
    </HistoryContainer>
  );
}

Nesta mesma pasta crie o arquivo de estilização src/pages/History/styles.ts com o código:

import styled from "styled-components";

export const HistoryContainer = styled.main`
  flex: 1;
  padding: 3.5rem;
  display: flex;
  flex-direction: column;
  h1 {
    font-size: 1.5rem;
    color: ${(props) => props.theme["gray-100"]};
  }
`;

export const HistoryList = styled.div`
  flex: 1;
  overflow: auto;
  margin-top: 2rem;
  table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px;
    th {
      background-color: ${(props) => props.theme["gray-600"]};
      padding: 1rem;
      text-align: left;
      color: ${(props) => props.theme["gray-100"]};
      font-size: 0.875rem;
      line-height: 1.6;
      &:first-child {
        border-top-left-radius: 8px;
        padding-left: 1.5rem;
      }
      &:last-child {
        border-top-right-radius: 8px;
        padding-right: 1.5rem;
      }
    }
    td {
      background-color: ${(props) => props.theme["gray-700"]};
      border-top: 4px solid ${(props) => props.theme["gray-800"]};
      padding: 1rem;
      font-size: 0.875rem;
      line-height: 1.6;
      &:first-child {
        width: 50%;
        padding-left: 1.5rem;
      }
      &:last-child {
        padding-right: 1.5rem;
      }
    }
  }
`;

Porque esse <HistoryList> foi criado? No mobile há uma dificuldade em mostrar tabelas, e esse <HistoryList> foi criado para que quando a tela estiver no tamanho de mobile, o usuário consiga dar scroll para o lado. Não há como fazer scroll com table apenas com div.

O que faz esse border-collapse: collapse;? junta duas bordas da tabela em uma só borda. Se cada borda possui 1px quando as colunas se encontrarem ao invés da borda ter 2px, terá apenas uma borda de 1px. Resumindo mantém todas as linhas da tabela na mesma proporção.

commit: feat: ✨ add History page with styles

8 - Status da Tabela da History Page 🟡🔴🟢

Agora vamos para o código das cores do indicador da coluna de status:

Pederíamos criar um componente React para <Status> mas nesse caso como será utilizado apenas na página History, vamos criar somente um Styled Component.

Nesse caso, não vou colocar o código aqui pois é mais interessante visualizar as alterações no GitHub, então por favor acesse o commit abaixo:

commit: feat: ✨ add status color to History page

9 - 🐛 `statusColour` ➡️ `$statusColour`

Agora vamos corrigir um bug, acessando o seu terminal do navegador provavelmente você verá um erro parecido com esse:

Alguns alunos da Rocketseat comentaram sobre esse bug no commit da aula

Para corrigir o problema eu segui a documentação do Styled Components

E a minha solução está nesse commit: 🐛 change statusColour to $statusColour

E assim finalizamos a parte 2 🎉

⚛️⏳Parte 1: Criando um Timer com Histórico em React

Dev Maiqui 🇧🇷 — Thu, 30 Jan 2025 13:32:39 +0000

Neste artigo vou mostrar um dos projetos que construí na formação React da Rocketseat, um projeto de duas páginas/telas, onde uma tela contém o timer, e a outra tela contém o histórico dos ciclos realizados.

Já que uma das melhores maneiras de se aprender é ensinando, resolvi criar esta postagem para revisitar e fixar melhor os fundamentos da biblioteca React.

Caso queira adquirir os cursos da Rocketseat com o meu cupom de desconto Acesse esse link

Ao longo do projeto vamos ver sobre vários assuntos:

Estilização com Styled Components;
Roteamento de páginas com React Router;
Distribuição de estado com Context API;
Efeito colateral do hook useEffect;
entre outros assuntos...

Nesta primeira parte iremos cobrir a estrutura da aplicação, a criação do projeto e a utilização da biblioteca Styled Components para estilização da nossa aplicação.

Links úteis:

Capítulos:

1 - Criação do projeto
- 1.1 - Usando o Vite
- 1.2 - Instalando as dependências
- 1.3 - (Opcional) Removendo arquivos desnecessários
2 - Styled Components
- 2.1 - Instalando o pacote
- 2.2 - Instalação da tipagem
- 2.3 - Instale a extensão no VSCode
- 2.4 - Entendendo como funciona o styled-components
- 2.5 - Configurando Temas
- 2.6 - Tipagem de Temas
- 2.7 - Estilos Globais
- 2.8 - Cores e fonte

1 - Criação do projeto

1.1 - Usando o Vite

Vamos criar o projeto usando uma ferramenta chamada Vite que consegue fazer toda a configuração de um projeto frontend, configurando, por exemplo, o bundler e o compiler da nossa aplicação, nos poupando bastante tempo.

$ npm create vite@latest

Após executar o comando, dê um nome para a aplicação, após selecione React e TypeScript.

commit: feat: 🎉 add initial structure $ npm create vite@latest

1.2 - Instalando as dependências

Após o projeto ter sido criado, na raiz do projeto, instale as dependências com o comando:

$ npm i

commit: build: 🔧 install dependencies $ npm i

1.3 - (Opcional) Removendo arquivos desnecessários

commit: refactor: 🔥 remove vite unused files

2 - Styled Components

2.1 - Instalando o pacote styled-components

Execute o comando na raiz do projeto:

$ npm i styled-components

commit: build: ➕ add styled-components $ npm i styled-components

2.2 - Instalação da tipagem

O pacote styled-components era um daqueles pacotes que não traziam a tipagem do TypeScript junto dele:

desta forma, era preciso instalar a tipagem separadamente com esse comando:

# NÃO É MAIS PRECISO INSTALAR

$ npm i @types/styled-components -D

-D é uma abreviatura de --save-dev que significa que será instalado apenas para desenvolvimento, ou seja, essa biblioteca não fará parte do build final da aplicação em produção. Isso porque o código TypeScript é convertido todo para JavaScript, então os tipos não serão usados no código final em produção.

Hoje em dia nas versões mais atuais, isso não é mais preciso, pois a tipagem já vem junto dele:

Você pode ignorar os commits abaixo, pois um deles possue a instalação dos tipos e o outro a desinstalação. Isso ocorreu, pois as aulas do Rocketseat estavam desatualizadas no momento. Mas como eu instalei a versão mais recente, pude desinstalar sem problema o pacote dos tipos.

commit: build: ➕ add types of styled-components $ npm i @types/styled-components -D

commit: build: ➖ remove @types/styled-components with $ npm uninstall @types/styled-components

2.3 - Instale a extensão no VSCode

vscode-styled-components

Essa extensão habilita o Syntax highlighting, ou seja, deixa o código CSS colorido dentro do Tagged templates

2.4 - Entendendo como funciona o `styled-components`

Vamos criar um componente de botão para exemplificar o funcionamento do styled-components.

Crie o arquivo src/components/Button.tsxcom o código:

export function Button() {
 return <button>Enviar</button>
}

Em src/App.tsx vamos repetir várias vezes o botão em tela:

import { Button } from "./components/Button";

export function App() {
 return (
  <>
   <Button />
   <Button />
   <Button />
   <Button />
  </>
 )
}

Os sinais <> e </> chamado Fragment é usado quando precisamos colocar vários components dentro sem precisar de uma tag div

Vamos agora adicionar uma propriedade para mudar a cor do botão.

Em src/components/Button.tsx adicionamos uma tipagem das cores aceitas para cada botão:

interface ButtonProps {
 variant?: 'primary' | 'secondary' | 'danger' | 'success';
}

export function Button(props: ButtonProps) {
 return <button>Enviar</button>
}

Em src/App.tsx, para cada botão, vamos adicionar a propriedade de cor variant:

import { Button } from "./components/Button";

export function App() {
 return (
  <>
   <Button variant="primary" />
   <Button variant="secondary" />
   <Button variant="success" />
   <Button variant="danger" />
   <Button />
  </>
 )
}

Quando estamos utilizando o CSS tradicional, para estilizar precisamos utilizar as classes. Para isso, vamos utilizar o css-modules apenas para este exemplo, pois, mais adiante, vamos utilizar apenas o styled-components.

Criando o arquivo de css-modules em src/components/Button.module.css com as classes:

.button {
 width: 100px;
 height: 40px;
}

vamos importar os estilos e colocar o className em src/components/Button.tsx

import styles from "./Button.module.css";

interface ButtonProps {
 variant?: 'primary' | 'secondary' | 'danger' | 'success';
}

export function Button(props: ButtonProps) {
 return <button className={styles.button}>Enviar</button>
}

e o resultado agora são botões com tamanhos maiores:

e com as cores no mesmo arquivo src/components/Button.tsx:

import styles from "./Button.module.css";

interface ButtonProps {
 variant?: 'primary' | 'secondary' | 'danger' | 'success';
}

export function Button({ variant = 'primary' }: ButtonProps) {
 return <button className={`${styles.button} ${styles[color]}`}>Enviar</button>
}

Agora falta criar as classes para as cores. No arquivo de CSS src/components/Button.module.css:

.button {
 width: 100px;
 height: 40px;
}

.primary {
 background-color: purple;
}

.secondary {
 background-color: orange;
}

.danger {
 background-color: red;
}

.success {
 background-color: green;
}

e o resultado das cores é esse:

Refatorando usando `Styled Components`

Vamos renomear o arquivo de CSS src/components/Button.module.css para ➡️ src/components/Button.styles.ts terminando exatamente com .ts e o conteúdo:

import styled from "styled-components";

export const ButtonContainer = styled.button`
  width: 100px;
  height: 40px;
`;

e voltando no arquivo src/components/Button.tsx vamos trocar a tag button para ButtonContainer:

import { ButtonContainer } from "./Button.styles";

interface ButtonProps {
 variant?: 'primary' | 'secondary' | 'danger' | 'success';
}

export function Button({ variant = "primary" }: ButtonProps) {
  return <ButtonContainer>Enviar</ButtonContainer>;
}

Como resultado temos os botões com os mesmos tamanhos, pois definimos o height e o width no ButtonContainer:

Podemos definir a cor adicionando variant={variant} no mesmo arquivo src/components/Button.tsx:

import { ButtonContainer } from "./Button.styles";

interface ButtonProps {
 variant?: 'primary' | 'secondary' | 'danger' | 'success';
}

export function Button({ variant = "primary" }: ButtonProps) {
  return <ButtonContainer variant={variant}>Enviar</ButtonContainer>;
}

e no arquivo de estilização src/components/Button.styles.ts:

import styled from "styled-components";

interface ButtonContainerProps {
  variant: "primary" | "secondary" | "danger" | "success";
}

export const ButtonContainer = styled.button`
  width: 100px;
  height: 40px;
`;

nesse mesmo arquivo vamos criar um tipo para variant:

import styled from "styled-components";

export type ButtonVariant = "primary" | "secondary" | "danger" | "success";

interface ButtonContainerProps {
  variant: ButtonVariant;
}

export const ButtonContainer = styled.button`
  width: 100px;
  height: 40px;
`;

E no arquivo src/components/Button.tsx vamos importar e usar essa tipagem:

import { ButtonContainer, ButtonVariant } from "./Button.styles";

interface ButtonProps {
  variant?: ButtonVariant;
}

export function Button({ variant = "primary" }: ButtonProps) {
  return <ButtonContainer variant={variant}>Enviar</ButtonContainer>;
}

Para completar a tipagem e fazer uso dela, vamos adicionar <ButtonContainerProps>

import styled from "styled-components";

export type ButtonVariant = "primary" | "secondary" | "danger" | "success";

interface ButtonContainerProps {
  variant: ButtonVariant;
}

export const ButtonContainer = styled.button<ButtonContainerProps>`
  width: 100px;
  height: 40px;
`;

Tipagem feita, agora precisamos setar as cores no mesmo arquivo de estilização src/components/Button.styles.ts adicionando a constante buttonVariants:

import styled from "styled-components";

export type ButtonVariant = "primary" | "secondary" | "danger" | "success";

interface ButtonContainerProps {
  variant: ButtonVariant;
}

const buttonVariants = {
  primary: "purple",
  secondary: "orange",
  danger: "red",
  success: "green",
};

export const ButtonContainer = styled.button<ButtonContainerProps>`
  width: 100px;
  height: 40px;
`;

e fazendo uma interpolação de strings ${}, o Styled Components envia todas as propriedades automaticamente para a função:

import styled from "styled-components";

export type ButtonVariant = "primary" | "secondary" | "danger" | "success";

interface ButtonContainerProps {
  variant: ButtonVariant;
}

const buttonVariants = {
  primary: "purple",
  secondary: "orange",
  danger: "red",
  success: "green",
};

export const ButtonContainer = styled.button<ButtonContainerProps>`
  width: 100px;
  height: 40px;

  ${props => {
    return `background-color: ${buttonVariants[props.variant]}`
  }}
`;

o props.variant é o valor que vem automaticamente do arquivo do componente do botão.

E o resultado com as cores permanece identicando:

Conclusão do Styled Components: A vantagem é não precisar usar multiplas classes para a estilização e mantendo um scopo de componente.

Apenas uma melhoria na questão de Syntax highlighting:

Para melhorar podemos importar o css e acrescentar a palavra css na frente da template literals:

commit: feat: ✨ add button component to understand about styled-components

2.5 - Configurando Temas

Crie o arquivo src/styles/themes/default.ts com o seguinte código:

export const defaultTheme = {
  white: "#FFF",
  primary: "#8257e6",
  secondary: "orange",
};

No arquivo src/App.tsx vamos importar o defaultTheme e vamos passar como valor a propriedade theme do ThemeProvider:

import { ThemeProvider } from "styled-components";
import { Button } from "./components/Button";

import { defaultTheme } from "./styles/themes/default";

export function App() {
  return (
    <ThemeProvider theme={defaultTheme}>
      <Button variant="primary" />
      <Button variant="secondary" />
      <Button variant="success" />
      <Button variant="danger" />
      <Button />
    </ThemeProvider>
  );
}

Se tivessemos mais de um tema, poderíamos trocar o valor defaultTheme para lightTheme por exemplo: theme={lightTheme}

Podemos acessar as cores do tema usando props.theme.nomeDaPropriedade:

`
  background-color: ${(props) => props.theme.primary};
`

No arquivo do botão src/components/Button.styles.ts:

...

export const ButtonContainer = styled.button<ButtonContainerProps>`
  width: 100px;
  height: 40px;
  border-radius: 4px;
  border: 0;
  margin: 8px;
  background-color: ${(props) => props.theme.primary};
  color: ${(props) => props.theme.white};
`;

e temos esse resultado:

commit: feat: ✨ add themes

2.6 - Tipagem de Temas

Temos um problema de autocomplete ao digitar props.theme. o VSCode não nos fornece as opções disponíveis, isso acontece por falta de configuração de tipagem:

Para corrigir isso, vamos criar um arquivo no diretório src/@types/styled.d.ts.

A nomenclatura @types foi usada nesse caso simplismente para permanecer no topo da árvore de pastas. Além de ficar com o ícone do TypeScript.

Já a nomenclatura do arquivo styled.d.ts terminando com d.ts, indica que esse arquivo possuí apenas código de tipagem do TypeScript, chamado de arquivo de definição de tipos.

Nesse arquivo src/@types/styled.d.ts vamos adicionar duas importações:

import "styled-components";
import { defaultTheme } from "../styles/themes/default";

A imagem acima mostra o ponteiro do mouse descansando em cima da const defaultTheme, indicando que a devolução do valor é do tipo objeto, com as propriedades do tipo string, ou seja, mostra a tipagem do defaultTheme. Isso acontece pois o TypeScript cria a tipagem de forma automática pra gente, mas existe uma forma de nós acessarmos isso e guardar em uma variável com o seguinte código:

type ThemeType = typeof defaultTheme;

// ThemeType poderia ter qualquer nome

Na imagem acima podemos perceber que o tipo gerado (inferência de tipo) para o defaultTheme foi guardado dentro de ThemeType, isso graças ao typeof que capturou a tipagem do defaultTheme.

No arquivo src/@types/styled.d.ts vamos fazer o uso do declare module:

import "styled-components";
import { defaultTheme } from "../styles/themes/default";

type ThemeType = typeof defaultTheme;

declare module "styled-components" {
  // Aqui vamos subscrever a tipagem do DefaultTheme
}

O declare module cria uma tipagem para o módulo styled-components do NPM, e toda vez que o styled-components for importado, a tipagem, a definição de tipos que vai ser puxada, vai ser o que foi definido dentro do scopo do declare module.

Como queremos apenas subscrever algo de dentro do declare module, e não criar toda uma tipagem nova, nós tivemos que fazer a importação import "styled-components"; e fazer a declaração com o declare module "styled-components". Sem a importação estaríamos criando tudo do zero a definição de tipos do pacote styled-components.

Na imagem acima, mostra o arquivo src/components/Button.styles.ts, e nele o ponteiro do mouse está parado em cima da palavra theme. Se clicar em cima de theme segurando a tecla ctrl ou command, é direcionado para o arquivo de tipos do styled-components:

Agora clicando em cima de DefaultTheme em laranja, é direcionado para a exportação da tipagem do DefaultTheme:

Na imagem acima, podemos ver que o objeto {} do DefaultTheme exportado está vazio, pois esse objeto foi feito para ser subscrito pelas nossas tipagens.

Então o código final do arquivo src/@types/styled.d.ts ficará assim:

import "styled-components";
import { defaultTheme } from "../styles/themes/default";

type ThemeType = typeof defaultTheme;

// subescreve a tipagem do DefaultTheme
declare module "styled-components" {
  export interface DefaultTheme extends ThemeType {}
}

Agora no arquivo src/components/Button.styles.ts podemos ver a tipagem funcionando:

e se tentar colocar uma propriedade que não existe, um erro será acusado:

commit: feat: ✨ add type to themes and override DefaultTheme

2.7 - Estilos Globais

Criando o arquivo no diretório src/styles/global.ts. Mais uma vez terminando com .ts pois estamos utilizando styled-components. Todo CSS global vamos colocar nesse arquivo:

import { createGlobalStyle } from "styled-components";

export const GlobalStyle = createGlobalStyle`
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  body {
    background: #333;
    color: #FFF;
  }
`;

Vamos agora importar no arquivo src/App.tsx e utilizar:

import { ThemeProvider } from "styled-components";
import { Button } from "./components/Button";

import { GlobalStyle } from "./styles/global";
import { defaultTheme } from "./styles/themes/default";

export function App() {
  return (
    <ThemeProvider theme={defaultTheme}>
      <Button variant="primary" />
      <Button variant="secondary" />
      <Button variant="success" />
      <Button variant="danger" />
      <Button />

      {/* tanto faz a posição do <GlobalStyle /> dentro do ThemeProvider */}
      <GlobalStyle /> 
    </ThemeProvider>
  );
}

Tanto faz a posição do <GlobalStyle /> dentro do ThemeProvider, o importante é que <GlobalStyle /> esteja dentro do scopo do ThemeProvider, senão o <GlobalStyle /> não terá acesso as variáveis do nosso tema.

Acessando a aplicação, podemos ver os estilos globais sendo aplicados, como o background na cor cinza:

commit: feat: ✨ add global styles

2.8 Cores e Fonte

Para este projeto foi escolhido a fonte Roboto e a fonte Roboto Mono

A fonte Roboto Mono é uma fonte tipográfica monoespaçada, cujas letras e caracteres ocupam o mesmo espaço horizontal. Ela será ideal para ser usada no timer.

Adicionamos as fontes no arquivo index.html:

<!doctype html>
<html lang="pt">

<head>
  <meta charset="UTF-8" />

  <!-- adicione essas duas linhas -->
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <!-- o ideal é deixar os dois links acima por primeiro para carregar mais rápido as fontes -->

  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <!-- e adicione também esta linha -->
  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,700;1,700&family=Roboto:wght@400;700&display=swap" rel="stylesheet" />

  <title>Ignite Timer</title>
</head>

No arquivo de estilos globais src/styles/global.ts:

import { createGlobalStyle } from "styled-components";

export const GlobalStyle = createGlobalStyle`
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  body {
    background: #333;
    color: #FFF;
  }

  /* adicione */
  body, input, textarea, button {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 1rem;
  }
`;

Fonte tipográfica definida, agora vamos definir as cores no nosso tema, no arquivo src/styles/themes/default.ts:

export const defaultTheme = {
  white: "#FFF",

  "gray-100": "#E1E1E6",
  "gray-300": "#C4C4CC",
  "gray-400": "#8D8D99",
  "gray-500": "#7C7C8A",
  "gray-600": "#323238",
  "gray-700": "#29292E",
  "gray-800": "#202024",

  "gray-900": "#121214",
  "green-300": "#00B37E",
  "green-500": "#00875F",
  "green-700": "#015F43",

  "red-500": "#AB222E",
  "red-700": "#7A1921",

  "yellow-500": "#FBA94C",
};

Vamos utilizar as cores no arquivo src/styles/global.ts:

import { createGlobalStyle } from "styled-components";

export const GlobalStyle = createGlobalStyle`
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  :focus {
    outline: none;
    box-shadow: 0 0 0 2px ${(props) => props.theme["green-500"]};
  }

  body {
    background: ${(props) => props.theme["gray-900"]};
    color: ${(props) => props.theme["gray-300"]};
  }

  body, input, textarea, button {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 1rem;
  }
`;

Ao digitar props.theme., por causa da tipagem, temos todas as cores disponiveis no autocomplete:

Pra finalizar essa parte de cores, precisamos arrumar o erro no arquivo de estilos do botão src/components/Button.styles.ts:

Trocamos de props.theme.primary para props.theme["green-500"].

Feito isso já podemos fisualizar o novo estilo:

commit: feat: 💄 add fonts and colors

⌨️ 🔍🐛 Corrigindo atalhos no VSCode

Dev Maiqui 🇧🇷 — Sun, 18 Aug 2024 00:00:38 +0000

Ué? Esse atalho não funciona! Será que são outras teclas? 🤔

Eu já me perguntei isso 😁 e tive que fazer várias pesquisas pra solucionar alguns problemas de atalho no VSCode, então nesse artigo eu vou encurtar esse trabalho pra você, bora lá?

Capítulos:

Plugin do VSCode usando o atalho
Software do SO usando o atalho
Atalho do SO
Conclusão

Plugin do VSCode usando o atalho

Vou pegar então um exemplo que aconteceu comigo...

Existe um atalho para selecionar a linha inteira, ⌘ cmd + L no mac, e ctrl + L no Linux e Windows. Mas por algum motivo não funcionava.

Então comecei a investigação... 🕵️‍♂️ Primeiro eu precisava descobrir qual o nome desse atalho. Nos links oficiais a seguir você encontra o nome ao lado das teclas:

OK! agora eu sei que Select current line é o nome que está no link oficial.

Vamos então ver o que está no VSCode abrindo a janela de atalhos:

E digitando Select current line:

Por algum motivo não apareceu nenhum atalho ou opção para adicionar ele no meu VSCode. Normalmente o nome que está na documentação dá certo. Um exemplo: para deletar a linha inteira o nome do atalho é Delete line:

Quem sabe então existe outro nome para ele? pode ser!!! existe uma outra forma que podemos pesquisar o atalho:

Na imagem acima você precisa clicar no ícone de teclado. Após isso, qualquer tecla que você digitar, o VSCode irá pesquisar se existe algum atalho registrado, então vamos digitar as teclas do nosso atalho:

Olha só!!! Não é que o nome está diferente mesmo!!! O atalho ⌘ cmd + L está gravado para o comando chamado Expand Line Selection. Mas será que esse comando tem a função mesmo de selecionar toda a linha? Enquanto eu me perguntava isso notei ali que existia dois atalhos do Live Server (Plugin do VSCode que eu instalei pra fazer o reload automaticamente dos projetos simples de frontend).

Atalhos esses que precisam de combinação. Quando eu digito o atalho ⌘ cmd + L uma mensagem aparece no VSCode:

💡 Bingo!!! Era isso!!! O Live Server adicionou teclas de atalho que precisavam iniciar com o atalho ⌘ cmd + L. Quando eu digitava o atalho o VSCode esperava o próximo comando ao invés de selecionar a linha.

Como solucionar?

Podemos clicar com o botão direito do mouse em cima do atalho do Live Server e remover ele, ou editar clicando na lápis, mas você vai precisar escolher um atalho que não entre em conflito com outro.

Bom, agora você aprendeu também que pode editar colocando teclas diferentes para qualquer atalho. Isso é interessante quando você está acostumado com outras teclas.

Software do SO usando o atalho

Outro exemplo que aconteceu comigo foi com o atalho de parar a execução do servidor no terminal, as teclas Ctrl + c simplesmente param de funcionar. Após investigação descobri que o software que eu havia instalado para desenhar na tela estava usando esse atalho e, para solucionar, desmarquei esse atalho. Já aproveitei e tudo que estava usando Ctrl + Outra tecla alterei para Ctrl + Shift + Outra tecla:

Atalho do SO

Outro exemplo que aconteceu comigo foi com o atalho Trigger Suggest. Eu usava as teclas Ctrl + Space tanto no Windows como no Linux mas, quando mudei para o Mac, simplesmente não funcionava, então acabei usando as teclas ⌥ Option (alt) + Escape, que era uma alternativa já configurada como mostra na imagem abaixo:

Até eu tinha me adaptado com essas novas teclas, mas as teclas ⌃ Ctrl + Space pra mim fazia mais sentido, porque era mais fácil de acessar, então resolvi fazer a investigação até que consegui resolver desmarcando o atalho que o Mac já estava usando como mostra na imagem abaixo:

Conclusão

Então quando algum atalho não tiver funcionando no VSCode, ele pode já estar sendo usado dentro do VSCode por algum plugin, pode já estar sendo usado por algum software que você instalou no Sistema Operacional (SO), ou pode já estar sendo usado pelo próprio SO. E, para solucionar, você vai precisar alterar ou remover esse atalho na origem.

Era isso, espero ter ajudado e obrigado por ler 🙂🙏

🎲 Criando um Dado com Flexbox e CSS Grid Layout

Dev Maiqui 🇧🇷 — Fri, 05 Jul 2024 22:14:37 +0000

Quando nos deparamos com uma necessidade de posicionamento usando CSS logo nos perguntamos - Será que eu uso Flexbox ou CSS Grid Layout? Qual a melhor abordagem para esse caso? Neste artigo vamos trazer três abordagens diferentes para posicionar os pontos das seis faces de um dado. A primeira abordagem será com Flexbox e, as outras duas, com CSS Grid Layout.

🔗 Acesse aqui o código no Github

Veja o projeto funcionando:

Criando o arquivo main.css
Exemplo com Flexbox
- Criando a primeira face
- Criando a segunda face
- Criando a terceira face
- Criando a quarta face
- Criando a quinta face
- Criando a sexta face
- Centralizando tudo na tela
Exemplo com Grid Template Areas
- Posicionando os Pontos
- Usando grid-template-areas
- Usando grid-area
- Centralizando os pontos nas células
- Mas ainda estou enxergando um problema
Exemplo com Grid Rows e Grid Columns
- Entendendo como funciona: grid-row e grid-column
- Posicionando os pontos
Considerações finais
Referências

Criando o arquivo `main.css`

Na raiz do projeto crie o arquivo main.css. Nele vamos colocar os estilos que servirão tanto para o exemplo do flexbox quanto para os exemplos com CSS Grid Layout.

Vamos construir o quadrado que servirá para todas as faces do dado. Para isso, selecionaremos todos os elementos div com o atributo class cujo valor termina com a string face. E com a classe .pip vamos construir cada ponto.

Em main.css adicione:

* {
  margin: 0;
}

body {
  background-color: #1b2231;
}

div[class$="face"] {
  width: 104px;
  height: 104px;
  background-color: #54c59f;
  border-radius: 10%;
  margin: 16px;
}

.pip {
  width: 24px;
  height: 24px;
  background-color: #080a16;
  border-radius: 50%;
  margin: 4px;
}

Exemplo com Flexbox

Vamos começar criando o arquivo HTML. Crie um diretório chamado flexbox/index.html:

E vamos importar o main.css. No arquivo flexbox/index.html adicione:

<head>
  <link rel="stylesheet" href="../main.css">
</head>

Criando a primeira face (Flexbox)

No arquivo flexbox/index.html:

<head>
  <link rel="stylesheet" href="../main.css">
</head>

<!-- adicione: -->
<body>
  <div class="first-face">
    <div class="pip"></div>
  </div>
</body>

O resultado será um quadrado verde com uma cor escura de background e um círculo escuro na parte superior do quadrado:

Centralizando o ponto

No arquivo flexbox/index.html adicione:

<head>
  <link rel="stylesheet" href="../main.css">
  <!-- adicione: -->
  <link rel="stylesheet" href="style.css"> 
</head>

<body>
  <div class="first-face">
    <div class="pip"></div>
  </div>
</body>

Crie o arquivo flexbox/style.css. A primeira etapa é informar ao navegador para tornar .first-face um contêiner flexbox.

.first-face {
  display: flex;
}

Olhando não há grandes alterações, mas por debaixo dos panos com display: flex podemos usar as linhas MAIN AXIS e CROSS AXIS.

O contêiner first-face agora tem um eixo principal (main axis) horizontal. O eixo principal de um contêiner flexbox que pode ser horizontal ou vertical, mas o padrão é horizontal. Se adicionarmos outro pip à first-face, ele aparecerá à direita do primeiro. O contêiner também tem um eixo transversal (cross axis) vertical. O eixo transversal é sempre perpendicular ao eixo principal.

A propriedade justify-content define o alinhamento ao longo do eixo principal (main axis). Como queremos centralizar o pip ao longo do eixo principal, usaremos o valor center.

No arquivo flexbox/style.css:

.first-face {
  display: flex;
  justify-content: center; /* adicione */
}

A propriedade align-items determina como os itens são dispostos ao longo do eixo transversal (cross axis). Como queremos que o pip seja centralizado ao longo desse eixo, usaremos o valor center aqui também.

No arquivo flexbox/style.css:

.first-face {
  display: flex;
  justify-content: center;
  align-items: center; /* adicione */
}

Criando a segunda face (Flexbox)

No arquivo flexbox/index.html:

<head>
  <link rel="stylesheet" href="../main.css">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="first-face">
    <div class="pip"></div>
  </div>
  <!-- adicione: -->
  <div class="second-face">
    <div class="pip"></div>
    <div class="pip"></div>
  </div>
</body>

No arquivo flexbox/style.css:

.first-face {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* adicione */
.second-face {
  display: flex;
}

Agora os dois pontos estão um do lado do outro. Desta vez, queremos que os pontos fiquem em lados opostos do dado. Há um valor para justify-content que nos permitirá fazer exatamente isso: space-between.

A propriedade space-between preenche uniformemente o espaço entre os itens flexíveis (flex items). Como há apenas dois pontos, isso os afasta um do outro.

No arquivo flexbox/style.css:

.first-face {
  display: flex;
  justify-content: center;
  align-items: center;
}

.second-face {
  display: flex;
  justify-content: space-between; /* adicione */
}

É aqui que nos deparamos com um problema. Ao contrário de antes, não podemos definir align-items porque isso afetará os dois pontos. Felizmente, o flexbox inclui align-self. Essa propriedade nos permite alinhar itens individuais em um contêiner flexível ao longo do eixo transversal da maneira que quisermos! O valor que queremos para essa propriedade é flex-end.

No arquivo flexbox/style.css:

.first-face {
  display: flex;
  justify-content: center;
  align-items: center;
}

.second-face {
  display: flex;
  justify-content: space-between; 
}

/* adicione */
.second-face .pip:nth-of-type(2) {
  align-self: flex-end;
}

A pseudo-classe CSS :nth-of-type() corresponde a um ou mais elementos de um dado tipo, baseado em sua posição entre um grupo de irmãos.

Criando a terceira face (Flexbox)

No arquivo flexbox/index.html:

<head>
  <link rel="stylesheet" href="../main.css">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="first-face">
    <div class="pip"></div>
  </div>
  <div class="second-face">
    <div class="pip"></div>
    <div class="pip"></div>
  </div>
  <!-- adicione: -->
  <div class="third-face">
    <div class="pip"></div>
    <div class="pip"></div>
    <div class="pip"></div>
  </div>
</body>

No arquivo flexbox/style.css adicione:

.third-face {
  display: flex;
  justify-content: space-between;
}

.third-face .pip:nth-of-type(2) {
  align-self: center;
}

.third-face .pip:nth-of-type(3) {
  align-self: flex-end;
}

Criando a quarta face (Flexbox)

Nesta face do dado precisaremos de duas colunas para fazer o posicionamento usando justify-content tanto na horizontal com na vertical:

Adicione no arquivo flexbox/index.html:

  <div class="fourth-face">
    <!-- note aqui a classe column -->
    <div class="column">
      <div class="pip"></div>
      <div class="pip"></div>
    </div>
    <!-- e aqui também colocamos a classe column -->
    <div class="column">
      <div class="pip"></div>
      <div class="pip"></div>
    </div>
  </div>

No arquivo flexbox/style.css adicione:

.fourth-face {
  display: flex;
  justify-content: space-between;
}

No arquivo flexbox/style.css vamos setar o display como flex:

Ainda no arquivo flexbox/style.css:

.fourth-face {
  display: flex;
  justify-content: space-between;
}

/* aqui colocamos display como flex */
.fourth-face .column {
  display: flex;
}

Cada column possuí dois pontos cada. Podemos usar a propriedade flex-direction para definir a direção do eixo principal (main axis) como coluna.

.fourth-face {
  display: flex;
  justify-content: space-between;
}

.fourth-face .column {
  display: flex;
  flex-direction: column; /* adicione */
}

As colunas agora são contêineres flexíveis. Percebeu como colocamos um contêiner flexível diretamente dentro de outro contêiner flexível? Não tem problema! O Flexbox não se importa se os contêineres estão aninhados.

A etapa final é espaçar os pontos dentro das colunas, separando-os uns dos outros. Como o eixo principal (main axis) agora é vertical, podemos usar o justify-content novamente.

.fourth-face {
  display: flex;
  justify-content: space-between;
}

.fourth-face .column {
  display: flex;
  flex-direction: column; 
  justify-content: space-between; /* adicione */
}

Agora temos perfeitamente quatro faces do dado:

Criando a quinta face (Flexbox)

A quinta face vai ser parecida com o quarta face, mas com uma column a mais:

Adicione no arquivo flexbox/index.html:

  <div class="fifth-face">
    <div class="column">
      <div class="pip"></div>
      <div class="pip"></div>
    </div>
    <div class="column">
      <div class="pip"></div>
    </div>
    <div class="column">
      <div class="pip"></div>
      <div class="pip"></div>
    </div>
  </div>

Adicione no arquivo flexbox/style.css:

.fifth-face {
  display: flex;
  justify-content: space-between;
}

Perceba bem as três colunas definidas:

Vamos transformar cada coluna em flex e alterar a direção da main axis para poder usar o justify-content na vertical.

No arquivo flexbox/style.css:

.fifth-face {
  display: flex;
  justify-content: space-between;
}

/* Adicione: */
.fifth-face .column {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

Precisamos agora só centralizar o ponto do meio.

No arquivo flexbox/style.css:

.fifth-face {
  display: flex;
  justify-content: space-between;
}

.fifth-face .column {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* adicione: */
.fifth-face .column:nth-of-type(2) {
  justify-content: center;
}

Agora temos perfeitamente cinco faces do dado, faltando apenas a sexta face:

Criando a sexta face (Flexbox)

Para criar a sexta face do dado ficou fácil, apenas precisamos de duas colunas com três pontos cada.

Adicione no arquivo flexbox/style.css:

  <div class="sixth-face">
    <div class="column">
      <div class="pip"></div>
      <div class="pip"></div>
      <div class="pip"></div>
    </div>
    <div class="column">
      <div class="pip"></div>
      <div class="pip"></div>
      <div class="pip"></div>
    </div>
  </div>

Vamos reaproveitar código. Como a sexta face também possuí apenas duas colunas igual a quarta face, podemos colocar .sixth-face junto do código do .fourth-face:

.fourth-face,
.sixth-face {
  display: flex;
  justify-content: space-between;
}

.fourth-face .column, .sixth-face .column {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

Agora sim, seis faces do dado completas:

Centralizando tudo na tela

As facea dos dados ficaram em coluna e, já que aprendemos como funciona o Flexbox, que tal usar no body também para centralizar tudo?

Adicione no arquivo main.css:

body {
  background-color: #1b2231;
  display: flex;
}

Agora temos todas as faces, uma do lado da outra:

Temos um problema ao dominuir a tela na horizontal, os quadros ficam com tamanhos diferentes:

Vamos colocar um comando para quebrar a linha ao invés de alterar o tamanho dos quadrados:

body {
  background-color: #1b2231;
  display: flex;
  flex-wrap: wrap; /* adicione */
}

Agora vamos começar a centralizar tudo.

Centralizando na horizontal (main axis):

body {
  background-color: #1b2231;
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* adicione */
}

Centralizando na vertical (cross axis):

body {
  background-color: #1b2231;
  display: flex;
  flex-wrap: wrap;
  justify-content: center; 
  align-items: center; /* adicione */
}

Juntando tudo bem no centro:

body {
  background-color: #1b2231;
  display: flex;
  flex-wrap: wrap;
  justify-content: center; 
  align-items: center; 
  align-content: center; /* adicione */
}

Agora podemos diminuir a tela tranquilamente que todo conteúdo permanece no centro da tela:

Exemplo com Grid Template Areas

Neste exemplo vamos usar o CSS Grid Layout, já que os pontos de um dado tradicional estão alinhados em três linhas e três colunas.

Imagine a face de um dado como uma grade 3x3, em que cada célula representa a posição de um ponto:

+---+---+---+
| a | b | c |
+---+---+---+
| d | e | f |
+---+---+---+
| g | h | i |
+---+---+---+

Para criar uma grade simples de 3 por 3 usando CSS, a única coisa que precisamos fazer é definir um elemento contêiner como display: grid e informar que queremos três linhas (grid-template-rows: 1fr 1fr 1fr;) e três colunas (grid-template-columns: 1fr 1fr 1fr;) de tamanhos iguais.

Crie o arquivo grid-template-areas/style.css com o seguinte código:

[class$="face"] {
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr;
}

A unidade fr permite definir o tamanho de uma linha ou coluna como uma fração do espaço livre do contêiner da grade; no nosso caso, queremos um terço do espaço disponível, portanto, usamos 1fr três vezes.

Com isso já podemos perceber os pontos separados por 3 colunas, sendo colocados automaticamente em cada uma das células, da esquerda para a direita:

Podemos simplificar esse código CSS. Em vez de escrever 1fr 1fr 1fr, podemos usar repeat(3, 1fr) para repetir a unidade 1fr três vezes. Também usamos a propriedade abreviada grid-template que define linhas/colunas:

[class$="face"] {
    display: grid;
    grid-template: repeat(3, 1fr) / repeat(3, 1fr);
}

É simples construir uma grade 3X3 com grid-template, mas ainda não usaremos essa propriedade. A seguir usaremos grid-template-areas sem o grid-template, assim iremos perceber que precisamos adicionar mais tarde o grid-template também.

Crie o arquivo grid-template-areas/index.html com o seguinte código:

<head>
  <link rel="stylesheet" href="../main.css">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="first-face">
    <div class="pip"></div>
  </div>
  <div class="second-face">
    <div class="pip"></div>
    <div class="pip"></div>
  </div>
  <div class="third-face">
    <div class="pip"></div>
    <div class="pip"></div>
    <div class="pip"></div>
  </div>
  <div class="fourth-face">
    <div class="pip"></div>
    <div class="pip"></div>
    <div class="pip"></div>
    <div class="pip"></div>
  </div>
  <div class="fifth-face">
    <div class="pip"></div>
    <div class="pip"></div>
    <div class="pip"></div>
    <div class="pip"></div>
    <div class="pip"></div>
  </div>
  <div class="sixth-face">
    <div class="pip"></div>
    <div class="pip"></div>
    <div class="pip"></div>
    <div class="pip"></div>
    <div class="pip"></div>
    <div class="pip"></div>
  </div>
</body>

No código acima já podemos perceber uma diferença em relação ao exemplo anterior usando Flexbox: Não há classes column. Então percebemos que o arquivo HTML já está mais simples. Vamos agora partir para o arquivo CSS.

Crie o arquivo grid-template-areas/style.css:

Posicionando os Pontos

Agora chegamos ao ponto em que precisamos posicionar os pontos (pips) para cada um dos valores de cada face do dado. Seria bom se os pontos fluíssem automaticamente para as posições corretas na grade para cada valor. Infelizmente, precisaremos definir a posição de cada um dos pontos individualmente.

Lembra da tabela ASCII no início desse exemplo? Vamos criar algo muito semelhante usando CSS. Em vez de rotular as células na ordem das linhas, usaremos essa ordem específica, de modo que precisaremos apenas de uma quantidade mínima de CSS para corrigir os casos extremos:

+---+---+---+
| a |   | c |
+---+---+---+
| e | g | f |
+---+---+---+
| d |   | b |
+---+---+---+

Duas das células são deixadas vazias, pois nunca são usadas em nossos dados.

Usando `grid-template-areas`

Podemos traduzir esse layout para CSS usando a propriedade mágica grid-template-areas (que substitui o grid-template usado acima):

Adicione no arquivo grid-template-areas/style.css:

[class$="face"] {
    display: grid;
    grid-template-areas:
        "a . c"
        "e g f"
        "d . b";
}

Portanto, em vez de usar unidades tradicionais para dimensionar nossas linhas e colunas, podemos simplesmente nos referir a cada célula com um nome. A própria sintaxe fornece uma visualização da estrutura da grade, assim como a nossa tabela ASCII. Os nomes são definidos pela propriedade grid-area do item da grade. Os pontos na coluna do meio significa uma célula vazia.

Aparentemente, olhando a imagem acima, não houve alterações. Falta agora usarmos o grid-area.

Usando `grid-area`

Usamos a propriedade grid-area para dar um nome a esse item da grade. O modelo de grade (acima) pode então fazer referência ao item pelo nome para colocá-lo em uma área específica da grade. A pseudo classe :nth-of-type() nos permite direcionar cada pip individualmente.

Posicionando a letra b

Com o código abaixo conseguimos vizualizar onde está o ponto 2:

.pip:nth-of-type(2) {
  background-color: red;
}

.pip:nth-of-type(2) {
  grid-area: b;
}

Resultado após a letra b ter sido posicionada certa:

Posicionando a letra c

.pip:nth-of-type(3) {
  grid-area: c;
}

Resultado após a letra c ter sido posicionada certa:

Posicionando a letra d

.pip:nth-of-type(4) {
  grid-area: d;
}

Resultado após a letra d ter sido posicionada certa:

Posicionando a letra e

.pip:nth-of-type(5) {
  grid-area: e;
}

Resultado após a letra e ter sido posicionada certa:

Posicionando a letra f

.pip:nth-of-type(6) {
  grid-area: f;
}

Resultado após a letra f ter sido posicionada certa:

Posicionando a letra g

Como você pode ver, os valores 1, 3 e 5 ainda estão incorretos. Devido à ordem das áreas do modelo de grade que escolhemos anteriormente, só precisamos reposicionar o último pip de cada um desses dados. Para obter o resultado que desejamos, combinamos as pseudo classes :nth-of-type(odd) e :last-of-type:

.pip:nth-of-type(odd):last-of-type {
  grid-area: g;
}

:nth-of-type(odd) = todos os irmãos(ímpar)
last-of-type = último irmão

Resultado após a letra g ter sido posicionada certa:

Centralizando os pontos nas células

Está estranho, não está? é porque precisamos centralizar os pontos, na imagem abaixo, podemos ver os pontos alinhados a esquerda:

No mesmo arquivo grid-template-areas/style.css vamos adicionar:

.pip {
  align-self: center;
  justify-self: center;
}

Mas ainda estou enxergando um problema

O padding em cada face está diferente!!!

Agora vamos usar grid-template-rows e grid-template-columns para deixar as células todas do mesmo tamanho.

No arquivo grid-template-areas/style.css:

[class$="face"] {
  display: grid;
  grid-template-rows: repeat(3, 1fr); /* adicione */
  grid-template-columns: repeat(3, 1fr); /* adicione */
  grid-template-areas:
    "a . c"
    "e g f"
    "d . b";
}

Agora sim!!! O resultado ficou perfeito!!

Apenas mas uma melhoria no código. Podemos fazer uma abreviação trocando duas linhas por uma.

No arquivo grid-template-areas/style.css:

[class$="face"] {
  grid-template-rows: repeat(3, 1fr); /* remover */
  grid-template-columns: repeat(3, 1fr); /* remover */

  grid-template: repeat(3, 1fr) / repeat(3, 1fr); /* adicionar */
}

.pip {
  align-self: center; /* remover */
  justify-self: center; /* remover */

  place-self: center; /* adicionar */
}

O resultado ficou perfeito mas o código ficou muito complexo. Vamos tentar usar o CSS Grid Layout de outra forma? Vamos ver isso no próximo exemplo...

Exemplo com Grid Rows e Grid Columns

Neste exemplo também vamos usar o CSS Grid Layout com três linhas e três colunas, onde cada célula representa a posição de um ponto:

+---+---+---+
| . | . | . |
+---+---+---+
| . | . | . |
+---+---+---+
| . | . | . |
+---+---+---+

Entendendo como funciona: `grid-row` e `grid-column`

Antes de montarmos o dado com essa solução, vamos só entender como funciona grid-row e grid-column. Essa será uma explicação mais rápida pois existe muita coisa pra aprender sobre o assunto e fugiria do escopo desse artigo.

Vamos já criar os arquivos:

No arquivo grid-rows-and-grid-columns/index.html você pode colocar esse código:

<head>
  <link rel="stylesheet" href="../main.css">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="face">
    <div class="square"></div> <!-- square é provisório -->
  </div>
</body>

E no arquivo grid-rows-and-grid-columns/style.css você pode colocar esse código:

[class$="face"] {
    display: grid;
    grid-template: repeat(3, 1fr) / repeat(3, 1fr);
}

.square {
  background-color: white;
  grid-column-start: 1;
  grid-column-end: 2;
}

O resultado será esse:

Temos um quadrado na primeira linha ocupando um espaço da coluna 1 até a coluna 2.

Como não definimos uma altura (height) e uma largura (width) para o quadrado, ele acaba ocupando o espaço inteiro da célula:

Vizualizamos 4 linhas na vertical, então podemos especificar que queremos que o quadrado se estenda até a linha 3:

.square {
  background-color: white;
  grid-column-start: 1;
  grid-column-end: 3; /* altere de 2 para 3 */
}

Podemos especificar que queremos que o quadrado se estenda até a linha 4. Podemos usar o número 4 ou podemos usar -1:

.square {
  background-color: white;
  grid-column-start: 1;
  grid-column-end: -1; /* pode usar 4 ou -1 */
}

Podemos agora especificar que esses quadrados devem começar na linha 2 horizontal:

.square {
  background-color: white;
  grid-column-start: 1;
  grid-column-end: -1;
  grid-row-start: 2; /* adicione */
}

Posicionando os pontos com `grid-row` e `grid-column`

Agora sim vamos para a solução.

No arquivo grid-rows-and-grid-columns/index.html o código final será esse, ou seja não iremos mais modificar ele:

<head>
  <link rel="stylesheet" href="../main.css">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="first-face">
    <div class="pip center middle"></div>
  </div>
  <div class="second-face">
    <div class="pip"></div>
    <div class="pip right bottom"></div>
  </div>
  <div class="third-face">
    <div class="pip"></div>
    <div class="pip middle center"></div>
    <div class="pip bottom right"></div>
  </div>
  <div class="fourth-face">
    <div class="pip"></div>
    <div class="pip right"></div>
    <div class="pip bottom"></div>
    <div class="pip bottom right"></div>
  </div>
  <div class="fifth-face">
    <div class="pip"></div>
    <div class="pip right"></div>
    <div class="pip middle center"></div>
    <div class="pip bottom"></div>
    <div class="pip bottom right"></div>
  </div>
  <div class="sixth-face">
    <div class="pip"></div>
    <div class="pip right"></div>
    <div class="pip"></div>
    <div class="pip right"></div>
    <div class="pip bottom"></div>
    <div class="pip bottom right"></div>
  </div>
</body>

E no arquivo grid-rows-and-grid-columns/style.css você pode colocar esse código:

[class$="face"] {
  display: grid;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
}

.top {
  grid-row-start: 1;
}
.middle {
  grid-row-start: 2;
}
.bottom {
  /* grid-row-start: 3; */
  grid-row-end: -1;
}

.left {
  grid-column-start: 1;
}
.center {
  grid-column-start: 2;
}
.right {
  /* grid-column-start: 3; */
  grid-column-end: -1;
}

O resultado está quase o esperado:

Preciamos centralizar cada ponto em sua célula:

.pip {
  place-self: center;
}

Agora o resultado ficou perfeito:

Considerações finais

Podemos concluir que o código da segunda abordagem com grid-template-areas ficou mais confuso do que as outras abordagens. Já a última abordagem com grid-rows e grid-columns teve menos código CSS e ficou fácil de entender o que acontece, sendo assim mais fácil de dar manutenção, então vamos para o ranking:

🥇 1º Lugar: Exemplo 3 (grid-rows e grid-columns)
🥈 2º Lugar: Exemplo 1 (Flexbox)
🥉 3º Lugar: Exemplo 2 (grid-template-areas)

Referências

Era isso... obrigado por ler e até a próxima 🙂👋

🔏 Imutabilidade de Atribuição VS Imutabilidade de Valor

Dev Maiqui 🇧🇷 — Fri, 28 Jun 2024 11:34:10 +0000

Sim! Podemos alterar o valor de uma const quando o tipo de dado atribuído a ela é de um array ou objeto. No código abaixo podemos ver que o valor do array foi modificado. Isso não é imutabilidade de valor!

Já no código abaixo podemos ver a imutabilidade de atribuição:

Vamos entender melhor como isso funciona por debaixo dos panos; sobre imutabilidade no JavaScript e como evitar que um array ou objeto atribuído em uma const seja alterado.

Mutabilidade VS Imutabilidade
Data Types
- O que é Stack?
- O que é Heap?
- Tipos de dados primitivos
- Tipos de dados de referência
Mutabilidade no JavaScript
- Como clonar propriedades de objetos
- Usando o Spread Operator
Imutabilidade no JavaScript
Como evitar a mutabilidade de objetos
- Como usar o método Object.preventExtensions
- Como usar o método Object.seal()
- Como usar o método Object.freeze()
- Como usar Deep Freeze
Como evitar a mutabilidade de arrays
Considerações finais

Mutabilidade VS Imutabilidade

No JavaScript, diferentes tipos de dados (data types em inglês) têm diferentes comportamentos e locais na memória. Portanto, para reduzir as chances de ter bugs em seu código, você precisa entender o conceito de mutabilidade e imutabilidade em JavaScript.

Mutabilidade refere-se a tipos de dados que podem ser acessados e alterados após serem criados e armazenados na memória. A imutabilidade, por outro lado, refere-se a tipos de dados que não podem ser alterados após a criação, mas que ainda podem ser acessados na memória.

Data Types

Os tipos de dados (data types em inglês) são categorizados em tipos primitivos e de referência no JavaScript. Antes de explicar essas categorias, vamos dar uma olhada em dois termos importantes relacionados à memória que você precisará conhecer: a Stack e a Heap.

O que é a Stack?

A Stack (pilha em português) é uma estrutura de dados que obedece ao princípio Last In First Out (LIFO). Isso significa que o último item a entrar na pilha sai primeiro.

Imagem acima da Wikipédia.

O que é Heap?

O Heap é usado apenas em variáveis do tipo de dados de referência.

O Heap guarda o valor real atribuído à variável. A variável guarda o endereço de memória do Heap. Quando o valor é atribuído à variável, a variável (armazenando o endereço de memória do Heap) é colocada na pilha por cima, por último.

Tipos de dados primitivos

Os tipos de dados primitivos são imutáveis e não são objetos porque não têm propriedades e métodos: string, number, BigInt, boolean, undefined, Symbol, null.

🤔 Espere um minuto, você pode pensar – eu mudo os valores das variáveis primitivas o tempo todo!

Bem, pode parecer que você está modificando um valor, mas esse não é realmente o caso. Vamos mostrar um exemplo:

let greet = "Hello";
greet += ", World";  
console.log(greet); // Hello, World

A primeira linha deste código cria a string Hello e a atribui à variável greet. A segunda linha anexa , World a essa string. Parece que estamos mudando a string greet, mas o JavaScript não altera a string, em vez disso, ele cria uma nova string.

Tipos de dados de referência

Por padrão, os tipos de dados de referência são mutáveis. Os tipos de dados de referência consistem em funções, arrays e objetos.

Os tipos de dados de referência colocam a variável na stack. A variável funciona como um ponteiro que aponta para o objeto localizado na heap.

A principal diferença entre essas categorias é que os tipos primitivos são imutáveis, mas os tipos de referência são mutáveis.

Mutabilidade no JavaScript

Se um tipo de dado for mutável, significa que você pode alterá-lo. A mutabilidade permite que você modifique os valores existentes sem criar novos valores.

Para cada objeto, um ponteiro é adicionado à stack, e esse ponteiro aponta para o objeto no heap.

Veja, por exemplo, o código a seguir:

const person = {
         name: "Mike Shinoda",
         age: 47,
         Hobbies: ["cantar", "tocar guitarra"]
   }

Na stack, você encontrará person, que é um ponteiro para o objeto real no heap.

const person2 = person

console.log(person)

console.log(person2)

Outro ponteiro é colocado na stack quando person é atribuído a person2. Agora, esses ponteiros apontam para um único objeto no heap.

Os dados de referência não copiam valores, mas sim ponteiros.

person2.age = 53;

console.log(person)

console.log(person2)

Alterar a idade de person2 atualiza a idade do objeto person. Agora você sabe que isso ocorre porque ambos apontam para o mesmo objeto.

Como clonar propriedades de objetos

O método object.assign copia propriedades de um objeto (a origem) para outro objeto (o destino) e retorna o objeto de destino modificado.

Veja a seguir a sintaxe:

Object.assign(target, source)

O método tem dois argumentos, target e source. O target é o objeto que recebe as novas propriedades, enquanto a source é de onde vêm as propriedades. O target pode ser um objeto vazio {}.

Em uma situação em que o source e o target compartilham a mesma chave (key em inglês), o objeto de origem substitui o valor da chave no target.

const person = {
         name: "Mike Shinoda",
         age: 47,
         Hobbies: ["cantar", "tocar guitarra"]
   }

const person2 = Object.assign({}, person);

As propriedades do objeto person foram clonadas em um target vazio.

person2 agora tem suas próprias propriedades. Você pode comprovar isso alterando o valor de qualquer uma de suas propriedades. Essa alteração não afetará os valores das propriedades do objeto de person.

O valor de person2.age que foi alterado para 53 não afeta de forma alguma o valor de person.age porque ambos têm suas próprias propriedades.

Usando o Spread Operator

Esta é a sintaxe do Spread Operator:

const newObj = {...obj}

Usar o operador spread é bastante simples. Você precisa colocar três pontos ... antes do nome do objeto cujas propriedades você pretende clonar:

const person = {
         name: "Mike Shinoda",
         age: 47,
         Hobbies: ["cantar", "tocar guitarra"]
   }

const person2 = {...person};

person2.age = 53;

console.log(person)

console.log(person2)

Imutabilidade no JavaScript

Imutabilidade é o estado em que os valores são imutáveis (ou seja, não podem ser alterados). Um valor é imutável quando é impossível alterá-lo. Os tipos de dados primitivos são imutáveis, como discutimos acima.

Vamos dar uma olhada em um exemplo:

let student1 = "Maiqui";

let student2 = student1;

No código acima, uma variável chamada student1 foi criada e atribuída a student2.

 student1 = "Mike"

 console.log(student1);

 console.log(student2)

A alteração de student1 para Mike não altera o valor inicial de student2. Isso prova que, nos tipos de dados primitivos, os valores reais são copiados, portanto, ambos têm seus próprios valores. Na memória stack, student1 e student2 são diferentes.

A stack obedece ao princípio Last-In-First-Out (último a entrar, primeiro a sair). O primeiro item que entra na stack é o último a sair e vice-versa. Assim, acessar aos itens armazenados na stack fica fácil.

Como evitar a mutabilidade de objetos

Até agora, você aprendeu que os objetos são mutáveis por padrão.

const people = {
           person1: 'Mike',
           person2: 'Chester',
           person3: 'Joe'
   }


   Object.defineProperty(people, "person4", {
      value: "Brad",
   })

   console.log(people);

Agora adicionamos o person4.

Para evitar a mutabilidade do objeto, você pode usar os métodos Object.preventExtensions(), Object.seal() e Object.freeze().

Para todos os três métodos, exploraremos a adição de propriedades usando a notação de ponto e a propriedade define, a modificação de propriedades usando defineProperty e a exclusão de propriedades.

Isso lhe dará uma melhor compreensão dos recursos e das limitações de cada método e, por fim, o ajudará a determinar qual método é mais adequado para um caso de uso específico.

Portanto, vamos nos aprofundar e explorar esses métodos com mais detalhes.

Como usar o método `Object.preventExtensions`

Veja a seguir a sintaxe desse método:

Object.preventExtensions(obj)

O uso do Object.preventExtensions impede que novas propriedades entrem no objeto. O objeto não aumenta de tamanho e mantém suas propriedades. Por padrão, todos os objetos em JavaScript são extensíveis. Com esse método, você pode excluir propriedades do seu objeto.

Tentando adicionar novas propriedades (`Object.preventExtensions`)

usando a notação de ponto (dot notation):

const makeNonExtensive = {
           firstname: "Maiqui",
           lastname: "Tomé"
   }

   Object.preventExtensions(makeNonExtensive)

   makeNonExtensive.designation = "Software Engineer";

   console.log(makeNonExtensive)

Verifique o console - a propriedade designation não foi adicionada e não há nenhuma mensagem de erro:

usando o método defineProperty

Aqui está a sintaxe:

Object.defineProperty(obj, prop, descriptor)

Veja o que está acontecendo no código acima:

obj: O objeto ao qual você deseja adicionar propriedades.
prop: Você define o nome da propriedade que deseja adicionar ou alterar. Deve ser uma cadeia de caracteres ou um símbolo
descriptor: você inclui o valor da propriedade.

const makeNonExtensive = {
           firstname: "Maiqui",
           lastname: "Tomé"
   }

   Object.preventExtensions(makeNonExtensive)

   Object.defineProperty(makeNonExtensive, "age", {
      value: 18,
   })

   console.log(makeNonExtensive)

A adição de novas propriedades usando a propriedade define gera esta mensagem de erro: Uncaught TypeError: Cannot define property age, object is not extensible

Como modificar uma propriedade existente usando `defineProperty` (`Object.preventExtensions`)

const makeNonExtensive = {
            firstname: "Maiqui",
            lastname: "Tomé"
    }

Object.preventExtensions(makeNonExtensive)

Object.defineProperty(makeNonExtensive, 'firstname', {
  value: 'Mike',
})

console.log(makeNonExtensive)

O valor da propriedade de um objeto não extensível pode ser alterado:

Como excluir uma propriedade (`Object.preventExtensions`)

Aqui está a sintaxe:

delete object.propertyname

const makeNonExtensive = {
   firstname: "Maiqui",
   lastname: "Tomé"
}

Object.preventExtensions(makeNonExtensive)

delete makeNonExtensive.lastname

console.log(makeNonExtensive)

Apesar de o objeto não ser extensível, a propriedade lastname foi excluída:

Como usar o método `Object.seal()`

Todos os objetos em Javascript são extensíveis por padrão. Como o nome sugere, esse método sela um objeto. Não é possível adicionar novas propriedades a um objeto selado ou excluir uma propriedade existente de um objeto selado. Mas o object.seal permite modificar as propriedades existentes.

Aqui está a sintaxe:

Object.seal(obj)

Como adicionar novas propriedades (`Object.seal()`)

const people = {
  person1: 'Maiqui',
  person2: "Maria", 
  person3: "Eduardo"
}

Object.seal(people)

console.log(Object.isSealed(people))

Object.isSealed(people) é usado para verificar se um objeto está selado.

Como usar a notação de ponto

people.person4 = "Patrick"

console.log(people)

Sem produzir um erro, a notação de ponto falha ao adicionar a nova propriedade person4:

Usando o método defineProperty (Object.seal())

const people = {
  person1: 'Maiqui',
  person2: "Maria", 
  person3: "Eduardo"
}

Object.seal(people)

Object.defineProperty(people, 'person4', {
  value: 'Patrick'
})

console.log(people)

A mensagem de erro "Uncaught TypeError: Cannot define property student4, the object is not extendable" é lançada quando se tenta adicionar a mesma propriedade usando o método defineProperty.

Como modificar uma propriedade existente usando `defineProperty` (`Object.seal()`)

const people = {
  person1: 'Maiqui',
  person2: "Maria", 
  person3: "Eduardo"
}

Object.seal(people)

Object.defineProperty(people, 'person2', {
  value: 'Maria Clara',
})

console.log(people)

Agora, o person2 foi alterado de "Maria" para "Maria Clara":

Tentando remover uma propriedade existente (`Object.seal()`)

const people = {
  person1: 'Maiqui',
  person2: "Maria", 
  person3: "Eduardo"
}

Object.seal(people)

delete people.person1

console.log(people)

As propriedades não podem ser removidas dos objetos selados. No console, person1 ainda permanece:

Como usar o método `Object.freeze()`

Aqui está a sintaxe:

Object.freeze(obj)

O método Object.freeze() congela um objeto. O uso desse método garante alta integridade ao assegurar que não será possível extrair, modificar propriedades existentes ou adicionar novas propriedades ao objeto.

Para verificar se um objeto está congelado, use a sintaxe abaixo:

Object.isFrozen(obj);

ATENÇÃO 🚨
Mesmo quando você aplica o Object.freeze() a um objeto, é possível adicionar uma nova propriedade, modificar uma propriedade existente ou excluir propriedades de objetos aninhados sob ele.

Assim como fizemos com outros métodos, vamos explorar o método Object.freeze() em relação à adição de novas propriedades, modificação de valores ou exclusão de propriedades de um objeto.

Tentando adicionar novas propriedades (`Object.freeze()`)

Usando dot notation

const sportClubInternacional = {
  player1: "Enner Valencia",
  player2: "Sergio Rochet", 
  player3: "Rafael Borré"
}

Object.freeze(sportClubInternacional)

sportClubInternacional.player4 = "Alan Patrick"

console.log(sportClubInternacional)

Observe que o player4 não foi adicionado:

Usando o método defineProperty

const sportClubInternacional = {
  player1: "Enner Valencia",
  player2: "Sergio Rochet", 
  player3: "Rafael Borré"
}

Object.freeze(sportClubInternacional)

Object.defineProperty(sportClubInternacional, 'player4', {
  value: "Alan Patrick"
})

console.log(sportClubInternacional)

A notação de ponto falha silenciosamente ao tentar adicionar uma propriedade, mas defineproperty gera um TypeError:

Tentando modificar propriedades (`Object.freeze()`)

const sportClubInternacional = {
  player1: "Enner Valencia",
  player2: "Sergio Rochet", 
  player3: "Rafael Borré"
}

Object.freeze(sportClubInternacional)

sportClubInternacional.player1 = "Enner Valencia - Atacante"

console.log(sportClubInternacional)

O código acima falhou silenciosamente, mas com a propriedade defineProperty abaixo, um typeError é lançado.

const sportClubInternacional = {
  player1: "Enner Valencia",
  player2: "Sergio Rochet", 
  player3: "Rafael Borré"
}

Object.freeze(sportClubInternacional)

Object.defineProperty(sportClubInternacional, 'player1', {
  value: "Enner Valencia - Atacante"
})

console.log(sportClubInternacional)

Tentando deletar propriedades (`Object.freeze()`)

const sportClubInternacional = {
  player1: "Enner Valencia",
  player2: "Sergio Rochet", 
  player3: "Rafael Borré"
}

Object.freeze(sportClubInternacional)

delete sportClubInternacional.player1

console.log(sportClubInternacional)

A tentativa de excluir uma propriedade em um objeto congelado também falha silenciosamente:

Como usar Deep Freeze

const sportClubInternacional = {
  player1: "Enner Valencia",
  player2: "Sergio Rochet", 
  player3: "Rafael Borré",
      substitutes: {
         player4: "Lucas Alario",
         player5: "Thiago Maia"
      }
}

Object.freeze(sportClubInternacional)

Object.defineProperty(sportClubInternacional.substitutes, 'player6', {
  value: "Alan Patrick"
})

console.log(sportClubInternacional)

O player6 foi adicionado aos substitutos aninhados, embora o método Object.freeze() tenha sido aplicado aos jogadores da equipe principal.

Deletando o jogador reserva aninhado

const sportClubInternacional = {
  player1: "Enner Valencia",
  player2: "Sergio Rochet", 
  player3: "Rafael Borré",
      substitutes: {
         player4: "Lucas Alario",
         player5: "Thiago Maia"
      }
}

Object.freeze(sportClubInternacional)

delete sportClubInternacional.substitutes.player5

console.log(sportClubInternacional)

O player5 foi removido. Tudo o que o object.freeze impede no objeto pai pode ser feito no objeto filho que está aninhado:

Para evitar isso, empregamos a técnica de congelamento profundo (Deep Freeze em inglês), conforme mostrado abaixo:

Aplicando o Deep Freeze

const deepVal = obj => {
   Object.keys(obj).forEach(prop => {
      if (typeof obj[prop] === 'object') deepVal(obj[prop]);
   });

   return Object.freeze(obj);
};

const sportClubInternacional = deepVal({
  player1: "Enner Valencia",
  player2: "Sergio Rochet", 
  player3: "Rafael Borré",
      substitutes: {
         player4: "Lucas Alario",
         player5: "Thiago Maia"
      }
})

Object.freeze(sportClubInternacional)

console.log(Object.isFrozen(sportClubInternacional));

Tentando adicionar uma nova propriedade ao objeto filho

const deepVal = obj => {
   Object.keys(obj).forEach(prop => {
      if (typeof obj[prop] === 'object') deepVal(obj[prop]);
   });

   return Object.freeze(obj);
};

const sportClubInternacional = deepVal({
  player1: "Enner Valencia",
  player2: "Sergio Rochet", 
  player3: "Rafael Borré",
      substitutes: {
         player4: "Lucas Alario",
         player5: "Thiago Maia"
      }
})

Object.freeze(sportClubInternacional)

Object.defineProperty(sportClubInternacional.substitutes, 'player6', {
   value: "Alan Patrick"
})

console.log(sportClubInternacional);

Agora, quando você tentar adicionar uma propriedade, receberá este erro Uncaught TypeError: Cannot define property player6, object is not extensible:

Além disso, o Deep Freeze também impede que você altere e exclua propriedades de um objeto.

Como evitar a mutabilidade de arrays

A mutabilidade em arrays segue o mesmo princípio dos objetos. Vou mostrar aqui só um exemplo pois é bem parecido com os exemplos de objetos já que ambos são tipos de dados de referência:

Considerações finais

Neste artigo você viu sobre os vários tipos de dados e se eles são imutáveis ou mutáveis por padrão.

Você viu que quando você usa const você deve se preocupar com os tipos de dados de referencia que são mutáveis.

Os objetos podem ser alterados por padrão. Mas o uso de métodos específicos, como Object.seal, Object.freeze e preventExtensions, pode impedir a mutabilidade.

O nível de imutabilidade fornecido por esses métodos varia, portanto, certifique-se de usar aquele que corresponde ao nível de integridade que você deseja atingir.

Era isso... obrigado por ler e até a próxima 🙂👋

Para a construção deste artigo foi utilizado os seguintes conteúdos como base:

🎨 Melhore Seu Tema Favorito no VSCode em Minutos!

Dev Maiqui 🇧🇷 — Fri, 14 Jun 2024 14:50:35 +0000

Se você é uma pessoa como eu era, que mudava de tema a todo momento no VSCode 😅, chegando ao ponto de pensar em criar seu próprio tema, mas desistiu por falta de tempo ou preguiça de colocar tanto esforço nisso, eu tenho uma solução bem mais fácil que vai resolver esse problema!

Você vai conseguir alterar aquele tema que você gosta, mas acha que poderia ser melhor; assim, não precisará trocar de tema por um bom tempo.

Para exemplificar vou modificar o Aura Theme

Vou escolher o Aura Dark (Soft Text) que é mais confortável para o olho no meu modelo de monitor.

Vamos modificar primeiramente as cores do código e depois as cores dos painéis e similares.

Modificando as cores do código

Link para a documentação oficial dessa parte: https://code.visualstudio.com/docs/getstarted/themes#_editor-syntax-highlighting

No seu VSCode pressione as teclas "shift+cmd+p" (Mac) ou "shift+ctrl+p" (Windows, Linux), digite Preferences: Open User Settings (JSON) e pressione ENTER.

Vamos adicionar o seguinte código:

"editor.tokenColorCustomizations": {
  // Aqui a mudança afeta todos os temas
  // Para exemplificar, vamos modificar a cor dos comentários para vermelho
  "comments": "#FF0000"
}

O código acima modificou a cor dos comentários para todos os temas instalados no seu VSCode, mas podemos modificar apenas para o tema Aura Dark (Soft Text):

"editor.tokenColorCustomizations": {
  "[Aura Dark (Soft Text)]": {
    // Aqui a mudança afeta apenas o tema `Aura Dark (Soft Text)`
    "comments": "#FF0000",
  }
}

No seu VSCode pressione novamente as teclas "shift+cmd+p" (Mac) ou "shift+ctrl+p" (Windows, Linux), digite Developer: Inspect Editor Tokens and Scopes e pressione ENTER.

"[Aura Dark (Soft Text)]": {
      "textMateRules": [
        {
          "name": "",
          "scope": ["variable.other.object.js.jsx"],
          "settings": {
            "foreground": "#C17AC8"
          }
        }
      ]
    }

Resultado:

Posso fazer o mesmo com as palavras acima que ainda estão em branco:

"editor.tokenColorCustomizations": {
    "[Aura Dark (Soft Text)]": {
      "textMateRules": [
        {
          "name": "",
          "scope": [
            "variable.other.object.js.jsx",
            "variable.other.readwrite.alias.js.jsx" // adicione
          ],
          "settings": {
            "foreground": "#C17AC8"
          }
        }
      ]
    }
  }

Resultado:

Colocando palavras em itálico

Como eu gosto do itálico da fonte Victor Mono eu vou deixar algumas palavras em itálico:

No seu VSCode pressione novamente as teclas "shift+cmd+p" (Mac) ou "shift+ctrl+p" (Windows, Linux), digite Developer: Inspect Editor Tokens and Scopes e pressione ENTER.

Nesse exemplo vamos colocar a palavra import em itálico:

"[Aura Dark (Soft Text)]": {
      "textMateRules": [
        {
          "name": "italic", // Coloque um nome que lembre a alteração
          "scope": [
            "keyword.control.import.js.jsx"
          ],
          "settings": {
            "fontStyle": "italic"
          }
        }
      ]
    }

Também quero a palavra function em itálico:

"editor.tokenColorCustomizations": {
    "[Aura Dark (Soft Text)]": {
      "textMateRules": [
        {
          "name": "italic",
          "scope": [
            "keyword.control.import.js.jsx",
            "storage.type.function.js.jsx" // Adicione
          ],
          "settings": {
            "fontStyle": "italic"
          }
        }
      ]
    }
  }

Alterando cores dos painéis e similares

Descobrir o nome dos painéis: https://code.visualstudio.com/api/references/theme-color

Vamos agora remover a borda da aba selecionada:

"workbench.colorCustomizations": {
    "[Aura Dark (Soft Text)][Aura Dark]": {
      "tab.inactiveBackground": "#110F18",
      "tab.unfocusedActiveBorder": "#110F18",
      "tab.activeBorder": "#15141B"
    },
  },

Resultado:

Deixando só a aba selecionada com a mesma cor do background do código (ajuda a identificar melhor qual aba está selecionada):

"workbench.colorCustomizations": {
    "[Aura Dark (Soft Text)][Aura Dark]": {
      "tab.inactiveBackground": "#110F18",
      "tab.unfocusedActiveBorder": "#110F18",
      "tab.activeBorder": "#15141B",
      "tab.activeBackground": "#15141B", // adicione
      "editorGroupHeader.tabsBackground": "#110F18" // adicione
    }
  },

Resultado:

Alterando a cor da ActivityBar

"workbench.colorCustomizations": {
    "[Aura Dark (Soft Text)][Aura Dark]": {
      "tab.inactiveBackground": "#110F18",
      "tab.activeBorder": "#15141B",
      "tab.activeBackground": "#15141B",
      "editorGroupHeader.tabsBackground": "#110F18",
      "activityBar.background": "#110F18" // adicione
    }
  },

Resultado:

Conclusão

Com isso você pode alterar qualquer cor no VSCode, às vezes você pode demorar um pouco para descobrir o nome de certo painel, pois a documentação não é tão clara assim.

Espero ter ajudado, até a próxima 😀👋

Error Solution: Your enrollment could not be completed.

Dev Maiqui 🇧🇷 — Fri, 22 Dec 2023 01:38:53 +0000

I'm trying to register for the Apple Developer Program but I can't because of this error: Your enrollment could not be completed. (December 2023). Apple support has told me several times that there's nothing they can do, 4 attendants... terrible service from Apple, how sad.

An example of Apple's terrible support service:

Solution

1 - Unfortunately, you'll have to create a new Apple ID.

2 - With your new Apple ID, click on the Continue web registration link. Do not use the Apple Developer app.

3 - Follow the next steps until you reach the payment page. Make the payment and wait 48 hours to receive the payment confirmation e-mail

4 - The payment confirmation didn't arrive in my email, so I called Apple support. They sent me an email with a link to send me my document.

I hope I've helped :)

💧💪 Concorrência em Elixir #1: Módulo Task

Dev Maiqui 🇧🇷 — Sun, 10 Jul 2022 14:49:29 +0000

Para melhor entendimento desse post, indico a leitura de: Olá mundo da programação concorrente.

Este post é uma tradução da parte que fala sobre o módulo Task do livro Concurrent Data Processing in Elixir de Svilen Gospodinov.

Conforme o livro Concurrent Data Processing in Elixir, o processamento de dados é uma parte essencial de muitas aplicações de software. Na verdade, a maioria dos engenheiros nem sequer pensa nisso como algo separado da programação. Mas se você está transformando informações de alguma forma, por exemplo, ao fazer relatórios, agregação de dados ou análises, então você está fazendo processamento de dados.

Graças à Máquina Virtual Erlang (também conhecida como BEAM), todos que usam Elixir se beneficiam de seu incrível modelo de concorrência, sendo particularmente adequado para tarefas concorrentes de longa duração. Como resultado, você verá que a linguagem Elixir oferece mais maneiras de realizar trabalhos concorrentes do que outras linguagens.

Embora isto seja uma coisa boa, também pode ser um desafio encontrar a ferramenta certa para o trabalho. Algumas tarefas são uma excelente escolha para Flow, enquanto outras são perfeitas para Broadway. Às vezes é mais fácil usar apenas o GenStage, ou mesmo o módulo Task.

As técnicas certas o ajudarão a simplificar seu produto, melhorar o desempenho de seu código e tornar sua aplicação mais resistente a erros e ao aumento da carga de trabalho.

Introdução
Concorrência fácil com o módulo Task
- O que é um processo de Elixir?
- Criando o projeto
- Iniciando tasks e recuperando resultados
- Código síncrono e assíncrono
- Iniciando processos
- Recuperando o resultado de uma tarefa
- Keyword Lists em Elixir
- Gerenciamento de séries de tarefas
- Por que async_stream retorna um Stream?
- Ligação de processos
Conhecendo o Supervisor
- Adicionando um Supervisor
- Usando Task.Supervisor
- Entendendo o Let it Crash
Conclusão

Introdução

Desde o início da indústria da computação, os fabricantes de hardware e cientistas da computação têm tentado tornar os computadores mais rápidos na execução de programas. No início, a multithreading era a única maneira de alcançar a concorrência, sendo a capacidade de executar duas ou mais tarefas de programação e alternar entre elas para coletar os resultados. Foi assim que os computadores pareciam estar fazendo muitas coisas ao mesmo tempo, quando, na verdade, eram simplesmente multitarefas.

As CPUs multi-core mudaram isso. Trouxeram paralelismo e permitiram que as tarefas funcionassem lado a lado, independentemente, o que aumentou significativamente o desempenho dos sistemas. Seguiram-se arquiteturas de multiprocessadores, permitindo ainda maior concorrência e paralelismo ao suportar duas ou mais CPUs em uma única máquina. A figura abaixo mostra uma comparação simples entre a concorrência em uma CPU de núcleo único e em uma CPU de núcleo duplo que permite o paralelismo:

Naturalmente, as ferragens de última geração vêm sempre com uma etiqueta de preço elevado. Mas com o advento da computação em nuvem, as coisas mudaram mais uma vez. Hoje em dia, é possível executar código em serviços na nuvem usando máquinas virtuais com dezenas de núcleos de CPU, sem a necessidade de comprar e manter qualquer hardware físico.

Estes avanços são importantes para nós como engenheiros de software. Queremos escrever um software que tenha bom desempenho e funcione rapidamente. Afinal de contas, ninguém gosta de carregar telas e esperar que o computador termine. Entretanto, a execução do código em um sistema de processador multi-core não o torna automaticamente eficiente. De modo a aproveitar ao máximo os recursos computacionais disponíveis, precisamos escrever software tendo em mente a concorrência e o paralelismo. Felizmente, as modernas linguagens de programação tentam nos ajudar o máximo possível, e a linguagem Elixir não é exceção. De fato, graças ao Erlang, a Máquina Virtual Erlang (BEAM) e a Plataforma de Telecomunicações Abertas (OTP - Open Telecom Platform), o Elixir é uma excelente escolha para a construção de aplicações e processamento de dados concorrentes.

Vamos abordar as ferramentas mais populares para a realização de trabalhos concorrentes usando Elixir. Vamos verificar os prós e contras de cada uma e ver como funcionam na prática. Algumas delas, como o módulo Task e o GenServer, já vêm com Elixir. Os outros - GenStage, Flow e Broadway - estão disponíveis como bibliotecas autônomas no registro de pacotes Hex.pm. Saber como utilizar cada uma destas ferramentas ajudará você a alavancar a concorrência da maneira mais eficaz e resolver até mesmo os problemas mais desafiadores. Ao longo do caminho, você também aprenderá como construir aplicações tolerantes a falhas, recuperar-se de falhas, usar a contrapressão para lidar com recursos limitados do sistema e muitas outras técnicas úteis.

Primeiro, vamos analisar o módulo Task, que faz parte da biblioteca padrão da linguagem Elixir. Ele possui um poderoso conjunto de características que o ajudarão a executar o código concorrentemente. Você também vai ver como lidar com erros e evitar que a aplicação trave quando uma tarefa concorrente trava.

Concorrência fácil com o módulo Task

Para executar o código concorrentemente em Elixir, você tem que iniciar um processo e executar seu código dentro desse processo. Você também pode precisar recuperar o resultado e usá-lo para algo mais. Elixir fornece uma função de baixo nível e uma macro para fazer isso - spawn/1 e receive. Entretanto, usá-los pode ser complicado na prática e você provavelmente acabará com um monte de código repetitivo.

Elixir também vem com um módulo chamado Task, que simplifica significativamente o início de processos concorrentes. Ele fornece uma abstração para executar o código concorrentemente, recuperando resultados, manipulando erros e iniciando uma série de processos. Ele possui muitas características com uma API concisa, de modo que raramente (ou nunca) há a necessidade de usar spawn/1 e receive.

Vamos conhecer tudo o que o módulo Task tem a oferecer:

Como iniciar tarefas;
Diferentes maneiras de recuperar resultados;
Como lidar com processamento de grandes listas de dados;
Como lidar com falhas;
Como funciona a ligação de processos em Elixir;
Como usar um dos módulos Supervisor integrados para isolar falhas de processo;
Discussão sobre a abordagem de Elixir para o tratamento de erros.

Antes de mergulharmos, vamos criar um projeto Elixir para trabalhar primeiro e nos familiarizarmos com algumas das ferramentas de desenvolvimento que vamos usar ao longo deste post.

O que é um processo de Elixir?

Os processos na Elixir são processos Erlang, uma vez que a Elixir funciona na Máquina Virtual Erlang. Ao contrário dos processos do sistema operacional, eles são muito leves em termos de uso de memória e rápidos de iniciar. A VM de Erlang sabe como executá-los concorrentemente e em paralelo (quando uma CPU multi-core está presente). Como resultado, ao utilizar processos, você obtém concorrência e paralelismo de graça.

Criando o projeto

Vamos criar uma aplicação chamada sender e fingir que estamos enviando e-mails para endereços de e-mail reais. Vamos usar o módulo Task mais tarde para desenvolver algumas de suas funcionalidades.

Primeiramente, vamos usar a ferramenta de linha de comando mista para a montagem de nosso novo projeto:

$ mix new sender --sup

Isto cria um diretório para o nosso projeto sender com um monte de arquivos e pastas dentro. Note que também utilizamos o argumento --sup, que criará uma aplicação com uma árvore de supervisão. Veremos sobre árvores de supervisão mais adiante.

Para manter nosso projeto e nossos exemplos simples, não vamos enviar e-mails de verdade. Entretanto, ainda precisamos de alguma lógica comercial para nossas experiências. Podemos usar a função Process.sleep/1 para fingir que estamos enviando um e-mail, que normalmente é uma operação lenta e pode levar alguns segundos para ser concluída. Quando chamado com um número inteiro, o Process.sleep/1 interrompe o processo atual durante um determinado período em milissegundos. Isto é muito útil, porque você pode usá-lo para simular um código que leva muito tempo para ser completo. Você também pode usá-lo para testar vários casos extremos, como veremos mais tarde. Naturalmente, em aplicações de produção real, você substituirá isto por sua lógica comercial real. Mas por enquanto, vamos fingir que estamos fazendo um trabalho muito intensivo.

Abra seu arquivo sender/lib/sender.ex e adicione o seguinte:

def send_email(email) do
  Process.sleep(3000)
  IO.puts("Email to #{email} sent")
  {:ok, "email_sent"}
end

Ao chamar esta função, a execução será suspensa por três segundos e uma mensagem será impressa, o que será útil para a depuração. Também retorna uma tupla {:ok, "email_sent"} para indicar que o email foi enviado com sucesso.

Agora que tudo está pronto, podemos começar. Sugiro que você mantenha uma sessão de terminal com o IEx aberta e seu editor de texto favorito ao lado, para você poder fazer e executar mudanças à medida que avançamos.

Iniciando Tasks e Recuperando Resultados

Antes de saltar para o módulo Task, vamos ver como as coisas estão funcionando. Vamos chamar a função send_email/1 do IEx, e passar um endereço de email fictício como um argumento.

iex> Sender.send_email("hello@world.com")
Email to hello@world.com sent
{:ok, "email_sent"}

Você notou o atraso/delay? Tivemos que esperar três segundos até vermos a produção e o resultado impresso. Na verdade, mesmo o iex> prompt não estava aparecendo. Vamos adicionar outra função, notify_all/1:

Em sender/lib/sender.ex:

def notify_all(emails) do
  Enum.each(emails, &send_email/1)
end

A função notify_all/1 usa Enum.each/2 para iterar sobre os emails variados, que é uma lista de strings. Para cada item da lista, vamos chamar a função send_email/1. Vamos testar esta função no IEx, mas primeiro precisamos de alguns dados de teste. Crie um arquivo .iex.exs na pasta principal do projeto sender no mesmo local onde está o mix.exs. Adicione o seguinte:

Em sender/.iex.exs:

emails = [
  "hello@world.com",
  "hola@world.com",
  "nihao@world.com",
  "konnichiwa@world.com",
]

Salve o arquivo, saia do IEx e inicie-o novamente com iex -S mix. Digite emails e pressione enter:

iex(1)> emails
["hello@world.com", "hola@world.com", "nihao@world.com",
"konnichiwa@world.com"]

Isto lhe poupará muita digitação. Todo o código Elixir em .iex.exs será executado quando o IEx iniciar, portanto, isto persistirá entre as sessões do IEx. Agora vamos usar os dados de teste com notify_all/1. Você pode adivinhar quanto tempo levará para enviar todos os emails? Vamos descobrir:

iex> Sender.notify_all(emails)
Email to hello@world.com sent
Email to hola@world.com sent
Email to nihao@world.com sent
Email to konnichiwa@world.com sent
:ok

Foram necessárias quatro chamadas para send_email/1 e cerca de doze segundos para completar. Só de esperar a saída no IEx parecia uma eternidade. Isto não é nada bom!!! À medida que a nossa base de usuários cresce, levará uma eternidade para enviar nossos emails.

Não se desespere - podemos acelerar significativamente nosso código usando o módulo Task. No entanto, antes de saltarmos para dentro dele, vamos tirar um momento para falar sobre dois conceitos importantes na programação: código síncrono e assíncrono.

Código síncrono e assíncrono

Tanto o código síncrono como assíncrono são executados aos mesmo tempo, a diferença é que o código assíncrono não há uma ordem específica e por isso é considerado concorrente, diferentemente do síncrono que há uma sequencia específica.

Por padrão, quando você executa algum código em Elixir, você tem que esperar que ele seja concluído. Você não pode fazer nada enquanto isso, e você obtém o resultado assim que o código tiver terminado. O código é executado de forma síncrona e é algumas vezes chamado de código bloqueador (blocking code).

O oposto disto é executar o código de forma assíncrona. Neste caso, você pede ao tempo de execução da programação para executar o código, mas continua com o resto do programa. O código assíncrono roda em segundo plano porque a aplicação continua rodando, como se nada tivesse acontecido. Eventualmente, quando o código assíncrono termina, você pode recuperar o resultado. Como o código assíncrono não bloqueia a execução principal do programa, ele é chamado de código não-bloqueador (non-blocking code). O código assíncrono também é concorrente, já que nos permite continuar fazendo outros trabalhos. A figura abaixo ilustra a diferença entre código síncrono e assíncrono em um programa de panificação:

Mix flour = Misture a farinha
Rest the dough = Descanse a massa
Pre-heat oven = Pré-aqueça o forno
Bake = Assar

Uma vez que apenas a etapa final de cozimento (Bake) requer que o forno seja pré-aquecido (Pre-heat), você pode fazer o pré-aquecimento do forno de forma assíncrona e fazer algo mais enquanto isso. Em comparação com a versão síncrona, isto diminui significativamente o tempo necessário para completar o conjunto de instruções.

Você já deve ter adivinhado que a função notify_all/1 está enviando cada email de forma síncrona. É por isso que está demorando tanto para ser concluída. Para melhorar isto, vamos converter nosso código para ser executado de forma assíncrona. Graças ao módulo Task do Elixir, precisaremos apenas de algumas pequenas mudanças para conseguir isso. Vamos ver como funciona.

Iniciando processos

O módulo Task contém uma série de funções muito úteis para executar código de forma assíncrona e concorrente. Uma delas é start/1. Ele aceita uma função como um argumento, e dentro dessa função devemos fazer todo o trabalho que pretendemos fazer. Vamos experimentar isso rapidamente no IEx:

iex> Task.start(fn -> IO.puts("Hello async world!") end)
Hello async world!
{:ok, #PID<0.266.0>}

Você viu a mensagem impressa instantaneamente porque é uma operação rápida, mas o resultado real foi {:ok, #PID<0.266.0>}. Retornar uma tupla como {:ok, result} ou {:erro, message} é uma prática comum no Elixir. O resultado foi :ok para o sucesso e #PID<0.266.0>. PID significa identificador de processo (process identifier) - um número que identifica de forma única um processo Elixir.

Já temos o send_email/1 pronto, por isso podemos usar o Task.start/1 para chamá-lo. Vamos fazer algumas mudanças:

Em sender/lib/sender.change1.ex:

def notify_all(emails) do
  Enum.each(emails, fn email ->
    Task.start(fn ->
    send_email(email)
    end)
  end)
end

Em seguida, recompilar e executar notify_all/1:

iex> Sender.notify_all(emails)
:ok
Email to hello@world.com sent
Email to hola@world.com sent
Email to nihao@world.com sent
Email to konnichiwa@world.com sent

Isto deve ser significativamente mais rápido - de fato, quatro vezes mais rápido! Todas as funções foram chamadas concorrentemente e terminadas ao mesmo tempo, imprimindo a mensagem de sucesso como esperávamos.

Recuperando o resultado de uma tarefa

Task.start/1 tem uma limitação por projeto: não retorna o resultado da função que foi executada. Isto pode ser útil em alguns casos, mas na maioria das vezes você precisa do resultado para alguma outra coisa. Seria ótimo se modificássemos nosso código e retornássemos um resultado significativo quando todos os emails forem enviados com sucesso.

Para recuperar o resultado de uma função, você tem que usar o Task.async/1. Ela retorna uma estrutura %Task{} que você pode atribuir a uma variável para uso posterior. Você pode experimentá-la no IEx assim:

iex> task = Task.async(fn -> Sender.send_email("hello@world.com") end)
%Task{
  owner: #PID<0.145.0>,
  pid: #PID<0.165.0>,
  ref: #Reference<0.713486762.1657274369.63141>
}

O código send_email/1 está agora rodando em segundo plano. Enquanto isso, estamos livres para fazer outros trabalhos, conforme necessário. Você pode adicionar mais lógica comercial ou até mesmo iniciar outras tarefas. Quando você precisar do resultado real da tarefa, você pode recuperá-la usando a variável task. Vamos dar uma olhada mais de perto no que esta variável contém:

owner (proprietário) é o PID do processo que iniciou o processo Task.
pid é o identificador do próprio processo Task.
ref é a referência do monitor de processo (process monitor reference).

Não vamos nos aprofundar no monitoramento de processos (Process monitoring) aqui. Entretanto, vale a pena saber que você pode monitorar um processo e receber notificações dele usando um valor de referência - por exemplo, quando e como um processo sai.

Para recuperar o resultado da tarefa, você pode usar tanto o Task.await/1 ou o Task.yield/1 que aceita uma estrutura Task como um argumento. Há uma diferença importante na forma de trabalho do await/1 e do yield/1, portanto, você tem que escolher sabiamente. Ambos param o programa e tentam recuperar o resultado da tarefa. A diferença vem da maneira como eles lidam com os tempos de espera do processo (process timeouts).

Os tempos de espera do processo garantem que os processos não fiquem presos para sempre. Para mostrar como eles funcionam, vamos aumentar o tempo que a função send_email/1 leva para 30 segundos, apenas temporariamente:

def send_email(email) do
  Process.sleep(30_000)
  IO.puts("Email to #{email} sent")
  {:ok, "email_sent"}
end

Em seguida, recompile/0 no IEx . Agora vamos executar o código de forma assíncrona e canalizar o resultado da task em await/1:

iex> Task.async(fn -> Sender.send_email("hi@world.com") end) |> Task.await()

Após cinco segundos, você receberá uma exceção semelhante a esta:

** (exit) exited in: Task.await(%Task{owner: #PID<0.144.0>,
  pid: #PID<0.151.0>,
  ref: #Reference<0.2297312895.3696492546.156249>}, 5000)
    ** (EXIT) time out
    (elixir) lib/task.ex:607: Task.await/2

Ao utilizar o await/1, esperamos que uma tarefa termine dentro de um certo período de tempo. Por padrão, este tempo é definido para 5000ms, que é de cinco segundos. Você pode mudar isso passando um inteiro com a quantidade de milissegundos como segundo argumento, por exemplo Task.await(task, 10_000). Você também pode desativar o tempo limite passando o átomo :infinity.

Em comparação, o Task.yield/1 simplesmente retorna nulo se a tarefa não tiver sido concluída. O timeout de yield/1 também é de 5000ms, mas não causa uma exceção e um travamento (crash). Você também pode fazer Task.yield(task) repetidamente para verificar um resultado, o que não é permitido por await/1. Uma tarefa concluída retornará {:ok, resultado} ou {:exit, reason}. Você pode ver isto em ação:

iex> task = Task.async(fn -> Sender.send_email("hi@world.com") end)
%Task{
owner: #PID<0.135.0>,
pid: #PID<0.147.0>,
ref: #Reference<0.3033103973.1551368196.24818>
}
iex> Task.yield(task)
nil
iex> Task.yield(task)
nil
Email to hi@world.com sent
iex> Task.yield(task)
{:ok, {:ok, "email_sent"}}
iex> Task.yield(task)
nil

Esta saída ilustra o que acontece quando você chama Task.yield/1 enquanto a tarefa ainda está em execução - você recebe nil (nulo). Assim que a mensagem de sucesso é impressa, recebemos {:ok, {:ok, "e-mail_sent"}} como esperado. Você também pode usar yield/2 e fornecer seu próprio timeout (tempo de espera), de modo semelhante a await/2, mas a opção :infinity não é permitida. Note que você só receberá o resultado de yield/1 uma vez, e as chamadas subsequentes retornarão nil.

Você pode estar se perguntando o que acontece se nossa tarefa está emperrada e nunca termina? Enquanto await/1 se encarrega de parar a tarefa, o yield/1 a deixará em funcionamento. É uma boa idéia parar a tarefa manualmente, chamando o Task.shutdown(task). A função shutdown/1 também aceita um timeout e dá ao processo uma última chance de ser concluído, antes de pará-lo. Se ele for concluído, você receberá o resultado normalmente. Você também pode parar um processo imediatamente (e de forma bastante violenta) usando o átomo :brutal_kill como segundo argumento.

Como você pode ver, usar yield/1 e shutdown/1 é um pouco mais trabalhoso do que await/1. Qual deles usar depende de seu caso de uso. Muitas vezes, o timeout (tempo de espera) da tarefa justifica uma exceção, caso em que o await/1 será mais conveniente de usar. Sempre que você precisar de mais controle sobre o timeout e o encerramento, você pode mudar para yield/1 e shutdown/1. A parte importante é que, após utilizar async/1, você deve sempre processar o resultado, usando ou await/1, ou yield/1 seguido de shutdown/1.

Para a nossa lógica notify_all/1, vamos usar o await/1 para simplificar. Lembre-se de reverter nossa mudança anterior no send_email/1 e definir Process.sleep/1 de volta para 3000ms:

def send_email(email) do
  Process.sleep(3000)

Agora vamos trocar Task.start/1 para Task.async/1:

Em sender/lib/sender.change2.ex:

def notify_all(emails) do
  emails
  |> Enum.map(fn email ->
    Task.async(fn ->
      send_email(email)
    end)
  end)
  |> Enum.map(&Task.await/1)
end

Observe que também estamos usando Enum.map/2 em vez de Enum.each/2, porque queremos mapear cada seqüência de e-mails para sua estrutura de tarefas correspondente. A estrutura é necessária para recuperar o resultado de cada processo.

Usamos aqui a sintaxe da função shorthand (abreviação) do Elixir - &Task.await/1. Se você não está familiarizado com ela, é simplesmente equivalente à escrita:

Enum.map(fn task ->
  Task.await(task)
end)

Vamos experimentar as últimas mudanças no IEx:

iex> Sender.notify_all(emails)
Email to hello@world.com sent
Email to hola@world.com sent
Email to nihao@world.com sent
Email to konnichiwa@world.com sent
[ok: "email_sent", ok: "email_sent", ok: "email_sent", ok: "email_sent"]

A função retornou uma lista de resultados. Para cada tarefa, você tem uma tupla ok: "email_sent", que é o que a função send_email/1 retorna. Em sua lógica comercial, você pode retornar um {:erro, "mensagem de erro"} quando algo der errado. Então você será capaz de coletar o erro e potencialmente tentar novamente a operação ou fazer algo mais com o resultado.

A criação de tarefas a partir de listas de itens é na verdade muito comum em Elixir. Em seguida, vamos usar uma função especificamente projetada para fazer isso. Ela também oferece uma série de recursos adicionais, especialmente úteis quando se trabalha com grandes listas.

Keyword Lists em Elixir

Elixir tem uma notação especial para listas contendo tuplas de chave-valor, também conhecidas como keyword lists (listas de palavras-chave). Cada item da lista de palavras-chave deve ser uma tupla de dois elementos. O primeiro elemento é o nome da chave, que deve ser um átomo. O segundo é o valor e pode ser de qualquer tipo.

Elas são exibidas no IEx sem as chaves (curly braces), assim [ok: "email_sent"]. Isto é equivalente a [{:ok, "email_sent"}].

Gerenciamento de séries de tarefas

Imaginemos que temos um milhão de usuários, e queremos enviar um e-mail a todos eles. Podemos usar Enum.map/2 e Task.async/1 como fizemos antes, mas iniciar um milhão de processos colocará uma pressão repentina sobre os recursos de nosso sistema. Isso pode degradar o desempenho do sistema e potencialmente fazer com que outros serviços não respondam. Nosso provedor de serviços de e-mail também não ficará feliz, pois também colocamos muita pressão sobre a infra-estrutura de e-mail deles.

Por outro lado, não queremos enviar e-mails um a um, porque é lento e ineficiente. Parece que estamos em uma encruzilhada e, seja qual for o caminho que tomemos, acabamos em perigo. Não queremos escolher entre desempenho e confiabilidade - queremos ser capazes de executar processos do módulo Task para alavancar a concorrência, mas garantir que não sobrecarregamos nossos recursos de sistema à medida que dimensionamos nosso produto e aumentamos nossa base de usuários.

A solução para nossos problemas é async_stream/3. É outra função muito útil do módulo Task que é projetado para criar processos de tarefas a partir de uma lista de itens. Para cada item da lista, async_stream/3 iniciará um processo e executará a função que fornecemos para processar o item. Funciona como Enum.map/2 e Task.async/2 combinados, com uma grande diferença: você pode definir um limite no número de processos em execução ao mesmo tempo. A figura abaixo ilustra como isto funciona:

Neste exemplo, o limite de concorrência é fixado em quatro, portanto, mesmo que você tenha uma lista de cem itens, no máximo apenas quatro processos serão executados de forma concorrente em um determinado momento. Este é um exemplo de tratamento de contrapressão/retaguarda (back-pressure), que podemos discutir em profundidade em um próximo post, falando sobre pipelines de processamento de dados com GenStage. Por enquanto, tudo o que você precisa saber é que esta estratégia de manuseio de processos é ótima para evitar picos repentinos de uso do sistema. Em outras palavras, você obtém a concorrência e o desempenho sem sacrificar a confiabilidade.

Como o nome da função sugere, async_stream/3 retorna um Stream. Streams em Elixir são estruturas de dados que realizam uma ou mais operações que não funcionam imediatamente, somente quando explicitamente informado. É por isso que às vezes são chamados de listas preguiçosas. Vamos ver o que acontece quando executamos esta função a partir do IEx:

iex> Task.async_stream(emails, &Sender.send_email/1)
#Function<1.35903181/2 in Task.build_stream/3>

Em vez do resultado habitual, recebemos uma função, que vai criar um Stream. É importante entender como funcionam os fluxos, então vamos dar outro exemplo rápido no IEx:

iex> Stream.map([1, 2, 3], & &1 * 2)
#Stream<[
  enum: [1, 2, 3],
  funs: [#Function<49.33009823/1 in Stream.map/2>]
]>

Se tivéssemos usado Enum.map/2 a função teria retornado [2, 4, 6]. Em vez disso, o fluxo de resultados contém simplesmente a entrada inicial e uma lista de operações funs. Estas operações podem ser executadas posteriormente. Como tanto o Stream quanto o Enum implementam o protocolo Enumerable, muitas funções Enum têm uma alternativa preguiçosa no módulo Stream.

Uma maneira de executar um fluxo é usar a função Stream.run/1. Entretanto, o Stream.run/1 sempre retorna :ok, então só é útil quando você não está interessado no resultado final. Ao invés disso, você pode usar Enum.to_list/1, que tentará converter o fluxo para uma estrutura de dados List. Como resultado desta conversão, todas as operações no fluxo serão executadas, e o resultado será retornado como uma lista. Outras funções no módulo Enum também forçarão o fluxo a ser executado, como Enum.reduce/3. Você pode usá-las se pretender trabalhar mais com o resultado.

Agora, vamos atualizar o notify_all/1 para usar o async_stream/3. Desta vez, porém, vamos executar o stream usando Enum.to_list/1:

Em sender/lib/sender.change3.ex:

def notify_all(emails) do
  emails
  |> Task.async_stream(&send_email/1)
  |> Enum.to_list()
end

E dê uma olhada no IEx, mas não se esqueça de rodar recompile/0 primeiro:

iex> Sender.notify_all(emails)
Email to hello@world.com sent
Email to hola@world.com sent
Email to nihao@world.com sent
Email to konnichiwa@world.com sent
[
  ok: {:ok, "email_sent"},
  ok: {:ok, "email_sent"},
  ok: {:ok, "email_sent"},
  ok: {:ok, "email_sent"}
]

Por que async_stream retorna um Stream?

Os Streams são projetados para emitir uma série de valores, um por um. Assim que o Task.async_stream/3 descobre que um processo de tarefa terminou, ele emitirá o resultado e tomará o próximo elemento da entrada, iniciando um novo processo. Isto significa que ele pode manter uma série de eventos concorrentes, o que é um dos benefícios do async_stream/3. Você também pode usar todas as outras funções do módulo Stream para compor fluxos complexos de processamento de dados.

Como você pode ver, a saída é semelhante à do exemplo Task.async/2. Entretanto, dependendo de quantos núcleos lógicos (threads) sua máquina tem, o tempo que leva para que a função seja concluída pode ser diferente.

Como mencionamos anteriormente, async_stream/3 mantém um limite em quantos processos podem ser executados ao mesmo tempo. Por padrão, este limite é definido para o número de núcleos lógicos disponíveis no sistema. Anteriormente utilizávamos o Task.async/2 para iniciar manualmente um processo para cada um dos quatro itens. Isto significa que se você tiver uma CPU com menos de quatro núcleos lógicos, o async_stream/3 parecerá mais lento. Você pode alterar facilmente este comportamento padrão através do parâmetro opcional max_concurrency. Vamos definir o max_concurrency para 1 temporariamente:

|> Task.async_stream(&send_email/1, max_concurrency: 1)

Quando você tentar as novas mudanças novamente, você verá que os e-mails são enviados um a um. Isto não é muito útil na prática, mas demonstra como funciona o max_concurrency. Você pode reverter a mudança ou defini-la para um número ainda maior. Em aplicações de produção, você pode comparar (benchmark) se o max_concurrency funciona melhor para seu caso de uso, levando em consideração os recursos de seu sistema e a necessidade de desempenho.

Outra opção que precisa ser mencionada é :ordered. Atualmente, async_stream/3 assume que queremos os resultados na mesma ordem em que foram originalmente ordenados. Esta preservação da ordem pode potencialmente retardar nosso processamento, pois async_stream/3 esperará que um processo lento seja concluído antes de passar para o próximo.

Em nosso caso, só precisamos dos resultados para verificar se um e-mail foi enviado com sucesso ou não. Não necessariamente precisamos deles exatamente na mesma ordem. Podemos potencialmente agilizar as coisas desativando a ordenação assim:

|> Task.async_stream(&send_email/1, ordered: false)

Agora o async_stream/3 não ficará parado se um processo estiver demorando mais do que outros.

Processos iniciados por async_stream/3 também estão sujeitos a timeouts (tempo de resposta), assim como aqueles iniciados por start/1 e async/2. O parâmetro opcional :timeout é suportado e o valor padrão é de 5000ms. Quando uma tarefa atinge o timeout, ela produzirá uma exceção, interrompendo o stream/fluxo e interrompendo o processo atual. Este comportamento pode ser alterado usando um argumento opcional :on_timeout, que você pode definir para :kill_task. Este argumento é similar ao :brutal_kill suportado pelo Task.shutdown/2. Segue um exemplo:

|> Task.async_stream(&send_email/1, on_timeout: :kill_task)

Como resultado do uso da opção :kill_task, quando um processo termina com um timeout, o async_stream/3 irá ignorá-lo e continuará normalmente.

Um processo pode falhar por muitas razões. Falamos de exceções de timeout, que acontecem quando os processos levam muito tempo para serem concluídos. Isto pode ser porque o trabalho que ele está fazendo consome muito tempo ou porque ele está esperando por uma API de terceiros lenta para responder. Às vezes é um erro inesperado que causa uma exceção. O importante é que quando um processo trava, ele também pode travar o processo que o iniciou, o que por sua vez trava seu processo pai, desencadeando uma reação em cadeia que pode, em última instância, travar toda a sua aplicação.

Isto parece um desastre de programação esperando para acontecer, mas a boa notícia é que em Elixir, graças a Erlang, tem um conjunto de ferramentas poderosas para gerenciar processos, pegar acidentes e se recuperar rapidamente. Na próxima seção, vamos explicar por que esta reação em cadeia é uma coisa boa, como isolá-la e como utilizá-la a nosso favor. Você também começará a aprender como construir as aplicações tolerantes a falhas pelas quais a linguagem Elixir é famosa.

Ligação de processos

Os processos em Elixir podem ser ligados entre si, e os processos do Task são normalmente ligados automaticamente ao processo que os iniciou. Este vínculo é simplesmente chamado de ligação de processos (process link). As ligações de processos têm um papel importante na construção de aplicações concorrentes e tolerantes a falhas. Elas nos ajudam a desligar imediatamente partes do sistema, ou mesmo todo o sistema quando necessário, impedindo que a aplicação funcione em um péssimo estado. Vamos ver por que as ligações de processos são úteis e como funcionam, observando alguns exemplos. A figura a seguir mostra três processos ligados entre si:

Como você pode ver, o Processo C acabou de falhar. Imagine que o Processo B continua funcionando, sem saber do acidente. Ele espera receber um resultado do Processo C e se reportar ao Processo A. Entretanto, isto nunca acontecerá, portanto este sistema é mantido em um péssimo estado.

Isto pode ser evitado graças à ligação de processos. Quando dois processos estão ligados, eles formam uma relação especial - assim que um sai, o outro será notificado. Quando se tem uma cadeia de processos interligados, todos eles serão eventualmente notificados quando ocorrer um acidente. Por padrão, os processos interligados terminarão e limparão a memória que eles utilizavam, evitando outros problemas potenciais no decorrer da linha. Isto significa que o acidente do Processo C desencadeará uma reação em cadeia e o Processo B terminará, seguido pelo Processo A.

Entretanto, uma reação em cadeia como esta só faz sentido quando ocorre um erro grave. Dê uma olhada nesta figura, que mostra os processos em execução para uma aplicação web bancária:

A maioria das aplicações web dependem muito de um banco de dados, e o acesso ao banco de dados é geralmente gerenciado por um processo. Neste exemplo, o processo de Repo tem esta responsabilidade. Se o Repo falhar, porque o banco de dados se torna indisponível, esta aplicação não poderá funcionar de forma alguma. Se isso acontecer, você pode deixar todos os processos terminarem, o que deixará o site offline.

Agora, vamos considerar o processo Sender, que é responsável pelo envio de e-mails. Ao contrário do processo de Repo , não é essencial conceder aos usuários acesso à sua conta bancária. Se o processo do Sender falhar por qualquer razão, não queremos encerrar a aplicação inteira. Queremos conter esta falha e deixar o resto do sistema continuar.

Você pode isolar os acidentes configurando um processo para capturar as saídas. Capturar uma saída significa reconhecer a mensagem de saída de um processo vinculado, mas continuar a funcionar em vez de terminar. Isto também significa que a mensagem de saída não será propagada mais para outros processos. Voltando ao nosso exemplo original - se o Processo B estiver configurado para capturar as saídas, ele continuará funcionando após a queda do Processo C, mantendo o Processo A seguro também. Você pode configurar um processo para capturar saídas manualmente, mas normalmente você quer usar um tipo especial de processo chamado supervisor. Vamos falar sobre supervisors a seguir.

Como você pode ver, as ligações de processo são um mecanismo essencial para detectar saídas e lidar com falhas inesperadas de processo. A maioria das funções de utilidade no módulo Task cria links de processo automaticamente, ligando-se ao processo atual, mas há algumas que não o fazem. Você tem a opção de ligar ou não ao processo atual, mas você tem que escolher a função correta.

Por exemplo, quando usamos async/1 e async_stream/3, foi criado um link de processo para cada novo processo. Task.start/1, por outro lado, não cria um link de processo, mas existe o Task.start_link/1 que faz exatamente isso.

A maioria das funções do módulo Task que se ligam ao processo atual por padrão têm uma função alternativa, geralmente terminando com _nolink. Task.Supervisor.async_nolink/3 é a alternativa ao Task.async/1. Task.async_stream/3 pode ser substituído pelo Task.Supervisor.async_stream_nolink/4. Todas as funções no módulo Task.Supervisor são projetados para serem ligados a um supervisor.

A seguir, vamos aprender sobre supervisors e como podemos usar um quando iniciarmos processos de tarefas.

Conhecendo o Supervisor

Assim como no local de trabalho, onde os supervisores são responsáveis por grupos de funcionários, os supervisors (supervisores) de Elixir são responsáveis pelos processos a eles atribuídos. Os processos subordinados também são obrigados a se reportar a seu supervisor, que tem que garantir que tudo esteja funcionando sem problemas. Para isso, os supervisors vêm com um conjunto de características que lhes permitem gerenciar de forma eficaz outros processos. Eles podem iniciar e interromper processos e reiniciá-los em caso de erros imprevistos no sistema. Eles são configurados para capturar as saídas, assim, quando um processo supervisionado sai com um erro, esse erro será isolado e não se propagará mais. Tudo isso faz dos supervisors um importante bloco de construção para aplicações tolerantes a falhas.

Os processos supervisionados são chamados de child processes (processos filhos). Qualquer processo OTP pode ser supervisionado, e você também pode adicionar um supervisor como filho de outro supervisor. Tudo o que você tem que fazer é pedir ao supervisor que inicie o processo que você quer que seja gerenciado. Isto nos permite construir facilmente uma hierarquia de processos também chamada de supervision tree (árvore de supervisão).

Nossa aplicação sender já tem um supervisor no local, que você pode ver em application.ex:

Em sender/lib/sender/application.ex:

def start(_type, _args) do
  children = [
    # Starts a worker by calling: Sender.Worker.start_link(arg)
    # {Sender.Worker, arg}
  ]
  # See https://hexdocs.pm/elixir/Supervisor.html
  # for other strategies and supported options
  opts = [strategy: :one_for_one, name: Sender.Supervisor]
  Supervisor.start_link(children, opts)
end

A função start/2 tem algum código padrão (boilerplate code) e algumas instruções já em vigor. No final da função temos Supervisor.start_link(children, opts) que inicia o supervisor principal da aplicação. Como a variável children é apenas uma lista vazia, na verdade não há processos filhos para supervisionar. Esta configuração é o resultado de usarmos o argumento --sup quando chamamos o comando mix new para criar nosso projeto.

Agora que você sabe como os supervisores são úteis, vamos ver como podemos usar um para nossos processos do módulo Task. Não queremos que nosso processo atual falhe se uma única tarefa falhar, então isolaremos erros potenciais iniciando os processos das tarefas sob um supervisor.

Adicionando um Supervisor

Elixir fornece um Supervisor behaviour para criar processos de supervisão, que você mesmo tem que implementar. Entretanto, há também alguns supervisores embutidos que podemos usar sem escrever (quase) qualquer código, e um deles é o Task.Supervisor. Ele é feito especificamente para trabalhar com processos de tarefas, por isso é uma excelente escolha para nós. Abra o application.ex e atualize a lista de filhos:

Em sender/lib/sender/application.change1.ex:

def start(_type, _args) do
  children = [
    {Task.Supervisor, name: Sender.EmailTaskSupervisor}
  ]
  opts = [strategy: :one_for_one, name: Sender.Supervisor]
  Supervisor.start_link(children, opts)
end

O elemento que acrescentamos é referido como um child specification (especificação de filho). Existem diferentes tipos de formatos para escrever __child specifications, mas na maioria das vezes é um tuple, contendo informações sobre o processo do filho. Esta informação é usada pelo supervisor para identificar, iniciar e ligar o processo.

Como o Task.Supervisor é um módulo incorporado, nosso child specification é simplesmente o nome do módulo, seguido por uma lista de opções. Usamos a opção :name para dar-lhe um nome único de nossa escolha, que usaremos mais tarde. Nomear um processo é conhecido como name registration (registro de nome). É comum anexar "Supervisor" ao nomear supervisores, por isso o chamamos Sender.EmailTaskSupervisor.

O child specification também poderia ser um map. Podemos reescrever a última mudança e usar um map como este:

def start(_type, _args) do
  children = [
    %{
      id: Sender.EmailTaskSupervisor,
      start: {
        Task.Supervisor,
        :start_link,
        [[name: Sender.EmailTaskSupervisor]]
      }
    }
  ]
  opts = [strategy: :one_for_one, name: Sender.Supervisor]
  Supervisor.start_link(children, opts)
end

Usar um map é mais verboso, mas permite definir outras opções de configuração no map, além dos valores :id e :start. Há também uma função de ajuda Supervisor.child_spec/1² que retorna um map e permite que você sobreponha apenas as chaves que você precisa.

Vamos manter o formato tuple por enquanto, mas os outros formatos também são abordados no livro Concurrent Data Processing in Elixir.

Nosso supervisor está agora pronto para uso. É tão simples quanto isso, e não há necessidade de criar nenhum arquivo ou escrever mais código. Esta simples mudança nos permite usar toda uma série de funções encontradas no módulo Task.Supervisor, algumas das quais introduzimos anteriormente.

Usando Task.Supervisor

Antes de passarmos a usar o EmailTaskSupervisor, vamos ver o que acontece quando ocorre um erro e não há supervisor no local. Vamos simular um erro, levantando uma exceção ao enviar um de nossos e-mails falsos. Edite sender.ex e adicione a seguinte cláusula de função pouco antes de enviar_email/1:

Em sender/lib/sender.change4.ex:

def send_email("konnichiwa@world.com" = email), do:
 raise "Oops, couldn't send email to #{email}!"

def send_email(email) do
 Process.sleep(3000)
 IO.puts("Email to #{email} sent")
 {:ok, "email_sent"}
end

Usando pattern matching, vamos abrir uma exceção somente quando o endereço de e-mail for konnichiwa@world.com. Vamos ver o impacto deste erro na prática. Reinicie seu IEx shell e execute a função embutida self/0:

iex(1)> self()
#PID<0.136.0>

Você obtém um identificador de processo para o processo atual, que é o própria shell do IEx. Seu número pode ser diferente do meu, mas tudo bem. Tome nota disso.

Agora, vamos executar nossa função notify_all/1 e ver o que acontece:

iex(2)> Sender.notify_all(emails)
[error] Task #PID<0.154.0> started from #PID<0.136.0> terminating
** (RuntimeError) Oops, couldn't send email to konnichiwa@world.com!
 (sender) lib/sender.ex:8: Sender.send_email/1
 (elixir) lib/task/supervised.ex:90: Task.Supervised.invoke_mfa/2
 (elixir) lib/task/supervised.ex:35: Task.Supervised.reply/5
 (stdlib) proc_lib.erl:249: :proc_lib.init_p_do_apply/3
Function: &:erlang.apply/2
Args: [#Function<0.104978293/1 in Sender.notify_all/1>,
["konnichiwa@world.com"]]
** (EXIT from #PID<0.136.0>) shell process exited with reason:
an exception was raised:
  ** (RuntimeError) Oops, couldn't send email to konnichiwa@world.com!
   (sender) lib/sender.ex:8: Sender.send_email/1
   (elixir) lib/task/supervised.ex:90: Task.Supervised.invoke_mfa/2
   (elixir) lib/task/supervised.ex:35: Task.Supervised.reply/5
   (stdlib) proc_lib.erl:249: :proc_lib.init_p_do_apply/3
iex(1)>

Essa é uma grande mensagem de erro. Na verdade, há duas mensagens de erro que parecem ser quase idênticas. Lembra-se do que dissemos sobre as ligações de processos e como as falhas se propagam entre processos interligados? Neste caso, um processo de tarefa vinculado ao IEx levanta uma exceção. Devido a este link, criado pelo async_stream/3 , o IEx também trava com a mesma mensagem de exceção. Você pode verificar isto executando self() novamente:

iex(1)> self()
#PID<0.155.0>

Temos um novo identificador de processo, o que significa que um novo processo IEx foi iniciado e o antigo se quebrou.

Podemos evitar isto usando o novo EmailTaskSupervisor. Alterar notify_all/1 para usar Task.Supervisor.async_stream_nolink/4 em vez de Task.async_stream/3:

Em sender/lib/sender.change4.ex:

def notify_all(emails) do
  Sender.EmailTaskSupervisor
  |> Task.Supervisor.async_stream_nolink(emails, &send_email/1)
  |> Enum.to_list()
end

O novo código é muito parecido com o antigo. O primeiro argumento de async_stream_nolink/4 é um módulo supervisor para os processos de tarefa - é onde você pode usar Sender.EmailTaskSupervisor. O resto dos argumentos são idênticos ao Task.async_stream/3. Vamos executar recompile() e notificar_tudo/1 novamente:

iex> Sender.notify_all(emails)
[error] Task #PID<0.173.0> started from #PID<0.155.0> terminating
** (RuntimeError) Oops, couldn't send email to konnichiwa@world.com!
  (sender) lib/sender.ex:8: Sender.send_email/1
  (elixir) lib/task/supervised.ex:90: Task.Supervised.invoke_mfa/2
  (elixir) lib/task/supervised.ex:35: Task.Supervised.reply/5
  (stdlib) proc_lib.erl:249: :proc_lib.init_p_do_apply/3
Function: &:erlang.apply/2
Args: [#Function<0.32410907/1 in Sender.notify_all/1>,
["konnichiwa@world.com"]]
[info] Email to hello@world.com sent
[info] Email to hola@world.com sent
[info] Email to nihao@world.com sent
[
  ok: {:ok, "email_sent"},
  ok: {:ok, "email_sent"},
  ok: {:ok, "email_sent"},
  exit: {%RuntimeError{
    message: "Oops, couldn't send email to konnichiwa@world.com!"
  },
  [
    {Sender, :send_email, 1, [file: 'lib/sender.ex', line: 8]},
    {Task.Supervised, :invoke_mfa, 2,
      [file: 'lib/task/supervised.ex', line: 90]},
    {Task.Supervised, :reply, 5, [file: 'lib/task/supervised.ex', line: 35]},
    {:proc_lib, :init_p_do_apply, 3, [file: 'proc_lib.erl', line: 249]}
  ]}
]

A exceção familiar ainda está impressa, mas desta vez obtivemos um resultado significativo. Podemos ver que todas as tarefas foram concluídas com sucesso, exceto uma. A tarefa que se quebrou retornou um tuple :exit contendo a mensagem de erro e até mesmo um traço de pilha. O mais importante é que nosso processo atual foi isolado do acidente - você pode verificar isso executando o self() novamente.

É fácil ver que esta é uma enorme melhoria em relação a nossa versão anterior. O supervisor que introduzimos trata de processos e erros simultâneos, enquanto ainda estamos colhendo os benefícios de desempenho do async_stream.

Você já deve ter ouvido falar de uma filosofia associada a Erlang chamada Let It Crash (deixe falhar). As aplicações Erlang podem se recuperar rapidamente de erros reiniciando partes de seu sistema. Elixir também adota esta filosofia. Infelizmente, esta abordagem também é freqüentemente mal compreendida. Na próxima seção vamos explicar o que realmente significa Let It Crash e como os supervisores podem reiniciar processos para tornar nossos sistemas ainda mais resilientes.

Entendendo o Let it Crash

Usamos o Task.Supervisor para isolar uma falha de processo, mas pode parecer estranho que não tenhamos evitado a falha simplesmente adicionando o tratamento de erros na função send_email/1. Neste caso específico, fizemos isso de propósito, apenas para simular uma exceção inesperada. Na prática, você deve providenciar o tratamento de erros quando espera que um erro ocorra, e deixar o resto para o supervisor como último recurso.

Ao discutir o tratamento de erros para o Elixir, a frase let it crash é freqüentemente usada. Como resultado, algumas pessoas assumem que let it crash significa que Erlang e os desenvolvedores Elixir não fazem nenhuma manipulação de erros, o que não é o caso. A correspondência de padrões e as macro em Elixir facilitam o trabalho com {:ok, resultado} e {:erro, msg} tuples, e esta abordagem é amplamente utilizada na comunidade. Elixir também tem try e rescue para capturar exceções, semelhante à try e catch em outras linguagens.

Entretanto, por mais que tentemos como engenheiros, sabemos que erros podem acontecer. Isto muitas vezes leva a algo chamado Defensive programming (programação defensiva). Ela descreve a prática de tentar incessantemente cobrir todos os cenários possíveis de falha, mesmo quando alguns cenários são muito improváveis de acontecer, e não vale a pena lidar com eles.

Erlang e Elixir adotam uma abordagem diferente para a programação defensiva. Como todo código é executado em processos e processos que são leves, eles se concentram em como o sistema pode se recuperar de falhas versus como evitar todas as falhas. Você pode optar por permitir que uma parte (ou mesmo o todo) da aplicação se quebre e reinicie, mas você mesmo tratará dos outros erros. Esta mudança no pensamento e no projeto do software é a razão pela qual Erlang ficou famoso por sua confiabilidade e escalabilidade.

É aí que entram em jogo os supervisores. Vimos que os supervisores podem isolar as colisões, mas também podem reiniciar os processos filhos. Há três valores diferentes de reinicialização disponíveis para nós:

:temporary nunca reiniciará os processos filhos.
:transient reiniciará os processos filhos, mas somente quando eles terminam com um erro.
:permanent reinicia sempre os filhos, mantendo-os em funcionamento, mesmo quando elas tentam desligar-se sem um erro.

ℹ️ Esclarecimento sobre a terminologia utilizada

A palavra reinício/restart é um pouco enganosa no contexto dos processos em Elixir. Uma vez que um processo termina, ele não pode ser trazido de volta à vida. Portanto, reiniciar um processo resulta em iniciar um novo processo para tomar o lugar do antigo, usando a mesma child especification.

Dependendo da freqüência do acidente, o próprio supervisor também pode terminar quando um processo filho não puder ser recuperado. Lembre-se de que a responsabilidade do supervisor é de zelar por seus processos. Se for usado um valor de restart :transient ou :permanent e um processo continuar a falhar, o supervisor irá sair, porque falhou em reiniciar esse processo. Isso é discutido com mais detalhes no livro Concurrent Data Processing in Elixir no Capítulo 2, Processos de Longa Duração Usando o GenServer, na página 25.

O Task.Supervisor incorporado que usamos até agora já está usando o valor de reinício :temporary para processos filhos. Este é um padrão sensato, pois evita que todos os processos de tarefas se quebrem se outra tarefa sair com um erro. No entanto, estas opções serão úteis no próximo capítulo do livro quando é construido árvores de supervisão mais complexas.

Conclusão

Cobrimos os processos do Elixir e usamos o módulo Task para fazer o trabalho concorrentemente e em paralelo, evitando facilmente erros de timeout e exceções inesperadas. Você também aprendeu sobre supervisores, que são a base da construção de aplicações Elixir tolerantes a falhas.

Embora o módulo Task seja muito poderoso e versátil, ele só é útil para executar funcões concorrentes ocasionais. Como resultado, os processos do módulo Task tem vida curta, vivem e terminam assim que são concluídos. No próximo capítulo do livro, é introduzido outro tipo de processo, que é capaz de funcionar e manter o estado durante o tempo que for necessário. Vai mudar completamente o jeito como você constrói aplicações para sempre, e isto não é um exagero.

O próximo capítulo do livro fala sobre GenServer e você pode continuar lendo nele, ou quem sabe em um próximo post por aqui mesmo...

até logo 🙂

💻 Olá mundo da programação concorrente

Dev Maiqui 🇧🇷 — Fri, 24 Jun 2022 20:44:36 +0000

Nest post vamos dar uma introdução sobre a programação concorrente. Vamos abordar também um pouco sobre a diferença entre concorrência e paralelismo, assuntos que podem parecer sinônimos, mas quando falamos em programação de computadores há diferenças.

Neste post foram abordados os assuntos principais de cada pesquisa feita. Para mais detalhes sugiro a leitura ou visualização delas:

Site da Intel;
Livro C++ Concurrency in Action;
Livro Erlang and OTP in Action;
Vídeo O que são os NÚCLEOS, THREADS, DUO, QUAD?.
Artigo Concurrency vs Parallelism
Artigo Threads: O que são e para que servem em um processador?

O que é concorrência?
Concorrência em sistemas de computador
- Núcleos vs. Threads
- Hyper-threading (threads adicionais)
- Alternância de Tarefas (Task Switching)
- Execução Paralela
- Alternância de Tarefas vs. Execução Paralela
- Execução paralela e concorrente
- Assíncrono X Síncrono
Abordagens à concorrência
- Concorrência com múltiplos processos
- Concorrência com múltiplos threads
Conclusão

O que é concorrência?

Conforme o livro C++ Concurrency in Action a concorrência é sobre duas, ou mais atividades separadas/independentes que acontecem ao mesmo tempo. Encontramos a concorrência como parte natural da vida; podemos caminhar e falar ao mesmo tempo, ou realizar ações diferentes com cada mão, e cada um pode viver a sua vida independentemente do outro - você pode ver futebol enquanto eu vou nadar, e assim por diante.

Concorrência em sistemas de computador

Quando falamos de concorrência em computadores, nos referimos a um único sistema que executa múltiplas atividades independentes ao mesmo tempo e sem ordem específica, em vez de sequencialmente (ordem específica).

Sequencialmente (ordem específica):

Em um jogo de cartas, os jogadores jogam ao mesmo tempo, mas o jogo começa com o baralho sendo embaralhado, as cartas sendo entregues aos jogadores e, depois, cada jogador joga na sua vez, há uma ordem especifica:

Ao mesmo tempo e sem ordem específica:

Definição do livro Erlang and OTP in Action:

Concorrência é apenas mais uma palavra para paralelo? Quase, mas não exatamente, pelo menos quando estamos falando de computadores e programação.

Uma definição semiformal popular diz algo como: "Aquelas coisas que não têm nada que as obrigue a acontecer em uma ordem específica são ditas como concorrentes". Por exemplo, dada a tarefa de ordenar dois baralhos de cartas, você poderia ordenar um baralho primeiro e depois o outro; ou se você tivesse braços e olhos extras, você poderia ordenar ambos em paralelo. Nada exige que você os faça em uma determinada ordem; portanto, são tarefas concorrentes. Elas podem ser feitas em qualquer ordem, ou você pode pular para frente e para trás entre as tarefas até que ambas sejam feitas; ou, se você tiver os recursos extras (ou talvez alguém para ajudá-lo), você pode executá-las simultaneamente de forma verdadeiramente paralela.

Isto pode soar estranho: não deveríamos dizer que as tarefas só são concorrentes se elas estão acontecendo ao mesmo tempo? Bem, a questão com essa definição é que elas podem acontecer ao mesmo tempo, e nós somos livres para agendá-las de acordo com nossa conveniência. Tarefas que precisam ser feitas simultaneamente não são tarefas separadas, enquanto algumas tarefas são separadas mas não concorrentes e devem ser feitas em ordem, como quebrar o ovo antes de fazer a omelete. As demais são concorrentes.

Núcleos vs. Threads

Conforme o site da Intel, um thread, ou thread de execução, é um termo de software para a sequência básica ordenada de instruções que pode ser passada ou processada por um único núcleo/core de CPU.

Single thread: Cada core corresponde à um thread;
Multi thread (Hyper-threading): Cada core possui mais de um thread.

Créditos da imagem acima: https://www.mobilebit.com.br/tecnologia/2020/12/15/threads-o-que-sao-para-que-servem-em-um-processador/

Hyper-threading (threads adicionais)

As Threads adicionais são conhecidas popularmente como núcleos lógicos ou núcleos virtuais.
As Threads adicionais não tem o mesmo poder de processamento de um núcleo físico (thread real).
As Threads adicionais vão ajudar em softwares que não conseguem lidar com vários núcleos físicos.

Em um processador de quatro núcleos e oito threads, como é o caso do processador Intel Core i7-1165G7 você verá em um sistema Linux no Monitor do Sistema oito gráficos representando os núcleos, ou seja, oito linhas de execução (threads) - quatro núcleos físicos e quatro núcleos virtuais.

Veja no site as especificações do processador Intel Core i7-1165G7

Alternância de Tarefas (Task Switching / Context Switching)

Executando mais de uma tarefa ao mesmo tempo, mas não de forma paralela.

Alternância de tarefas em uma máquina com um só núcleo e um só thread:

Historicamente, a maioria dos computadores de mesa (desktop) tiveram um processador, com uma única unidade de processamento ou núcleo (single core processor). Tal máquina só pode executar uma tarefa de cada vez, mas pode alternar entre tarefas muitas vezes por segundo. Ao fazer um pouco de uma tarefa e depois um pouco de outra e assim por diante, parece que as tarefas acontecem simultaneamente. Isto chama-se alternância de tarefas (task switching).

Exemplos de processadores single core:

Intel Celeron G440
- Frequência baseada em processador: 1.60 GHz
- Nº de threads: 1
Intel Celeron G470
- Frequência baseada em processador: 2.00 GHz
- Nº de threads: 2

Execução paralela

Executando mais de uma tarefa ao mesmo tempo e de forma paralela (lado a lado).

Créditos da imagem acima: https://jenkov.com/.

Computadores contendo múltiplos processadores têm sido utilizados para servidores e tarefas de computação de alto desempenho durante anos, e computadores baseados em processadores com mais do que um núcleo num único chip (multicore processors) tornam-se cada vez mais comuns em máquinas ‘desktop’. Quer tenham processadores múltiplos ou núcleos múltiplos dentro de um processador (ou ambos), estes computadores conseguem executar genuinamente mais do que uma tarefa em paralelo.

Exemplos de processadores multi core:

Intel Core i7-12650HX (12ª Geração)
- Nº de núcleos: 14
- Frequência turbo max: 4.70 GHz
- Nº de thrFrequência baseada em processadoreads 20
Intel Core i9-12900HX (12ª Geração)
- Nº de núcleos: 16
- Frequência turbo max: 5.00 GHz
- Nº de threads 24
Intel Xeon Platinum 8362 (3ª Geração)
- Nº de núcleos: 32
- Frequência turbo max: 3.60 GHz
- Frequência baseada em processador: 2.80 GHz
- Nº de threads: 64
Intel Xeon Platinum 8380 (3ª Geração)
- Nº de núcleos: 40
- Frequência turbo max: 3.40 GHz
- Frequência baseada em processador: 2.30 GHz
- Nº de threads: 80

Alternância de Tarefas vs. Execução Paralela

Créditos da imagem acima: Livro C++ Concurrency in Action.

A Figura 1.1 mostra um cenário idealizado de um computador com precisamente duas tarefas a fazer, cada uma dividida em 10 blocos de igual tamanho. Numa máquina de núcleo duplo (com dois núcleos de processamento), cada tarefa pode executar no seu próprio núcleo. Numa máquina de núcleo único que faz a troca de tarefas (task switching), os blocos de cada tarefa são intercalados. Mas também são espaçados um pouco (na figura 1.1, isto é mostrado pelas barras cinzentas que separam os blocos sendo mais espessas do que as barras separadoras mostradas para a máquina de núcleo duplo); para fazer a intercalação, o sistema tem de executar uma troca de contexto cada vez que muda de uma tarefa para outra, e isto leva tempo. Para executar uma mudança de contexto, o sistema operacional tem de guardar o estado da CPU e o ponteiro de instruções para a tarefa atualmente em execução, determinar para qual tarefa mudar, e recarregar o estado da CPU para a tarefa para a qual é mudada. A CPU terá então potencialmente de carregar a memória para as instruções e os dados para a nova tarefa na memória transitória (cache), o que pode impedir a CPU de executar quaisquer instruções, causando mais atrasos.

Execução paralela e concorrente

Executando mais de uma tarefa ao mesmo tempo mas não de forma paralela em cada CPU e as duas CPUs trabalhando de forma paralela.

Em uma CPU acontece a alternância de tarefas, ou seja, uma tarefa deve parar para a outra prosseguir. As duas CPUs estão trabalhando em paralelo (lado a lado), ou seja, uma CPU não precisar parar para a outra prosseguir.

Créditos da imagem acima: Livro C++ Concurrency in Action.

Embora a disponibilidade de concorrência no hardware seja mais óbvia com sistemas multiprocessadores ou multinúcleo, alguns processadores podem executar vários fios (threads) num único núcleo (Hyper-threading). O fator importante a considerar é o número de fios do hardware, sendo a medida de quantas tarefas independentes o hardware pode genuinamente executar concorrentemente. Mesmo com um sistema com uma concorrência genuína de hardware, é fácil ter mais tarefas do que o hardware pode executar em paralelo, por isso a alternância de tarefas continua a ser utilizada nestes casos. Por exemplo, num computador ‘desktop’ típico pode haver centenas de tarefas em execução, executando operações em segundo plano (background), mesmo quando o computador está nominalmente inativo. É a alternância de tarefas que permite executar estas tarefas em segundo plano e executar o processador de texto, compilador, editor, e browser da web (ou qualquer combinação de aplicações) tudo de uma só vez. A Figura 1.2 mostra a alternância de tarefas entre quatro tarefas numa máquina dual-core, mais uma vez para um cenário idealizado com as tarefas divididas ordenadamente em blocos de igual tamanho.

Podemos também ter uma divisão de uma única tarefa em subtarefas que podem ser executadas concorrentemente e em paralelo.

Créditos da imagem acima: https://jenkov.com/.

Conforme o livro C++ Concurrency in Action a concorrência e o paralelismo têm significados amplamente sobrepostos no que diz respeito ao código multithreaded. De fato, para muitos eles significam a mesma coisa. A diferença é principalmente uma questão de nuance, foco e intenção. Ambos os termos são sobre executar múltiplas tarefas simultaneamente, usando o hardware disponível, mas o paralelismo é muito mais orientado para o desempenho. As pessoas falam em paralelismo quando sua principal preocupação é aproveitar o hardware disponível para aumentar o desempenho do processamento de dados em massa, enquanto as pessoas falam em concorrência quando sua principal preocupação é a separação de preocupações, ou capacidade de resposta.

Assíncrono X Síncrono

Podemos encontrar a palavra async (asynchronous = assíncrono) como uma palavra reservada em linguagens de programação para converter código sequencial em código concorrente, como na linguagem Elixir com o Task.async.

Tanto o código Síncrono como Assíncrono são executados aos mesmo tempo, a diferença é que o código assíncrono não há uma ordem específica e por isso é considerado concorrente:

Assíncrono = ao mesmo tempo = velocidades diferentes = sem ordem específica = concorrente:

Síncrono = ao mesmo tempo = velocidades iguais = ordem específica = não concorrente:

Concorrência com múltiplos processos

Créditos da imagem acima: Livro C++ Concurrency in Action.

A primeira maneira de fazer uso da concorrência dentro de uma aplicação é dividir a aplicação em múltiplos processos separados, em uma única thread, que são executados ao mesmo tempo, da mesma forma que você pode executar seu navegador web e processador de texto ao mesmo tempo. Estes processos separados podem então passar mensagens uns para os outros através de todos os canais normais de comunicação interprocessados (signals, sockets, files, pipes, etc.), como mostrado na figura 1.3. Uma desvantagem é que tal comunicação entre processos é muitas vezes complicada de configurar ou lenta, ou ambos, porque os sistemas operacionais normalmente fornecem muita proteção entre processos para evitar que um processo modifique acidentalmente os dados pertencentes a outro processo. Outra desvantagem é que há uma sobrecarga inerente na execução de múltiplos processos: leva tempo para iniciar um processo, a operação deve dedicar recursos internos ao gerenciamento do processo, e assim por diante.

Nem tudo é negativo: a proteção adicional que os sistemas operacionais normalmente proporcionam entre os processos e os mecanismos de comunicação de nível superior significa que pode ser mais fácil escrever código concorrente seguro com os processos do que com as threads. De fato, ambientes como o fornecido pela linguagem de programação Erlang (www.erlang.org/) utilizam processos como o bloco fundamental da concorrência com grande efeito.

A utilização de processos separados para a concorrência também tem uma vantagem adicional - você pode executar os processos separados em máquinas distintas conectadas através de uma rede. Embora isto aumente o custo de comunicação, em um sistema cuidadosamente projetado pode ser uma forma econômica de aumentar o paralelismo disponível e melhorar o desempenho.

Créditos da imagem acima: Livro Erlang and OTP in Action.

Concorrência com múltiplos threads

Créditos da imagem acima: Livro C++ Concurrency in Action.

A abordagem alternativa para a concorrência é executar vários threads em um único processo. Os threads são muito parecidos com processos leves: cada thread funciona independentemente dos outros, e cada um pode executar uma seqüência diferente de instruções. Mas todos os threads em um processo compartilham o mesmo espaço de endereço, e a maioria dos dados pode ser acessada diretamente de todos os threads - variáveis globais permanecem globais, e ponteiros ou referências a objetos ou dados podem ser passados entre os threads. Embora muitas vezes seja possível compartilhar memória entre processos, isto é complicado de configurar e muitas vezes difícil de gerenciar, porque os endereços de memória dos mesmos dados não são necessariamente os mesmos em processos diferentes. A Figura 1.4 mostra dois threads dentro de um processo comunicando através da memória compartilhada.

O espaço de endereços compartilhado e a falta de proteção dos dados entre os threads fazem com que a sobrecarga (overhead) associada ao uso de múltiplos threads seja muito menor do que a do uso de múltiplos processos, porque o sistema operacional tem menos contabilidade (bookkeeping) a fazer. Mas a flexibilidade da memória compartilhada também vem com um preço: se os dados são acessados por múltiplos threads, o programador da aplicação deve garantir que a visualização dos dados vistos por cada thread seja consistente sempre que ela for acessada. As questões relacionadas ao compartilhamento de dados entre threads, e as ferramentas a serem usadas e as diretrizes a serem seguidas para evitar problemas são abordadas no livro C++ Concurrency in Action. Os problemas não são intransponíveis, desde que se tome o cuidado adequado ao escrever o código, mas eles significam que muita reflexão deve ir para a comunicação entre os threads.

A baixa sobrecarga associada ao lançamento e à comunicação entre múltiplos threads dentro de um processo em comparação com o lançamento e a comunicação entre múltiplos processos de uma única thread significa que esta é a abordagem favorecida para a concorrência nas linguagens orientadas a objetos, incluindo C++, apesar dos problemas potenciais decorrentes da memória compartilhada.

Conclusão

Se eu pudesse resumir concorrência em poucas palavras, eu diria que concorrencia é quando duas ou mais atividades independentes acontecem ao mesmo tempo quando não há uma ordem específica. Esse post foi realmente só uma introdução sobre o assunto. Há muito conhecimento ainda pra ser estudado quando falamos em concorrência com múltiplos threads ou concorrência com múltiplos processos. Cada abordagem tem seus pontos positivos e negativos e, dependendo da linguagem de programação que você atua; você terá que focar mais em umas dessas abordagens. O próximo passo agora é procurar colocar a mão no código visando esses conceitos e como isso pode melhorar e trazer benefícios ao seu software.

💧📆🏛️ Um guia para uma arquitetura orientada a eventos em Elixir

Dev Maiqui 🇧🇷 — Tue, 31 May 2022 11:33:58 +0000

Esta é uma tradução do post A Guide to Event-Driven Architecture in Elixir escrito por Sapan Diwakar.

Também acrescentei algumas imagens para exemplificar melhor a explicação. Na dúvida sobre a tradução visite o post original. Vamos ao post.

Neste post, exploraremos como a arquitetura orientada a eventos (event-driven architecture) pode tornar sua aplicação mais responsiva aos usuários e desacoplar seus módulos para uma melhor experiência do desenvolvedor.

Também analisaremos vários métodos de implementação de arquitetura orientada a eventos com Elixir. A linguagem Elixir é particularmente boa para isso devido às APIs de passagem de mensagens avançadas e concisas que ela oferece e ao excelente suporte da BEAM para a concorrência.

Mas primeiro: o que é exatamente uma arquitetura orientada a eventos?

Arquitetura orientada a eventos: Uma Introdução
Construindo blocos de uma arquitetura orientada a eventos
Benefícios da arquitetura orientada a eventos
Abordagens
- Arquitetura síncrona orientada a eventos em Elixir
- Usando o GenServer na arquitetura orientada a eventos em Elixir
- Implementação orientada a eventos usando GenStage em Elixir
Conclusão: Arquitetura orientada a eventos em Elixir - Indo além do GenStage

Arquitetura orientada a eventos: Uma Introdução

A arquitetura orientada a eventos é uma arquitetura onde os eventos controlam o comportamento e o fluxo de sua aplicação. Os principais componentes da arquitetura são os produtores de eventos (event producers), o barramento de eventos (event bus) e os consumidores de eventos (event consumers).

Um evento pode ser qualquer coisa que represente uma mudança de estado no sistema. Por exemplo, em uma aplicação de comércio eletrônico ‘e-commerce’, a compra de um produto pelo usuário poderia produzir um evento de venda ao qual o consumidor poderia então iniciar um processo de atualização de estoque.

Uma arquitetura baseada em eventos permite que as aplicações atuem em eventos à medida que eles ocorrem. Diferentes partes de uma aplicação funcionam e se desenvolvem de forma relativamente independente em um projeto bem elaborado, baseado em eventos. As organizações podem designar equipes separadas para partes focadas da aplicação e racionalizar o fluxo de trabalho. Isto também cria uma fronteira clara entre diferentes partes de uma aplicação, auxiliando em futuros exercícios de escalabilidade.

A arquitetura orientada por eventos ganhou popularidade principalmente com produtos baseados em microserviços, mas também pode ser usada para um monólito.

As coisas são sempre mais claras com um exemplo, então vamos olhar para um.

Construindo blocos de uma arquitetura orientada a eventos

Vamos discutir cada bloco de construção em detalhes, usando uma aplicação de ‘e-commerce’ como exemplo.

Imagine que um usuário faz uma nova compra em um ‘website’. O novo pedido é um evento gerado pela parte que controla o pedido: o event producer.

O evento pode ser empurrado para um event bus. O event bus pode ser qualquer coisa, como, por exemplo:

Uma tabela no banco de dados.
Uma fila de eventos em memória dentro da aplicação.
Uma ferramenta externa como RabbitMQ ou Apache Kafka.

Os event producers interessados neste tipo de evento podem se inscrever no event bus. O evento é entregue-lhes, e eles fazem algum processamento em cima dele.

Por exemplo, um sistema de gerenciamento de estoque assinaria (subscribe) o novo evento de pedido e atualizaria o estoque do produto. Outro sistema também poderia escolher o mesmo evento no pedido - por exemplo, um serviço de atendimento poderia processar esse evento e criar uma rota de entrega para o produto.

Benefícios da arquitetura orientada a eventos

Há várias vantagens em utilizar uma arquitetura orientada a eventos ao invés de uma que processa tudo sequencialmente.

Uma arquitetura orientada a eventos nos permite construir várias partes independentes de uma aplicação para trabalhar com o mesmo evento e realizar diferentes tarefas focadas. Isto pode ser vantajoso por um par de razões:

Uma equipe precisa se concentrar apenas em uma parte.
O código de aplicação para partes pequenas pode ser simples.

Outra vantagem do conceito é que ele nos permite fornecer uma ‘interface’ rápida ao usuário. Como exemplo da aplicação acima, um usuário precisa fazer um pedido. A aplicação pode continuar processando todas as outras tarefas não-interativas, como atualizar seu inventário e interagir com a aplicação de entrega, sem a atenção do usuário.

Isto também torna muito fácil acrescentar novas etapas de processamento no pipeline do evento. Por exemplo, digamos que precisamos de uma tarefa adicional a ser realizada a partir de um evento. Só precisamos adicionar um novo consumidor para lidar com o evento, sem tocar em nenhuma outra parte da aplicação.

Finalmente, é muito mais fácil escalar cada módulo individual se ele for desacoplado dos outros, do que escalar uma aplicação inteira em conjunto. Isto é ainda mais benéfico ao ter uma parte que consome muito mais recursos do que suas contrapartes no pipeline de processamento de eventos.

Mas a arquitetura orientada a eventos não vem sem desvantagens quando não é bem pensada. Se aplicada a problemas muito simples, ela pode levar a fluxos de trabalho complexos que são lentos e difíceis de depurar.

Vamos explorar algumas maneiras simples de implementar uma arquitetura orientada a eventos com Elixir, sem a necessidade de escrever partes complexas de código.

Arquitetura síncrona orientada a eventos em Elixir

A maneira mais simples (e mais ineficiente) de executar o fluxo acima seria fazer tudo de forma síncrona no pedido do usuário.

Portanto, se você tiver um módulo de Pedidos (Orders) que processe o pedido de um usuário, a implementação síncrona poderia se parecer com isto:

defmodule Orders do
  def create_order(attrs) do
    # salva o pedido
    {:ok, order} = save_order(attrs)
    # atualiza o estoque
    {:ok, _inventory} = update_inventory(order)
    # cria a entrega
    {:ok, _delivery} = create_delivery(order)
    # retorna o pedido
    {:ok, order}
  end
end

Podemos melhorar isto para que os consumidores de novos eventos possam escalar mais facilmente:

defmodule Orders do
  @event_consumers [
    {Inventory, :handle_event},
    {Delivery, :handle_event},
  ]

  def create_order(attrs) do
    {:ok, order} = save_order(attrs)

    event = %Orders.Event{type: :new_order, payload: order}
    @event_consumers
    |> Enum.each(fn {module, func} ->
      apply(module, func, [event])
    end)

    {:ok, order}
  end
end

Com esta implementação, tudo o que precisamos fazer para adicionar novos consumidores é adicionar a especificação na lista @event_consumers, e esses consumidores podem trabalhar independentemente.

Embora a abordagem síncrona funcione bem para um pequeno número de consumidores, ela tem uma desvantagem. A criação de um pedido pode levar muito tempo porque será necessário esperar a atualização do estoque e a criação da entrega.

Estas são tarefas internas que podem ser realizadas sem interação do usuário e movidas da cadeia síncrona.

Vamos ver como podemos racionalizar ainda mais a arquitetura orientada a eventos usando o GenServer.

Usando o GenServer na arquitetura orientada a eventos em Elixir

Para esta implementação, executaremos um processo separado para cada consumidor. Estes se inscreverão num evento de um produtor e executarão suas tarefas simultaneamente.

Para o event bus, podemos utilizar o Phoenix.PubSub. Note que é possível para aplicativos que não usam Phoenix usar diretamente o Registro como um PubSub.

Primeiro, vamos olhar para o produtor.

defmodule Orders do
  def create_order(attrs) do
    {:ok, order} = save_order(attrs)
    event = %Orders.Event{type: :new_order, payload: order}
    Phoenix.PubSub.broadcast(:my_app, "new_order", event)
    {:ok, order}
  end
end

Em um novo pedido (order), criamos a estrutura do evento e usamos o Phoenix.PubSub.broadcast/3 para transmitir esse evento no barramento (bus). Como você pode ver, é muito mais simples do que a implementação anterior, onde o módulo de Orders processava tarefas do outro módulo em série.

Os consumidores podem então assinar (subscribe) o tópico new_order e implementar o handle_info/2 para serem notificados toda vez que um novo evento é publicado pelo produtor.

defmodule Inventory do
  use GenServer

  def start_link(opts), do: GenServer.start_link(__MODULE__, opts, name: __MODULE__)

  def init(_opts) do
    Phoenix.PubSub.subscribe(:my_app, "new_order")
  end

  def handle_info(%Orders.Event{type: :new_order, payload: order}, state) do
    state = consume(state, order.product)
    {:noreply, state}
  end
end

O módulo de Delivery será muito semelhante ao acima mencionado, por isso estou pulando aqui.

Como você pode ver, isto é muito melhor do que as implementações anteriores. Os módulos de Inventory e Delivery podem se inscrever independentemente para o tópico new_order. O módulo Orders transmite (broadcasts) para este tópico sobre novos pedidos e eventos são entregues para os processos inscritos.

Você pode até distribuir isto entre vários nós e Phoenix.PubSub (com um PG, Redis ou outro adaptador), espalhando os eventos para todos os nós.

Ótimo, certo? Na verdade, não. Há vários problemas com esta abordagem:

O PubSub fornece uma transmissão em tempo real sem fila de mensagens, portanto, se um dos processos do assinante estiver em suspenso, ele pode perder as transmissões.
Se o assinante fizer algum trabalho pesado, ele pode não conseguir acompanhar as mensagens recebidas, resultando em timeouts e, conseqüentemente, em um colapso da árvore de processos.
Se o assinante encontrar um erro no processamento de uma mensagem, ela é considerada consumida e não será novamente processada (retried) mais tarde.

Portanto, esta abordagem é uma má abordagem a ser seguida para nosso caso de uso atual.

Entretanto, a abordagem ainda tem seus casos de uso. Ela pode ser usada para tarefas que não são críticas, ou que podem ser corrigidas com a próxima mensagem: por exemplo, se uma tarefa computar as sugestões para as próximas compras de um usuário com base em sua última compra. Embora isto também precise ser acionado em um novo pedido, não é exatamente crítico (para um site tradicional de e-commerce) e pode recalcular as sugestões para um usuário em sua próxima compra.

Implementação orientada a eventos usando GenStage em Elixir

Na seção anterior, vimos uma grande implementação de nosso sistema orientado a eventos utilizando o GenServer. Mas ele não veio sem suas limitações. Vamos ver como o GenStage se comporta.

O GenStage faz uma distinção clara entre producers, consumers e producer_consumers, e cada processo tem que escolher um quando começa (em seu init/1). Em nosso caso, tanto o Inventory quanto o Delivery são consumers, e Orders é um producer.

É aqui que as coisas começam a ficar um pouco complicadas. O GenStage tem um conceito de demanda. Cada consumer pode emitir uma demanda de quantos eventos ele pode lidar. O producer precisa enviar esses eventos para o consumer. Vamos ver um producer básico em ação.

defmodule Orders do
  use GenStage

  def start_link(opts) do
    GenStage.start_link(__MODULE__, opts, name: __MODULE__)
  end

  def init(_opts) do
    {:producer, :some_state_which_does_not_currently_mattere}
  end

  def create_order(pid, attrs) do
    GenStage.cast(pid, {:create_order, attrs})
  end

  def handle_cast({:create_order, attrs}, state) do
    {:ok, order} = save_order(attrs)
    {:noreply, [%Orders.Event{type: new_order, payload: order}], state}
  end

  def handle_demand(_demand, state), do: {:noreply, [], state}
end

A carne de nosso código está em handle_cast, onde guardamos o pedido (order) e devolvemos uma tupla como {:noreply, events, new_state}. Os novos eventos são armazenados em um buffer GenStage interno e enviados aos consumidores à medida que eles fazem novas demandas (ou imediatamente, se houver consumidores com demanda não atendida).

Vamos checar uma amostra da implementação do consumer:

defmodule Inventory do
  use GenStage

  def start_link(opts) do
    GenStage.start_link(__MODULE__, opts, name: __MODULE__)
  end

  def init(_opts) do
    {:consumer, [], subscribe_to: [Orders]}
  end

  def handle_events(events, _from, state) do
    state = Enum.reduce(events, state, & handle_event(&1, &2))
    {:noreply, [], state}
  end

  def handle_event(%Orders.Event{type: :new_order, payload: order}, state) do
    new_state = update_inventory(order)
    new_state
  end
end

No consumer, primeiro avisa de que temos um subscribe_to (inscrição_para) dentro do init/1. Isto automaticamente assina/inscreve (subscribe) o Inventory para qualquer evento publicado por Orders. Favor verificar a documentação GenStage para opções adicionais disponíveis no init.

Aqui, a maior parte do trabalho acontece dentro do handle_events/3, que é automaticamente chamado pela GenStage assim que novos eventos se tornam disponíveis. Tratamos aqui do evento new_order, atualizando o inventory e retornando um novo estado.

Com esta simples implementação, obtemos vários benefícios que superam a implementação do GenServer:

Armazenamento automático de eventos dentro do buffer interno do GenStage quando o producer tem novos eventos sem nenhum consumer disponível.

Mesmo que os consumers estejam ausentes quando alguns eventos são produzidos, nós ainda temos a garantia de recebê-los quando o consumer volta a ficar disponível.

Confira o guia da Genstage sobre a demanda de buffering para uma lógica de buffering avançada.

Distribuição automática de trabalho em múltiplos consumidores.

Se você tem tarefas pesadas de consumo, você pode iniciar múltiplos processos de consumo. O DemandDispatcher padrão para GenStage distribuirá o trabalho uniformemente por todos os processos.

Veja o GenStage.Dispatcher para outras estratégias de despacho para distribuir eventos a todos os consumidores ou distribuição de partições aos consumidores com base em uma função hash.

Mas, como no GenServer ou na implementação síncrona, o uso do GenStage não vem sem seus problemas.

Se um consumer se chocar enquanto estiver processando um evento, o GenStage considerará o evento entregue e não o enviará novamente quando o consumer voltar a ficar disponível.

Para ter certeza de que você rastreia corretamente os acidentes, você pode usar um serviço de monitoramento como o AppSignal. O AppSignal é [fácil de instalar para sua aplicação Elixir] e ajuda a monitorar o desempenho, assim como rastrear erros. Aqui está um exemplo de um painel de controle de erros que o AppSignal fornece:

Você também pode configurar notificações de colisões via AppSignal.

No lado do aplicativo, você pode armazenar tais eventos em uma loja persistente uma vez que eles sejam entregues ao consumidor (consumer). Se o consumidor se chocar, então uma vez que se recupere, pode retornar aos eventos em cache.

Seja muito cauteloso em produzir muitos eventos sem consumidores suficientes, no entanto. Enquanto a GenStage oferece um buffer automático de eventos, este buffer tem um tamanho máximo (configurável) e um tamanho máximo prático limitado pela memória do servidor.

Se você não controla a freqüência com que os eventos são produzidos, considere o uso de um armazenamento de dados externo como Redis ou Postgres para fazer o buffer de eventos.

Conclusão: Arquitetura orientada a eventos em Elixir - Indo além do GenStage

Neste post, examinamos três abordagens para implementar um sistema orientado a eventos no Elixir: de forma síncrona, usando o GenServer, e finalmente, usando o GenStage. Examinamos algumas das vantagens e desvantagens de cada abordagem.

O exemplo simples do GenStage pode ser um ponto de partida para a implementação de complexos pipelines de processamento de dados orientados por eventos que abrangem vários nós. Sugiro que você leia a grande documentação do GenStage para obter mais informações.

Se você estiver procurando por uma abstração ainda maior, a Broadway é um bom ponto de partida. Ela é construída sobre o GenStage e oferece várias características adicionais, incluindo o consumo de dados de filas externas como Amazon SQS, Apache Kafka, e RabbitMQ.

Até a próxima vez, boa codificação!

Forem: Dev Maiqui 🇧🇷

⚛️⏳Parte 4: Criando um Timer com Histórico em React

1 - Iniciando novo ciclo

1.1 - Closures no React

1.2 - Apenas um ciclo ativo

2 - Criando countdown

2.1 - Separando minutos e segundos

2.2 - Instalando date-fns

2.3 - Reduzindo countdown com useEffect

Usando useEffect

2.4 - Usando return dentro do useEffect

Etapas para solucionar o Bug:

4 - Timer no título do navegador

5 - Interrompendo o ciclo

⚛️⏳Parte 3: Criando um Timer com Histórico em React

1 - Controlled vs Uncontrolled

2 - O melhor dos dois mundos com React Hook Form

3 - Usando React Hook Form

Usando handleSubmit

Habilitando o botão (usando o watch)

Usando variáveis auxiliares

4 - Validação com Zod

5 - Validação com o botão habilitado

Visualizando os erros de validação do Zod

6 - TypeScript no Formulário

Tipagem automática por inferência

Qual o benefício de usar o infer?

7 - Resetando o Formulário

⚛️⏳Parte 2: Criando um Timer com Histórico em React

1 - Criando as rotas

1.1 - React Router DOM

1.2 - Criando as páginas

1.3 - Removendo o componente Button

1.4 - Criando o arquivo de rotas

1.5 - Context Providers

2 - Layout de rotas

2.1 - Criando o componente Header

2.2 - Criando o DefaultLayout

3 - Estilizando o Header

3.1 - Instalando o Phosphor Icons

3.2 - Criando pasta para cada componente

3.3 - Estilizando o DefaultLayout

3.4 - Código do Header/styles.ts

4 - Timer da Home Page

5 - Finalizando a Home Page

6 - Aprimorando inputs

7 - Tabela da History Page

8 - Status da Tabela da History Page 🟡🔴🟢

9 - 🐛 statusColour ➡️ $statusColour

⚛️⏳Parte 1: Criando um Timer com Histórico em React

1 - Criação do projeto

1.1 - Usando o Vite

1.2 - Instalando as dependências

1.3 - (Opcional) Removendo arquivos desnecessários

2 - Styled Components

2.1 - Instalando o pacote styled-components

2.2 - Instalação da tipagem

2.3 - Instale a extensão no VSCode

2.4 - Entendendo como funciona o styled-components

Refatorando usando Styled Components

2.5 - Configurando Temas

2.6 - Tipagem de Temas

2.7 - Estilos Globais

2.8 Cores e Fonte

⌨️ 🔍🐛 Corrigindo atalhos no VSCode

Plugin do VSCode usando o atalho

Software do SO usando o atalho

Atalho do SO

Conclusão

🎲 Criando um Dado com Flexbox e CSS Grid Layout

Criando o arquivo main.css

Exemplo com Flexbox

Criando a primeira face (Flexbox)

Centralizando o ponto

Criando a segunda face (Flexbox)

Criando a terceira face (Flexbox)

Criando a quarta face (Flexbox)

Criando a quinta face (Flexbox)

Criando a sexta face (Flexbox)

Centralizando tudo na tela

2.3 - Reduzindo countdown com `useEffect`

Usando `useEffect`

2.4 - Usando `return` dentro do `useEffect`

2 - O melhor dos dois mundos com `React Hook Form`

3 - Usando `React Hook Form`

Usando `handleSubmit`

4 - Validação com `Zod`

2.2 - Criando o `DefaultLayout`

3.4 - Código do `Header/styles.ts`

9 - 🐛 `statusColour` ➡️ `$statusColour`

2.4 - Entendendo como funciona o `styled-components`

Refatorando usando `Styled Components`

Criando o arquivo `main.css`

Usando `grid-template-areas`

Usando `grid-area`

Entendendo como funciona: `grid-row` e `grid-column`

Posicionando os pontos com `grid-row` e `grid-column`

Como usar o método `Object.preventExtensions`

Tentando adicionar novas propriedades (`Object.preventExtensions`)

Como modificar uma propriedade existente usando `defineProperty` (`Object.preventExtensions`)

Como excluir uma propriedade (`Object.preventExtensions`)

Como usar o método `Object.seal()`

Como adicionar novas propriedades (`Object.seal()`)

Como modificar uma propriedade existente usando `defineProperty` (`Object.seal()`)

Tentando remover uma propriedade existente (`Object.seal()`)

Como usar o método `Object.freeze()`

Tentando adicionar novas propriedades (`Object.freeze()`)

Tentando modificar propriedades (`Object.freeze()`)

Tentando deletar propriedades (`Object.freeze()`)