Frameworks JavaScript: conceito, utilidade, principais opções do mercado e exemplos práticos

Objetivos de aprendizagem

Ao final da aula, o estudante deverá ser capaz de:

explicar o que é um framework;
distinguir, em nível introdutório, biblioteca, framework e meta-framework;
compreender por que frameworks são usados no desenvolvimento moderno;
reconhecer os principais nomes do mercado;
analisar vantagens, limitações e cenários de uso;
executar exemplos básicos para perceber a diferença entre JavaScript puro e frameworks.

Pergunta disparadora da aula

Se já existe HTML, CSS e JavaScript, por que o mercado usa React, Angular, Vue, Svelte, Next.js e Nuxt?

Resposta central da aula:

Porque aplicações modernas exigem:

componentização;
reaproveitamento;
organização do código;
atualização eficiente da interface;
estrutura de projeto;
produtividade em equipe.

Frameworks existem para ajudar a resolver exatamente isso. As documentações oficiais de React, Angular, Vue, Svelte, Next.js e Nuxt enfatizam componentes, estrutura, produtividade, escalabilidade e recursos adicionais para aplicações reais. (React)

O que é framework?

Um framework é uma estrutura de desenvolvimento que fornece padrões, ferramentas e organização para construir aplicações com mais rapidez, consistência e escalabilidade.

Explicação didática

Sem framework, o programador precisa decidir e implementar manualmente muita coisa:

organização de componentes;
atualização da interface;
estrutura do projeto;
roteamento;
integração entre partes do sistema.

Com framework, parte dessa estrutura já vem organizada.

Biblioteca, framework e meta-framework

Biblioteca

É um conjunto de recursos que o desenvolvedor chama quando precisa.

Exemplo conceitual: React.

Framework

Impõe ou orienta mais fortemente a organização da aplicação.

Exemplo conceitual: Angular, Vue.

Meta-framework

É uma camada acima de um framework ou biblioteca, acrescentando recursos como:

roteamento;
renderização no servidor;
estrutura de projeto;
otimizações;
recursos full-stack.

Exemplo conceitual: Next.js sobre React, Nuxt sobre Vue. (Next.js)

O que os frameworks resolvem na prática?

Frameworks ajudam a resolver problemas como:

repetição de código;
crescimento desorganizado da interface;
dificuldade de manutenção;
sincronização entre dados e tela;
projetos com várias páginas e componentes;
necessidade de produtividade em times.

Exemplo zero: problema resolvido com JavaScript puro

Antes de falar dos frameworks, convém mostrar um exemplo em JavaScript puro, para o aluno entender o problema.

Objetivo do exemplo

Criar um cartão simples de curso e inserir esse conteúdo na página.

Arquivo `index.html`

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemplo com JavaScript Puro</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>JavaScript puro</h1>
    <div id="app"></div>

    <script src="script.js"></script>
</body>
</html>

Arquivo `style.css`

body {
    font-family: Arial, sans-serif;
    margin: 30px;
    background-color: #f4f4f4;
}

.card {
    background-color: white;
    border: 1px solid #cccccc;
    padding: 20px;
    width: 320px;
    border-radius: 8px;
}

.card h2 {
    margin-top: 0;
}

.botao {
    background-color: #003366;
    color: white;
    border: none;
    padding: 10px 14px;
    cursor: pointer;
    border-radius: 4px;
}

Arquivo `script.js`

const curso = {
    nome: "Frameworks JavaScript",
    descricao: "Aula introdutória sobre os principais frameworks do mercado."
};

const app = document.getElementById("app");

app.innerHTML = `
    <div class="card">
        <h2>${curso.nome}</h2>
        <p>${curso.descricao}</p>
        <button class="botao" onclick="alert('Inscrição simulada!')">Saiba mais</button>
    </div>
`;

Como executar este exemplo

Criar uma pasta chamada exemplo-js-puro.
Dentro dela, criar os arquivos:
- index.html
- style.css
- script.js
Copiar o conteúdo correspondente para cada arquivo.
Abrir o arquivo index.html no navegador.

Explicação detalhada

Esse exemplo mostra que, com JavaScript puro, já é possível construir interface dinâmica. O arquivo HTML define uma área vazia com id="app". O CSS estiliza o cartão. O JavaScript monta o conteúdo em tempo de execução.

Exemplos anterior

a tela é montada “na mão”;
o HTML do componente foi escrito como string;
isso funciona bem para casos pequenos;
em aplicações grandes, essa abordagem tende a ficar difícil de manter.

Solução?

É exatamente nesse ponto que entram frameworks: eles organizam esse processo em componentes reutilizáveis.

React

A documentação oficial descreve React como uma biblioteca para interfaces Web e nativas baseada em componentes reutilizáveis. Ela enfatiza a construção da UI a partir de componentes e atualização da tela a partir de dados e estado. (React)

Vantagens

ecossistema muito amplo;
forte presença no mercado;
excelente modelo de componentização;
base para Next.js. (React)

Desvantagens

sozinho, não entrega tudo pronto;
exige escolhas complementares em projetos maiores;
pode confundir iniciantes por causa de JSX e estado.

Aplicabilidade

SPAs;
dashboards;
front-ends modernos;
produtos Web escaláveis.

Exemplo completo com React via CDN

Este é o melhor formato para uma aula introdutória, porque evita instalação complexa.

Arquivo `index.html`

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemplo React</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
    <h1>React via CDN</h1>
    <div id="root"></div>

    <script type="text/babel">
        function CardCurso() {
            const [mensagem, setMensagem] = React.useState("Nenhuma ação realizada.");

            return (
                <div className="card">
                    <h2>React</h2>
                    <p>React organiza a interface em componentes reutilizáveis.</p>
                    <button
                        className="botao"
                        onClick={() => setMensagem("Botão clicado com sucesso no componente React!")}
                    >
                        Testar componente
                    </button>
                    <p>{mensagem}</p>
                </div>
            );
        }

        const root = ReactDOM.createRoot(document.getElementById("root"));
        root.render(<CardCurso />);
    </script>
</body>
</html>

Arquivo `style.css`

body {
    font-family: Arial, sans-serif;
    margin: 30px;
    background-color: #eef3f8;
}

.card {
    background-color: white;
    border: 1px solid #cccccc;
    padding: 20px;
    width: 360px;
    border-radius: 8px;
}

.botao {
    background-color: #0d6efd;
    color: white;
    border: none;
    padding: 10px 14px;
    border-radius: 4px;
    cursor: pointer;
}

Como executar este exemplo

Criar uma pasta chamada exemplo-react.
Criar os arquivos:
- index.html
- style.css
Colar os códigos.
Abrir index.html no navegador com internet, porque as bibliotecas são carregadas por CDN.

Explicação detalhada

Neste exemplo, o componente CardCurso() retorna a interface. O React usa a função useState() para armazenar a mensagem.

const [mensagem, setMensagem] = React.useState("Nenhuma ação realizada.");

Isso significa:

mensagem guarda o valor atual;
setMensagem() atualiza o valor;
quando o valor muda, o React atualiza a tela.

Destaques

a interface é escrita como componente;
o código está mais organizado do que montar strings manualmente;
o React atualiza a interface automaticamente quando o estado muda.

Ideia central

No React, a tela é consequência dos dados.

Vue

A documentação oficial define Vue como um framework progressivo, acessível, performático e versátil, construído sobre HTML, CSS e JavaScript padrão. (vuejs.org)

Vantagens

curva de entrada amigável;
sintaxe clara;
boa documentação;
adoção progressiva. (vuejs.org)

Desvantagens

em muitos mercados, menor volume de vagas que React;
ecossistema menor que o de React em vários contextos.

Aplicabilidade

projetos de pequeno e médio porte;
ensino introdutório;
aplicações com adoção gradual.

Exemplo completo com Vue via CDN

Arquivo `index.html`

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemplo Vue</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <h1>Vue via CDN</h1>
    <div id="app">
        <div class="card">
            <h2>{{ titulo }}</h2>
            <p>{{ descricao }}</p>
            <button class="botao" @click="alterarMensagem">Testar componente</button>
            <p>{{ mensagem }}</p>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>

Arquivo `style.css`

body {
    font-family: Arial, sans-serif;
    margin: 30px;
    background-color: #f3f9f3;
}

.card {
    background-color: white;
    border: 1px solid #cccccc;
    padding: 20px;
    width: 360px;
    border-radius: 8px;
}

.botao {
    background-color: #42b883;
    color: white;
    border: none;
    padding: 10px 14px;
    border-radius: 4px;
    cursor: pointer;
}

Arquivo `script.js`

const { createApp } = Vue;

createApp({
    data() {
        return {
            titulo: "Vue",
            descricao: "Vue oferece uma sintaxe progressiva e acessível para interfaces.",
            mensagem: "Nenhuma ação realizada."
        };
    },
    methods: {
        alterarMensagem() {
            this.mensagem = "Botão clicado com sucesso no componente Vue!";
        }
    }
}).mount("#app");

Como executar este exemplo

Criar uma pasta chamada exemplo-vue.
Criar os arquivos:
- index.html
- style.css
- script.js
Abrir index.html no navegador com internet.

Explicação detalhada

O Vue trabalha de forma declarativa. O HTML contém marcações como:

{{ titulo }}

Essas expressões são substituídas pelos valores definidos no objeto data().

O método:

alterarMensagem()

altera a propriedade mensagem, e o Vue atualiza automaticamente a tela.

Destaques

o HTML fica muito próximo do HTML tradicional;
a ligação entre dados e interface é clara;
a curva inicial costuma ser amigável.

Ideia central

No Vue, os dados e a tela ficam fortemente sincronizados com pouca complexidade inicial.

10. Svelte

Svelte se descreve como um framework de UI que usa um compilador para transformar componentes em JavaScript otimizado, fazendo menos trabalho no navegador. (svelte.dev)

Vantagens

sintaxe concisa;
boa experiência de desenvolvimento;
foco em componentes leves. (svelte.dev)

Desvantagens

presença de mercado menor que React;
menor quantidade de vagas e ecossistema.

Aplicabilidade

projetos modernos leves;
estudo de abordagens alternativas;
interfaces concisas.

Exemplo mínimo com Svelte

Aqui o melhor é usar o ambiente oficial ou um projeto local, porque Svelte não é pensado para um simples index.html com CDN do mesmo modo que React e Vue. A documentação oficial recomenda tutorial interativo, playground e docs. (svelte.dev)

Arquivo `App.svelte`

<script>
    let mensagem = "Nenhuma ação realizada.";

    function alterarMensagem() {
        mensagem = "Botão clicado com sucesso no componente Svelte!";
    }
</script>

<div class="card">
    <h2>Svelte</h2>
    <p>Svelte compila componentes em JavaScript enxuto.</p>
    <button class="botao" on:click={alterarMensagem}>Testar componente</button>
    <p>{mensagem}</p>
</div>

<style>
    .card {
        background-color: white;
        border: 1px solid #cccccc;
        padding: 20px;
        width: 360px;
        border-radius: 8px;
    }

    .botao {
        background-color: #ff3e00;
        color: white;
        border: none;
        padding: 10px 14px;
        border-radius: 4px;
        cursor: pointer;
    }
</style>

Como executar este exemplo

Opção A — mais simples para sala

Usar o playground oficial do Svelte e colar o conteúdo do componente. A própria documentação recomenda começar pelo tutorial interativo ou playground. (svelte.dev)

Opção B — ambiente local

Ter Node.js instalado.
Criar um projeto Svelte conforme o fluxo indicado na documentação/playground.
Substituir o conteúdo do componente principal por App.svelte.
Executar o servidor local.

Explicação detalhada

O Svelte combina:

lógica em <script>;
marcação;
estilos locais.

Isso cria um componente autocontido.

Destaque

a sintaxe parece direta;
a reatividade é muito natural;
o componente reúne estrutura, comportamento e estilo no mesmo arquivo.

Ideia central

Svelte mostra uma alternativa moderna em que o componente já nasce muito coeso e enxuto.

Angular

Angular é oficialmente descrito como um framework Web mantido por equipe dedicada do Google, com ferramentas e APIs para criar aplicações rápidas, confiáveis e escaláveis. (Angular)

Vantagens

solução mais completa;
forte padronização;
boa organização em projetos grandes;
adequado para equipes e sistemas corporativos. (Angular)

Desvantagens

curva de aprendizagem mais alta;
pode ser pesado para primeiro contato;
normalmente usa TypeScript como padrão.

Aplicabilidade

aplicações corporativas;
projetos grandes;
times que valorizam arquitetura formal.

Exemplo mínimo de componente Angular

Como Angular depende de projeto estruturado, o mais correto é mostrar o componente e o template separadamente.

Arquivo `app.component.ts`

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  mensagem = 'Nenhuma ação realizada.';

  alterarMensagem() {
    this.mensagem = 'Botão clicado com sucesso no componente Angular!';
  }
}

Arquivo `app.component.html`

<div class="card">
  <h2>Angular</h2>
  <p>Angular oferece estrutura completa para aplicações escaláveis.</p>
  <button class="botao" (click)="alterarMensagem()">Testar componente</button>
  <p>{{ mensagem }}</p>
</div>

Arquivo `app.component.css`

.card {
  background-color: white;
  border: 1px solid #cccccc;
  padding: 20px;
  width: 360px;
  border-radius: 8px;
}

.botao {
  background-color: #dd0031;
  color: white;
  border: none;
  padding: 10px 14px;
  border-radius: 4px;
  cursor: pointer;
}

Como executar este exemplo

A forma correta é usar o tutorial ou um projeto Angular criado pela CLI. A documentação oficial oferece tutorial e ambiente de aprendizado. (Angular)

Fluxo didático sugerido

Ter Node.js instalado.
Criar um projeto Angular pela CLI.
Substituir os arquivos do componente principal pelos trechos acima.
Executar o servidor local do Angular.

Explicação detalhada

Angular separa bem:

lógica do componente;
template HTML;
estilos.

Isso favorece organização, mas também aumenta a quantidade de conceitos iniciais.

Destaque

Angular já vem com estrutura robusta;
é forte em ambientes corporativos;
exige mais disciplina e mais conceitos logo no começo.

Ideia central

Angular não é apenas “uma forma de mexer na tela”; ele é uma plataforma de organização de aplicações.

Next.js

Next.js é descrito oficialmente como um framework React para aplicações Web full-stack, acrescentando estrutura, recursos e otimizações sobre o React. (Next.js)

Vantagens

estrutura pronta sobre React;
roteamento e recursos integrados;
muito valorizado em aplicações modernas;
foco forte em produção. (Next.js)

Desvantagens

mais complexo que React puro;
exige entender mais conceitos;
menos apropriado como primeiro contato absoluto.

Aplicabilidade

aplicações React em produção;
produtos Web completos;
projetos com necessidade de estrutura e otimização.

Exemplo mínimo em Next.js

Arquivo `app/page.js`

'use client';

import { useState } from 'react';
import './page.css';

export default function HomePage() {
  const [mensagem, setMensagem] = useState('Nenhuma ação realizada.');

  return (
    <div className="card">
      <h2>Next.js</h2>
      <p>Next.js adiciona estrutura e recursos ao ecossistema React.</p>
      <button className="botao" onClick={() => setMensagem('Botão clicado com sucesso no Next.js!')}>
        Testar componente
      </button>
      <p>{mensagem}</p>
    </div>
  );
}

Arquivo `app/page.css`

.card {
  background-color: white;
  border: 1px solid #cccccc;
  padding: 20px;
  width: 360px;
  border-radius: 8px;
}

.botao {
  background-color: black;
  color: white;
  border: none;
  padding: 10px 14px;
  border-radius: 4px;
  cursor: pointer;
}

Como executar este exemplo

A documentação oficial indica criar e rodar um projeto Next.js; ela também oferece material introdutório e curso oficial. (Next.js)

Fluxo didático sugerido

Ter Node.js instalado.
Criar um projeto Next.js.
Substituir a página principal pelos arquivos acima.
Executar o servidor local.
Abrir no navegador o endereço local fornecido pelo ambiente.

Explicação detalhada

Esse componente usa React, mas dentro de uma estrutura Next.js.

Destaque

Next.js é uma evolução prática do uso profissional de React;
ele adiciona convenções e estrutura;
a organização do projeto já não depende só do programador.

Ideia central

Next.js representa React em contexto mais próximo do mercado de produção.

Nuxt

Nuxt é descrito oficialmente como framework full-stack para Vue, com roteamento baseado em arquivos, auto-imports e SSR configurados de fábrica. (Nuxt)

Vantagens

estrutura pronta sobre Vue;
boa produtividade;
recursos integrados;
ótimo para projetos Vue mais profissionais. (Nuxt)

Desvantagens

pressupõe conhecer Vue;
mais indicado depois do contato inicial com Vue.

Aplicabilidade

aplicações Vue em produção;
sites e apps estruturados;
projetos que precisam de recursos full-stack.

Exemplo mínimo em Nuxt

Arquivo `app.vue`

<script setup>
import { ref } from 'vue';

const mensagem = ref('Nenhuma ação realizada.');

function alterarMensagem() {
  mensagem.value = 'Botão clicado com sucesso no Nuxt!';
}
</script>

<template>
  <div class="card">
    <h2>Nuxt</h2>
    <p>Nuxt amplia o ecossistema Vue com recursos de framework full-stack.</p>
    <button class="botao" @click="alterarMensagem">Testar componente</button>
    <p>{{ mensagem }}</p>
  </div>
</template>

<style>
.card {
  background-color: white;
  border: 1px solid #cccccc;
  padding: 20px;
  width: 360px;
  border-radius: 8px;
}

.botao {
  background-color: #00dc82;
  color: black;
  border: none;
  padding: 10px 14px;
  border-radius: 4px;
  cursor: pointer;
}
</style>

Como executar este exemplo

A forma correta é criar um projeto Nuxt e substituir o arquivo principal pelo conteúdo acima. A documentação oficial apresenta esse modelo de trabalho e o posiciona como framework full-stack para Vue. (Nuxt)

Fluxo didático sugerido

Instalar Node.js.
Criar projeto Nuxt.
Substituir app.vue.
Rodar o servidor local.
Abrir a aplicação no navegador.

Explicação detalhada

O Nuxt usa Vue, mas com mais estrutura de projeto e recursos integrados.

Destaque

Nuxt é para Vue o que Next.js é para React, em termos de ideia didática;
o projeto já nasce mais organizado;
há menos configuração manual.

Ideia central

Nuxt mostra como o ecossistema Vue evolui para aplicações maiores e mais estruturadas.

Comparação final

Tecnologia	Natureza	Curva inicial	Mercado	Melhor uso introdutório
JavaScript puro	base da Web	baixa	essencial	entender o problema
React	biblioteca de UI	média	muito forte	aprender componentes
Vue	framework progressivo	baixa a média	forte	entrada amigável
Angular	framework completo	alta	forte em corporativo	visão de arquitetura
Svelte	framework de UI compilado	média	menor	mostrar alternativa moderna
Next.js	framework React	média a alta	muito forte	React em produção
Nuxt	framework Vue	média	relevante	Vue em produção

React, Next.js e Vue continuam entre os nomes mais fortes e lembrados no ecossistema Web em levantamentos amplamente usados pela indústria, como o Stack Overflow Developer Survey. (Stack Overflow)

Conclusão didática

Framework não substitui os fundamentos. Framework organiza, acelera e padroniza o desenvolvimento de aplicações maiores. Quem entende HTML, CSS, JavaScript, componentização e lógica aprende frameworks com mais consistência.

Referências utilizadas

React Documentation. React se apresenta como biblioteca para interfaces e enfatiza componentes e atualização da UI. (React)
Angular Documentation. Angular se apresenta como framework Web para aplicações rápidas, confiáveis e escaláveis. (Angular)
Vue Documentation. Vue se apresenta como framework progressivo, acessível e versátil. (vuejs.org)
Svelte Documentation. Svelte se apresenta como framework/UI framework baseado em compilação. (svelte.dev)
Next.js Documentation. Next.js se apresenta como framework React full-stack. (Next.js)
Nuxt Documentation. Nuxt se apresenta como framework full-stack para Vue. (Nuxt)
Stack Overflow Developer Survey 2025. Usado apenas como apoio para a ideia de relevância e presença no ecossistema. (Stack Overflow)

Fim da aula 04

Linguagem e Técnica de Programação II – Aula 04

Frameworks JavaScript: conceito, utilidade, principais opções do mercado e exemplos práticos

Objetivos de aprendizagem

Pergunta disparadora da aula

O que é framework?

Explicação didática

Biblioteca, framework e meta-framework

Biblioteca

Framework

Meta-framework

O que os frameworks resolvem na prática?

Exemplo zero: problema resolvido com JavaScript puro

Objetivo do exemplo

Arquivo index.html

Arquivo style.css

Arquivo script.js

Como executar este exemplo

Explicação detalhada

Exemplos anterior

Solução?

React

Vantagens

Desvantagens

Aplicabilidade

Exemplo completo com React via CDN

Arquivo index.html

Arquivo style.css

Como executar este exemplo

Explicação detalhada

Destaques

Ideia central

Vue

Vantagens

Desvantagens

Aplicabilidade

Exemplo completo com Vue via CDN

Arquivo index.html

Arquivo style.css

Arquivo script.js

Como executar este exemplo

Explicação detalhada

Destaques

Ideia central

10. Svelte

Vantagens

Desvantagens

Aplicabilidade

Exemplo mínimo com Svelte

Arquivo App.svelte

Como executar este exemplo

Opção A — mais simples para sala

Opção B — ambiente local

Explicação detalhada

Destaque

Ideia central

Angular

Vantagens

Desvantagens

Aplicabilidade

Exemplo mínimo de componente Angular

Arquivo app.component.ts

Arquivo app.component.html

Arquivo app.component.css

Como executar este exemplo

Fluxo didático sugerido

Explicação detalhada

Destaque

Ideia central

Next.js

Vantagens

Desvantagens

Aplicabilidade

Exemplo mínimo em Next.js

Arquivo app/page.js

Arquivo app/page.css

Como executar este exemplo

Fluxo didático sugerido

Explicação detalhada

Destaque

Ideia central

Arquivo `index.html`

Arquivo `style.css`

Arquivo `script.js`

Arquivo `index.html`

Arquivo `style.css`

Arquivo `index.html`

Arquivo `style.css`

Arquivo `script.js`

Arquivo `App.svelte`

Arquivo `app.component.ts`

Arquivo `app.component.html`

Arquivo `app.component.css`

Arquivo `app/page.js`

Arquivo `app/page.css`

Arquivo `app.vue`