Identificação
Resumo
A aula 8 leva a página SSR ao próximo nível: ela ganha vida sem recarregar. Os alunos dominam event loop, Promises, async/await no browser, fetch API (GET/POST com headers e JSON), AbortController para cancelar requests e o trio loading / empty / error que toda UI assíncrona precisa expor.
No back-end TypeScript + Express, o mesmo controller passa a oferecer um par dual: res.render para HTML e res.json para JSON, reusando o service da camada MVC de 6 camadas. Conceitos básicos de TCP/IP, DNS e HTTPS aparecem ao final, preparando o terreno para a aula 11 (deploy e produção).
Objetivos de aprendizagem
- OA-1Explicar o event loop e diferenciar microtasks (Promises) de macrotasks (
setTimeout). - OA-2Compor Promises e
async/awaitcom tratamento de erro adequado (try/catch+Promise.all). - OA-3Usar
fetch()em GET e POST comContent-Type: application/json, tratandores.okcorretamente. - OA-4Cancelar requisições em voo com
AbortController. - OA-5Implementar os estados de UI loading / empty / error em toda interação assíncrona.
- OA-6Expor endpoints duplos (HTML + JSON) reusando o service no backend TypeScript + Express +
pg.
Pré-requisitos
- Aulas 5, 6 e 7 concluídas: back-end MVC com CRUD via HTTP e frontend SSR com EJS funcionando.
- Pelo menos uma rota servindo HTML via
res.render(controller + service + repository ativos). - Repositório do projeto com
public/js/pronto para receber scripts client-side.
Cronograma do dia
📚 Bloco 1 · Autoestudo
08h00 — 10h00Estudo individual orientado pelo material da aula 8.
- Leitura completa do Material da Aula 8 (event loop, Promises, fetch, AbortController, loading/empty/error).
- Mapear 3 interações da UI atual do projeto que ficariam melhor com
fetch()(sem reload) — ex.: favoritar item, busca live, marcar como lido. - Instalar a extensão REST Client no VS Code e testar uma chamada GET ao próprio backend.
- Caderno de bordo: anotar dúvidas sobre microtasks vs macrotasks.
🎓 Bloco 2 · Instrução PE — Aula em metodologia ativa
10h00 — 12h00Encontro síncrono com o professor especialista. 15 minutos de daily seguidos de 1h45 de aula em live-coding.
- 10h00 — 10h15 · Daily: as 3 interações trazidas do autoestudo.
- 10h15 — 12h00 · Event loop, Promises, async/await, fetch GET/POST, AbortController e endpoint dual.
🍴 Intervalo · Almoço
12h00 — 14h00Janela livre.
🛠️ Bloco 3 · Desenvolvimento do projeto
14h00 — 16h00Janela de trabalho da equipe sobre o projeto integrador.
- Implementar 2 interações dinâmicas com
fetch()(ex.: favoritar item, busca live). - Cada interação deve renderizar os 3 estados: loading (spinner/placeholder), empty (mensagem amigável) e error (callback de retry).
- Adicionar um endpoint dual no back: o mesmo controller deve responder em HTML (
res.render) e JSON (res.json) reusando o mesmo service. - Abrir Merge Request
feat(ui): interações dinâmicas X e Ycom evidência (gif/print) das 2 interações até as 16h00.
Detalhamento da instrução PE (10h00 — 12h00)
10h15
DailyDaily de abertura
Cada aluno apresenta, em 1 minuto, uma interação do projeto que ainda recarrega a página e ficaria melhor com fetch().
10h30
TalkEvent loop e fila de tasks
O professor desenha o call stack, a microtask queue (Promises) e a macrotask queue (setTimeout). Demonstração ao vivo de em qual ordem três logs aparecem.
10h50
CodingPromises na prática
Live-coding em pares: then, catch, encadeamento e Promise.all. A turma discute por que Promise.all falha em uma rejeição e quando preferir Promise.allSettled.
11h10
Codingasync/await + try/catch
Reescrita do código anterior em async/await. Discussão guiada sobre legibilidade vs depuração. Tratamento de erro com try/catch e re-lançamento controlado.
11h30
Codingfetch GET e POST com JSON
GET de uma rota do próprio projeto e parse com res.json(). Em seguida POST com Content-Type: application/json e body em JSON.stringify. No backend, mesmo controller responde JSON quando o cabeçalho Accept indicar — endpoint dual em ação.
11h45
Talkres.ok ≠ try/catch
Erro clássico: fetch() só rejeita por falha de rede — um 404 ou 500 não dispara o catch. A turma "erra primeiro" e descobre o bug; em seguida implementa a checagem correta de res.ok.
11h55
CodingAbortController + debounce
Pair programming: implementar uma busca que dispara a cada tecla, mas cancela a request anterior com AbortController. Debate sobre custo de banda e UX.
12h00
AtivaSíntese
Cada aluno escreve "hoje minha página deixou de recarregar quando...". O professor anuncia a entrega da tarde e adianta que a aula 9 colocará o projeto sob testes automatizados e CI.
Estratégias de metodologia ativa
- Live-coding com a turma "errando primeiro" — o professor esquece propositalmente o
res.ok; os alunos descobrem o bug em 30s e fixam o conceito por contraste. - Debate guiado:
Promise.allvsPromise.allSettled— duplas defendem cenários reais (ex.: 3 fetchs paralelos onde 1 pode falhar) antes de o professor sintetizar. - Pair programming no AbortController — aprendizagem por construção: um aluno digita, o outro narra o efeito de rede no DevTools.
Recursos e ferramentas
| Categoria | Recurso | Uso |
|---|---|---|
| Slides | slides/slide-lesson-8.html | Exposição na instrução PE |
| Material | materials/lesson-8-material.html | Autoestudo |
| Browser | DevTools — aba Network | Inspeção de requests, headers, status e tempo |
| Cliente HTTP | REST Client (.http) | Testar endpoints GET/JSON e POST/JSON |
| Repositório | public/js/ | Scripts client-side com fetch e estados |
| Backend | src/controllers/ + src/services/ | Endpoint dual (HTML + JSON) reusando service |
Verificação de aprendizagem
- CR-1Implementou um endpoint dual (HTML via
res.render+ JSON viares.json) reusando o mesmo service. - CR-2Usou
fetch()com tratamento correto deres.ok(não confundiu falha de rede com erro HTTP). - CR-3Renderizou os estados loading / empty / error visíveis em pelo menos 1 interação.
- CR-4Aplicou
AbortControllerem uma busca/digitação com debounce. - CR-5Abriu Merge Request
feat(ui): interações dinâmicas X e Yaté as 16h00 com evidência das 2 interações.
Aluno que sair às 16h sem ao menos 1 interação dinâmica funcional com fetch + estados loading/empty/error está em débito técnico para a aula 9 — sem interações funcionais, não há comportamento real para cobrir com testes.
Conexão com a aula 9
A aula 9 traz garantia para tudo que foi construído até aqui: testes por camada (helpers com unit puro, services com mock do repository, repositories com banco efêmero, controllers com supertest) e automação com Husky + GitHub Actions.
- O endpoint dual (HTML + JSON) construído hoje será exercitado pelos testes de controller com
supertest. - O backend está congelado a partir daqui — código estável é pré-condição para uma suite de testes que não vira retrabalho.
Antes das 8h do próximo dia: ler o material da aula 9, instalar Jest no projeto e listar 3 funções helpers que você acha que merecem teste unitário primeiro.
