Arquitetura em camadas não é só papo para backend

Quem sou eu?

Agenda

• Por que isso é importante?
• O problema: há um elefante na sala
• O jeito errado VS O jeito menos errado
• Exemplos Práticos

@alessandro_feitoza

Mas a culpa não é da nova geração!

"Ain, mas na minha época a gente tinha que se virar"

A gente da velha guarda se virou tanto que saiu rebolando JQuery em tudo que era lugar

Mas é preciso entender o contexto Pra criticar de cumforça

Acessar um valor

Add uma classe: JS x JQuery

Remover uma classe de varios inputs: JS x JQuery

Ah Feitozo,
então o JQuery era bom

Javascript puro: 12 137 211 ops/sec

💀 o Finado JQuery: 350 557 ops/sec

Há um 🐘 elefante
na Sala

Quase todo projeto começa bonito

e termina feio

Antes de falar de Componentes, é preciso entender o que significa isso

Componente

o que compõe ou ajuda na composição de algo;

o que é parte constituinte de um sistema maior;

Por falar em pedreiro, bora botar a mão na massa

e o REACT?

Composite Pattern

Comece pelo começo

A página é composta por componentes

E dentro da página?

• Data: Consultas, DataTransformer, em geral os dados que serão usados pela aplicação
• Shared: Camada independente, hooks, utilitários, coisas que serão "compartilhadas" entre os componentes em si
• UI: Interfaces do Usuário, depende da camada de Data e Shared

06 passos
para dar o primeiro passo

1 - No fim tudo é
HTML, CSS e Javascript

2 - Lei de Pareto

3 - Não existe
bala de prata

4 - Teoria das
Janelas Quebradas

5 - Faça uma
Sopa de Pedras

6 - Arquitetura não é sobre pastas
É sobre intenção

E é isso

Como dizia minha ex:
Terminamos

DÚVIDAS?

Referências

• Livro: Brevidade Inteligente(Smart Brevity)
  VandeHei, Allen e Schwartz - 2022
• Palestra: Estuturação de Projetos React
  Cicero Viana (2024)
• Artigo: Teoria das Janelas Quebradas
  J. Wilson, G. Kelling (2007)
• Livro: Design Patterns
  Erich Gamma e outros (1994)
• Artigo: React project structure for scale