Frameworks - Bibliotecas Para Desenvolvimento Em Javascript

Introdução a frameworks em Javascript

Estudante, esta videoaula foi preparada especialmente para você. Nela, você irá aprender conteúdos importantes para a sua formação profissional. Vamos assisti-la? 
Clique aqui para acessar os slides da sua videoaula.
Bons estudos!

Ponto de Partida

Olá, estudante! É com muito prazer que chegamos à fase final de nossa disciplina conhecendo os principais frameworks utilizados para o desenvolvimento de aplicações com a linguagem Javascript.

Neste primeiro momento, você conhecerá as características que tornam essas ferramentas indispensáveis no processo de desenvolvimento. É isso mesmo, muitos desses frameworks são utilizados no dia a dia de qualquer pessoa que atue com desenvolvimento, pois, de maneira geral, os frameworks oferecem celeridade e aumento da produtividade na tarefa de desenvolvimento.

Para ingressar no mundo dos frameworks Javascript, como desafio, você deverá montar uma pequena aplicação com um único objetivo: realizar a validação de um campo de e-mail. Esse desafio consiste em montar, utilizando Angularjs, um código que verifique, enquanto o usuário está digitando, se se trata de um e-mail válido ou não; caso o usuário informe o e-mail corretamente, ao final, a aplicação não exibirá nenhum tipo de mensagem.

Vamos iniciar esta jornada de muito conhecimento acerca dos frameworks disponíveis no mercado? Espero que goste do que está por vir.

Bons estudos!

Vamos Começar!

Conceito de frameworks

Antes de iniciarmos, é importante que saiba que a linguagem Javascript é uma linguagem poderosa e cumpre bem o seu propósito, no entanto, a criação de frameworks é algo que tem acontecido com regularidade, pois utilizar esse tipo de ferramenta apresenta diversas vantagens, como veremos ao longo desta aula.

Frameworks são plataformas de desenvolvimento que fornecem modelos básicos com diferentes funcionalidades já implementadas, que podem ser utilizadas ou não pelo desenvolvedor (Zabot; Matos, 2020). Outra definição possível é que frameworks são um conjunto de códigos de uma linguagem de programação específica que auxiliam o desenvolvimento de projetos como de web, softwares, games, aplicativos, entre outros (Cardoso, 2021).

Os frameworks dão maior celeridade e agilidade ao processo de desenvolvimento, tornando vantajoso o seu uso por diversos motivos, e um dos principais é a diminuição de esforço (Marcolino, 2021). Outra característica importante dos frameworks é que eles trazem um conjunto de recursos, como grupos de bibliotecas, que possibilitam que os criadores executem alterações de operações de grande volume com maior agilidade e em pouco tempo (Carodoso, 2021). 

Diferença entre frameworks e APIs

As APIs são diferentes dos Frameworks. Você já compreende o conceito de framework e entende as implicações que essa palavra traz a uma pessoa que trabalha com programação; Já as APIs é um acrônimo para Application Programming Interface, que, traduzido para o português, significa Interface de programação de aplicativos. De uma forma muito simples, quando falamos de uma Web API, dizemos que uma API é uma aplicação que serve recursos para outra aplicação. Por exemplo, você já fez uso de uma API, a API da ViaCEP, para que sua aplicação de cadastro de endereço consulte um dado endereço a partir do fornecimento do número do Código de Endereçamento Postal, o famoso CEP, você se recorda disso? Nesse caso, a API é uma aplicação que consulta os dados de endereço (rua, bairro, cidade e estado) a partir do CEP informado na sua aplicação e devolve para os dados mencionados, mas isso não significa que poucas são as APIs disponíveis para uso.

Existem várias APIs disponíveis para uso, muitas delas conhecidas pela maioria das pessoas. Existem APIs para análise de dados, APIs para Cloud, APIs de segurança e identidade e muitas outras (Google APIs Explorer, 2023). 

Siga em Frente...

Principais frameworks em Javascript

Quando se trata de desenvolvimento Javascript, existe um número relativamente grande de frameworks disponíveis no mercado, no entanto, falaremos, basicamente, de 3, e o primeiro deles é o Vue.js

• Vue.js: trata-se de um framework progressivo para a construção de interfaces de usuário e tem uma peculiaridade muito importante: é um framework que foi projetado para ser utilizado de modo incremental, ou seja, apenas parte dele pode ser adotada (Marcolino, 2021).
• Angular: esse framework passou por várias modificações, iniciando-se como AngularJS — versão que ainda é utilizada em várias aplicações legadas. Uma vez que sofreu com muitos problemas, ao longo de sua história, evoluiu para sua versão atual, chamada somente angular (Marcolino, 2021). Essa ferramenta é considerada parte integrante da chamada Plataforma de Desenvolvimento Angular, que também inclui framework baseado em componentes para criação de aplicações web escaláveis, bem como conta, ainda, com uma coleção de bibliotecas bem definidas que servem para lidar com uma variedade de necessidades, incluindo rotinas, gerenciamento de formulários e muito mais (Marcolino, 2021).
• React: essa ferramenta, na verdade, está mais para uma biblioteca declarativa de interface de usuário, sendo adequada para o uso do padrão MVC (Model-View-Controler), além de apresentar uma performance muito boa, uma vez que permite atualizar o DOM apenas nos elementos que cria/altera (Marcolino, 2021).

Características	Angular	Vue	React
Quanto ao tipo de padrão arquitetural indicado.	Não segue um padrão específico em sua documentação.	É inspirado no padrão Modelo-Visão-VisãoModelo.	É baseado no padrão Model-View-Controler.
Quanto ao suporte da documentação e da comunidade.	Destaca-se negativamente por não possuir fórum para dúvidas.	Possui comunidade no Discord.	Possui comunidade no Discord.
Tamanho de pacotes de arquivos.	Num mesmo projeto, o angular gera arquivos maiores.	Apresenta tamanho intermediário entre os 3 comparados.	É o que apresenta o menor tamanho de arquivos de projeto.
Tempo de renderização.	Apresenta o pior desempenho na renderização.	Apresenta desempenho intermediário na renderização.	Renderiza mais rápidos seus projetos.

Quadro 1 | Comparativo. Fonte: adaptado de Marcolino (2021).

Vamos Exercitar?

Para o estudo introdutório dos frameworks e de acordo com o desafio apresentado no início da aula, devemos montar uma pequena aplicação, algo simples, que servirá para validação de um campo do tipo e-mail, de formulário. Para cumpri-lo, vamos utilizar o framework Angular, mas note que, nesse momento, não é necessário instalar nada. Quanto a esse projeto, temos algumas maneiras de solucioná-lo, contudo, agora, vamos trabalhar com algumas diretivas disponíveis no Angular. São elas:

Diretiva	Descrição
ng-controller	Atribui uma classe de controller à uma View.
ng-disabled	Define atributo de um elemento como desativado.
ng-app	Designa o elemento root da aplicação e é utilizado próximo ao elemento raiz da página (<body> e <html>).
ng-show	Mostra ou oculta um elemento HTML de acordo com a expressão fornecida nessa diretiva.

Quadro 2 | Diretivas disponíveis no Angular. Fonte: adaptado de Angular (2023).

Para tornar o projeto o mais simples possível, não criaremos um arquivo para alocar o código Javascript; faremos tudo dentro do código HTML e utilizaremos a rede distribuída de conteúdo do Angularjs, que está disponível no site de mesmo nome, angularjs.org. Aliás, vale lembrar que temos, também, muito material disponível em Angular.io.

Montamos a estrutura do código HTML que ficará da seguinte maneira:

Nessa primeira parte do código, inserimos o caminho do script do angularjs que está hospedado na estrutura do Google, mas note que vamos utilizar, também, o bootstrap 5, para fazer a estilização do projeto.

No corpo da página, inserimos as classes que utilizamos do bootstrap e invocamos as diretivas que são necessárias para a criação da validação de e-mail; agora, vamos inserir um bloco de script, antes do fechamento do <body>, para criar o módulo cujo parâmetro se refere ao elemento HTML no qual a aplicação será executada. Veja:

Saiba mais: O projeto está disponível no endereço bit.ly/validaEmail-Angular e pode ser baixado na íntegra. Nesse repositório, também é possível testar a aplicação funcionando.

Saiba Mais

Conheça algumas das principais diretivas do Angular:

ANGULAR. Directive components in ng. 2022.

Sugerimos a leitura de Frameworks back end, de Leandro da Conceição Cardoso.

CARDOSO, L. da C. Frameworks back end. São Paulo: Platos Soluções Educacionais S.A., 2021.

Conheça a seguir um conjunto de APIs fornecido só pela Alphabet, empresa dona de ferramentas como Google e Gmail. Disponível em:. Acesso em: 16 jan. 2024.

GOOGLE APIs EXPLORER. APIs Explorer do Google. [s. d.]

Sugerimos, também, a leitura do capítulo Diferenciando e escolhendo um framework front end, do livro Frameworks Front End, de Marcolino.

MARCOLINO, A. da S. Frameworks front end. São Paulo: Platos Soluções Educacionais S.A., 2021.

Referências Bibliográficas

ANGULAR. AngularJS to Angular concepts: quick reference. [s. d.]. Disponível em: https://angular.io/guide/ajs-quick-reference. Acesso em: 16 jan. 2024. 

CARDOSO, L. da C. Frameworks backend. São Paulo: Platos Soluções Educacionais S.A., 2021. 

GOOGLE APIs EXPLORER. APIs explorer do Google. [s. d.]. Disponível em: https://developers.google.com/apis-explorer?hl=pt-br. Acesso em: 16 jan. 2024. 

MARCOLINO, A. da S. Frameworks front end. São Paulo: Platos Soluções Educacionais S.A., 2021. 

W3C. Web APIs: introduction. 2023. Disponível em: https://www.w3schools.com/js/js_api_intro.asp. Acesso em: 16 jan. 2024. 

ZABOT, D.; MATOS, E. Aplicativos com bootstrap e angular: como desenvolver apps responsivos. São Paulo: Erica, 2020.

Angular

Estudante, esta videoaula foi preparada especialmente para você. Nela, você irá aprender conteúdos importantes para a sua formação profissional. Vamos assisti-la? 
Clique aqui para acessar os slides da sua videoaula.
Bons estudos!

Ponto de Partida

Olá, estudante! Nesta aula, vamos fazer uma imersão no framework Angular, conhecer um pouco sua história, como surgiu e entender em que momento estamos com relação à ferramenta, no que diz respeito à sua versão e funcionalidades. Além disso, faz-se importante, também, entender onde encontrar material sobre esse framework, pois a documentação faz toda a diferença quando alguém deseja adotar o Angular em sua rotina de programação.

Para assegurarmos de que você entendeu bem como utilizar esse framework, você terá um novo desafio, deverá criar o ambiente de desenvolvimento utilizando Angular. Caso queira, poderá, também, utilizar o Bootstrap para estilizar o seu projeto. A ideia é ajustar o nosso formulário de login, aquele que já desenvolvemos anteriormente, ao framework em questão. Fique à vontade para usar sua criatividade e não se esqueça de utilizar o bootstrap na versão 5.x.

E aí, preparado para essa jornada de conhecimento e aprofundamento em tecnologias Javascript? Esperamos que sim. Vemo-nos na linha de chegada. 

Vamos Começar!

Introdução e configuração do ambiente

O Angular tem uma longa história desde sua criação; ele foi lançado e por muito tempo mantido pela empresa Google (Zabot, 2020), tendo como propósito servir para desenvolvimento de aplicativos de página única (single-page application), sendo uma plataforma de desenvolvimento escrita em typeScript (Angular, 2023).

Para conseguir configurar o ambiente do Angular em seu computador, é necessário instalar o Node.js (dê preferência à versão LTS, que significa Long-term support, que nada mais é do que uma versão cuja estabilidade é de maior tempo) (NODEJS, 2023) e o npm, que é uma espécie de gerenciador de pacotes utilizado por desenvolvedores do mundo todo para se compartilhar e emprestar pacotes (Npm, 2023).

Após instalar o node.js e o npm, será a vez de instalar o Angular CLI, que permitirá que você crie projetos, gere aplicações e bibliotecas, bem como exercite uma variedade de tarefas de desenvolvimento contínuas, como teste, agrupamento e implantação (Angular, 2023). Para verificar se está tudo certo, basta que você digite os seguintes comandos no prompt de comando do seu computador:

Agora, instale o Angular CLI. Ainda utilizando o prompt de comando, digite o seguinte comando: npm install -g @angular/cli. Esse comando instalará o Angular CLI de forma global, ou seja, caso queira criar algum projeto, independentemente da pasta que esteja acessando, você poderá criá-lo (Angular, 2023).

Pronto, seu computador está preparado para iniciar a criação de aplicações utilizando o framework Angular. 

Componentes e módulos

A depender do projeto para o qual se pretende criar uma solução utilizando o Angular, é preciso pensar em conceitos próprios desse framework, como é o caso das rotas. Imagine que você pretende desenvolver um aplicativo para celular que tem como característica ser de página única, porque não há tempo para espera de carregamento de telas diferentes; nesse caso, você deverá utilizar o routing de páginas (Zabot, 2020). Com Angular, é possível criar sites com várias páginas que se parecem com aplicações dessa natureza de navegabilidade utilizando routing.

Após o processo de criação de um novo projeto, o Angular terá criado uma pasta do projeto com quase 30.000 arquivos (Zabot, 2020), em que a maioria será de definições da plataforma ou de utility, mas não se preocupe, nesses arquivos, não é necessário fazer qualquer alteração. O framework inclui um servidor para testar o app localmente, e isso é fundamental para se verificar o funcionamento.

Para que isso seja feito, no entanto, é necessário executar o comando ng serve, que inicializa um servidor na porta 4200 do localhost, permitindo o acesso à aplicação no seguinte endereço: http://localhost:4200.

Um componente é composto de um arquivo CSS, um HTML e um arquivo Typescript. Veja um exemplo de estrutura de pastas e arquivos de um projeto feito com o framework:

De acordo com Zabot (2020), os arquivos constantes na pasta app significam: 

• app.module.ts: módulo indicador das informações básicas do app.
• app.component.css: arquivo em que se encontra a configuração de estilo com CSS.
• app.component.html: contém o HTML do componente.
• app.component.ts: contém o controlador em código TypeScript.

Siga em Frente...

Criando um projeto com angular

Agora que já entendemos bem como funciona a configuração e a preparação de ambiente, bem como conhecemos os principais componentes de uma aplicação, vamos criar o nosso próprio projeto. O nome da nossa aplicação será formLogin, então, para criar essa aplicação, utilizaremos o seguinte comando: ng new formLogin.

Após o comando, o processo perguntará se desejamos utilizar routing e qual tipo de folha de estilo desejamos utilizar em nosso projeto. Basta, então, pressionar Enter e será escolhida a opção padrão, que é a que aparece em maiúsculo. Por exemplo (y/N) será escolhido o N, ou seja, não. Veja o resultado:

Abra a pasta criada no VSCode e você verá que a árvore de diretório do nosso projeto ficará da seguinte maneira:,

Para deixar seu computador totalmente preparado, instale a extensão Angular Extension Pack, que facilitará o seu trabalho no desenvolvimento de aplicações no VSCode. Veja:

Pronto, agora é arregaçar as mangas e criar aplicações incríveis feitas com Angular. 

Vamos Exercitar?

Nós já construímos nossa aplicação ao longo desta aula, agora, vamos utilizar o projeto criado para adequá-lo à necessidade do nosso desafio, que é criar um formulário de Login utilizando Angular. Antes de mais nada, vamos levantar o servidor para verificar como está nossa aplicação, para isso, abra o terminal no VSCode no menu Terminal > New Terminal; em seguida, digite o comando ng serve e aguarde; será feita a build da aplicação e aparecerá o endereço para acessá-la. Veja:

Abra a aplicação no navegador, no endereço http://localhost:4200, e veja o resultado. Vamos substituir o código gerado automaticamente pelo código de nossa tela de login; para isso, no VSCode, acesse o diretório src > app > app.component.html e apague todo o conteúdo desse arquivo; em seguida, basta colocar nele o código de sua tela de login, criado anteriormente. Lembre-se de trocar, também, o nome do arquivo CSS, porque, agora, no Angular, o nome deve ser app.component.css. Aproveite para colocar dentro desse arquivo o código css que você já havia feito. Caso prefira, basta utilizar o Bootstrap 5 para estilizar seu projeto.

Veja como ficará a aplicação:

Saiba Mais

Sugerimos que você leia a respeito dos passos necessários para a criação da primeira aplicação utilizando Angular.

ANGULAR. Build your first Angular app. 2023.

Leia também o Capítulo 11 da obra Aplicativos com bootstrap e angular – como desenvolver apps responsivos sobre o Angular, em que você encontrará diversas informações, inclusive, sobre o processo de instalação.

ZABOT, D.; MATOS, E. Aplicativos com bootstrap e angular – como desenvolver apps responsivos. São Paulo: Erica, 2020.

Referências Bibliográficas

ANGULAR. Introduction to the Angular docs. 2024. Disponivel em: https://angular.io/docs. Acesso em: 16 jan. 2024.

NODEJS. Node.js 20 changelog. [s. d.]. Disponível em: https://github.com/nodejs/node/blob/main/doc/changelogs/CHANGELOG_V20.md#20.9.0. Acesso em: 10 nov. 2023.

NPM DOCS. About npm. 2023. Disponível em: https://docs.npmjs.com/about-npm. Acesso em: 16 jan. 2024.

ZABOT, D.; MATOS, E. Aplicativos com bootstrap e angular: como desenvolver apps responsivos. São Paulo: Erica, 2020.

Vue

Estudante, esta videoaula foi preparada especialmente para você. Nela, você irá aprender conteúdos importantes para a sua formação profissional. Vamos assisti-la? 
Clique aqui para acessar os slides da sua videoaula.
Bons estudos!

Ponto de Partida

Olá, estudante! Desta vez, vamos ampliar nossos conhecimentos e falar um pouco sobre o framework Vue.js. Como acontece com outros frameworks disponíveis no mercado, Vue é uma dessas tecnologias que dispõe de diversas características que tornam o seu uso uma vantagem, a depender do projeto que se pretende desenvolver.

E para proporcionar uma prática que assegure a fixação dos conhecimentos propostos nesta aula, você terá de construir uma aplicação semelhante ao formulário de cadastro que já construiu, no entanto, faremos os recursos definidos em Javascript funcionarem dentro de um projeto feito com Vue.js. 

O que você está achando desta oportunidade de estudar um novo framework e, ainda, um framework solicitado por várias empresas no mercado? Já pensou em ingressar numa grande empresa para atuar como responsável pelo desenvolvimento de aplicações utilizando framework Vue? Pois é, você pode! É só embarcar conosco no conteúdo desta aula.

Bons estudos!

Vamos Começar!

Introdução ao Vue

Em primeiro lugar, é importante que você entenda um pouco as características que o tornam um dos melhores frameworks para se utilizar na programação front-end.

Vue.js é um framework Javascript que, com Angular e React, integram o que chamamos de segunda geração de frameworks dessa linguagem (Marcolino, 2021). Segundo Marcolino, uma das principais características que tornam o Vue.js tão atrativo para os desenvolvedores é ser um framework progressivo, ou seja, não precisa ser adotado em sua totalidade no momento de desenvolver um dado projeto. Outro ponto apresentado é que Vue é um framework mantido e atualizado pela comunidade, por meio de doações.

O Vue também é considerado uma estrutura Javascript para construção de interfaces de usuário. Baseado em HTML, CSS e Javascript, ele fornece um modelo de programação declarativo e baseado em componentes que aumenta a eficiência no desenvolvimento de interfaces de usuário (VUE, 2023).

Assim como angular, para utilizar o Vue.js, é necessário instalar o Node.js. Com essa etapa superada, pode-se, então, instalar o Vue.js com o seguinte comando: npm install vue.

O resultado da instalação será algo semelhante à imagem a seguir:

Faça a instalação com CLI globalmente, pois isso auxiliará na construção de projetos do tipo single Page Applications. Aliás, instale digitando o seguinte comando: npm install –g @vue/cli.

Agora, como um exemplo de como criar um novo projeto utilizando esse framework, vamos criar um com o nome formCadastro, para montar nosso primeiro projeto com Vue.js.

Note que existem, ao menos, três maneiras distintas de criar um projeto, e a primeira forma pode ser executada da seguinte maneira: > npm create vue@latest.

Também é possível utilizar o comando npm create vue@next, e ambos funcionam para construção de projetos.

Com o CLI instalado, é possível, ainda, criar um projeto de forma mais simples, utilizando o seguinte comando: vue create <nome-do-projeto>.

Se utilizar uma das duas maneiras apresentadas no comando, você será apresentado a vários recursos opcionais que poderão ser instalados, mas que, neste primeiro momento, marcaremos todos como “No”, ou seja, não instalaremos nenhum. Veja o resultado:

Veja como fica a árvore de diretórios de um projeto Vue.js dentro do VSCode:

A criação de projeto utilizando o CLI pode perguntar qual versão do Vue.js você deseja escolher, e isso será feito de forma manual, como a imagem apresentada a seguir:

Opte pela versão mais atual; em seguida, será feita a inicialização de plugins CLI, o que pode levar um tempo. Ao final, você verá como resultado algo semelhante à imagem que segue:

Para finalizar, existem diversas extensões disponíveis no VSCode para serem utilizadas com Vue.js. Uma bem recomendada é a Vetur, conforme imagem a seguir: 

Agora, você está pronto para trabalhar com Vue.js; é só começar a criar excelentes aplicações.

Siga em Frente...

Componentes VUE

O Vue.js oferece vários recursos, e um deles é a possiblidade de se trabalhar com componentes. Um componente é uma unidade de uma interface independente e pode possuir seu próprio estado, marcação (Marcolino, 2021). Um componente pode ser considerado uma maneira de dividir uma interface em pedaços, de modo a permitir sua montagem como se fosse um jogo de quebra-cabeça (Vue. Js Brasil, 2023).

Um bom exemplo de componente no desenvolvimento de aplicações com uso de Vue.js é permitir que o usuário, no contexto de um site de e-commerce, escolha um item de compra e verifique o estoque desse item antes de encaminhá-lo para área de pagamento da aplicação.

Criando um projeto com VUE

Vamos trabalhar, neste momento, para adequar nosso formulário de cadastro, um projeto no qual já trabalhamos, ao framework Vue.js, para tanto, abriremos a aplicação no VSCode.

Como você deve ter notado, na tela de criação do projeto usando o CLI, ao final, é possível ver o comando necessário para rodar o build da aplicação. No VSCode, abra o terminal, digite npm run serve e veja que a aplicação será levantada na porta 8080, por padrão. O resultado será semelhante à imagem a seguir:

Agora, remova o arquivo que está no diretório src > components > HelloWorld.vue. No arquivo que está em src > App.vue, apague o conteúdo que está entre <template> </template>, remova a linha que aparece import HelloWorld from './components/HelloWorld.vue' e modifique o seguinte código:

Mude esse	Para esse
export default {   name: 'App',   components: {     HelloWorld   } }	export default {   name: 'App', }

 Quadro 1 | Código a ser modificado. Fonte: elaborado pelo autor.

Agora, dentro dos elementos <template></template>, no arquivo App.vue, o código do formulário deve ser inserido, ficando da seguinte maneira:

Abaixo, no mesmo arquivo, entre os elementos <style scoped> </style>, insira o código CSS do projeto de formulário feito anteriormente. Agora, no arquivo que está em public > index.html, deixe dentro do <body> </body> apenas o seguinte código: <div id=”app”></div> e substitua o comando que está nos elementos <title></title> para Cadastro. O resultado ficará assim:

E então, o que achou de montar uma aplicação de cadastro utilizando o framework Vue.js? 

Vamos Exercitar?

O projeto proposto para estudo nesta aula já está parcialmente construído, agora, nós vamos entender melhor como o principal arquivo do Vue.js e sua estrutura estão organizados, e essa compreensão é primordial para se construir aplicações com esse framework. O framework Vue tem uma estrutura e é necessário saber onde se deve colocar cada código de um projeto. Pensando, por exemplo, na linguagem CSS. Para auxiliar na fixação do que já vimos até agora, essa atividade consistirá na adaptação de um código criado previamente por você, em aulas passadas, à estrutura do Vue. Com isso, você compreenderá como esse framework funciona. Lembre-se que estamos fazendo o aproveitamento de código que já havíamos construído anteriormente, recorda? Agora, a intenção é entender como podemos utilizar esse código dentro de uma aplicação construída com o framework que estamos estudando nessa aula.

Até aqui, nós aprendemos a separar os arquivos de CSS do código principal da aplicação, no entanto, se você observar o arquivo constante em src > App.vue, perceberá que ele é organizado em 3 seções. Veja:

Note que há o local específico para criação da estrutura com HTML (<template>), do estilo com CSS (<style>) e do código em Javascript, com (<javascript>). Claro que essa não é a única maneira, mas, no momento, é a forma como aplicaremos Javascript no projeto.

Lembre-se de que a ideia é aplicar animação no formulário para que ele mostre, de forma visual, que os campos não foram preenchidos e, caso contrário, apresente uma mensagem de alerta dizendo que tudo foi preenchido. Vamos colocar nosso código Javacript que cuidará disso. Veja:

Nós criamos uma propriedade chamada methods (na linha 29) em que definimos qual ação realizar. Na seção <template>, mais precisamente dentro do elemento <form>, é preciso chamar o @submit que servirá para acessar algum evento ou método, sendo possível definir, ainda, a configuração que evitará que o formulário seja recarregado. Basta adicionar o prevent. Veja como deverá ficar a linha do elemento <form>: <form @submit.prevent="check()">.

Essa alteração permitirá executar o código da propriedade methods. Agora, teste a aplicação e veja como ficou sua validação e animação utilizando esse framework.

Saiba Mais

Sugerimos a leitura do Capítulo Compreendendo e utilizando o Framework Vue.js, do livro Frameworks Front End.

MARCOLINO, A. da S. Frameworks front end. São Paulo: Platos Soluções Educacionais S.A., 2021.

Leia também o artigo que trata de componentes reutilizáveis em Vue.js.

VUE JS BRASIL. Criando componentes reutilizáveis (mestre/detalhe). 2018.

Referências Bibliográficas

MARCOLINO, A. da S. Frameworks front end. São Paulo: Platos Soluções Educacionais S.A., 2021.

VUE. JS BRASIL. Criando componentes reutilizáveis (mstre/detalhe. 2023. Disponível em: https://vuejsbrasil.org/criando-componentes-reutilizaveis-mestre-detalhe/. Acesso em: 16 jan. 2024.

VUE. JS. Introdução. 2022. Disponível em: https://vuejsbr-docs-next.netlify.app/guide/introduction.html. Acesso em: 11 nov. 2023.

React

Estudante, esta videoaula foi preparada especialmente para você. Nela, você irá aprender conteúdos importantes para a sua formação profissional. Vamos assisti-la? 
Clique aqui para acessar os slides da sua videoaula.
Bons estudos!

Ponto de Partida

Olá, estudante! Estamos chegando ao final de nossa jornada de estudos e não poderíamos fechar nossa sequência de super frameworks sem falar de um dos mais conhecidos. Na aula de hoje, vamos conhecer o Framework React, uma excepcional ferramenta para o desenvolvimento de aplicações web; ver os detalhes que tornam esse framework uma ferramenta muito interessante de ser utilizada; e saber como criar um componente de maneira simples e prática.

No desafio desta aula, você será convidado a criar uma aplicação com validação, podendo se tratar de um projeto que sirva para validar um campo que deva receber como valor o nome a ser informado pelo usuário, e esse projeto deverá emitir alguma mensagem a ele quando o botão, que poderá se chamar “Verificar”, for pressionado, para o caso de o usuário não informar nenhum nome.

O React, assim como os demais frameworks disponíveis no mercado, oferece uma gama de possibilidades, e conhecer e até dominar um framework é garantir um bom emprego, na certa.

Vamos começar nossa trilha de estudos com React?

Bons estudos!

Vamos Começar!

Introdução e configuração do ambiente React

React é uma biblioteca robusta que pode ser adotada de forma incremental (Marcolino, 2021); com ela, é possível utilizar um conjunto de ferramentas que contribuem para o processo de desenvolvimento. Alguns exemplos, são:

Ferramenta	Descrição
Create React App	Aprender React ou criar um single-page app.
Next.js	Criar site renderizado no servidor (SSR) com Node.js.
Gatsby	Criar site estático orientado a conteúdo.
Nx, Parcel e outros	Utilizado por desenvolvedores mais experientes.

Quadro 1 | Ferramentas fornecidas pelo React. Fonte: adaptado de Marcolino (2021).

É possível criar uma aplicação React sem qualquer instalação, no entanto, esse processo é muito mais moroso (React, 2023). A fim de que compreenda sua utilização e o processo de criação de aplicações, vamos adotar a ferramenta Create React App.

Assim como os demais Frameworks, com o Node.js instalado, basta a instalação da ferramenta mencionada; para isso, digite o seguinte comando no prompt em seu computador: npm install –g create-react-app.

A instalação será feita normalmente, de maneira muito semelhante aos últimos dois frameworks estudados. Com a utilização do Create React App, é possível levantar uma aplicação a partir de um modelo, no entanto, a ferramenta permite a criação de uma aplicação totalmente nova.

Componentes React

A construção de componentes é um processo relativamente simples; geralmente, um componente recebe um nome qualquer seguido da extensão JS e serve para otimizar e dar celeridade ao desenvolvimento. O React suporta todos os componentes SVG e HTML integrados ao navegador (React, 2023).

Já sabemos que a integração entre HTML, CSS e Javascript nos permite criar funcionalidades como barra lateral, modal, dropdown e muitos outros, e isso é o que chamamos de recursos de Interface de usuário. Com React, é possível combinar tudo isso em “componentes” personalizados, elementos de interface de usuário reutilizáveis para a sua aplicação (React, 2023).

Vale mencionarmos que React não é uma ferramenta exclusiva para desenvolvimento web; temos como exemplo o React Native, que serve para a construção de aplicativos móveis (MDN, 2023).

De maneira tradicional, a pessoa que constrói uma aplicação web, estrutura o conteúdo com HTML e adiciona interações com a linguagem Javascript. Como existem sites e aplicações que lidaram com um volume extenso de interações, utilizar o React pode ser uma boa, pois o framework coloca a interatividade em primeiro lugar enquanto ainda usa a mesma tecnologia: um componente React é uma função Javascript que permite a adição de tags HTML (React, 2023). Aliás, a criação de um projeto é feita de forma simples; para se criar um projeto chamado hello-world, basta digitar o comando: npx create-react-app hello-world.

Ao abri-lo no VSCode, vemos a árvore de diretórios do projeto, como na imagem a seguir:

Se observarmos bem, veremos que a estrutura de pastas criada é muito semelhante aos frameworks vistos. Para rodar o projeto dentro do VSCode, abra o terminal e digite o comando: npm start. Será feito o build da aplicação e o resultado aparecerá no navegador, como na imagem a seguir:

Por fim, é indispensável saber que componentes do React utilizam props para se comunicarem uns com os outros. Todo componente pai pode passar alguma informação aos seus filhos por meio deles (React, 2023). Aliás, um props lembra um atributo HTML, mas não deixe de ler sobre a criação de componentes no Saiba Mais. 

Siga em Frente...

Criando um projeto com React

Para o exercício desta aula, vamos criar um projeto simples para validação de nome utilizando Javascript. Para isso, crie um projeto simples com React, pois, como se trata de um framework, o projeto simples já nos dará um bom trabalho. Execute o comando npx create-react-app mouse-position e acesse-o pelo VSCode. Esse projeto será usado para configurarmos a detecção da posição do ponteiro do mouse dentro da página. Agora, vamos remover os seguintes arquivos:

O código do arquivo App.js ficará da seguinte forma:

O código do arquivo App.css sofrerá algumas inclusões de código para estilizar a informação da posição do mouse na tela. Veja:

Nosso projeto está finalizado. Para rodar e ver o resultado, execute o comando npm start no terminal do VSCode. O resultado será algo como o exibido na imagem a seguir:

Vamos Exercitar?

Para praticarmos nosso aprendizado, vamos ao desafio apresentado no início da aula, criação de uma aplicação com validação. Vamos criar uma aplicação chamada valida-nome, por meio do comando npx create-react-app valida-nome, e, ao final do processo, a estrutura do diretório do projeto.

Ao acessarmos o projeto pelo VSCode, de imediato, apagamos os mesmos arquivos que já vimos anteriormente: App.test.js, logo.svg, reportWebVitals.js e setupTests.js.

Como sabemos, o primeiro arquivo que o React executa é o arquivo index.html, que está na pasta public; lá dentro, nós só temos uma diva com id root, que é responsável por executar o código que está no arquivo index.js. Aliás, nele, você precisará remover umas linhas, e deverá ficar somente o código a seguir:

Esse arquivo renderiza o conteúdo do arquivo App.js, como pode ver entre as linhas 8 e 12, portanto, vamos alterar também o conteúdo de App.js e deixá-lo da seguinte maneira:

Como pode ver, removemos o conteúdo que estava entre os elementos <header> e </header>. Aliás, também deve ser deletado o conteúdo da primeira linha, que faz a importação do logo, do projeto inicial, e é dentro desse espaço que vamos trabalhar com nosso código. Vamos inserir o seguinte código:

Ainda, dentro da função principal — a function App() —, nós vamos construir nossa função Javascript que fará a validação do campo. Essa validação consiste, basicamente, em verificar se o usuário inseriu o nome, e caso não tenha digitado nada e o botão “Verificar” for pressionado, será feita a validação, informando ao usuário que o nome precisa ser informado.

Logo depois da função principal, vamos inserir espaços e colocar o return mais para baixo, bem como inserir o código que fará a validação. O conteúdo desse arquivo ficará da seguinte maneira:

E para finalizar, vamos “limpar” o conteúdo do arquivo index.html e remover alguns comentários e linhas que não são mais necessários lám e esse arquivo fica na pasta public, do nosso projeto. Vamos aproveitar, também, para mudar o título da página que aparece no navegador e o idioma utilizado em nosso projeto; o resultado será o código apresentado a seguir:

Com isso, o projeto estará pronto e poderá ser testado. Para isso, lembre-se de que é necessário abrir o terminal do VSCode e executar o comando npm start, assim, teremos o resultado como o apresentado a seguir:

Saiba Mais

Sugerimos a leitura do Capítulo React: desenvolvimento de componentes com framework do Facebook, do livro Frameworks Front End.

MARCOLINO, A. da S. Frameworks front end. São Paulo: Platos Soluções Educacionais S.A., 2021.

Leia também a respeito da criação de um primeiro componente no React.

REACT. Seu Primeiro Componente. [s. d.].

Referências Bibliográficas

MARCOLINO, A. da S. Frameworks front end. São Paulo: Platos Soluções Educacionais S.A., 2021.

MDN Web Docs. Começando com React. 2023. Disponível em: https://developer.mozilla.org/pt-BR/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started. Acesso em: 12 nov. 2023.

REACT. Quick start. 2023. Disponível em: https://pt-br.react.dev/learn. Acesso em: 17 jan. 2023.

Videoaula de Encerramento

Estudante, esta videoaula foi preparada especialmente para você. Nela, você irá aprender conteúdos importantes para a sua formação profissional. Vamos assisti-la? 
Clique aqui para acessar os slides da sua videoaula.
Bons estudos!

Ponto de Chegada

Olá, estudante, o mercado de tecnologia é um mercado repleto de novidades e inovações que acontecem quase que instantaneamente, e nós temos visto, nos últimos tempos, o surgimento de tecnologias que estão ocupando um espaço significativo na vida das pessoas. Um bom exemplo é a famosa inteligência artificial, por meio de tecnologias lançadas no mercado, como é o caso do ChatGPT, apesar de a inteligência artificial ser mais antiga do que se pensa, tendo como início de desenvolvimento a década de 1950, com Dartmouth Summer Research Project on Artificial Intelligence, projeto desenvolvido por um colégio nos Estados Unidos (Silva et. al., 2019).

Como vemos, essa evolução tecnológica não para, e tudo que é criado advém de constantes pesquisas e desenvolvimento de novos conhecimentos. Aliás, há uma demanda emergente e constante de pessoas com conhecimentos necessários para conduzir todo esse processo de construção de conhecimento. Por tudo isso, é muito importante sempre buscar novos conhecimentos e atualizações que lhe possibilitem uma boa colocação no mercado de trabalho. Conhecer novas ferramentas e tecnologias, como os vários frameworks que são criados, é fundamental para se tornar uma referência profissional nessa área.

Com a linguagem Javascript, frameworks como Angular, Vue.js e React são, sem dúvida nenhuma, os principais frameworks de mercado na opinião de profissionais da área (Camargos, 2019); eles estão moldando a forma como esses profissionais desenvolvem seus papeis no desenvolvimento de aplicações com a linguagem Javascript (Abdurakhimovich, 2023). Além disso, empresas e instituições de modo geral buscam pessoas com conhecimento em ferramentas como essas para alocação de projetos de clientes e parceiros, diante disso, busque estar sempre preparado para as oportunidades que surgirem. Portanto, os conteúdos estudados nesta Unidade são necessários para desenvolver a competência de reconhecer os principais frameworks no desenvolvimento com Javascript.

É Hora de Praticar!

Agora que entendemos a importância que os Frameworks desempenham na atuação de profissionais que trabalham com desenvolvimento de aplicações, é chegada a hora de arregaçar as mangas e exercitar os seus conhecimentos.

Escolha um dos três principais frameworks de Javascript disponíveis (Angular, Vue.js e React) para montar uma aplicação que sirva de consulta a CEP na API da ViaCEP, mostrando, a partir dessa informação, endereço, bairro, cidade e estado.

Não é necessário montar componentes ou usar muitas diretivas nesse momento, pois não há a intenção de deixar essa tarefa muito longa, contudo, se você se sentir desafiado para isso, fique à vontade para colocar em prática todos os seus conhecimentos. 

Reflita

• Você é capaz de distinguir um framework de uma biblioteca e compreende as sutis diferenças entre os principais frameworks de Javascript?
• Você é capaz de identificar, em sua região, qual dos frameworks de Javascript conhecidos é o mais utilizado por empresas?

Resolução do estudo de caso

Para essa atividade, a resolução apresentada a seguir utilizará o React como framework, uma vez que vários estudos publicados na área mostram que ele tem sido o mais utilizado nos últimos tempos.

Como pedido no enunciado, não construiremos componentes, para que esse processo de criação do projeto no framework escolhido fique ainda mais familiar, mas a prática é fundamental para isso. Caso queira, adapte o código apresentado e coloque-o em componentes, para melhorar ainda mais sua aplicação.

A criação do projeto será feita com o comando npx create-react-app consulta-cep; após construídas e instaladas as dependências necessárias, abriremos o projeto no VSCode. De imediato, removeremos arquivos que não utilizaremos, e os arquivos são os marcados na imagem a seguir:

Será necessário, também, remover resquícios dos arquivos que foram deletados. No arquivo App.js, remova a primeira linha, iniciada com import logo..., que busca um dos arquivos removidos. Depois, vamos deixar apenas a div e apagar o conteúdo. O arquivo deverá ficar assim:

Agora, no arquivo index.js, também vamos limpar algumas linhas e remover, da mesma maneira, algumas linhas de import. O arquivo deverá ficar da seguinte forma:

Agora, no arquivo App.js, vamos inserir o código do HTML, e como se trata de um exercício para consumo de API da ViaCEP, utilizaremos quatro campos: CEP, endereço, bairro, cidade e estado. Quando digitarmos o número do CEP e sairmos do campo utilizando a tecla TAB ou clicando com o mouse em outro local, os demais campos serão preenchidos automaticamente. O arquivo deverá ficar da seguinte maneira:

Como você pode ver, foram construídas 4 funções. A primeira, chamada preencherFormulario, é responsável por obter o dado que vem da API ViaCEP e inseri-lo no campo correto; já a função eNumero é responsável por aplicar ao número informado no campo CEP uma regra de expressão regular que verifica se só foram informados números (MDN, 2023); a função seguinte, cepValido, verifica se a quantidade de números informado é igual a 8 e chama a função criada anteriormente, passando para ela como argumento o número do CEP; por fim, a função principal, pesquisarCep, é uma função do tipo async, ou seja, uma função assíncrona que faz a consulta à API da ViaCEP e, se tudo estiver certo, retorna os dados em formato JSON da consulta, caso contrário, apresenta um erro. 

Dê o play!

Assimile

Ao longo de nossos estudos, vimos todos os conceitos relacionados aos frameworks de mercado disponíveis para o desenvolvimento de aplicações e baseados na linguagem Javascript. O percurso leva em consideração mencionar os principais frameworks Javascript de mercado, aqueles que são opções claras de profissionais da área.

Referências

ABDURAKHIMOVICH, U. A. The future of javascript: emerging trends and technologies. Formation of psychology and pedagogy as interdisciplinary sciences, [S. l.], v. 2, n. 21, p. 12-14, 2023. 

CAMARGOS, J. G. C. et al. Uma análise comparativa entre os frameworks javascript angular e React. Computação & Sociedade, Belo Horizonte, v. 1, n. 1, 2019. 

MDN WEB DOCS. Expressões regulares. 2023. Disponível em: https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Regular_expressions. Acesso em: 17 jan. 2024. 

SILVA, F. M. et al. Inteligência artificial. Porto Alegre: SAGAH, 2019.