Programação Web I

Introdução aos conceitos de Front-end e Back-end

Prof. Pablo Werlang
pablowerlang@ifsul.edu.br

Instituto Federal Sul-rio-grandense | Campus Charqueadas

Introdução

  • Reúne diversos conceitos:
    • Front-end (Executa na máquina do usuário)
    • Back-end (Executa em um servidor remoto / na nuvem)
  • Desenvolveremos aplicações para Web de ponta-a-ponta
Fluxo da aplicacao web
Instituto Federal Sul-rio-grandense | Campus Charqueadas

Introdução

Front-end

  • Executa na máquina do usuário (navegador)
  • Estrutura do Documento — HTML
  • Aparência do documento/aplicação — CSS
  • Interação com o usuário e lógica da aplicação local — JavaScript
  • Permite a construção de interfaces ricas e interativas
  • Não requer consulta aos dados armazenados em um servidor externo
Front-end
Instituto Federal Sul-rio-grandense | Campus Charqueadas

Introdução

Back-end

  • Executa em um servidor remoto / na nuvem
    • Fluxo dos dados e lógica da aplicação central
    • Armazenamento das informações
  • Se comunica com aplicações, não com pessoas (API)
    • Recebe informações (requisições)
    • Lógica do sistema
    • Se comunica com banco de dados
    • Entrega dados estruturados (JSON)
Back-end
Instituto Federal Sul-rio-grandense | Campus Charqueadas

Introdução

Front-end e Back-end

Front-end e Back-end
Instituto Federal Sul-rio-grandense | Campus Charqueadas

Separação de Conceitos

Instituto Federal Sul-rio-grandense | Campus Charqueadas

Separação de Conceitos

Cada arquivo com uma finalidade

HTML — Estrutura inicial do documento

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js" defer></script>
</head>
<body>
  <h1>Hello World!</h1>
</body>
</html>

JS — Lógica que é aplicada ao documento

console.log('Hello World!');

CSS — Como o documento se parece

h1 {
    color: red;
}
Instituto Federal Sul-rio-grandense | Campus Charqueadas

Separação de Conceitos

Usando defer

<script src="script.js" defer></script>
  • O navegador baixa o script sem travar toda a leitura do HTML
  • A execução fica para depois que o documento terminar de ser montado
  • Isso evita o clássico erro de tentar acessar um elemento que ainda nem apareceu na página
  • É uma boa escolha para scripts tradicionais, quando você não precisa de módulos
Instituto Federal Sul-rio-grandense | Campus Charqueadas

Separação de Conceitos

JavaScript moderno com type="module"

<script type="module" src="script.js"></script>
  • Diz ao navegador que o arquivo JS é um módulo
  • Permite usar import e export
  • Cada arquivo pode ter uma responsabilidade mais clara
  • Não permite abrir os arquivos diretamente no navegador, precisa de um servidor local (ex: Live Server do VSCode)
import { somar } from './calc.js';
console.log(somar(2, 3));
Instituto Federal Sul-rio-grandense | Campus Charqueadas