Aula 1

INTRODUÇÃO AOS FRAMEWORKS EM JAVASCRIPT Imprimir

Nesta aula, vamos aprender o conceito de framework, a diferença entre um framework e uma
API e os principais frameworks disponíveis no mercado de desenvolvimento web.
45 minutos

INTRODUÇÃO
Prezado, estudante.

Nesta aula, vamos aprender o conceito de framework, a diferença entre um framework e uma API e os
principais frameworks disponíveis no mercado de desenvolvimento web.

A linguagem JavaScript é, hoje, uma realidade de mercado, e durante a prática profissional, é comum que
ocorram problemas que demandem a realização de tarefas repetitivas e de baixa complexidade que consomem
tempo e recursos. Diante disso, como um framework pode ajudar nessas tarefas?

Mas antes que pense em uma resposta, vamos definir, inicialmente, o que é um framework considerando sua
aplicabilidade no mercado de tecnologia. Em função das características desse mercado, o profissional mais
preparado tende a se destacar dos demais. Por isso, é importante que, desde já, tomemos consciência da
disciplina focada no autoestudo, pois é por meio dela que alcançamos nossa autonomia.

CONCEITO DE FRAMEWORKS
Podemos compreender um framework como uma “estrutura de softwares” que possibilita a sua ampliação e
transformação em algo maior e mais especifico; ele é um conjunto de códigos-fonte, classes, funções, técnicas e
metodologias que viabilizam o desenvolvimento dos softwares (MINETTO, 2007).

Vamos pensar um framework como um conjunto de estruturas que podem ser totais ou parcialmente
reutilizáveis; é por meio dele que podemos conceber aplicações customizadas e dedicadas ao nosso interesse.
Perceba que podemos definir o que é um framework de várias maneiras, mas o importante é compreender que
sua definição não é estática, logo, podemos dizer que o framework é caracterizado como uma coleção de
classes abstratas e concretas, é também o modo como as instâncias dessas classes interagem entre elas
(ROBERTS; JOHNSON, [s. d.]). Isso que dizer que um framework realiza a captura de uma funcionalidade
partilhada por diversas aplicações, mas para isso ser possível, é necessário que tais aplicações tenham algo em
comum, algo que pertença ao mesmo domínio de problema.

A nossa definição de framework apoia-se em algumas características fundamentais; a primeira delas diz que um
framework deve fornecer uma solução para um grupo de problemas similares, por meio de suas classes e
interfaces, decompondo o problema em partes menores e mais fáceis de solucionar; já a segunda característica
diz respeito a como os objetos dessas classes cooperam entre si para realizar suas funções; outro atributo trata
de seu conjunto de classes flexíveis e extensíveis, permitindo a criação de aplicações com menos esforço.

Veja que um framework é uma aplicação incompleta, pois faltam alguns componentes. Atualmente, há uma
apreciável quantidade de sites web e sistemas que funcionam por meio do JavaScript e seus frameworks
(FLANAGAN, 2011).

Empresas como Google, Microsoft e Facebook aplicam essa tecnologia em seus sistemas, forçando sua evolução
e, por consequência, tornando sua utilização mais simples. Realmente, o desenvolvimento web tem ficado cada
vez mais complexo, assim, a produção de códigos não se realiza de forma simplesmente manual, mas por meio
do auxílio dos frameworks, conforme Figura 1.

Figura 1 I Diagrama de viabilidade para concepção de um framework

Nesse contexto, os frameworks são como verdadeiros canivetes suíços, dispondo de inúmeras ferramentas que
possibilitam o aumento da eficiência dos desenvolvedores, trazendo maiores ganhos para as empresas e para
os seus clientes. Essa tecnologia, se aplicada corretamente, agiliza os processos de desenvolvimento, permite o
reuso dos códigos e proporciona maior estabilidade no funcionamento de uma aplicação.

VIDEOAULA: CONCEITO DE FRAMEWORKS

Olá, estudante! Vamos reforçar, de um modo mais restrito, o conceito de um framework, mostrar ao aluno a
extensão das possíveis possibilidades de aplicação dessa tecnologia e, por meio de um exemplo prático, que a
compreensão do conceito de framework é importante para o desenvolvimento profissional e a superação de
desafios. Além disso, vamos perceber que os frameworks fazem parte do processo de desenvolvimento de
softwares, tanto daqueles aplicados a plataformas mobile como web ou desktop, bem como estabelecer que o
conceito de framework é de vital importância para o aumento da performance do desenvolvedor.

Videoaula: Conceito de frameworks

Para visualizar o objeto, acesse seu material digital.

DIFERENÇA ENTRE FRAMEWORKS E APIS

Neste momento, vamos entender a diferença entre um framework e uma API (Application Programming
Interface), e é importante que essa compreensão seja bem estabelecida. Então, qual a diferença entre ambos?
Essa é uma questão que nos exige bastante atenção, a fim de que evitemos problemas conceituais, dado que,
em meio a tantas palavras e expressões, é usual haver confusão entre os dois conceitos. Antes de tudo, vamos
esclarecer três conceitos que são fundamentais no domínio do desenvolvimento de software, que são:
bibliotecas, frameworks e APIs (ZANETTE, 2016).

Daremos ênfase aos APIs e aos frameworks, no entanto, antes, temos que definir o que são bibliotecas. A
concepção de biblioteca é de compartilhamento de resultados ou soluções que ocorrem por meio de suas
funções e métodos; mas o que isso quer dizer? Quando estamos programando, empregamos um conjunto de
funções previamente escritas e testadas, não sendo necessário reescrever as funcionalidades dessas funções, e
esse conjunto é chamado de biblioteca.

Mas você pode estar se perguntando: e se, em algum momento, for necessária a inclusão de uma nova
funcionalidade em uma aplicação? Bem, nesse caso, será preciso incluir alguma biblioteca que se ajuste à
necessidade de determinada funcionalidade. Por exemplo: se alguém precisar criar gráficos, poderá utilizar a
biblioteca Chart.js do Java Script, assim como a biblioteca React, se quiser construir interfaces de usuário.

A definição de biblioteca nos leva à definição de framework, dado que um framework, diferentemente de outras
bibliotecas, é uma reunião de bibliotecas (TECHNOPEDIA, 2018), sendo a API uma abstração. De outra forma,
dizemos que as APIs são grupos ou conjuntos de padrões e de rotinas de programação que nos dão acesso a
plataformas ou aplicações web.

Figura 2 I Localização de uma API em uma estrutura web

Figura 3 I Diagrama de conexão entre um código uma API e uma biblioteca

Ou seja, uma API é o modo como seu código se conecta a uma biblioteca; assim, conceituamos que uma API é
um agrupamento de regras destinadas a realizar uma tarefa. Perceba que, em determinadas situações, a
complexidade de uma biblioteca pode se tornar tão elevada que ela se torna um framework (MANIERO, 2014).

VIDEOAULA: DIFERENÇA ENTRE FRAMEWORKS E APIS

Percebemos, até aqui, a diferença entre os frameworks e as APIs. Nesse contexto, é bastante aconselhável que
o aluno procure ampliar seus conhecimentos do assunto de maneira autônoma, por meio do autoestudo,
buscando consolidar, de maneira própria, as habilidades adquiridas neste curso. É importante frisar que a
capacidade do desenvolvedor de buscar, por si próprio, soluções adequadas para os problemas que lhe são
apresentados no decurso de sua vida profissional é vital para o seu sucesso como profissional.

Videoaula: Diferença entre frameworks e APIs

Para visualizar o objeto, acesse seu material digital.

PRINCIPAIS FRAMEWORKS EM JAVASCRIPT

A aplicação dessa tecnologia vem crescendo nos últimos anos, tornando-se emergente no mercado de software,
por isso, é indispensável conhecê-la e estudá-la em detalhe. Neste momento, vamos conhecer os principais
frameworks utilizados no mundo do desenvolvimento web, e iniciaremos com o framework denominado
AngularJS, que é uma importante tecnologia concebida pelo Google e que, atualmente, é mantida por ele e por
uma ampla comunidade de desenvolvedores (UZAYR, 2019).

Basicamente, esse framework emprega a linguagem HTML como standard, sendo capaz, por meio de suas
diretivas, de ampliar os atributos do HTML. O AngularJS se vincula aos dados do código HTML por meio de suas
expressões; ele possui uma estrutura JavaScript e pode ser acrescentado a uma página web por meio de uma
tag de script (SILVA, 2020). Vejamos um exemplo do seu emprego analisando o trecho de Código 1 a seguir.

Código 1 | HTML

1 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">

2 </script>

Esse pequeno trecho de código mostra o AngularJS sendo adicionado a uma web page por meio da tag <script>.

A extensão do HTLM realizada por esse framework ocorre por meio de suas diretivas -ng. Abaixo, temos o
Código 2, em que algumas de suas diretivas são utilizadas:

Código 2 | Diretivas

1 <div ng-app="">

2 <p>Name: <input type="text" ng-model="name"></p>

3 <p ng-bind="name"></p>

4 </div>

Comentários do código: nesse código, temos, na linha 1, a diretiva ng-app, e essa diretiva informa, ao AngularJS,
que o elemento <div> é o dono do arquivo; já na linha 2, temos a diretiva ng-model, que realiza o vínculo do
valor do campo de input, recebendo o nome da variável; por fim, a linha 3 une o conteúdo do elemento <p> ao
nome da variável.
Como vimos, às diretivas AngularJS são atributos HTML com prefixo -ng, e esse foi um exemplo de
funcionamento desse framework; abordaremos questões mais técnicas oportunamente. Além do AngularJS,
temos outro importante framework chamado Vue.js, que nos possibilita a construção de interfaces de usuário
(users interfaces). O Vue.js foi desenvolvido para ser adotado de modo incremental, ou seja, ele é um
framework progressivo e pode se conectar, parcialmente, a uma aplicação server-side, ou seja, ele se conecta
apenas a setores da aplicação que são definidos pelo desenvolvedor, de acordo com sua necessidade.

Outra característica desse framework diz respeito a sua principal biblioteca, que foi escrita para ser aplicada
exclusivamente na camada visual (view layer). Não pense que o AngularJS é o protagonista absoluto no mundo
do desenvolvimento web; outro framework importante se chama Vue.js, que também é capaz de se integrar a
outras bibliotecas, e assim como o AngularJS, o Vue.js promove, a partir de seus atributos, a extensão do HTML,
e suas diretivas propiciam mais funcionalidades aos aplicativos escritos em HTML. Esse framework utiliza
colchetes duplos { { } } para os campos reservados aos dados, e suas diretivas, que são atributos HTML, são
escritas com o prefixo v- . Podemos estudar outros exemplos de código em W3schools. Vejamos um pequeno
exemplo retirado dessa fonte.

Código 3 | Código em W3schools

1 <div id="app">

2 <h1>{{ message }}</h1>

3 </div>

4 <script>
5 var myObject = new Vue({

6 el: '#app',
7 data: {message: 'Hello Vue!'}

8 })
9 </script>

Fonte: adaptado de W3schools (2022b).

No Código 3, na linha 5, um new object é criado por meio do comando new Vue(); uma propriedade chamada
(el) linha 5 liga o new object Vue a um elemento do HTML com id = "app" linha 5. Novamente, reforçamos a
necessidade da prática de programação e do estudo detalhado desse framework.

Certamente, essa tecnologia nos oferece padrões para o desenvolvimento tanto em HTML quanto em CSS e
JavaScript. Lançado, em 2011, por profissionais do Twitter, ele apresenta enorme vantagem quando se trata da
concepção de layouts e projetos de sites que privilegiam o acesso via dispositivos móveis.

VIDEOAULA: PRINCIPAIS FRAMEWORKS EM JAVASCRIPT

Complementando nossos estudos de frameworks, percebe-se que o tema é vasto, havendo uma enorme
quantidade de tecnologias disponíveis no mercado de desenvolvimento web. Entretanto, devemos ter bastante
cautela no emprego dos conceitos e das tecnologias no que diz respeito à escolha de um determinado
framework. Antes da escolha de uma tecnologia, é importante saber filtrar, selecionar e privilegiar
determinadas soluções em detrimento de outras, buscando uma visão sistêmica da situação a ser solucionada.
Uma vez detectado o problema, sua solução deve ocorrer a partir de um plano de ação e de prioridades. É
natural que falhas e imprevistos ocorram, mas não devem se transformar em uma rotina para o desenvolvedor,
assim, temos de ter clareza quanto à correta identificação de um problema e à análise de suas causas, pois só
assim saberemos qual tecnologia aplicar na solução. Lembre-se de que a tecnologia correta para o problema
errado trará consequências indesejáveis.

Videoaula: Principais frameworks em JavaScript

Para visualizar o objeto, acesse seu material digital.

ESTUDO DE CASO
Você foi contratado como desenvolvedor web de uma grande empresa e está integrado em um time de
desenvolvimento front-end responsável por uma importante plataforma acessada diariamente por milhares de
clientes ao redor do mundo.
Recentemente, o help desk dessa empresa tem recebido solicitações de serviço (tickets) demandando suporte
em uma quantidade anormal se comparado aos anos anteriores. A maioria dessas solicitações tem sido a
respeito das dificuldades dos clientes em acessar a plataforma que parece funcionar de modo intermitente. Um
cliente relatou que acessou a plataforma pela manhã, por meio de um desktop, e que, posteriormente, a
acessou a partir de um dispositivo móvel, e foi nesse momento que o cliente se deparou com um problema de
interface. O desenvolvedor está, agora, no centro da questão, participando de uma reunião emergencial para a
formação de um grupo de trabalho focado na solução dessa falha. O problema deve ser solucionado em
questão de horas, uma vez que a empresa corre o risco de perder credibilidade e valor de mercado.

Então, chegou a hora, cada equipe está buscando encontrar a falha em seus respectivos setores. Depois de
algum tempo, foi descoberto que a falha tinha relação com o preenchimento de um formulário em uma
interface programada em JavaScript que utiliza um determinado framework. Essa página é acessada pelos
clientes por meio de vários tipos de dispositivos e sistemas operacionais; frente a isso, pense e proponha uma
hipótese justificável que possa servir de base para resolver a situação. Lembre-se de analisar o problema de
modo objetivo, levando em consideração tudo o que você já conhece sobre os principais frameworks
modernos.

RESOLUÇÃO DO ESTUDO DE CASO

A partir das informações que o nosso desenvolvedor possui e dos conhecimentos de alguns frameworks, a
solução do problema pode ser encontrada. A situação sugere que o problema surge para alguns clientes e para
outros não (quando o texto diz: a plataforma parece funcionar de modo intermitente), ou seja, às vezes sim, às
vezes não, e isso pode significar que clientes diferentes estão acessando a plataforma a partir de dispositivos
diferentes e obtendo respostas diversas uns dos outros.

A partir da análise dos relatórios das solicitações de serviços, encontramos uma pista quando o texto diz:
acessou a plataforma por um dispositivo desktop pela manhã e, em outro acesso via dispositivo móvel,
deparou-se com problemas de interface. Essas informações nos levam a pensar no framework utilizado pela
aplicação em questão. De fato, ele parece não ser o mais adequado, dado que os acessos à plataforma foram se
tornando cada vez mais complexos ao decorrer dos anos (o texto diz que a empresa tem recebido solicitações
de serviço – tickets –, demandando suporte em uma quantidade anormal se comparada aos anos anteriores).

Logo, do ponto de vista dos tipos de dispositivos utilizados no acesso à plataforma e do aumento expressivo de
demandas por acessos via dispositivos móveis, podemos chegar à conclusão de que o framework utilizado se
tornou ineficiente, pois, uma vez integrado ao sistema da empresa, a quantidade de acessos via aparelhos
móveis não foi tão expressiva. Assim, a escolha de um framework adequado resolveria o problema, e, de acordo
com o nosso conhecimento do assunto, seria conveniente a sua substituição por outro que privilegie o acesso
via dispositivos móveis, e uma escolha seria o Bootstrap.

Resolução do Estudo de Caso

Para visualizar o objeto, acesse seu material digital.

 Saiba mais
Para ampliar seu aprendizado e sanar questões do dia a dia sobre tecnologias web, visite o site
w3shools.com; nele, você encontra inúmeros tutoriais relacionados ao JavaScript e seus frameworks, bem
como a outras tecnologias. Outra fonte confiável de referência pode ser consultada por meio do endereço
web developer.mozilla.org.

Além disso, em ieeexplore.ieee.org, você também pode consultar livros, conferências, artigos, cursos,
padrões e citações sobre tecnologia. Acesse a plataforma e pesquise: JavaScript Framework.

Para treinar programação, utilize a ferramenta online CodeSandbox e teste seus códigos. Bons estudos!

Aula 2

ANGULAR
Nesta aula, você terá a chance de aprender a trabalhar com o framework angular, assim como
configurar seu ambiente de desenvolvimento, conhecer seus componentes e módulos.
39 minutos
INTRODUÇÃO
Caro estudante, no decorrer desta aula, vamos aprender pontos importantes relativos ao desenvolvimento web
por meio do framework angular, e conhecer essa tecnologia é muito importante, pois a demanda por aplicações
web têm se tornado uma constante no mercado de software. Frente a isso, podemos nos perguntar, qual a
forma mais eficaz de desenvolvê-las? Qual tecnologia devemos utilizar? Nesta aula, você terá a chance de
aprender a trabalhar com o framework angular, assim como configurar seu ambiente de desenvolvimento,
conhecer seus componentes e módulos. Logo, vamos criar o nosso primeiro projeto com esse framework.

Bons estudos!

INTRODUÇÃO À CONFIGURAÇÃO DO AMBIENTE

A linguagem de programação JavaScript, bem como o HTML e o CSS, são componentes essenciais quando
falamos em desenvolvimento web, enquanto o HTML especifica o conteúdo da página, o CSS vai especificar sua
apresentação (FLANAGAN, 2011). Por outro lado, o AngularJS é um framework JavaScript de código aberto
desenvolvido pelo Google (DIETZ, 2013) e amplamente utilizado na programação de aplicações de página única
(single-page application) e Ajax-style web applications (KOZLOWISKI, 2013). Esse framework é mantido pelo
Google e possui licença MIT, o que significa que é permitida a reciclagem de software, seja ele licenciado, seja de
código livre (open source). Durante nossos estudos, vamos nos deparar com duas grafias referentes a esse
framework, mas não confunda AngularJS com Angular.

Inicialmente, esse framework era grafado como AngularJS; após sua versão 1.7, ele passou a ser chamado de
Angular. Para ficar claro, a versão Angular sem o “JS” é uma versão que foi reformulada para otimizar código,
tornando-o mais eficiente.

Um atributo fundamental do Angular é a implementação de um modelo de arquitetura chamado MVC (Model-

View-Controller), em português, denominamos Arquitetura Modelo-Visão-Controle, que ganhou popularidade
na indústria de desenvolvimento de software, tornando-se uma referência para indústria (BRANAS, 2014).

O MCV separa a representação da informação chamada Model da interação que o usuário realiza com essa
informação (View) (KAUFMAN; TEMPLIER, 2016). Percebemos, então, uma característica importante dessa
arquitetura: cada elemento funcional do código é tratado por ele de modo independente, o que torna o código
mais inteligível e fácil de manter. Outro atributo do Angular que não podemos deixar de citar diz respeito ao
emprego de suas diretivas, e podemos definir as diretivas como uma maneira de estender as funcionalidades
do HTML, que ocorre pela inclusão de atributos ou componentes que permitem a criação de tags específicas
que possibilitam o reuso do código.

Antes de prosseguirmos com a codificação de aplicações com esse framework, vamos acompanhar a instalação
desse ambiente de desenvolvimento. Abaixo, temos a imagem das opções de instalação do AngularJS. O
download desse framework está disponível em duas opções: a não comprimida (uncompressed) e a versão
minificada (minified), que ocupa menos espaço no disco, pois não vem com seu código comentado.

Figura 1 I Opções de instalação do AngularJS

 Fonte: captura de tela do site AngularJS elaborada pelo autor.

Veja só: o Angular-1.8.2 possui uma estrutura própria de diretórios e arquivos em que cada qual apresenta uma
funcionalidade específica.

Figura 2 I Estrutura dos arquivos do angular-1.8.2 visualizados na máquina local

Fonte: elaborada pelo autor.

A próxima imagem exibe a mesma estrutura de arquivos, agora, aberta em um editor HTML. Perceba que,
nessa estrutura, existe um arquivo chamado index.html.

Figura 3 I Estrutura dos arquivos do angular-1.8.2 com destaque para o arquivo index.html

Fonte: elaborada pelo autor.

A próxima figura mostra um exemplo de código que foi carregado no arquivo index.html.

Figura 4 I Exemplo de um código (Código 1) salvo no arquivo index.html

 Fonte: elaborada pelo autor.

Copie o código a baixo e realize o teste.

Código 1 | Exemplo teste. Execução do arquivo index.html

1 <DOCTYPE html>

2 <html lang="pt-br" ng-app>

3 <head>

4 <meta charset="UTF-8">
5 <title>Document</title>

6 <script src='js/angular.min.js'></script>
7 </html>

8 <body>
9 <h1>{{'Hello ' + 'AngularJS'}}</h1>

10 <p>Teste: {{5 + 4}}</p>

11 </body>

12 </html>

Vamos estudar as linhas mais importantes desse código. Na linha 6, foi feita a inclusão da biblioteca AngularJS;
na linha 2, apontamos o HTML como app por meio da diretiva ng-app do Angular; já o restante das linhas
corresponde à estrutura padrão de um arquivo HTML. Ainda na linha 2, perceba que não foi especificado o
nome do app, e por que isso? Isso é necessário somente quando os elementos do JavaScript são acoplados com
HTML. As linhas 9 e 10, representadas pelas chaves duplas, mostram que tudo o que estiver entre essas chaves
será renderizado como HTML após ser interpretado pelo Angular (a linha 9 representa uma concatenação de
elementos textuais); por fim, na linha 10, foi expressa uma operação de soma. O resultado da compilação será
exibido no browser conforme a figura abaixo.

Figura 5 I Resultado da execução do Código 1 salvo em index.html

VIDEOAULA: INTRODUÇÃO À CONFIGURAÇÃO DO AMBIENTE

O objetivo deste vídeo é mostrar ao aluno o processo de obtenção, instalação, configuração e teste do
framework Angular CLI. Por meio dele, o aluno será convidado a explorar as funcionalidades desse framework
de modo mais aprofundado e a realizar os procedimentos necessários para a implementação do ambiente
Angular CLI, agora, funcionando do lado do servidor. Posteriormente, será mostrado como testar a instalação
do ambiente e de suas dependências.

Videoaula: Introdução à configuração do ambiente

Para visualizar o objeto, acesse seu material digital.

MÓDULOS
Neste momento, vamos conhecer os componentes e módulos do Angular. Os componentes são os blocos
fundamentais que constituem uma aplicação. São estruturas de código que funcionam de modo independente
e que podem ser reutilizadas em diversos contextos de aplicação.
Cada componente possui sua própria lógica de funcionamento. Quando desenvolvemos uma aplicação Angular,
o que realizamos é a conexão entre vários componentes distintos que, juntos, irão formar uma interface de
usuário (user interface). Esses componentes podem, de maneira opcional, receber parâmetros internos ou
externos à aplicação a que pertencem, bem como podem se comunicar com outros componentes por meio de
retornos de chamadas (Call-backs) ou de eventos. É interessante notarmos que um componente pode ter
encapsulado em seu código funcionalidades que são externas a ele, tais como estruturas de estilo ou, até
mesmo, uma lógica de negócios. Os componentes do Angular são, de fato, diretrizes que possuem sua própria
lógica definida, assim, quando olhamos para uma aplicação Angular, constatamos que ela contém sua própria
árvore de componentes, e isso significa que nossas aplicações são baseadas no conceito de visualização (View) e
que são um subconjunto de diretrizes.

Existem dois tipos de diretrizes, uma que trata sobre o comportamento dos elementos e outra que
denominamos diretriz estrutural, também chamada de componente. Quando criamos aplicações “Angular”, o
resultado são estruturas de código segregadas por módulos, e esse conceito se refere a um modelo de template
HTML gerenciado por, pelo menos, um controlador. Repare que o conceito de módulo carrega consigo um
modo mais eficaz de organizar e gerenciar o código da interface do usuário, e isso é realizado por meio das
secções de código que funcionam individualmente e que podem ser reutilizadas. Agora que já sabemos o que
são e quais são as principais características de um componente, vamos tratar dos módulos em Angular.

Os módulos são construídos a partir de contêineres, que são códigos dedicados a um determinado domínio de
aplicações; isso é um módulo.

Figura 6 I A figura destaca alguns módulos dos quais o ambiente Angular é dependente

Vemos, na Figura 6, a estrutura do node module. Os módulos podem conter serviços de provedores,
componentes e diretivas, que são definidas pelo módulo raiz ou NgModule. Cada aplicação Angular possui, ao
menos, um NgModule, que, por convenção, denominamos AppModule, e esse módulo se localiza em um
arquivo chamado App.Module. Perceba que uma aplicação pode ser concebida com apenas um módulo,
entretanto, a grande maioria delas é construída a partir de diversos módulos de recursos.

De fato, uma das mais importantes características introduzidas no JavaScript foram os módulos, através do
NgModule, onde todas as declarações e variáveis de uma aplicação farão parte de seu escopo. O NgModule,
sendo um módulo root, compartilha o mesmo contexto de compilação de componentes que pertencem a outro
NgModule, e essa é uma importante característica desse módulo. Cada aplicação Angular possui, ao menos, um
NgModule, que, por convenção, denominamos AppModule, e esse módulo se localiza em um arquivo chamado
app.module.ts.

Agora, estamos preparados para prosseguir em nosso estudo sobre o Angular, espero que você tenha
compreendido o que são módulos e componentes, assim como as suas principais características. Temos a
certeza de que, agora, estamos em condições de nos aprofundarmos neste tema tão instigante que é o
desenvolvimento em JavaScript, conforme Figura 7.

Figura 7 I Exibe o módulo raiz do angular app.module.ts

Fonte: elaborada pelo auto.

VIDEOAULA: MÓDULOS
No ambiente Angular, consideramos que um módulo é uma coleção de componentes, sendo estes os
elementos mínimos para que seja possível o desenvolvimento de aplicações nesse ecossistema. Assim, como o
módulo Angular é uma compilação de componentes, um aplicativo é concebido por meio de diversos módulos.
No Angular, um módulo é criado por meio do decorador @NgModule, assim, devemos ter claro que as
aplicações “Angular” são concebidas por meio de diversos componentes e que cada um desses componentes é
um tipo de classe contida na aplicação. Por fim, os componentes são identificados por meio do decorador
@Component.

Videoaula: Módulos

Para visualizar o objeto, acesse seu material digital.

CRIANDO UM PROJETO EM ANGULAR

Agora, vamos criar o nosso primeiro projeto Angular, e seu objetivo é registrar uma variável para que seja
exibida, simultaneamente, em um campo previamente preenchido. Nesse projeto, vamos trabalhar somente
sobre o arquivo index.html do Angular; além disso, nesse arquivo, faremos as modificações necessárias para
que, ao final, tenhamos, como resultado, uma interface como a da Figura 8 abaixo.

Figura 8 I Apresentação a interface do usuário definida pelo projeto

Fonte: elaborada pelo autor.

Vamos utilizar os códigos 2 e 3 como base para as nossas modificações.

Código 2 | Código 2 para modificações

1 <!doctype html>
2 <html ng-app>

3 <head>
4 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>

5 </head>
6 <body>

7 <div>
8 <label>Name:</label>

9 <input type="text" ng-model="yourName" placeholder="Enter a name here">

10 <hr>

11 <h1>Hello {{yourName}}!</h1>
12 </div>

13 </body>
14 </html>

Fonte: Fonte: elaborado pelo autor.

Código 3 | Código 3 para modificações

 1 <!doctype html>
2 <html ng-app>

3 <head>
4 <script

5 src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
6 </head>

7 <body>
8 <div>

9 <label>Informe seu nome e sobrenome:</label>

10 <input type="text" ng-model="seuNome" placeholder="Enter a name here">

11 <hr>
12 <h2>Bem-Vindo(a): {{seuNome}}.</h2>

13 </div>
14 </body>

15 </html>
16 <body>

17 <div>
18 <label>Nome do novo Usuário:</label>

19 <input type="text" ng-model="seuNome" placeholder="Enter a name here">

20 <hr>

21 <h1>Novo usuário(a) registrado(a): {{seuNome}}.</h1>

22 </div>

23 </body>

No Código 2, temos, na linha 1, a declaração padrão do HTML, que informa ao navegador qual versão do HTLM
será utilizada. Na linha 2, declaramos a propriedade ng-app, iniciando a aplicação, e essa diretiva é incluída
como parte do HTML em qualquer aplicação que se queira construir por meio do Angular (GREEN; SESHADRI,
2013). Na linha 4, foi especificado o atributo src (Source) do HTML, e repare que o valor que esse atributo recebe
é dado por uma url (uniform resource locator), que aponta para o local fonte da informação. Na linha 9, temos a
diretiva NgModel, que realiza a ligação entre uma entrada de dados e uma propriedade do escopo da aplicação;
nesse caso, a uma área de texto. Além disso, na mesma linha, temos o atributo placeholder, que insere o texto
em um campo de formulário. As demais linhas são partes da estrutura padrão do HTML.

Veja que o código apresentado é bastante simples e deve ser compreendido em detalhes. Já o código 3 mostra
o mesmo trecho, mas com as modificações necessárias que alteram a interface do usuário.

O que temos de diferente no Código 3 em relação ao Código 2? Perceba que, no Código 3, temos a mesma
estrutura do Código 2 (veja o resultado das alterações efetuadas). Observando atentamente o código
modificado, percebemos que, na linha 9, em <label></label>, modificamos a mensagem inicial para receber um
nome e sobrenome; na linha 10, alteramos o ng-model, que, agora, recebe seuNome; a linha 12 teve seu
conteúdo de texto modificado para exibir uma mensagem de boas-vindas; e repare que o restante do código
(linhas 16 a 23) é uma réplica do trecho do Código 2. O resultado foi a duplicação do campo que recebe os
dados de entrada.

Experimente executar os dois códigos e compare os resultados. Execute o Código 3, faça as suas próprias
modificações, analise o resultado obtido e pense nas funcionalidades adicionais que podem ser adicionadas a
ele, como alteração do estilo de interface, gravação e armazenamento em um arquivo a partir dos dados
registrados. É importante que você busque novas soluções para questões que são recorrentes no campo da
programação web.

Figura 9 I Apresentação a interface do usuário exibindo a entrada de dados

O objetivo desta aula foi abordar as principais características do AngularJS, assim como seus componentes e
módulos. Foi por meio da criação de um projeto, aplicando o reuso de código, que percebemos o poder desse
framework. Caro aluno, espero que esta aula tenha sido proveitosa e que sua prática na programação JavaScript
possa progredir com sucesso.

Tenha sempre em mente a importância de colocar em prática o seu conhecimento.

Bons estudos!

VIDEOAULA: CRIANDO UM PROJETO EM ANGULAR

Para a criação de um projeto em Angular, devemos satisfazer alguns pré-requisitos fundamentais. É bastante
comum, durante processos de instalação, migração ou configuração de um ambiente de software, ocorrer
problemas que devem ser prontamente solucionados, logo, é fundamental o conhecimento prévio das
estruturas de código nas quais o ambiente funciona.

Para isso, a leitura da documentação do Angular é um ótimo começo. Responder a problemas muitas vezes
atípicos faz parte da vida do desenvolvedor, e o que diferencia um bom profissional nesse setor é justamente
sua capacidade de buscar soluções mais eficientes e novas maneiras de agir sobre processos e questões
pertinentes ao ambiente de desenvolvimento.

Videoaula: Criando um projeto em Angular

Para visualizar o objeto, acesse seu material digital.

ESTUDO DE CASO
Imagine que você faz parte do time de desenvolvimento de uma empresa do setor de tecnologia e que, nessa
empresa, o Angular é um ambiente bastante utilizado por seus colaboradores que estão em constante contato
com essa tecnologia.

Durante o expediente, os desenvolvedores acessam um portal interno em que podem ter acesso a documentos
sobre o Angular. Esse portal foi concebido visando a facilitar o acesso do time de desenvolvimento da empresa,
entretanto, em razão de uma falha de segurança, o portal de consulta foi desabilitado. Logo, buscando uma
solução rápida, seu superior lhe deu a tarefa de construir um novo site que deverá conter uma mensagem de
boas-vindas e um aviso ao usuário com a mensagem: “Atenção! Nosso sistema está migrando”, assim como a
versão corrente (versão 1.0) e a mensagem: “Links Importantes”. A sequência dos links que deverão aparecer
nos botões será a seguinte:

Estudos de JavaScript direcionado para: https://www.w3schools.com/js/.

Documentação Node JavaScript direcionado para: https://nodejs.org/en/docs/.

NPMm dependência direcionado para: https://bit.ly/3qjx0XC.

Guias de Estilo Angular direcionado para: https://angular.io/guide/styleguide.

Conversão HTML TypeScript direcionado para: https://angular.io/guide/aot-compiler.

O layout da página que vamos criar será um modelo reutilizado a partir do padrão do Angular e a página deverá
conter somente os elementos indicados no texto, logo, elementos adicionais deverão ser suprimidos. (Altere os
arquivos necessários para que as modificações sejam aplicadas com sucesso.)

RESOLUÇÃO DO ESTUDO DE CASO

Requisitos: Angular CLI e Node instalados. A primeira atitude que o desenvolvedor deve tomar é criar uma pasta
local com o nome study, por exemplo. Segundo passo: via terminal, acesse a pasta criada (study) por meio do
comando cd study; uma vez dentro da pasta, execute o comando ng new form (form é o nome da subpasta que
será criada dentro da pasta study com todos os arquivos necessários); abra o projeto e ele apresentará toda
estrutura dos arquivos criados; então, altere os dados da página criando os links e os direcionamentos para as
páginas solicitadas; por fim, realize todas as alterações para que a página funcione de acordo com o modelo de
interface exibido no estudo de caso.

As alterações foram suficientes? Em caso negativo, procure, no código, os elementos que ainda devem ser
alterados, se houver. É importante trabalhar buscando as nossas próprias soluções.

Acesse src >> app > app.componet.html e altere o código.

1. <span>{{title}} Nosso Sistema está Migrando</span>

2. <!-Toolbar 

3. <div cla"s="tool"ar" ro"e="ban"er">

4. <span>Bem-Vindos ao Novo Portal</span>

Ainda em app.componet.html, altere a linha: <span>{{title}} Nosso Sistema está Migrando </span>:

1. <!-- Resources -->

2. <h2>Versão 0.1</h2>

3. <p>Links Importantes</p>

4. <span>Estudos De JavaScript</span> e adicione o link em href="https://www.w3schools.com/js/"

5. <span>Documentação NODE JAVASCRIPT</span> e adicione o link em href="https://nodejs.org/en/docs/"

6. <span>Guias de Estilo Angular</span> e adicione o link em href="https://angular.io/guide/styleguide"

7. <span>Conversão HTML para TypeScript</span> e adicione o link em href="https://angular.io/guide/aot-

compiler"

8. <span>NPM Dependências</span> e adicione o link em https://www.npmjs.com/package/@angular/cli

Em app.component.ts, altere o código para:

1. export class AppComponent {

2. title = 'ATENçÃO:'

3. }

Em index.html, substitua por:

2. <meta charset="utf-8">

3. <title>Novo Portal</title>

Figura 10 I Layout do estudo de caso

Resolução do Estudo de Caso

Para visualizar o objeto, acesse seu material digital.

 Saiba mais
É importante que nos aprofundemos na tecnologia dos frameworks, para isso, recomendamos a
leitura atenta da documentação referente ao Angular, que pode ser consultada no próprio síte do
ambiente.
 Outra fonte importante de informações pode ser acessada por meio do Node.js, nele, podemos
consultar a documentação sobre o nodejs, além de guias e informações sobre dependências,
certificação e segurança.

Os dados sobre NMP podem ser consultados em NPM.docs.

Para testes com o AngularJS, Vue.js e outros frameworks via servidor, podemos utilizar a ferramenta
online StackBlitz.

Bons estudos a todos!

Aula 3

VUE
Nesta aula, você aprenderá como funciona o framework no desenvolvimento front-end de um
sistema.
40 minutos

INTRODUÇÃO
Olá, estudante! Vue é um framework de código aberto, desenvolvido pelo programador Evan You, que trabalhou
em diversas empresas de tecnologia e em alguns projetos — como o da Google Interative Labs, utilizando
outros frameworks, como o Angular. Evan queria algo que fosse simples, acessível e livre para qualquer
desenvolvedor. Após muitas horas de trabalho para que esse framework ficasse pronto, o Vue foi lançado,
enfim, em 2014.

Entender como funciona este framework no desenvolvimento front-end de um sistema é o objetivo desta aula.
Escolher qual framework utilizar, para melhor atender ao usuário no produto final, que é o sistema web
desenvolvido, facilita o caminho a ser percorrido até a entrega do sistema funcionando.

Vamos em frente neste desafio!

INTRODUÇÃO AO VUE
O Vue é um framework progressivo, feito para construir interfaces e o front-end de sistemas web. Este
framework surgiu para facilitar o desenvolvimento e a construção de sistemas web utilizados por meio de
navegadores (VUE, 2021).

Diferente dos outros frameworks, monolíticos, ele é incremental, com o objetivo de facilitar o desenvolvimento,
focado na renderização e na composição de componentes, com funcionalidades que permitem se ter códigos
complexos, mas simples, para desenvolvedores de aplicações web. Ele trabalha por meio de bibliotecas e
pacotes, que facilitam o desenvolvimento, mesmo para os programadores menos experientes.

Esta biblioteca trabalha na camada View, no modelo MVC. Apesar disso, também atua muito bem com outras
bibliotecas e até mesmo com o conceito de single-page application, utilizando bibliotecas e ferramentas
específicas (VUE, 2021).

Com o framework Vue, é possível construir aplicativos web que permitem escolhas, como as opções vistas em e-
commerce, nas quais o usuário pode escolher a cor e tamanho do produto que está comprando. O comprador
interage com a tela, escolhendo cor e tamanho do produto que quer; e o aplicativo valida, por meio das
camadas de arquitetura, se este produto tem ou não disponibilidade em estoque (INCAO, 2017, p. 22).

A utilização deste framework deve permitir ao usuário escolher e comprar o produto diretamente na sua tela.
Esta opção de tela pode ser feita pelo Vue, com o JavaScript (INCAO, 2017, p. 24).

Vue é muito comum na criação de single-pages (páginas únicas), e funciona muito na concepção de interfaces,
na utilização de elementos para compor as páginas. O resultado do trabalho feito usando Vue é uma interface
muito amigável para o usuário.

Por ser progressivo, ele pode ser conectado a diferentes partes em uma aplicação server-side, para otimização
da user interface (UI). Vue é considerado o framework mais popular no mundo pela sua facilidade de uso, bem
como liberdade de atuação e resultados esperados (VUE, 2021).

A arquitetura para trabalhar com Vue deve ter uma configuração bastante simples e ser facilmente integrável a
outras plataformas de desenvolvimento script e a qualquer aplicação já existente, por meio de uma tag <script>.
Sua estrutura precisa ser simples e limpa, para que outros programadores entrem e saiam dos projetos sem
causar impacto negativo ou perdas a eles ou à equipe. A mudança de pessoas ao longo do projeto não impacta
a finalização das entregas. Utilizar o framework Vue torna simples e fácil o desenvolvimento de páginas web,
para serem utilizadas em qualquer navegador.

Quanto aos navegadores, independentemente da empresa desenvolvedora, quaisquer navegadores conseguem

executar as páginas criadas pelo Vue de forma simples; normalmente são aceitos sem problemas ou
incompatibilidades. O Vue consegue apresentar o uniform resource locator (URL) conforme o caminho que ele
foi criado, com fácil localização da página em seu servidor e sem perda de caminho ou da localização da página
— mesmo sendo uma single-page. A versão Vue Router, que é o pacote de código aberto, vem com uma API
para atualizar as URLs e permite navegação entre as páginas, suportando o botão “Voltar”, inclusive (VUE, 2021).

Desenvolvedores estão construindo aplicações com o Vue em blocos, pacotes ou componentes. Com o uso do
Vue Router, os componentes são mapeados para as rotas pertinentes, entendendo as rotas-raízes e onde seus
filhos serão renderizados (VUE, 2021).

VIDEOAULA: INTRODUÇÃO AO VUE

Neste vídeo é possível entender o que é o Vue e como utilizá-lo integrado a HTML, CSS e JavaScript, obtendo o
melhor resultado deste framework para desenvolvimento web.

Videoaula: Introdução ao Vue

Para visualizar o objeto, acesse seu material digital.

COMPONENTES
O framework Vue trabalha com componentes, o que permite que as aplicações fiquem leves, facilmente de
serem integradas a outras plataformas ou scripts. O desenvolvedor pode adaptar os componentes e reutilizá-
los em outras aplicações.

Para o uso do conceito de componentização, normalmente é utilizada a plataforma Git como repositório dos
códigos, permitindo fácil troca de dados na aplicação que é utilizada pelo usuário (VUE, 2021).

Os componentes feitos com códigos Vue são estruturados em HTML, CSS e JavaScript e colocados em um único
arquivo Vue, o que torna o código mais simples de armazenar, localizar e alterar quando necessário
(VILARINHO, 2021). Esses componentes são isolados e podem ser utilizados de diversas formas.

A Tabela 1 traz um componente Vue, no qual aparece um código bastante comum — como o “Hello World”, feito
sempre como exemplo em qualquer linguagem de programação. Observa-se, na linha dois, que o código do
componente Vue é colocado entre quatro chaves — neste caso, a mensagem em tela será “Hello Vue!!”.

Código 1 | Componente “Hello Vue!!”

1 <div id=”app”>

2 {{message}}
3 </div>

4 new Vue({
5 el: ‘#app’,

6 data: {
7 message: “Hello Vue!!”

8 }
9 })

O componente pode estar dentro de qualquer código HTML, com CSS e JavaScript. Ele é criado dentro da
estrutura “HTML, CSS e JavaScript”, o que permite a renderização. A renderização é muito conhecida no
tratamento de imagens; consiste num processo de combinação, para resultar em uma outra imagem. No
desenvolvimento web, em front-end, esse conceito é utilizado para explicar uma atualização forçada: quando
uma página web recebe uma atualização HTML, mas ainda não está completamente formada na tela, a
renderização força a atualização, formando a tela em sua totalidade. Este processo implica em um ganho direto
no desempenho da aplicação para o usuário (VILARINHO, 2021).

Uma das características do Vue é a renderização feita por modelo de objeto de documento (DOM), que
permite atualização apenas quando um dos componentes são alterados; isso melhora o desempenho, evitando
atualizações desnecessárias (VUE, 2021). O modelo utilizado pelo Vue cria um vínculo entre o DOM renderizado
e os dados, possibilitando a renderização dos componentes antes da atualização das páginas no navegador,
bem como o cálculo do número mínimo de componentes que precisam ser renderizados para manter a
atualização das páginas.

A componentização do Vue torna possível que o sistema seja construído a partir dos componentes do software
utilizando a função JSX, que permite criar páginas com melhor navegação para o usuário. Em um caso de e-
commerce, por exemplo, esse modelo permite a escolha de um produto, com tamanho e cor específicos. O
componente faz a busca na base de dados, atualizando a informação, validando se o item consta em estoque
ou não e permitindo ao usuário decidir se quer ou não o item antes de colocar no carrinho de compras.

A capacidade de reatividade do Vue faz uso de JavaScript simples e uma renderização otimizada. Dessa forma,
suas próprias dependências (as chamadas reativas) são controladas ao longo da renderização, com o objetivo
claro de o sistema saber quando deve ser renderizado novamente. O uso de transição de páginas no Vue pode
ser feito de diversas formas, como por transição por CSS, integração de bibliotecas do CSS e uso do JavaScript
para o manuseio do DOM. Ao introduzir um componente de transição, o Vue consegue identificar que elemento
é esse e o que ele utiliza, como animações ou transições CSS, que devem permanecer na transição e ser
aplicados quando necessário.

VIDEOAULA: COMPONENTES
Os componentes fazem parte do desenvolvimento Vue; pois, dessa forma, é possível otimizar a codificação,
também facilita o uso do sistema web pelo usuário. O componente permite, por exemplo, que o usuário escolha
um item de compra e tenha a possibilidade de consultar seu estoque antes de ir para o caixa fazer o
pagamento.

Videoaula: Componentes

Para visualizar o objeto, acesse seu material digital.

CRIAÇÃO DE UMA APLICAÇÃO VUE

As aplicações desenvolvidas utilizando o Vue são as aplicações web. O Vue é open-source, isso significa que é
bastante compatível com diversas plataformas, e todos podem contribuir (VUE, 2021).

As diretivas do Vue são importantes para dar maior interação da aplicação, por meio do JavaScript e HTML como
linguagem de marcação, e retornar os dados em uma busca na base de dados.

A Tabela 1 mostra algumas diretivas do Vue e como elas são aplicadas.

Tabela 1 - Diretivas e usos

Diretiva Uso

v-for a iteração dos dados em uma consulta, em que os dados pesquisados são retornados

v-if para renderização condicional

v-text para demonstração de textos

v-on:event para conexão com eventos em programação orientada a objetos

Fonte: elaborada pelo autor, 2021.

Interface CLI
Uma ferramenta do Vue.js é a interface CLI (command-line interface), que serve para otimizar o processo de
desenvolvimento, permitindo a execução de diversas funções presentes no desenvolvimento front-end
(VILARINHO, 2021).

A primeira delas é a criação de um projeto:

vue create <projeto>

Esta função tem como objetivo iniciar um novo projeto seguindo um projeto pronto. O desenvolvedor cria um
primeiro projeto partindo de algum modelo, o que facilita um primeiro desenvolvimento.

O Vue tem uma série de ferramentas que permitem os usuários realizar buscas nos navegadores.
Conforme Vilarinho (2021), para trabalhar com o Vue, basta ter instalado o Node.js e utilizar o Visual Studio, ou
mesmo Visual Studio Code, para colocar o script do Vue.js dentro do código em JavaScript.

Existem algumas ferramentas que ajudam no uso do Vue — como Vue.js devtools, por exemplo. Ele facilita o
processo do desenvolvimento em Vue; além disso, utiliza o Vue.js como extensão do browser do navegador e
auxilia na renderização (VUE, 2021).

Implementando o Vue com JavaScript

A implementação deve acontecer como a proposta na criação do “Hello Vue!!”, que vimos anteriormente. Vamos
simular a construção de parte de uma loja virtual que vende roupas e sapatos.

Para isso, basta substituir o conteúdo HTML pelo projeto em Vue, como mostra a Tabela 3. Nela há uma série de
itens, que estarão disponíveis em uma lista na tela, para escolha do usuário (VUE, 2021).

Código 2 | Estrutura HTML, com a lista de sapatos

1 <div id="app" class="container">

2 <h2>{{Loja}}</h2>
3 <ul>

4 <li>{{sapatos[0]}}</li>
5 <li>{{sapatos[1]}}</li>

6 </ul>
7 </div>

Neste caso, para que funcione, é importante que sejam mapeados os códigos que foram inseridos na <div>, no
JavaScript. Isto não deve ser feito no index, e sim manualmente (como apresenta o Código 3, nos códigos feitos
em HTML. Abra a ferramenta de desenvolvimento do navegador para esta alteração, dentro da console.

Código 3 | Código HTML para alimentar os dados em Vue.js

1 // Comando 1
2 var data = {

3 Sapatos: ['Mocassim preto', 'Scarpin vermelha'],

4 titulo: 'Sapatos'

5 };
6 // Comando 2

7 new Vue({
8 el: '#app',

9 data: data
10 });

Fonte: elaborado pelo autor, 2021.

O Código 2 traz parte de um código HTML para a criação da lista. Para tanto, é utilizado JavaScript Object
Notation (JSON), para substituir as chaves duplas. Na Tabela 4, o código apresenta os itens da lista e o “new
Vue()”, instanciando um objeto do Vue.js por meio do <div>.

Neste caso, ao término, o usuário verá a lista na tela como apresentado no Código 4, com as opções de escolha
para a compra do sapato na loja virtual:

Código 4 | Lista de sapatos disponíveis no sistema para compra

Fonte: elaborado pelo autor, 2021.

O próximo passo é incrementar a lista de sapatos que temos na loja virtual, dentro do JavaScript, utilizando a
diretiva “v-for” dentro da tag <ul>, como mostrado no Código 5:
 Código 5 | Incremento de uma lista, com uso da diretiva “v-for”

1 <ul>

2 <li v-for="sapatos in sapatos">{{sapato}}</li>

3 </ul>

Fonte: elaborado pelo autor, 2021.

Então, coloque no console o script apresentado no Código 6. Isto acrescentará mais um modelo à lista de
opções de sapatos.

Código 6 | Dados no console

data.sapatos.push("Tênis branco");

Fonte: elaborado pelo autor, 2021.

Assim, teremos:

Código 7 | Lista de sapatos disponíveis no sistema para compra

Fonte: elaborado pelo autor, 2021.

Agora, tente utilizar os exemplos com as diretivas (ou não), dentro de um framework; ou utilizando o Visual
Studio Code, com JavaScript. Muito sucesso no desenvolvimento front-end com Vue!

VIDEOAULA: CRIAÇÃO DE UMA APLICAÇÃO VUE

Trabalhar com Vue permite criar aplicações que melhoram a interação do usuário e dos desenvolvedores com o
sistem.

Videoaula: Criação de uma aplicação Vue

Para visualizar o objeto, acesse seu material digital.

ESTUDO DE CASO
Caro aluno, você é um programador que trabalha com desenvolvimento front-end (que utiliza HTML, CSS e
JavaScript) usando Virtual Studio Code, para construir landing pages nas quais a interação do usuário na
navegação é somente até a primeira página.

Agora você está participando de um projeto para desenvolver o e-commerce de uma livraria, e deve
implementar uma solução de busca de um item na base de dados, ou seja, o cliente que quer comprar um livro
deve entrar no site e procurar pelo livro de interesse (que tem que ser buscado na base de dados.

Como programador, apresente uma solução, utilizando o Vue, para resolver o problema de busca por um item
no estoque para a compra.

RESOLUÇÃO DO ESTUDO DE CASO

Para a solução desta problemática, basta substituir o conteúdo HTML pelo projeto em Vue, como apresentado
no Código 8.

Código 8 | Uso da estrutura HTML com uma lista de livros disponíveis

 1 <div id="app" class="container">
2 <h2>{{Livraria}}</h2>

3 <ul>
4 <li>{{livro[0]}}</li>

5 <li>{{livro[1]}}</li>
6 <li>{{livro[2]}}</li>

7 <li>{{livro[3]}}</li>
8 </ul>

9 </div>

Use o <div> do HTML para colocar o código Vue. Abra a ferramenta de desenvolvimento do navegador para esta
alteração, dentro da console.

Código 9 | Código HTML para alimentar os dados em Vue.js

1 // Comando 1

2 var data = {
3 livro: [‘ A garota do lago - Charlie Donlea’ ‘É Assim que Acaba - Colleen Hoover e Priscila

Catão’ ‘Box Amor & Livros - Jenna Evans Welch, Joana Faro, e outros.’ ‘Mulheres que correm com os
lobos - Clarissa Pinkola Estés’]

4 titulo: 'livros'
5 };

6 // Comando 2
7 new Vue({

8 el: '#app',
9 data: data

10 });

O resultado deve ser como no Código 10.

Código 10 | Lista de sapatos disponíveis no sistema para compra

O próximo passo é incrementar a lista de sapatos que temos na loja virtual, dentro do JavaScript, utilizando a
diretiva “v-for” dentro da tag <ul>, como mostrado na Tabela 11:

Código 11 | Incremento de uma lista com uso da diretiva “v-for”

1 <ul>
2 <li v-for="livros in livros">{{livro}}</li>

3 </ul>

Então, coloque no console o script apresentado na Tabela 12. Isto acrescentará mais um modelo à lista de
opções de livros.

Código 12 | Dados no console

data.livros.push("As obras revolucionárias de George Orwell - Box com 3 livros - George Orwell e Karla

Lima");

Fonte: elaborado pelo autor, 2021.

Assim, teremos:
 Código 13 | Lista de livros disponíveis no sistema para compra

Resolução do Estudo de Caso

Para visualizar o objeto, acesse seu material digital.

 Saiba mais
Para melhor entendimento sobre aplicações web e desenvolvimento front-end que seja melhor para o
usuário, é recomendada a leitura do capítulo “Tecnologias de integração entre sistemas e aplicações”, do
livro Integração de aplicações.

No site oficial da Vue é possível entender melhor como se dá a compatibilidade de frameworks disponíveis
para utilizar Vue.

Instalação do framework Vue: é recomendada a leitura sobre instalação e ambiente no site oficial do
Vue, disponível em “Instalação” — Vue.js (vuejs.org).

Node.js: utilize Visual Studio, da Microsoft, para criar um aplicativo com o Vue.js. Basta ter instalado o
Node.js e começar a trabalhar com Vue. Disponível em: “Criar um aplicativo Vue.js usando o Node.js” —
Visual Studio (Windows) | Microsoft Docs.

Aula 4

REACT
O React é uma biblioteca JavaScript de criação de interfaces para uso do usuário, com código
aberto, mantido pelo Facebook, Instagram e outras empresas de tecnologia.
47 minutos

INTRODUÇÃO
Olá, aluno! O React (React.js ou ReactJS) é uma biblioteca JavaScript de criação de interfaces para uso do
usuário, com código aberto, mantido pelo Facebook, Instagram e outras empresas de tecnologia. Além do
ReactJS, é possível trabalhar com o módulo Native, que permite o desenvolvimento de aplicações para Android
e IOS, sem HTML. Este framework foi um dos mais utilizados pelos desenvolvedores de front-end, assim como o
Angular e o VUE. Essa aderência deve-se ao fato da facilidade de uso.

As bibliotecas disponíveis no React podem ser usadas de acordo com a necessidade, sem obrigatoriedade de
utilização na íntegra. Podem ser manuseadas no próprio HTML, com o Node.js, utilizando o Visual Studio Code
para colocar o código dentro da estrutura HTML, CSS e JavaScript.

Bons estudos!

INTRODUÇÃO E CONFIGURAÇÃO DO AMBIENTE

O ReactJS é uma biblioteca para desenvolvimento web muito utilizada pelos desenvolvedores de redes sociais,
como Facebook e Instagram — aliás, esta biblioteca foi criada pelo Facebook (REACTJS, 2021).

O objetivo desta biblioteca é auxiliar na criação de interfaces para o usuário, e é bastante fácil de usar. Ela
trabalha com componentes; sendo assim, é possível construir uma aplicação de forma bastante intuitiva —
como o conceito de construção de blocos de montagem, montando e empilhando cada uma das partes que
estão sendo desenvolvidas, igual aos jogos de montar (REACTJS, 2021).
O uso de componentes facilita a criação de códigos por reuso, ou seja, o reaproveitamento do código é uma
prática adotada pela facilidade de uso dos componentes. Por conta da reusabilidade, o código pode ser
compartilhado por qualquer repositório de códigos — como o Git, por exemplo, no qual o compartilhamento
entre equipes é fácil e permite interação e troca rápidas —, independentemente de estar na mesma equipe de
trabalho, basta ter acesso à pasta de repositório em que está o código (SILVA, 2021).

Trabalhar por componentes permite que uma pessoa programe um componente enquanto um colega mexe em
outro componente ao mesmo tempo, sem que os trabalhos interfiram um no outro. Ao final, é possível juntar
os componentes em uma aplicação somente.

Os componentes são uma função JavaScript, que misturam HTML com JavaScript por meio do JSX. Portanto,
conhecer bem JavaScript, HTML e CSS permite que você tenha sucesso em desenvolvimento utilizando as
bibliotecas ReactJS (SILVA, 2021).

Para iniciar o trabalho com o ReactJS, é importante ter instalado a ferramenta Node.js e o Virtual Studio Code
(para a edição dos códigos, portanto, você pode utilizar outro editor). Tenha instalado também em sua máquina
o Create React App, que você baixa da internet.

Como é sabido, essa biblioteca foi criada pelo Facebook e tornou-se popular pela facilidade de uso. Assim, o que
é preciso para usar esta biblioteca está disponível na internet com acesso fácil.

Para utilizar o Create React App, entre em: Create React App (create-react-app.dev).

Ele é uma command-line interface (CLI) que compartilha e cria praticamente todo o projeto desde o início
utilizando modelos pré-existentes.

Ao baixar o Create React App, ele instala o package.json, que está presente em todos os projetos Node.

A instalação disponibiliza scripts que serão utilizados na biblioteca React, e o primeiro deles é o “start”. Ele
começa a trabalhar na máquina criando esta aplicação. Deve aparecer algo como na Figura 1, carregando a tela:

Figura 1 | Início de um projeto com ReactJS

O motivo de usar o ReactJS para construir aplicações mais interativas para os usuários é porque ele reage ao
uso de algumas bibliotecas com o HTML, CSS e JavaScript. Assim, você pode utilizar Virtual Studio Code, colocar
o código que quiser e chamar a biblioteca para reagir ao que você quer que ela faça (REACTJS, 2021).

A biblioteca será chamada dentro do código JavaScript que você está programando no Virtual Studio Code.

Os componentes normalmente levam um nome qualquer, com a extensão “JS”. Como dito aqui, o Create React
App pode ajudar muito na criação dos componentes, com modelos que facilitam a programação — pois a ideia
é esta mesmo. Apesar dos modelos prontos, o Create React App permite programar do zero dentro.

Agora, instale a biblioteca, conforme recomendado nesta aula, para utilizar o React de forma correta e
aproveitar todos os recursos oferecidos.

VIDEOAULA: INTRODUÇÃO E CONFIGURAÇÃO DO AMBIENTE

Sobre o primeiro bloco, é importante entender para que serve o React, por que e por quem ele foi criado e
como disponibilizar as bibliotecas para início do trabalho.

Videoaula: Introdução e configuração do ambiente

Para visualizar o objeto, acesse seu material digital.

COMPONENTES
A componentização dentro do ReactJS vem para otimizar o trabalho e ganhar tempo e escalabilidade. Permite
ter várias pessoas ou equipes trabalhando em programação utilizando esta biblioteca e, ao mesmo tempo,
pessoas trabalhando em outros componentes (REACT, 2021).

A escalabilidade do trabalho por componentes possibilita que se economize tempo e, consequentemente,

melhore a qualidade da entrega de um código.

Os componentes REACTJS são compatíveis com o JavaScript, com entradas chamadas props, e servem para
retornar os elementos (REACT, 2021).

Com o uso de componentes, a interface pode ser dividida e suas partes podem ser reutilizadas
independentemente em outros projetos, facilitando o desenvolvimento do sistema e sua utilização (SILVA,
2021).

Existem alguns tipos de componentes no REACTJS. Os mais comuns são componentes funcionais sem estado e
componentes de classe. Ambos controlam o estado da aplicação, bem como controlam e chamam as APIs,
trazendo os dados requeridos para a aplicação (SILVA, 2021).

Os componentes funcionais sem estado são as funções JavaScript. Eles não se envolvem com o estado do
componente na aplicação, apenas com a apresentação do dado na tela.

Já os componentes de classe atuam diretamente na aplicação e, além de controlar o próprio estado, utilizam os
métodos do ciclo de vida do ReactJS (REACT, 2021).

Ambos os componentes recebem os dados via props (ou propriedades), encapsulados.

Nas tabelas abaixo há dois exemplos de código: com componentes funcionais sem estado e componentes de
classe.

O primeiro é um exemplo de componente de classe, na criação de um “Olá, bom dia”.

Código 1 | Componente de classe

1 import react, { Component } from 'react'

2 class Hello extends Component {

3

4 render() {
5

6 return <h3>Olá, bom dia {this.props.name}</h3>

7

8
9 }

10 }

O segundo se trata de um componente funcional sem estado, para criar o famoso “Olá, MUNDO!”.

Código 2 | Componente funcional sem estado

1 import React from 'react'

2
3 const Hello = (props) => <h3>Olá, MUNDO! {props.name}</h3>

Apesar de atuarem de forma diferente, os componentes terão o mesmo resultado esperado; pois, embora
sejam diferentes, têm o mesmo propósito de utilização.

O que difere é a forma de acesso aos dados que serão recebidos pelo props; porque, no componente de classe,
é preciso estender a classe component do REACTJS, acessando os valores pelo “this”.

Do outro modo, o this não faz parte do componente, pois ele acessa os valores do objeto diretamente.

Os dois componentes são muito utilizados, dependendo sempre do resultado que se quer para o sistema.
Nunca escolha um ou outro somente pela facilidade, mas pela qualidade de entrega do que ser quer no
sistema. Optar por um componente funcional sem estado ou de classe depende do que se quer acessar e como
se quer acessar e das suas dependências do sistema (REACT, 2021).
A escolha se dá pela necessidade de uso e pelo resultado que se tem na interface do usuário. Os funcionais são
mais simples e tendem a ser mais ágeis, podendo ser mais utilizados pela simplicidade apresentada. Por outro
lado, avalie se é necessária a execução de tarefas mais complexas; neste caso, a melhor opção é o componente
de classe (REACT, 2021).

VIDEOAULA: COMPONENTES
Este vídeo apresenta o que são os componentes no framework REACTJS, como eles funcionam, para que servem
e quais os melhores momentos de atuação de cada um. A escolha se dá pelo resultado que se quer do sistema
que está sendo construído.

Videoaula: Componentes

Para visualizar o objeto, acesse seu material digital.

CRIAÇÃO DE UM PROJETO COM REACT

Como outros frameworks, o REACTJS não tem problemas ou regras que o façam ter restrições de códigos ou
mesmo imposições; portanto, ele é flexível a ponto de os desenvolvedores poderem criar convenções próprias e
as que melhor trabalhem com o React (SILVA, 2021).

Trabalhar com o React significa poder criar partes da interface ou mesmo toda ela, flexibilizando a forma de
trabalhar com este framework, até mesmo na criação de apps (SILVA, 2021).

O React pode ser utilizado em partes e não depende de uma biblioteca (como o jQuery), mantendo todos os
benefícios de desenvolvimento de uma interface (como o JSX).

O React utiliza JavaScript em seus padrões, e o JSX permite que este framework use os códigos similares ao
HTML. Como no exemplo:

const heading = <h1> Exemplos do uso do Header </h1>;

Especificar uma constante como “heading” é parte do JSX, e o React pode utilizá-la com a tag “h1”. Assim, é
compatível com o JavaScript, bem como com HTML (REACT, 2021).

Ao passar pela compilação, para que a expressão seja aceita pelos navegadores, ela ficaria assim:

1 const header = React.createElement("h1", null, "Exemplos do uso do Header")

2 );

Este exemplo não funcionaria somente deste jeito, mas deve ser adaptado a cada contexto de desenvolvimento,
para o devido funcionamento. Assim, deve ser adequado de acordo com a necessidade de cada código.

Um exemplo muito simples é o do HTML com o JSX. Nesse contexto, é bastante fácil usar o JSX. Ao acostumar-se
com essa forma de trabalhar, tudo se torna mais simples.

Criação do primeiro componente React

A criação de um componente React permite sempre a reutilização do código, como forma de melhorar o código
existente; então, sempre recorra ao Git como repositório de códigos. O exemplo de código da Tabela 3 mostra a
criação de um cabeçalho com uma imagem; depois a exportação desse app, que poderá ser resgatado de algum
repositório e certamente reutilizado como uma biblioteca. A exportação do app permite que ele seja utilizado
como uma biblioteca, como apresentado na linha 16 do Código 3.

Código 3 | App1
 1 import React from 'react';
2 import './App1.css';

3
4 function App() {

5 return (
6 <div className="App1">

7 <header className="App1-header">
8 <img src={tipo} className="App1-tipo" alt="tipo" />

9 <p>
10 Edit <code>src/App.js</code> and save to reload.

11 </p>
12 </header>

13 </div>
14 );

15 }
16 export default App1;

Declarar as importações possibilita a utilização desta biblioteca no projeto, como apresentado nas linhas 1 e 2
da Tabela 3. Bem como a exportação, colocada na linha 16. Dessa forma, o componente poderá ser utilizado
como biblioteca de outro sistema, sendo chamado pelo “import”.

O conceito do uso do React como uma biblioteca pode ser aplicado no “HELLO WORLD!”. O resultado seria o
mostrado no Código 4, utilizando HTML e JavaScript, com uma biblioteca REACT:

Código 4 | HELLO WORLD!

1 function App1() {
2 return (

3 <div className="App1">
4 <header className="App-header">

5 <img src={tipo} className="App-tipo" alt="tipo" />

6 <p>

7 HELLO WORLD!
8 </p>

9 </header>
10 </div>

11 );
12 }

Outras bibliotecas que reagem e se integram com o JSX do JavaScript podem ser criadas, para o
desenvolvimento front-end.

Sendo assim, no REACT, os componentes importam módulos, que são exportados no final do componente. Os
componentes recebem as nomeações, chamados de PascalCase (a primeira letra de cada palavra é maiúscula,
e deve ser escrito respeitando este critério).

Dentro do React, as variáveis do JSX são colocadas entre chaves: { desta forma }. Os atributos não são os
mesmos do HTML, respeitando as regras do JavaScript. E os props, citados no início desta aula, são atributos
que invocam os componentes.

Agora é hora de testar uma solução, para experimentar uma biblioteca!

VIDEOAULA: CRIAÇÃO DE UM PROJETO COM REACT

Trabalhar com REACTJS é poder criar interfaces melhores e aplicações mais atraentes tanto para usuários
quanto para desenvolvedores.

Videoaula: Criação de um projeto com React

Para visualizar o objeto, acesse seu material digital.

ESTUDO DE CASO
Você é desenvolvedor de sistemas web, e atua em uma grande empresa de consultoria em T.I. Seu trabalho é
utilizar HTML, CSS e JavaScript, com o Virtual Studio Code, para construir landing pages cuja interação do
usuário na navegação é somente até a primeira página.

Você está participando de um projeto de desenvolvimento de um sistema web, para que os alunos de uma
universidade possam se comunicar de forma segura em uma rede social fechada da universidade. Neste
sistema, o aluno poderá conversar com outras pessoas que fazem parte da universidade e com grupos aos
quais ele pertence.

Você deverá implementar uma solução para que o sistema funcione com os alunos — utilizando a aplicação em
um navegador web, sem restrição de uso pelo navegador escolhido —, para que eles conversem com pessoas
da sua turma e de toda a universidade. A solução inicial deve ser a construção de uma lista de tarefas, a partir
da qual o aluno pode se manter atualizado quanto às entregas que devem ser feitas.

Utilizando REACTJS, apresente uma solução para esta problemática.

RESOLUÇÃO DO ESTUDO DE CASO

Uma forma de fazer com que a aplicação funcione bem em qualquer navegador é utilizar o JSX e implementar
uma solução com o REACT, pois este facilitará o acesso ao navegador pelo usuário.

Para criar um projeto, abra o terminal do Virtual Studio Code e use o comando:

npx create-react-app teste

Apague a pasta “public” e a pasta “src”. A seguir, crie dois arquivos:

public/index.html

src/index.js

No arquivo HTML, (Tabela 5), adicione o código:

Código 5 | Arquivo public/index.html

1 <!DOCTYPE html>

2 <html lang="pt-br">
3 <head>

4 <title>Lista de compras</title>
5 <meta charset="utf-8">

6 </head>
7 <body>

8 <div id="todos-example">
9

10 </div>
11 </body>

12 </html>

Utilize o props para que seu código fique mais simples e um componente chame o outro, facilitando o
desenvolvimento do código.

Para facilitar a solução, combine pequenos componentes: uns serão chamados por outros, a fim de criar
combinações de componentes. Isso deixa o sistema mais ágil, independentemente de qual seja.

A seguir, como uma solução possível, segue um componente React combinado para criar um avatar de
identificação do usuário por meio de uma imagem na rede social, permitindo o acesso e, então, a comunicação
com outras pessoas que fazem parte do mesmo sistema.

No Código 6 é possível ver linha a linha do componente. Suas duas primeiras linhas fazem a importação das
bibliotecas, e a última linha faz a exportação do componente.

Código 6 | Arquivo src/index.js

1 import React from "react"
2 import ReactDOM from "react-dom"

3
4 class TodoApp extends React.Component {

5 constructor(props) {
6 super(props);

7 this.state = { items: [], text: '' };

8 this.handleChange = this.handleChange.bind(this);

9 this.handleSubmit = this.handleSubmit.bind(this);
10 }

11
12 render() {

13 return (
14 <div>

15 <h3>Tarefas</h3>
16 <TodoList items={this.state.items} />

17 <form onSubmit={this.handleSubmit}>
18 <label htmlFor="new-todo">

19 O que precisa ser feito?

20 </label>

21 <input
22 id="new-todo"

23 onChange={this.handleChange}
24 value={this.state.text}

25 />
26 <button>

27 Adicionar #{this.state.items.length + 1}
28 </button>

29 </form>
30 </div>

31 );
32 }

33
34 handleChange(e) {

35 this.setState({ text: e.target.value });

36 }

37
38 handleSubmit(e) {

39 e.preventDefault();
40 if (this.state.text.length === 0) {

41 return;
42 }

43 const newItem = {
44 text: this.state.text,

45 id: Date.now()
46 };

47 this.setState(state => ({
48 items: state.items.concat(newItem),

49 text: ''
50 }));

51 }
52 }

53
54 class TodoList extends React.Component {

55 render() {
56 return (

57 <ul>
58 {this.props.items.map(item => (

59 <li key={item.id}>{item.text}</li>
60 ))}

61 </ul>
62 );

63 }
64 }

65
66 ReactDOM.render(

67 <TodoApp />,
68 document.getElementById('todos-example')
 69 );

Fonte: REACT, 2021. Disponível em: React – Uma biblioteca JavaScript para criar interfaces de usuário (reactjs.org).

Este componente permite que os alunos possam acompanhar uma lista atualizada das atividades pendentes na
universidade.

Para executar o projeto, rode no terminal o comando:

npm start

Logicamente utilize este exemplo fazendo as adaptações necessárias, para que as necessidades de seu projeto
sejam atendidas. O importante a se lembrar é que o React utiliza sempre o HTML e o JavaScript como base para
a sua biblioteca.

Bons estudos!

Resolução do Estudo de Caso

Para visualizar o objeto, acesse seu material digital.

 Saiba mais
Como leitura complementar, visando a entendimento do React Native para desenvolvimento mobile, é
recomendado ler o capítulo “Introdução ao desenvolvimento para dispositivos móveis”, do livro
Desenvolvimento para dispositivos móveis - Volume 2, que está em nossa Biblioteca Virtual.

REACTJS

É recomendado o acesso ao site React – Uma biblioteca JavaScript para criar interfaces de usuário
(reactjs.org), a fim de conhecer algumas bibliotecas, exemplos, cases e como criar suas bibliotecas no Git.
Aproveite para entender como este framework funciona!

REFERÊNCIAS
3 minutos

Aula 1
IEEE XPLORE. Terminology. 2022. Disponível em: https://bit.ly/3K1b5fv. Acesso em: 3 jan. 2022.

FLANAGAN, David. JavaScript: The Definite Guide: Activate Your Web Pages. 6th edition. Sebastopool: O’Reily
Media, 2011.

MANIERO, Antonio. Qual é a diferença de API, biblioteca e Framework? Disponível em:

https://bit.ly/333MB4K. Acesso em: 11 jan. 2022.

MINETTO, E. L. Frameworks para desenvolvimento em PHP. São Paulo: Novatec, [s. d.]. Disponível em:
https://bit.ly/3tj0RRS. Acesso em: 3 jan. 2022.

ROBERTS, D.; JOHNSON, R. Envolving frameworks: a pattern language for developing object-oriented
frameworks. [s. d.]. Disponível em: https://bit.ly/3FmDh8R. Acesso em: 3 jan. 2022.

SILVA. E. 10 frameworks e bibliotecas JavaScript mais importantes do mercado. 2020. Disponível em:
https://bit.ly/3GiwnmB. Acesso em: 3 jan. 2022.

UZAYR, S. bin. et al. JavaScript frameworks for modern web development: the essential frameworks,
libraries, and tools to learn right now. 2. ed. [S. l.]: Apress, 2019.

W3SCHOOLS. AngularJS introduction. 2022a. Disponível em: https://bit.ly/3nfwU10. Acesso em: 3 jan. 2021.

W3SCHOOLS. What is Vue.js? 2022b. Disponível em: https://bit.ly/3r7A4Fp. Acesso em: 3 jan. 2021.

ZANETTE, Alysson. Framework x Biblioteca x API. Entenda as diferenças. Disponível em:

https://bit.ly/3zKdeHK. Acesso em: 11 jan. 2022.

Aula 2
ANGULAR. Create a new project. 2021a. Disponível em: https://bit.ly/3FhOcRi. Acesso em: 4 jan. 2022.
ANGULAR. Getting started with angular. 2021b. Disponível em: https://bit.ly/34IRoZN. Acesso em: 4 jan. 2022.

ANGULAR. Ng generate. 2021c. Disponível em: https://bit.ly/3K1hB5M. Acesso em: 4 jan. 2022.

ANGULAR. What is angularJS? 2020. Disponível em: https://bit.ly/3njDYts. Acesso em: 4 jan. 2022.

ANGULAR. Workspace npm dependencies. 2021d. Disponível em: https://bit.ly/3K0exae. Acesso em: 4 jan.
2022.

BRANAS, R. AngularJS essentials. 1. ed. Birmingham: Packt Publishing, 2014.

DIETZ, F. AngularJS succinctly. 1. ed. [S. l.]: Syncfusion, 2013.

FLANAGAN, D. Javascrit o guia definitivo. 6 ed. Sebastopol: O’REILLY, 2011.

GREEN, B.; SESHADRI, S. AngularJS. Sebastopol: O’REILLY, 2013.

KAUFMAN, N.; TEMPLIER, T. Angular 2 components. 1. ed. Birmingham: Packt Publishing, 2016.

KOZLOWISKI, P.; DARWIN, P. Web mastering web application development with angularJS. Birmingham:
Packt Publishing, 2013.

NODE. Download for Windows (x64). [s. d.]. Disponível em: https://bit.ly/3zQc3Xq. Acesso em: 4 jan. 2022.

NPM. Angular CLI. 2021. Disponível em: https://bit.ly/3zMZcVR. Acesso em: 4 jan. 2022.

STEWART, R. AngularJS: a comprehensive beginner’s guide. 2. ed. Missouri: NLN LLCC, 2021.

W3SCHOOLS. AngularJS tutorial. 2022. Disponível em: https://bit.ly/3GmSb0u.

Aula 3
Vue.js - O Framework JavaScript Progressivo. 2021. Disponível em Vue.js (vuejs.org). Acesso em: 28 out. 2021.

INCAO, Caio, Vue.js: Construa aplicações incríveis. Casa do Código. 2017.

VILARINHO, Leonardo, Front-end com Vue.js: Da teoria à prática sem complicações. Casa do Código 2021.

Aula 4
ReactJS. React – Uma biblioteca JavaScript para criar interfaces de usuário. Disponível em: reactjs.org.
Acesso em: 29 dec. 2021.

SILVA, Maurício Samy. React - Aprenda Praticando: Desenvolva Aplicações web Reais com uso da Biblioteca
React e de Seus Módulos Auxiliares. Novatec, 2021.