O JavaScript experimentou um aumento notável em popularidade nos últimos anos. A comunidade de desenvolvedores cresce continuamente, criando e aprimorando ferramentas para esta linguagem dinamicamente.
Essa expansão constante gera dificuldades na escolha da ferramenta, framework ou biblioteca ideal para cada tarefa específica. Praticamente para tudo que se deseja fazer em JavaScript, existem diversas alternativas. E para quem está começando, decidir qual tecnologia aprender pode ser um desafio.
Este artigo tem como objetivo esclarecer as vantagens de utilizar diferentes frameworks e bibliotecas JavaScript para o front-end. O intuito é oferecer uma visão mais clara sobre essas opções, simplificando o processo de decisão.
React
React é uma biblioteca JavaScript, e não um framework, projetada para a construção de interfaces de usuário.
É um projeto de código aberto, mantido pelo Facebook e por uma vasta comunidade de desenvolvedores. Inicialmente criado por Jordan Walke como ferramenta interna do Facebook, foi posteriormente disponibilizado ao público em 2013, ganhando grande popularidade.
Alguns de seus recursos incluem:
- Componentes reativos, personalizáveis e reutilizáveis.
- Utilização de um DOM virtual.
- Alta performance.
- Arquitetura baseada em componentes.
- Fluxo de dados unidirecional.
- Reutilização de código facilitada.
- Ecossistema rico e ativo.
- Gerenciamento de estado simplificado.
Instalação e Uso
O React pode ser empregado no front-end de duas formas distintas:
Via CDN:
Você pode encontrar os links para os scripts no site oficial. Esses links são incluídos na tag <head> de seu HTML. Escolha os links de acordo com seu ambiente (desenvolvimento ou produção).
Exemplo para ambiente de desenvolvimento:
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
Exemplo para produção:
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
Via Node.JS:
Presume-se que você já tenha o NodeJS instalado. Para instalar o React, utilize o seguinte comando:
sudo npm i -g create-react-app --save-dev
Após a instalação, execute:
create-react-app meu-primeiro-app-react
Este comando instalará as bibliotecas necessárias para o funcionamento correto do React, incluindo um servidor de desenvolvimento, webpack e babel.
Navegue até a pasta ‘meu-primeiro-app-react’ e execute:
npm start
Isso iniciará um servidor de desenvolvimento na porta 3000. Ao acessar o endereço do servidor (com a porta 3000), você deverá visualizar um resultado semelhante à demonstração padrão do React.
O React está em alta e é cada vez mais requisitado por diversas grandes empresas. Para aprender, recomenda-se este curso abrangente.
Vue.js
Vue.js é um framework JavaScript progressivo para a criação de interfaces de usuário interativas e aplicações de página única (SPA). É um framework que se concentra na camada de visualização, utilizando o conceito de visualização de modelo. O Vue é popular por sua capacidade de impulsionar SPAs. Diferentemente do React, o Vue utiliza HTML puro em vez de JSX.
O Vue.js é um projeto de código aberto, criado por Evan You e lançado em fevereiro de 2014. Suas principais características incluem:
- Componentes de visualização reativos e combináveis.
- Uso de um DOM virtual.
- Foco na biblioteca principal, com opções para roteamento e gerenciamento de estado.
- Tratamento do escopo CSS sem a necessidade de CSS-in-JS.
- Ligação unidirecional dentro de componentes.
- Suporte para plugins essenciais.
- Reutilização de código.
Instalação e Uso
O Vue.js pode ser usado via CDN ou Node.js.
Para utilizar via CDN, adicione o seguinte script à seção <head> do seu HTML:
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
Este script é indicado para desenvolvimento, pois inclui mensagens importantes no console. Para produção, utilize:
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
Para instalar via Node.js, utilize o comando npm:
npm install vue
Recomenda-se consultar a documentação oficial do Vue.js ou considerar este curso para um aprendizado mais aprofundado.
Angular
Angular é um framework JavaScript estrutural para a criação de páginas dinâmicas. Permite usar HTML como linguagem de template e sintaxe HTML para expressar componentes de aplicações de forma clara. É um projeto de código aberto mantido pelo Google e colaboradores.
Instalação
Certifique-se de ter o Node.js instalado em sua versão mais recente. O primeiro passo é instalar a ferramenta Angular CLI:
npm install -g @angular/cli
Após a instalação, crie um novo projeto:
ng new meu-primeiro-app-angular
Siga as instruções na tela. Isso criará arquivos e pastas e utilizará o npm para baixar bibliotecas necessárias para o funcionamento do Angular.
Para iniciar o aplicativo, execute o seguinte na pasta do aplicativo:
ng serve
Isso deverá iniciar o servidor na porta 4200.
[[email protected] meu-primeiro-app-angular]# ng serve
10% building 3/3 modules 0 activeℹ ｢wds｣: Project is running at http://localhost:4200/webpack-dev-server/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: 404s will fallback to //index.html
chunk {main} main.js, main.js.map (main) 47.8 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 264 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 10 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.81 MB [initial] [rendered]
Date: 2019-12-28T12:08:20.138Z - Hash: 5d4b93c7bf9e61979c4d - Time: 12864ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
ℹ ｢wdm｣: Compiled successfully.
Conclusão
A escolha entre eles depende mais da sua preferência pessoal do que de qual deles é “o melhor”.
Todos os frameworks e bibliotecas mencionados são excelentes. Um breve resumo:
- Angular é ideal se você procura um framework completo e não quer se preocupar com dependências externas.
- React é a escolha certa se você quer criar aplicações rápidas, PWAs e SPAs, e está confortável com JSX.
- React possui a comunidade mais ativa e oferece mais oportunidades de trabalho, graças ao seu vasto ecossistema.
- React é relativamente fácil de iniciar.
- React é altamente personalizável e trata cada parte da interface como um componente.
- Vue compartilha das vantagens do React, mas sem a necessidade de usar JSX.
- O mercado de trabalho para Vue está em crescimento.
Confira este gráfico do Google Trends que compara a popularidade de cada um:
Caso tenha interesse em desenvolvimento front-end, você pode explorar este Curso Udemy.