Front-End Frameworks AULA 1 a 3

Prévia do material em texto

1. O que é um framework frontend e qual a sua importância? 
Um framework frontend é um conjunto de ferramentas, componentes e padrões pré-definidos 
que auxiliam no desenvolvimento de interfaces gráficas e experiências de usuário na web. Ele 
fornece estruturas já prontas (como componentes de UI, roteamento e gerenciamento de 
estado), o que reduz a necessidade de "reinventar a roda", tornando o desenvolvimento mais 
rápido, consistente e escalável. 
 
A importância dos frameworks frontend reside em diversos aspectos: 
● Produtividade: Aceleram o processo de desenvolvimento ao oferecer recursos prontos 
e boas práticas, permitindo que os desenvolvedores se concentrem na lógica de 
negócio. 
● Padrões e boas práticas: Garantem um código mais organizado, legível e de fácil 
manutenção, promovendo a modularidade. 
● Comunidade e suporte: Frameworks populares possuem uma vasta comunidade de 
desenvolvedores, resultando em ampla documentação, fóruns, bibliotecas e exemplos 
prontos. 
● Performance e segurança: Muitos frameworks já integram recursos otimizados para 
melhor performance e segurança. 
● Empregabilidade: Conhecer os principais frameworks aumenta significativamente as 
chances de inserção no mercado de trabalho. 
 
2. Como os sites funcionam na Internet, desde a requisição do usuário 
até a renderização da página? 
 
O funcionamento dos sites na internet segue um processo de três etapas principais: 
● O cliente (navegador) envia uma requisição ao servidor: Quando um usuário digita 
um endereço (URL) em seu navegador (Chrome, Firefox, Edge, etc.), o navegador envia 
uma requisição HTTP/HTTPS ao servidor. Essa requisição é como uma "carta" pedindo 
informações e pode incluir cabeçalhos, cookies e dados (em formulários ou APIs). 
● O servidor processa a requisição e retorna uma resposta: O servidor web recebe a 
requisição. Ele pode buscar arquivos estáticos (HTML, CSS, imagens), executar código 
backend (em linguagens como PHP, Node.js, Java, Python) para gerar conteúdo 
dinâmico e consultar bancos de dados para recuperar informações. Em seguida, ele 
monta a resposta e a envia de volta ao cliente. Um exemplo de resposta é um arquivo 
HTML principal, acompanhado de links para CSS, JavaScript e imagens. 
● O navegador interpreta e renderiza a página: O navegador recebe os arquivos do 
servidor e os interpreta. Ele monta uma árvore DOM (Document Object Model) com base 
no HTML, aplica os estilos definidos no CSS e executa os scripts JavaScript. 
Finalmente, o navegador renderiza o resultado na tela do usuário, tornando a página 
visível e interativa. Esse processo é chamado de renderização. 
 
3. Quais são os principais frameworks frontend e suas características 
no mercado atual (2025)? 
 
No panorama de 2025, os principais frameworks frontend e suas características são: 
● React: Domina o mercado com 67%, com Next.js liderando em SSR. É uma biblioteca 
JavaScript criada pelo Facebook, focada na construção de interfaces de usuário (UI) 
com componentes reutilizáveis e trabalho declarativo (JSX). Suas vantagens incluem 
flexibilidade, um grande ecossistema de bibliotecas (React Router, Redux, Styled 
Components), grande comunidade e alta empregabilidade. No entanto, não é um 
framework completo por si só, exigindo a adição de várias bibliotecas para 
funcionalidades como roteamento de páginas, renderização no servidor (SSR) e SEO 
otimizado, o que pode levar a um aprendizado mais moderado e atualizações 
frequentes. 
● Vue.js: Possui 23% de adoção e é conhecido por ser fácil de aprender e produtivo. 
Criado por Evan You (ex-Google), tem forte adoção na Ásia e é o terceiro lugar no 
mercado global. Oferece excelente performance em aplicações pequenas e médias, 
utilizando o Virtual DOM para otimizar renderizações. Suas vantagens são sintaxe clara, 
facilidade para iniciantes, produtividade e uma comunidade engajada. As desvantagens 
incluem um mercado de trabalho menor comparado a React e Angular, e um 
ecossistema com menos bibliotecas oficiais. 
● Angular: Com 18% de uso em empresas robustas, é muito utilizado em empresas de 
grande porte e sistemas corporativos. Criado e mantido pelo Google, garante suporte de 
longo prazo. É robusto, escalável e padronizado, oferecendo boa performance em 
aplicações médias e grandes, utilizando Change Detection e Angular Ahead-of-Time 
(AOT) Compiler. É um framework completo, baseado em TypeScript (tipagem forte) e 
possui uma estrutura organizada ideal para projetos de longo prazo e equipes 
corporativas. As desvantagens são uma curva de aprendizado íngreme (conceitos como 
RxJS, decorators), código verboso (boilerplate) e uma comunidade menor que a do 
React. 
● Svelte/SvelteKit: Representa 12% do mercado e está em rápido crescimento. Oferece 
alternativas promissoras aos frameworks tradicionais. 
● Blazor (C#/.NET) e Flutter Web (Dart): São alternativas promissoras que utilizam 
linguagens diferentes do JavaScript para o desenvolvimento frontend. Blazor usa 
WebAssembly, com integração com .NET e Azure, mas tem baixa adoção e performance 
limitada em apps complexos. Flutter Web, adaptado do Flutter mobile, oferece reuso de 
código entre mobile e web, mas ainda é imaturo com uma comunidade pequena e 
limitado para web puro. 
 
4. O que é o Virtual DOM e como ele contribui para o desempenho das 
aplicações frontend? 
 
O Virtual DOM (Document Object Model) é uma cópia leve do DOM real, mantida em memória 
pelo framework (como React e Vue). O DOM real é uma representação em árvore dos 
elementos de uma página web (HTML, CSS, etc.). Quando algo muda na página, atualizar o 
DOM real pode ser lento e complexo, pois ele é grande. 
O Virtual DOM contribui para o desempenho das aplicações da seguinte forma: 
● Funcionamento: O framework mantém o Virtual DOM em memória. Quando há uma 
mudança na interface, ele compara (diffing) a versão anterior do Virtual DOM com a 
nova. 
● Reconciliação: Em vez de redesenhar toda a página, o framework aplica apenas as 
alterações necessárias no DOM real. Esse processo é chamado de reconciliação. 
● Vantagens: Isso resulta em atualizações muito mais rápidas e eficientes, menos 
manipulação direta do DOM real e um melhor desempenho em aplicações com muitas 
interações, pois o navegador não precisa redesenhar toda a lista a cada pequena 
alteração, apenas o item modificado. 
5. Quais são os principais requisitos técnicos para o desenvolvimento 
frontend com frameworks, especialmente com React e Next.js? 
 
Para o desenvolvimento frontend com frameworks, especialmente React e Next.js, os requisitos 
técnicos essenciais são: 
● JavaScript ES6: Uma versão importante do JavaScript (também conhecida como 
ES2015) que introduziu novos recursos e padrões, tornando o código mais limpo e 
legível. Ele é a base da maioria dos projetos web modernos e inclui recursos chave 
como: 
○ let e const: Substituem var para declarar variáveis, permitindo reatribuição (let) 
ou criando constantes (const). 
○ Arrow Functions (Funções de Seta): Sintaxe mais curta e concisa para 
escrever funções, ideais para funções simples e anônimas. 
○ Classes: Permitem criar objetos usando um modelo de programação orientada a 
objetos, organizando o código de forma mais clara. 
○ Template Literals: Facilitam a criação de strings com variáveis embutidas 
usando crases (`). 
○ Módulos (import/export): Permitem dividir o código em arquivos separados, 
facilitando a reutilização e organização. 
○ Node.js + npm/yarn:Node.js: Um ambiente de execução que permite usar 
JavaScript fora do navegador, geralmente no lado do servidor. Isso significa que 
é possível construir servidores web, APIs e ferramentas de linha de comando 
usando a mesma linguagem que se usa no frontend. 
○ npm (Node Package Manager) e yarn: Gerenciadores de pacotes que 
permitem instalar e gerenciar bibliotecas (pacotes) criadas por outros 
desenvolvedores, economizando tempo e evitando a necessidade de reinventar 
a roda. 
● IDE: VS Code: Um Integrated Development Environment(Ambiente de 
Desenvolvimento Integrado) leve, rápido e popular para desenvolvimento web, oferecido 
pela Microsoft. Possui uma vasta biblioteca de extensões que o tornam incrivelmente 
poderoso para codificação frontend. 
 
6. Quais são os conceitos importantes de desenvolvimento web como 
SPA (Single Page Application), SSR (Server-Side Rendering) e SEO 
(Search Engine Optimization)? 
 
● SPA (Single Page Application - Aplicação de Página Única): É um tipo de aplicação web 
que carrega a estrutura principal (HTML, CSS, JS) apenas uma vez. Novos conteúdos 
são trazidos via requisições assíncronas (API/JSON), e o JavaScript atualiza a página 
dinamicamente, sem um reload completo. Exemplos incluem Gmail, Trello e Instagram 
Web. A principal característica é a fluidez da experiência do usuário, semelhante a um 
aplicativo desktop. 
● SSR (Server-Side Rendering - Renderização no Servidor): É uma técnica onde o 
servidor gera o HTML completo (pronto) antes de enviá-lo para o navegador. Diferente 
de uma SPA tradicional (como React puro) que envia um HTML vazio e carrega o 
conteúdo com JavaScript, o SSR entrega um HTML já preenchido. 
○ Benefícios: Conteúdo visível já no carregamento inicial, melhor performance 
percebida pelo usuário e melhor suporte para SEO (motores de busca como o 
Google conseguem ler o HTML pronto). 
http://next.js
● SEO (Search Engine Optimization - Otimização para Mecanismos de Busca): É um 
conjunto de técnicas para melhorar a visibilidade de um site nos buscadores (Google, 
Bing, etc.). O Google, por exemplo, prioriza páginas que carregam rápido e têm HTML 
acessível. 
○ Importância: React puro pode dificultar o SEO porque o HTML inicial vem vazio, 
exigindo SSR ou SSG (Static Site Generation) para que o conteúdo seja 
indexado corretamente. 
○ Fatores que impactam SEO: Tempo de carregamento da página, estrutura 
semântica do HTML (bem organizado), conteúdo visível sem depender de 
JavaScript e o uso correto de meta tags (, ). 
 
7. Quais são as principais vantagens e desvantagens dos frameworks 
React, Angular e Vue.js? 
 
Cada um dos principais frameworks frontend (React, Angular, Vue.js) possui suas próprias 
vantagens e desvantagens: 
 
React.js: 
● Vantagens: 
○ Flexibilidade: Não é um framework fechado, podendo ser integrado a diversas 
bibliotecas (Redux, Next.js). 
○ Grande comunidade e ecossistema: Milhares de pacotes, documentação 
extensa e suporte online abundante. 
○ Alta empregabilidade: Muito requisitado no mercado de trabalho. 
○ Componentização: Código reutilizável e organizado. 
○ Performance: Usa Virtual DOM para atualizações rápidas e eficientes. 
● Desvantagens: 
○ Não é um framework completo: Precisa de bibliotecas externas para 
roteamento, manipulação de estado, etc., podendo tornar projetos grandes uma 
"colcha de retalhos". 
○ Curva de aprendizado moderada: Conceitos como JSX, hooks e o ciclo de vida 
podem ser desafiadores para iniciantes. 
○ Atualizações frequentes: Mudanças podem exigir adaptação constante do 
código. 
Angular: 
● Vantagens: 
○ Framework completo: Já vem com tudo pronto (roteamento, injeção de 
dependência, formulários, testes, etc.). 
○ Baseado em TypeScript: Fornece tipagem forte, maior segurança no código e 
facilita a manutenção em equipes grandes. 
○ Estrutura organizada: Ideal para projetos de longo prazo e equipes 
corporativas, promovendo robustez, escalabilidade e padronização. 
○ Ferramentas integradas: CLI poderosa, RxJS para programação reativa. 
● Desvantagens: 
○ Curva de aprendizado íngreme: Conceitos como RxJS, decorators e 
arquitetura podem ser difíceis no início. 
○ Verbosidade no código: Exige bastante configuração e boilerplate (muito 
código extra). 
http://vue.js
○ Comunidade menor que React: Menos pacotes e exemplos em comparação. 
Vue.js: 
● Vantagens: 
○ Fácil aprendizado: Sintaxe clara e próxima do HTML + CSS + JS, ótimo para 
iniciantes. 
○ Produtividade: Curva de aprendizado rápida, permitindo que os projetos saiam 
do papel rapidamente. 
○ Flexibilidade: Pode ser usado em projetos pequenos ou integrado em partes de 
apps grandes. 
○ Comunidade engajada: Boa documentação e suporte ativo. 
○ Performance: Excelente performance em aplicações pequenas e médias, 
usando Virtual DOM. 
● Desvantagens: 
○ Menor mercado de trabalho: Em comparação com React e Angular, 
especialmente no Brasil. 
○ Ecossistema menor: Menos bibliotecas oficiais em relação ao React. 
○ Adaptação em grandes corporações: É mais lenta, já que muitas preferem 
Angular ou React. 
 
8. Qual a estrutura de um projeto Next.js e como ele lida com 
componentes de servidor e cliente? 
 
Um projeto Next.js utiliza uma convenção de pastas para gerenciar a estrutura do seu projeto, 
sendo as pastas principais app/ (para Next.js 13+) ou pages/ (versões anteriores e ainda 
suportada). A criação dessas pastas define automaticamente as rotas. 
 
Estrutura de pastas e rotas automáticas: 
● app/ ou pages/: A raiz da sua aplicação. 
○ app/page.js ou pages/index.js: Se torna a rota principal (/). 
○ app/about/page.js ou pages/about.js: Se torna a rota /about. 
○ pages/post/[slug].js: Cria uma rota dinâmica como /post/meu-primeiro-post. 
● components/: Pasta para componentes reutilizáveis. 
● api/: Dentro de pages/ ou app/, permite criar API Routes, que são endpoints de servidor. 
Por exemplo, pages/api/ola.js criaria o endpoint /api/ola. 
● public/: Para arquivos estáticos (imagens, ícones, fontes). 
● styles/: Para estilos globais ou módulos CSS. 
● lib/: Para funções utilitárias. 
● next.config.js: Arquivo de configuração do Next.js. 
● package.json: Dependências e scripts do projeto. 
● tsconfig.json: Configuração do TypeScript (se usado). 
● README.md: Documentação inicial do projeto. 
Server Components e Client Components: Uma grande mudança no Next.js 13+ foi a introdução 
do conceito de Server Components e Client Components para otimizar a performance e a 
experiência do usuário. 
● Server Components:São a abordagem padrão no Next.js 13+. 
● Rodam no servidor e não enviam JavaScript para o navegador. Isso torna a página mais 
rápida e leve, ideal para dados que não mudam (como posts de blog) ou para buscar 
dados sensíveis sem expor segredos. 
● Não têm acesso a eventos de usuário, estado (como useState) ou hooks (como 
useEffect). 
● Client Components:Para usar funcionalidades interativas, como estados, eventos de 
clique e hooks do React, você precisa usar a diretiva "use client" no topo do arquivo. 
● Esses componentes rodam no navegador, assim como em um aplicativo React 
tradicional. 
● Use-os apenas quando a interatividade for necessária. 
 
	1. O que é um framework frontend e qual a sua importância? 
	2. Como os sites funcionam na Internet, desde a requisição do usuário até a renderização da página? 
	3. Quais são os principais frameworks frontend e suas características no mercado atual (2025)? 
	4. O que é o Virtual DOM e como ele contribui para o desempenho das aplicações frontend? 
	5. Quais são os principais requisitos técnicos para o desenvolvimento frontend com frameworks, especialmente com React e Next.js?​ 
	6. Quais são os conceitos importantes de desenvolvimento web como SPA (Single Page Application), SSR (Server-Side Rendering) e SEO (Search Engine Optimization)? 
	7. Quais são as principais vantagens e desvantagens dos frameworks React, Angular e Vue.js? 
	8. Qual a estrutura de um projeto Next.js e como ele lida com componentes de servidor e cliente?