Módulo 2 · Ciclo Comum · IN02 · Aula 7 de 11
Front-End I — HTML, DOM e JS com SSR + EJS
O servidor monta a página com EJS · HTML semântico · DOM e eventos no cliente
🖥️ SSR
📜 EJS
🧱 HTML semântico
🌳 DOM
⚡ Eventos
🧩 Partials
⏱️ Daily — 15 Minutos
Hoje vamos consumir o back-end das aulas 5 e 6 — a API está pronta?
15:00
📡 Endpoints prontos? 🧪 Validados com REST Client? 🚧 Algum bloqueio? 🎯 Quais telas vão consumir?
📋 Agenda da Aula 7
Estrutura e objetivos da aula de hoje

🕐 Bloco 1 — Autoestudo (revisão e dúvidas)

Recap do material — SSR, EJS, fluxo MVC, estrutura de views.

🕑 Bloco 2 — Instrução (Professor)

Setup EJS, sintaxe de templates, partials, render no controller e HTML semântico.

🕒 Bloco 3 — Almoço

Pausa para refeição — cabeça leve para o desenvolvimento da tarde.

🎯 Bloco 4 — Desenvolvimento (Projeto)

Adicionar a camada de Views renderizadas no servidor para o recurso central do projeto.

🗺️ Roadmap do Módulo 2
Onde estamos: encerramos o back-end e abrimos o front-end SSR
1
Banco I — Modelagem
Entidades e relacionamentos
2
Banco II — DDL e DML
Criação e CRUD em SQL
3
Banco III — JOINs
Consultas avançadas
5
Back-End I — Express + MVC
6 camadas em TypeScript
6
Back-End II — REST
Endpoints e validação
7
📍 HOJE
Front-End I — HTML, DOM e JS com SSR + EJS
O servidor monta a página
8
Front-End II — fetch e formulários
Comunicação cliente ↔ servidor
9
Testes e Automação
Jest, supertest, CI
10
Front-End III — CSS e JS avançado
Estilo e usabilidade
11
Mergulhando nas Redes
TCP/IP, DNS, CDN
SSR vs CSR — Quem monta o HTML?
Server-Side Rendering, Client-Side Rendering e o conceito de hydration
✓ NOSSO CAMINHO

🖥️ SSR — Server-Side Rendering

O servidor monta o HTML completo e envia pronto.
  • Primeiro paint imediato — chega HTML, não bundle JS
  • SEO nativo — buscadores leem o HTML diretamente
  • Sem build pesado — Express + EJS e está rodando
  • Cada requisição é uma página completa nova

🌐 CSR — Client-Side Rendering

O servidor manda um HTML vazio + bundle JS gigante.
  • Tela branca até o JS baixar e executar
  • Build complexo (Vite, webpack, etc.)
  • SEO precisa de tratamento extra
  • Após carregar, transições rápidas no cliente

💧 Hydration (híbrido)

Frameworks como Next.js fazem SSR e em seguida "hidratam" o HTML com JS, virando uma SPA. Para o nosso projeto, SSR puro com EJS é mais didático e rápido — sem build, sem complicação.

Setup do EJS no Express
Duas linhas e seu Express já renderiza templates
src/app.ts

📦 Instalação

npm install ejs — pronto. EJS é uma dependência simples, sem step de build.

🛣️ app.set('view engine', 'ejs')

Diz ao Express: "qualquer res.render('home') vai procurar views/home.ejs".

📂 app.set('views', ...)

Define o diretório base dos templates. Fixar com path.join evita problemas em produção.

Estrutura de views/ com partials
Layouts, partials reutilizáveis e organização por recurso
src/views/
├── layouts/
│ └── main.ejs # shell HTML <html> ... </html>
├── partials/
│ ├── header.ejs # <header> + nav
│ └── footer.ejs # <footer>
├── home.ejs # GET /
└── users/
    ├── index.ejs # GET /users
    └── show.ejs # GET /users/:id

🧩 Partials

Pedaços de HTML reusados em várias páginas — header, footer, nav, sidebar. Importados com <%- include('partials/header') %>.

📐 Convenção

  • Por recurso: users/index.ejs, users/show.ejs
  • Layouts: estrutura base do HTML
  • Partials: componentes pequenos e repetíveis
Sintaxe EJS — As 4 tags principais
Interpolação, lógica e includes em uma sintaxe minimalista
<%= var %>
Interpolação escapada (segura)
Imprime o valor já escapando HTML — primeira defesa contra XSS. Use sempre que o dado vier do usuário.
<%- var %>
Interpolação raw (não escapada)
Imprime HTML cru. Use apenas para conteúdo confiável (ex.: includes), nunca para input do usuário.
<% if (...) { %>
Lógica e laços
Bloco JavaScript puro: if, forEach, map. Não imprime nada — só controla fluxo.
<%- include(...) %>
Composição via partials
Inclui outro template no lugar atual. Aceita objeto de variáveis adicionais como segundo argumento.
src/views/users/index.ejs
Fluxo MVC com res.render
Controller → Service → Repository → render → HTML no browser
🌐
Browser
GET /users
🎮
Controller
UsersController
🧠
Service
UsersService
🗃️
Repository
UsersRepo (pg)
📜
res.render
EJS → HTML
src/controllers/users.controller.ts
HTML Semântico
Tags que descrevem o significado do conteúdo — não a aparência
layouts/main.ejs
<!DOCTYPE html>
<html lang="pt-BR">
<body>
<header>...</header> // topo + branding
<nav>...</nav> // menu
<main>
<section>
<article>...</article>
</section>
<aside>...</aside> // sidebar
</main>
<footer>...</footer>
</body>

♿ Por que importa?

  • Leitores de tela navegam por marcos (header, main, nav)
  • SEO — buscadores entendem hierarquia
  • Manutenção — código se autoexplica

❌ Evite a "soup of divs"

Página inteira com <div class="header"> e <div class="menu"> ignora a semântica. Use a tag certa.

DOM Essencial — JavaScript no Cliente
Selecionar, escutar eventos e manipular classes
querySelector
Selecionar elementos
Aceita qualquer seletor CSS. Use querySelectorAll para múltiplos.
document.querySelector('#btn')
addEventListener
Escutar eventos
Anexa um handler: click, submit, input, keydown...
btn.addEventListener('click', fn)
classList
Manipular classes
add, remove, toggle, contains — sem mexer no className string.
menu.classList.toggle('open')
public/js/app.js
Static files e dados do servidor no script
CSS, JS e imagens públicos · passar dados do back-end para o JS de cliente
src/app.ts — static
app.use(express.static('public'));
// /css/site.css, /js/app.js, /img/logo.png funcionam
layouts/main.ejs — link e script
<link rel="stylesheet" href="/css/site.css">
<script src="/js/app.js"></script>
views/users/index.ejs — passando dados do server
Validação dupla · cliente + servidor
Cliente para UX · servidor para segurança · cliente NUNCA substitui servidor

🟢 Validação no cliente

UX rápida — feedback imediato.
  • Atributos HTML: required, min, maxlength, type="email"
  • event.preventDefault() para travar submit inválido
  • Mensagens de erro próximas ao campo
  • NÃO substitui o servidor — pode ser desabilitada via DevTools

🔴 Validação no servidor

Segurança — última linha de defesa.
  • express-validator nas rotas (visto na aula 6)
  • Verificação de tipos, tamanhos, formatos e regras de negócio
  • Resposta com status 4xx e mensagens claras
  • Sempre obrigatória — mesmo que o cliente já tenha validado

⚠️ Princípio

Trate o cliente como adversário: ele pode mandar qualquer coisa. O servidor é o único lugar onde a validação tem valor de segurança.

🎯 Desafio em Sala — Sua Tela do Projeto em EJS
Pegue uma tela do wireframe de alta fidelidade do projeto e renderize-a no servidor com EJS
1
Escolha uma tela do wireframe
Listagem, detalhe ou formulário já desenhado em alta fidelidade
2
Crie o template em src/views/
Ex.: views/produtos/index.ejs seguindo a convenção por recurso
3
Reuse com partials
header.ejs e footer.ejs via <%- include(...) %>
4
Renderize via res.render
No controller, passe os dados como segundo argumento
5
Use HTML semântico
<header>, <main>, <section>, <article> — nada de "soup of divs"

✅ Entrega esperada

  • 1 template EJS rodando localmente em rota GET
  • Fidelidade visual ao wireframe (layout, hierarquia, blocos)
  • Pelo menos 1 partial reutilizado (header ou footer)
  • Dados podem vir mockados no controller — sem banco ainda

💡 Dica

Abra o Figma/wireframe ao lado do editor. Comece pelo esqueleto semântico, depois acrescente as classes e o conteúdo. Estilo pixel-perfect fica para a Aula 10 (CSS).

🚧 Restrições

  • Sem framework de front (nada de React/Vue/Svelte)
  • CSS inline ou em public/css/
  • Sem fetch — só SSR puro (fetch chega na Aula 8)
RM-ODP — As 5 Visões do Sistema
ISO/IEC 10746 · SSR e templates EJS nas 5 visões
🏢 Enterprise
Conteúdo entregue ao usuário
→
📋 Information
Modelos do template
→
⚙️ Computational
Controllers + render
→
🔧 Engineering
Partials + layout
→
💻 Technology
EJS, Express, HTML

📍 Esta aula foca em Computational + Engineering — adicionamos a camada de Views renderizadas no servidor (destacadas em verde acima).

Esta Aula: Views
RM-ODP · RF, RNF e Artefato — 8 Eixos da camada de Views

📌 Requisito Funcional

Disponibilizar páginas HTML renderizadas pelo servidor exibindo dados do recurso central do projeto.

📦 Artefato

  • 📄 Templates EJS (list, detail, form)
  • 🧩 Partials (header/footer)
  • 🔗 Rotas SSR integradas ao MVC

⚖️ RNF — 8 Eixos ISO/IEC 25010

USAB Usabilidade✅ HTML semântico
ACES Acessibilidade✅ Tags + atributos certos
DES Desempenho✅ SSR rápido + cache
SEG Segurança→ Escape no template
MANT Manutenibilidade→ Partials reusáveis
📜
A página vem do servidor!
Você sabe renderizar EJS, compor com partials, escrever HTML semântico e adicionar interatividade no cliente. Na próxima aula, o cliente vai conversar com o servidor sem recarregar — chega o fetch.
✅ SSR vs CSR
✅ Setup EJS
✅ Partials e layouts
✅ Sintaxe EJS
✅ res.render
✅ HTML semântico
✅ DOM e eventos
✅ Validação dupla
🎯 Entrega da tarde
Páginas EJS para listar e exibir os recursos do projeto, consumindo a API da aula 6
📘 Reforço · TypeScript para refatorar e estender o back-end
📚 Documentação oficial ⚡ Crash Course (Medium)
Módulo 2 · Ciclo Comum · Aula 7 de 11 · Próxima: fetch + formulários
🏠 Home 📖 Material
1 / 17