3 Melhor Estrutura/Biblioteca JavaScript para Desenvolvimento Front-End

Por
Twittar
Compartilhar
Compartilhar
Pin

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 quando se trata de decidir qual ferramenta/framework/biblioteca usar para uma tarefa específica, porque sempre há várias opções para literalmente qualquer coisa que você queira fazer em JavaScript. No início, ainda é um desafio decidir qual biblioteca ou framework aprender.

Este artigo se concentra em desmistificar a vantagem de usar vários frameworks/bibliotecas de front-end JavaScript e, em última análise, fornece uma imagem mais clara deles. Destina-se a tornar o processo de decisão de selecionar um mais fácil.

Reagir

Reagir não é um framework, 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 gama de 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
  • Ligação de dados unidirecional
  • Reutilização de código
  • Tem um ecossistema vibrante e próspero por trás
  • Manipulação conveniente de gerenciamento de estado

Instalação/Uso

O React pode ser usado no frontend de duas maneiras diferentes.

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.

  Use modelos personalizados para qualquer aplicativo de produtividade iWork no iCloud

Por exemplo, se estiver usando em um ambiente de desenvolvimento, então:

<script crossorigin src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>

E, para a produção

<script crossorigin src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>

Usando Node.JS

Suponho 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 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 seja executado adequadamente, o que inclui um servidor de desenvolvimento, webpack e babel.

Navegue até a pasta my-first-react-application e execute o seguinte comando

npm início

O acima irá lançar um servidor de desenvolvimento na porta 3000. E, quando você acessar o IP do seu servidor com a porta 3000, você 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 recomendo fazer este curso completo.

Vue.js

Vue.js é uma estrutura JavaScript progressiva para construir 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 foi criado inicialmente por Evan Você e lançado publicamente em fevereiro de 2014. A seguir estão alguns dos recursos.

  • Ele fornece componentes de visualização reativos e compostos.
  • 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
  7 mitos comuns sobre verificações de antecedentes

Instalação/Uso

Você pode usar Vue.js no front-end pela CDN ou com Node.js

Para usar o modo CDN, você pode adicionar o seguinte script à seção do 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 do console. No entanto, para produção, você deve usar o abaixo.

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

E, para usar com o Nodejs, você pode instalá-lo usando o comando npm.

npm install vue

Eu recomendo fortemente que você leia o Vue JS oficial documentação para saber mais ou considerar fazer isso caminho.

Angular

Angular é uma estrutura JavaScript estrutural para páginas dinâmicas. Permite o uso de HTML como linguagem de template e permite o uso de sintaxe HTML para expressar componentes de aplicações 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 precisaremos 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-app

Siga as instruções na tela. Isso gera alguns dos arquivos e pastas e usa o módulo npm para baixar bibliotecas de terceiros necessárias para que o Angular seja executado corretamente.

Para iniciar o aplicativo recém-criado, execute o seguinte comando na pasta de aplicativos.

ng server

Isso deve iniciar automaticamente o servidor na porta 4200.

[[email protected] 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

  Como definir fora do escritório em equipes

Então, 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 construir aplicativos rápidos, 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.
  • Vue tem as mesmas vantagens do React mas sem JSX.
  • O mercado de trabalho para Vue está em constante crescimento.

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, você pode conferir este Curso Udemy.