Desenvolvimento de Front-end

Prévia do material em texto

PÓS-GRADUAÇÃO
ENGENHARIA DE SOFTWARE
DESENVOLVIMENTO DE FRONT-END: DA MANIPULAÇÃO
DO DOM ÀS ARQUITETURAS BASEADAS EM
COMPONENTES
Um estudo bibliográfico sobre JavaScript, jQuery, AJAX, TypeScript, Angular, React e
Vue.js
2026
RESUMO
O desenvolvimento de front-end evoluiu da manipulação direta da árvore DOM com
JavaScript e bibliotecas como a jQuery para o uso de frameworks e bibliotecas baseados em
componentes, como Angular, React e Vue.js, frequentemente apoiados pela tipagem estática
do TypeScript. Este estudo tem como objetivo analisar, de forma integrada, os fundamentos
dessas tecnologias, identificando seus mecanismos de organização do código, de tratamento
de eventos e de comunicação assíncrona, bem como as convergências e divergências entre
elas. Trata-se de pesquisa bibliográfica, de abordagem qualitativa e de caráter exploratório e
descritivo, fundamentada em obras de referência e em documentações técnicas. Os resultados
indicam que o JavaScript constitui a base comum do ecossistema; que a jQuery e o AJAX
simplificaram a manipulação do DOM e as requisições sem recarregamento da página; que o
TypeScript acrescenta tipos estáticos, interfaces e orientação a objetos, favorecendo a
padronização; que o Angular oferece uma plataforma estruturada em componentes, serviços
com injeção de dependência e programação reativa; e que o React privilegia a composição de
componentes, o fluxo de dados unidirecional e o Virtual DOM. Conclui-se que as tecnologias
compartilham o princípio da componentização, mas diferem na forma de ligar dados e de
gerenciar o estado, o que deve orientar a escolha conforme a complexidade e as necessidades
de padronização de cada projeto.
Palavras-chave: desenvolvimento front-end; JavaScript; TypeScript; Angular; React.
ABSTRACT
Front-end development has evolved from the direct manipulation of the DOM tree with
JavaScript and libraries such as jQuery to the use of component-based frameworks and
libraries, such as Angular, React and Vue.js, often supported by the static typing of
TypeScript. This study aims to analyze, in an integrated manner, the foundations of these
technologies, identifying their mechanisms for code organization, event handling and
asynchronous communication, as well as the convergences and divergences among them. It is
a bibliographic research, with a qualitative approach and an exploratory and descriptive
character, based on reference works and technical documentation. The results indicate that
JavaScript is the common foundation of the ecosystem; that jQuery and AJAX simplified
DOM manipulation and requests without page reloading; that TypeScript adds static types,
interfaces and object orientation, favoring standardization; that Angular offers a platform
structured in components, services with dependency injection and reactive programming; and
that React favors component composition, unidirectional data flow and the Virtual DOM. It is
concluded that these technologies share the principle of componentization, but differ in how
they bind data and manage state, which should guide the choice according to the complexity
and standardization needs of each project.
Keywords: front-end development; JavaScript; TypeScript; Angular; React.
SUMÁRIO
1 INTRODUÇÃO 5
2 PROGRAMAÇÃO CLIENTE COM JAVASCRIPT, JQUERY E AJAX 6
2.1 Fundamentos do JavaScript 6
2.2 Manipulação do DOM e eventos com jQuery 6
2.3 Requisições assíncronas com AJAX 7
3 PROGRAMAÇÃO CLIENTE COM TYPESCRIPT 8
3.1 Origem e relação com o JavaScript 8
3.2 Tipos, funções e narrowing 8
3.3 Orientação a objetos 9
4 ANGULAR 11
4.1 Arquitetura e roteamento 11
4.2 Ligação de dados, diretivas e serviços 11
4.3 Programação reativa e integração com o back-end 12
5 REACT 13
5.1 Fundamentos e componentes 13
5.2 Ciclo de vida e Hooks 13
5.3 Roteamento e Redux 14
6 VUE.JS 15
7 ANÁLISE COMPARATIVA 16
8 CONSIDERAÇÕES FINAIS 17
REFERÊNCIAS 18
5
1 INTRODUÇÃO
A camada de apresentação das aplicações web, denominada front-end, concentra a
estrutura, o estilo e o comportamento das páginas com as quais o usuário interage. Nesse
contexto, o JavaScript ocupa posição central, por ser a linguagem interpretada pelo navegador
e responsável pela interatividade das páginas HTML, embora também seja empregado em
jogos, aplicativos móveis e no lado servidor, por meio do Node.js (MDN WEB DOCS, 2020).
À medida que as aplicações cresceram, o código tornou-se mais complexo e difícil de
gerenciar, o que motivou o surgimento de bibliotecas, de linguagens tipadas e de frameworks
voltados à organização do desenvolvimento (FREEMAN, 2019).
Diante da variedade de ferramentas disponíveis, formula-se o seguinte problema de
pesquisa: de que modo JavaScript, jQuery e AJAX, TypeScript, Angular, React e Vue.js
estruturam o desenvolvimento da camada cliente, e quais convergências e divergências podem
ser identificadas entre eles? O objetivo geral consiste em analisar os fundamentos conceituais
e técnicos dessas tecnologias. Como objetivos específicos, pretende-se: descrever os recursos
essenciais do JavaScript, da jQuery e do AJAX; caracterizar o TypeScript e sua relação com o
JavaScript; examinar a arquitetura do Angular e os fundamentos do React; apresentar
brevemente o Vue.js; e comparar as soluções adotadas por cada tecnologia para problemas
recorrentes.
Justifica-se o estudo porque a escolha dessas tecnologias repercute na
manutenibilidade e na padronização das aplicações. Metodologicamente, trata-se de pesquisa
bibliográfica, de abordagem qualitativa e de caráter exploratório e descritivo, baseada em
obras e documentações técnicas sobre as tecnologias estudadas. O trabalho organiza-se em
capítulos dedicados ao JavaScript com jQuery e AJAX, ao TypeScript, ao Angular, ao React e
ao Vue.js, seguidos de uma análise comparativa e das considerações finais.
6
2 PROGRAMAÇÃO CLIENTE COM JAVASCRIPT, JQUERY E AJAX
2.1 Fundamentos do JavaScript
O JavaScript pode ser incorporado a uma página de duas formas: com o código escrito
diretamente na tag script ou por meio de um arquivo externo .js, referenciado pelo atributo
src. Recomenda-se o arquivo externo, incluído imediatamente antes do fechamento do corpo
da página, pois o documento é renderizado de cima para baixo: com o script no cabeçalho, o
navegador interrompe a renderização até interpretar todo o código e, ao final, os elementos a
serem manipulados já existem. A exceção ocorre quando algum conteúdo depende do script
para ser exibido, situação que deve ser avaliada caso a caso (MDN WEB DOCS, 2020).
O escopo corresponde ao local do programa em que a variável existe e pode ser
acessada, podendo ser global ou de bloco, entendido como todo código delimitado por chaves.
Uma variável redeclarada com var dentro de uma condicional sobrescreve a variável externa,
ao passo que, declarada dentro de uma função, permanece restrita a ela. As palavras
reservadas var, let e const permitem maior controle sobre a disponibilidade e o conteúdo
das variáveis, evitando erros de sobrescrita e de acesso. A especificação ES6 introduziu as
arrow functions, forma mais simples de criar funções, embora nem todos os navegadores
antigos suportem essa especificação (MDN WEB DOCS, 2020).
var msg = "fora do bloco";
if (true) {
 var msg = "dentro do bloco"; // sobrescreve a variável externa
}
const multiplicacao = (n1, n2) => n1 * n2;
console.log(msg, multiplicacao(3, 5)); // "dentro do bloco" 15
Os eventos, como onload e onclick, conferem interatividade à página e podem ser
atribuídos às tags ou por programação.
2.2 Manipulação do DOM e eventos com jQuery
A jQuery é uma biblioteca JavaScript rápida, pequena e rica em recursos, que
simplifica a manipulação de documentos HTML, o tratamento de eventos, a animação e o
AJAX, com uma API que funciona em vários navegadores (JQUERY, 2020). Pode ser
incluída por download ou por referência a um repositório remoto, devendo-se incorporar
apenas uma versão; a variante slim exclui os recursos de AJAX e de efeitos. Sua principal
finalidade é o acessoà árvore DOM, representação estruturada do documento em forma de
árvore, por meio da função $(seletor), que aceita seletores por identificador, por classe, de
negação (:not) e múltiplos, combinados a métodos como after, append, html e val.
7
Quanto aos eventos, distinguem-se window.onload, disparado quando todo o conteúdo
da página foi carregado, e $(document).ready(), disparado assim que a árvore DOM está
disponível, antes do carregamento completo das imagens. O método click() é considerado
descontinuado e restrito aos elementos existentes no DOM inicial, enquanto on() alcança
elementos incluídos posteriormente e aceita um ou mais eventos. O método
event.preventDefault() impede a ação padrão do evento, permitindo, por exemplo, enviar
um formulário sem recarregar a página (JQUERY, 2020).
2.3 Requisições assíncronas com AJAX
O AJAX (Asynchronous JavaScript and XML) permite enviar requisições sem
interromper o fluxo da página, obtendo recursos remotos e utilizando-os sem recarregamento;
apesar do nome, o JSON é atualmente o formato mais empregado. Na jQuery, o método
$.ajax recebe a URL e um objeto de configurações, com o sucesso tratado em done e a falha
em fail; os atalhos $.get e $.post realizam requisições HTTP GET e POST, este último
permitindo o envio de dados (JQUERY, 2020).
$(function () {
 $.ajax({ dataType: "json", url: "json_data.json" })
 .done(function (veiculos) {
 $.each(veiculos, function (i, v) {
 $("#resultado").append("" + v.fabricante + " " + v.modelo + "");
 });
 })
 .fail(function (erro) { console.log(erro); });
});
O exemplo mostra que um arquivo JSON local pode ser carregado na abertura da
página e seus dados, acrescentados ao conteúdo.
8
3 PROGRAMAÇÃO CLIENTE COM TYPESCRIPT
3.1 Origem e relação com o JavaScript
O TypeScript é uma linguagem baseada no JavaScript cuja principal característica é a
possibilidade de utilizar tipos estáticos, classes e interfaces. É fortemente tipada, orientada a
objetos e compilada, de código aberto, desenvolvida pela Microsoft a partir do trabalho de
Anders Hejlsberg, projetista do C#, e comumente definida como um superconjunto tipado e
compilado do JavaScript (MICROSOFT, 2023). Sua origem relaciona-se às limitações do
JavaScript em bases de código extensas. Como os navegadores não interpretam TypeScript
nativamente, o código é compilado para JavaScript simples; qualquer código JavaScript torna-
se TypeScript pela troca da extensão .js por .ts; e o resultado pode ser executado em
qualquer navegador, dispositivo ou sistema operacional, aproveitando bibliotecas existentes
(FREEMAN, 2019).
Quadro 1 – JavaScript × TypeScript
Critério JavaScript TypeScript
Natureza Linguagem de script Linguagem orientada a objetos
Execução Interpretado pelo navegador Compilado para JavaScript
Tipos estáticos Não possui Possui
Interfaces Não suporta Suporta
Compatibilidade Código-base comum Superconjunto: todo JavaScript é TypeScript
Fonte: elaborado pelo autor com base em FREEMAN (2019).
A permanência do JavaScript explica-se pelos sistemas legados e pela facilidade de
uso, enquanto as interfaces do TypeScript obrigam as classes a seguir um padrão, favorecendo
a padronização.
3.2 Tipos, funções e narrowing
A declaração de tipos explicita o domínio de cada variável e ajuda a aplicar
corretamente as operações permitidas, embora a inferência de tipos dispense a declaração
quando há valor inicial (ROZENTALS, 2019). As funções indicam o tipo dos parâmetros e do
retorno, recorrendo a void quando não há retorno, e admitem recursão, desde que exista um
caso base, parâmetros REST, indicados por três pontos para receber quantidade indefinida de
argumentos, e expressões regulares do tipo RegExp (MICROSOFT, 2023). Os comandos
condicionais seguem a lógica de testar se uma condição é verdadeira para executar o bloco
correspondente (ABREU, 2017).
9
O narrowing (estreitamento) permite que o tipo de uma variável seja definido durante
a execução, desde que se indiquem os tipos possíveis, separados por barra vertical. Como
cada tipo é manipulado de forma distinta, a verificação é feita por type guards com o operador
typeof (MICROSOFT, 2023).
Quadro 2 – Tipos do TypeScript e verificação com typeof
Tipo Exemplo de uso
number Números, sem distinção entre inteiro e ponto flutuante
string Texto
boolean Valores lógicos
bigint Inteiros muito grandes, como identificadores de banco de dados
symbol Controle dos valores possíveis de uma variável
undefined Tipo não definido
object Dados complexos
function Funções passadas como parâmetro
any Aceita qualquer tipo
Fonte: elaborado pelo autor com base em MICROSOFT (2023) e O'HANLON (2019).
function testar(par_valor: number | string, extra?: number): number {
 if (typeof par_valor === 'number') {
 return par_valor + (extra ?? 10);
 }
 return par_valor.length;
}
console.log(testar(1), testar("teste")); // 11 5
O narrowing traz flexibilidade e reutilização, mas, se mal empregado, dificulta a
compreensão do programa.
3.3 Orientação a objetos
A programação orientada a objetos tem como elemento central as classes, modelos
compostos por atributos e métodos, cujas instâncias são os objetos (MICROSOFT, 2023). O
encapsulamento restringe o acesso por meio dos modificadores private, protected e public,
sendo público o membro sem modificador; a herança, declarada com extends e super,
promove reutilização e extensão de comportamentos; e o polimorfismo permite que um
mesmo método assuma comportamentos diferentes conforme o contexto. As classes
genéricas, com parâmetros de tipo entre os sinais de menor e maior, generalizam
comportamentos sem dependência de um tipo específico, o que favorece a construção de
componentes (O'HANLON, 2019). A linguagem oferece ainda decorações, metadados que
10
acrescentam funcionalidades de forma pouco intrusiva, recurso amplamente explorado pelo
Angular (ROZENTALS, 2019).
11
4 ANGULAR
4.1 Arquitetura e roteamento
O Angular é uma plataforma construída em TypeScript, baseada em componentes, com
bibliotecas integradas para roteamento, formulários e comunicação cliente-servidor, além de
ferramentas para construir e testar aplicações. Sua arquitetura apoia-se em quatro conceitos:
componentes, modelos com ligação de dados e diretivas, NgModules e serviços com injeção
de dependência (SESHADRI, 2018; NORING, 2018).
Quadro 3 – Elementos da arquitetura do Angular
Elemento Definição
Componente Classe TypeScript, modelo HTML e seletor, normalmente em arquivos .ts, .html e
.css
NgModule Coleção de componentes com finalidade específica; apenas um é raiz e realiza a
inicialização (bootstrap)
Serviço Classe decorada com @Injectable que concentra a lógica de negócio
Injeção de
dependência
Fornece os serviços pelos construtores, com baixo acoplamento
Fonte: elaborado pelo autor com base em SESHADRI (2018) e NORING (2018).
O fluxo de execução inicia-se no arquivo main.ts, que inicializa o AppModule, após o
que a página index.html exibe o componente raiz pelo seletor app-root. Os projetos seguem
o modelo SPA (Single Page Application), no qual o aplicativo ocupa uma única página e os
componentes internos se alternam. O roteamento é configurado com o tipo Routes e o
RouterModule; routerLink define os links e router-outlet exibe o conteúdo roteado. Como
o Angular não possui gerência de sessão, a proteção de recursos é feita nas rotas, por serviços
que implementam CanActivate e redirecionam usuários não autenticados à tela de login
(MOHAMMED, 2019).
4.2 Ligação de dados, diretivas e serviços
A ligação de dados pode ocorrer por interpolação, da classe para o modelo; por
atributo do seletor, com @Input; por evento, como (click); e de forma bidirecional, com
[(ngModel)], que exige o FormsModule. As diretivas anexam comportamentos aos elementos:
ngIf condiciona o desenho, ngFor exibe coleções dinâmicas, ngSwitch desenha conforme o
valor de uma variável, e ngClass e ngStyle gerenciam estilos dinamicamente (SESHADRI,
2018).
12

 Incluir
{{mensagem}}
{{p.codigo}} - {{p.nome}}
Os serviços separam a lógica de negócio dos componentes, que cuidam apenas da
interface. Declarados com providedIn: 'root', permanecem ativos durante toda a execução
e podem guardar dados de escopo global (NORING, 2018).
4.3 Programação reativa e integração com o back-end
O processamento assíncrono no Angular segue a programação reativa, paradigma
voltado ao fluxo de dados e à propagação de mudanças, implementado pela biblioteca RxJS
com base no padrão Observer, no qual um objeto notifica outros sobre mudanças em seu
estado por assinaturas. O Observable é a fonte de dados; o observador reage pelas funções
next, error e complete; a Subscription permite cancelar a assinatura com unsubscribe; os
operadores, como map e filter, são funções puras encadeadas por pipe; e o Subject
transmite a todos os assinantes simultaneamente (NORING, 2018; MOHAMMED, 2019).
O acesso a recursos remotos utiliza o HttpClient, cujos métodos get, post, put e
delete retornam Observables assinados pelos componentes. Para testes, um servidor
simulado em memória intercepta as chamadas HTTP; em produção, o front-end comunica-se,
por REST, com um servidor Express sobre o Node.js, minimalista e embarcado (WILSON,
2013), que persiste os dados no MongoDB, banco NoSQL documental que armazena
documentos JSON (CHODOROW; BRADSHAW, 2019). Como front-end e back-end operam
em portas diferentes, o CORS libera os recursos apenas para endereços específicos. A
interface pode adotar o Material Design, abordagem minimalista e responsiva que padroniza
tipografia, cores e dimensões (MEW, 2016), disponível no Angular Material em componentes
como cards, abas e botões (KOTARU, 2019).
13
5 REACT
5.1 Fundamentos e componentes
O React é uma biblioteca JavaScript de código aberto, desenvolvida pelo Facebook,
destinada à criação de interfaces de usuário, com extensão para aplicativos móveis por meio
do React Native. Seus pilares são o modelo composicional, a natureza declarativa, a
vinculação unidirecional de dados, a sintaxe JSX e o Virtual DOM, cópia do DOM em
memória que torna as atualizações mais rápidas. Pelo algoritmo de comparação (diffing) e
pela reconciliação, apenas o que mudou é atualizado no DOM real (REACT, 2023; STOYAN,
2019).
O componente, bloco de código independente e reutilizável que recebe props e retorna
elementos React, pode ser funcional, isto é, uma função JavaScript, ou de classe, derivado de
React.Component, com estado próprio e métodos de ciclo de vida. As props fluem do pai para
o filho e são imutáveis, enquanto o state é editável e cada chamada a setState gera nova
renderização; fora do construtor, o estado não deve ser alterado diretamente (SILVA, 2021).
Nos eventos, adota-se camelCase e referência à função, como em onClick={funcao},
chamando-se preventDefault() explicitamente; nas listas, cada elemento requer uma key
única entre irmãos, preferencialmente o identificador do objeto (REACT, 2023).
5.2 Ciclo de vida e Hooks
O ciclo de vida corresponde ao período em que o componente está em execução,
dividido em montagem, atualização e desmontagem (MAJ, 2022). Os Hooks permitem
gerenciar estados e efeitos em componentes funcionais sem os métodos de ciclo de vida:
useState devolve o valor atual e a função que o atualiza, sem mesclagem com o valor
anterior, e useEffect executa efeitos colaterais, equivalendo à combinação de três métodos de
classe (REACT, 2023).
Quadro 4 – Ciclo de vida dos componentes de classe e Hooks
Fase Método de classe Função Equivalente com
Hooks
Montagem constructor Define o estado inicial e
realiza os binds
useState com valor
inicial
Montagem e
atualização
render Único método obrigatório;
deve ser puro
Retorno da função
Montagem componentDidMount Carrega dados de APIs
externas
useEffect com vetor
vazio
Atualização shouldComponentUpdate Decide se haverá nova
renderização
—
14
Fase Método de classe Função Equivalente com
Hooks
Atualização componentDidUpdate Requisições conforme
mudança das props
useEffect com
dependências
Desmontagem componentWillUnmount Limpa temporizadores e
assinaturas
Função de limpeza do
useEffect
Fonte: elaborado pelo autor com base em MAJ (2022) e REACT (2023).
import React, { useState, useEffect } from 'react';
function ListaUsuarios() {
 const [dados, setDados] = useState([]);
 useEffect(() => {
 fetch('https://jsonplaceholder.typicode.com/users')
 .then(response => response.json())
 .then(data => setDados(data));
 }, []);
 return {dados.map(item => {item.name})};
}
As requisições a APIs, assíncronas por natureza, devem ser tratadas no useEffect,
seja com a Fetch API nativa, com o Axios ou com a jQuery (SILVA, 2021).
5.3 Roteamento e Redux
O React Router mantém a URL sincronizada com o estado da aplicação:
BrowserRouter encapsula a aplicação, Routes agrupa as rotas, Route renderiza a interface
correspondente e Link realiza a navegação. O React Redux resolve o custo de re-renderizar
todos os componentes de um nó e a dificuldade de repassar props entre componentes
distantes, centralizando os estados compartilhados em uma store; as actions informam aos
reducers qual função executar e com qual valor, e os reducers atualizam o estado e avisam os
componentes, enquanto o slice do toolkit reúne ambos em um único arquivo e os Hooks
useDispatch e useSelector executam actions e leem o estado (SILVA, 2021; STOYAN,
2019).
15
6 VUE.JS
O Vue.js é um framework JavaScript leve, de rápida assimilação e amplamente
utilizado, apresentado como fator de aumento de produtividade. Trata-se de projeto de código
aberto mantido pela comunidade de desenvolvedores, e não por uma grande empresa, ao
contrário do Angular, mantido pelo Google, e do React, mantido pelo Facebook. Seus
componentes são blocos reutilizáveis que favorecem uma base de código modular. O Single
File Component organiza-se em três blocos: template, para o HTML; script, para o
JavaScript isolado; e style, para o CSS do componente. Para utilizar um componente filho, é
necessário importar o arquivo, registrá-lo no bloco script e usá-lo no HTML.
Na instância Vue, a função data() deve retornar um objeto com os dados expostos, as
funções ficam no objeto methods e a palavra-chave this indica que o atributo pertence ao
próprio objeto.
const opcoes = {
 data() {
 return { pagina: 'HOME' };
 },
 methods: {
 alertaPagina() {
 alert(this.pagina);
 }
 }
};
A diretiva v-text insere o valor de uma variável como texto do elemento, com a
mesma função dos bigodes duplos, e a diretiva v-cloak, associada à regra CSS [v-cloak] {
display: none; }, oculta trechos ainda não processados, evitando que pisquem na tela. O
pai envia dados ao filho por props, e o filho comunica-se com o pai por eventos, aos quais o
pai associa métodos ouvintes.
16
7 ANÁLISE COMPARATIVA
As tecnologias examinadas compartilham o JavaScript como fundamento e convergem
para a componentização, mas diferem na forma de ligar dados, tratar eventos e gerenciar o
estado, conforme sintetiza o Quadro 5.
Quadro 5 – Angular × React × Vue.js
Aspecto Angular React Vue.js
Natureza Framework/plataforma em TypeScript Biblioteca JavaScript Framework JavaScript
Manutenção Google Facebook Comunidade
Ligação de
dados
Interpolação, @Input, eventos e
bidirecional com [(ngModel)]
Unidirecional, por
props
Props do pai para o filho
e eventos do filho para o
pai
Evento de
clique
(click)="metodo()" onClick=
{funcao}
Métodos em methods
Requisições HttpClient com Observables Fetch, Axios ou
jQuery no
useEffect
—
Estado
compartilhado
Serviços com Subject Redux —
Fonte: elaborado pelo autor com base na literatura consultada.
Observa-se a passagem do modelo da jQuery, em que o desenvolvedor seleciona e
altera diretamente os elementos, para modelos declarativos, em que se descreveo resultado e
a ferramenta atualiza a interface. O Angular privilegia uma estrutura completa e padronizada,
apoiada no TypeScript, ao passo que o React incorpora bibliotecas auxiliares para roteamento
e estado. O Vue.js combina diretivas semelhantes às do Angular com o fluxo de props e
eventos comparável ao do React.
17
8 CONSIDERAÇÕES FINAIS
Este estudo analisou os fundamentos de JavaScript, jQuery e AJAX, TypeScript,
Angular, React e Vue.js, atendendo ao objetivo de compreender como essas tecnologias
estruturam o desenvolvimento da camada cliente. Constatou-se que o JavaScript permanece
como base de todo o ecossistema; que a jQuery e o AJAX simplificaram a manipulação do
DOM e a comunicação assíncrona; e que o TypeScript, ao acrescentar tipos estáticos,
interfaces e orientação a objetos, favoreceu a padronização e a tolerância a falhas, sustentando
o Angular.
No que se refere aos frameworks, o Angular destacou-se pela arquitetura em
componentes, serviços e injeção de dependência, aliada à programação reativa; o React, pela
composição de componentes, pelo fluxo unidirecional, pelo Virtual DOM e pelos Hooks; e o
Vue.js, pela leveza e pela produtividade. Conclui-se que a escolha tecnológica deve considerar
a complexidade do projeto, a necessidade de padronização e o modelo de gerenciamento de
estado pretendido. Como limitação, a análise do Vue.js restringiu-se a aspectos introdutórios,
cujo aprofundamento fica sugerido para trabalhos futuros.
18
REFERÊNCIAS
ABREU, L. Typescript: o javascript moderno para criação de aplicações. Lisboa: FCA, 2017.
CHODOROW, K.; BRADSHAW, S. Mongodb: the definitive guide. 3. ed. USA: O'Reilly,
2019.
FREEMAN, A. Essential TypeScript. New York: Springer, 2019.
JQUERY. O que é jQuery. Acesso em: 4 ago. 2020.
KOTARU, V. Angular for material design. 1. ed. USA: Apress, 2019.
MAJ, W. W. Mostrar ciclos de vida menos comuns. Projects Wojtekamj. Acesso em: 23 jun.
2022.
MDN WEB DOCS. Referência Javascript. Acesso em: 4 ago. 2020.
MEW, K. Aprendendo Material Design. 1. ed. São Paulo: Novatec, 2016.
MICROSOFT. The Typescript Handbook. Acesso em: 14 maio 2023.
MOHAMMED, Z. Angular projects. 1. ed. Reino Unido: Packt, 2019.
NORING, C. Architecting angular applications. 1. ed. Reino Unido: Packt, 2018.
O'HANLON, P. Advanced typescript programming. 1. ed. Reino Unido: Packt, 2019.
REACT: uma biblioteca JavaScript para criar interfaces. Legacy. Acesso em: 6 maio 2023.
ROZENTALS, N. Mastering typescript 3. 3. ed. Reino Unido: Packt, 2019.
SESHADRI, S. Angular: up and running. 1. ed. USA: O'Reilly, 2018.
SILVA, M. S. React - aprenda praticando: desenvolva aplicações web reais com uso de
biblioteca React e de seus módulos auxiliares. 1. ed. Rio de Janeiro: Novatec, 2021.
STOYAN, S. Primeiros passos com React: construindo aplicações web. 1. ed. São Paulo:
Novatec, 2019.
WILSON, M. Construindo aplicações node. 1. ed. São Paulo: Novatec, 2013.