O JavaScript ganhou cada vez mais popularidade ao longo dos anos, a comunidade está crescendo rapidamente e os desenvolvedores estão continuamente desenvolvendo e construindo ferramentas para a linguagem diariamente.
Isso torna difícil decidir qual ferramenta/estrutura/biblioteca usar para uma tarefa específica, porque sempre há várias opções para literalmente qualquer coisa que você queira fazer em JavaScript. A princípio, ainda é um desafio decidir qual biblioteca ou estrutura aprender.
Este artigo se concentra em desmistificar a vantagem de usar vários frameworks/bibliotecas de front-end JavaScript e, finalmente, fornecer uma imagem mais clara deles. Destina-se a tornar mais fácil o processo de decisão de selecionar um.
Reagir
Reagir não é uma estrutura, mas uma biblioteca JavaScript para construir interfaces de usuário.
É de código aberto e mantido pelo Facebook e uma comunidade de desenvolvedores individuais. React foi inicialmente escrito por Jordan Walke como uma ferramenta interna no Facebook. Mais tarde, foi de código aberto e lançado para o público em geral em 2013, e ganhou uma ampla popularidade depois disso.
Alguns dos recursos incluem o seguinte.
- Fornece componentes reativos, personalizáveis e reutilizáveis
- Utiliza um DOM virtual
- Extremamente rápido
- Baseado em componentes
- Vinculação de dados unidirecional
- Reutilização de código
- Tem um ecossistema vibrante e próspero por trás
- Manuseio conveniente de gerenciamento de estado
Instalação/Uso
O React pode ser usado no frontend de duas maneiras diferentes.
- Sobre CDN
- Usando Node.JS
Sobre CDN
Você pode consultar seus site oficial para obter um link de scripts, que você pode incluir na tag de cabeçalho em sua marcação HTML. Escolha os links com base na finalidade.
Por exemplo, se estiver usando em um ambiente de desenvolvimento, então:
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>E, para a produção
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>Usando Node.JS
Presumo que você já tenha o NodeJS instalado. Para instalar o React, basta digitar o seguinte comando.
sudo npm i -g create-react-app --save-dev
Após a conclusão da instalação, digite o seguinte comando
create-react-app my-first-react-application
O comando acima instalará todas as bibliotecas necessárias para que o React funcione adequadamente, o que inclui um servidor de desenvolvimento, webpack e babel.
Navegue até o my-first-react-application pasta e execute o seguinte comando
npm start
O acima iniciará um servidor de desenvolvimento na porta 3000. E, quando você acessar o IP do seu servidor com a porta 3000, deverá ver algo como abaixo.
O React está ganhando popularidade e sob demanda por várias grandes organizações. Se você está interessado em aprender, então eu recomendaria fazer este curso completo .
Vue.js
Vue.js é uma estrutura JavaScript progressiva para criar interfaces de usuário interativas e aplicativos de página única. É uma estrutura de visualização de modelo com a biblioteca principal, com foco na camada de visualização. O Vue é popular, pois é a capacidade de alimentar aplicativos de página única. Ao contrário do React, o Vue usa HTML bruto e não JSX.
Vue.js é um código aberto e inicialmente foi criado por Evan You e lançado publicamente em fevereiro de 2014. A seguir estão alguns dos recursos.
- Ele fornece componentes de exibição reativos e combináveis.
- Utiliza um DOM virtual
- Mantém o foco na biblioteca principal (ou seja, roteamento e gerenciamento de estado)
- O escopo em CSS é tratado sem CSS-In-Js
- Ligação unidirecional dentro dos componentes.
- Suporte para complementos essenciais
- Reutilização de código
Instalação/Uso
Você pode usar o Vue.js no front-end através do CDN ou com o Node.js
Para usar o caminho CDN você pode adicionar o seguinte script à seção de cabeçalho da página HTML.
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>O script acima é adequado para fins de desenvolvimento, pois inclui uma importante mensagem de console. No entanto, para produção, você deve usar o abaixo.
<script src="https://cdn.jsdelivr.net/npm/vue"></script>E para usar com Nodejs você pode instalá-lo usando npm comando.
npm install vueAconselho fortemente que você leia o Vue JS oficial documentação para saber mais ou considerar seguir esse caminho.
Angular
Angular é um framework JavaScript estrutural para páginas dinâmicas. Ele permite o uso de HTML como uma linguagem de modelo e permite o uso da sintaxe HTML para expressar componentes de aplicativos de forma clara e concisa. É um projeto de código aberto mantido pelo Google e outros colaboradores.
Instalação
Certifique-se de ter o Nodejs mais recente instalado. A primeira coisa que precisamos instalar é a ferramenta Angular CLI.
npm install -g @angular/cli
Uma vez instalado, podemos criar um novo projeto com o seguinte comando.
ng new my-first-angular-appSiga as instruções na tela. Isso gera alguns dos arquivos e pastas e usa o npm módulo para baixar bibliotecas de terceiros necessárias para o Angular funcionar corretamente.
Para iniciar o aplicativo recém-criado, execute o seguinte comando na pasta apps.
ng serverIsso deve inicializar automaticamente o servidor na porta 4200.
(root@lab my-first-angular-app)# 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
Portanto, o que você escolhe aprender é mais uma preferência pessoal do que “o que é melhor”.
Todos os frameworks/bibliotecas listados acima são ótimos. Aqui está uma breve recapitulação;
- Você deve aprender Angular se quiser um Framework no qual deseja confiar sem ter que lidar com dependências externas.
- Você deve aprender React se quiser criar um aplicativo rápido, PWA, de página única e se sentir confortável com o JSX.
- O React tem a comunidade mais vibrante e mais oportunidades de trabalho devido à sua grande comunidade.
- React é relativamente fácil de começar.
- O React é altamente personalizável e trata cada parte da interface do usuário como um componente.
- O Vue tem as mesmas vantagens do React, mas sem o JSX.
- O mercado de trabalho para Vue está aumentando constantemente.
Aqui está um gráfico no Google Trends mostrando uma comparação da taxa de popularidade dos 3 deles.
Se o desenvolvimento front-end é do seu interesse, então você pode conferir este curso udemy .
