Programação

O que é Vue.js? Visão geral para iniciantes

Vemos o Vue.js, uma estrutura de front-end válida que você deve experimentar hoje.

O Vue é uma estrutura de front-end moderna que pode ajudar qualquer pessoa a construir um site ou aplicativo da web. É leve, flexível e fácil de usar. Mas também é uma estrutura completa e rica que pode crescer para atender às necessidades do criador de aplicativos da web mais avançado.

Vejamos o Vue.js e o que você precisa saber para começar a usá-lo.

Conhecendo O Vue

Vue é a estrutura mais versátil actualmente disponível para JavaScript. É também o mais fácil de entender para programadores e não programadores.

O Vue é fácil de aprender para pessoas que são novas no desenvolvimento de sites. Quase todo mundo que trabalhou com HTML atingiu uma parede em que deseja fazer algo que o HTML não pode.

Por exemplo, e se você quisesse adicionar um interruptor para mudar o tema do seu site do modo claro para o escuro? Que tal adicionar um menu simples escondido atrás de um botão de hambúrguer? É quando você precisa aprender um pouco de Javascript .

Essas são tarefas muito fáceis de fazer em JavaScript. Você pode adicionar um snippet de JavaScript a uma tag de script e está tudo pronto. Esta é a aparência da inserção de texto com o JavaScript vanilla:

<html>
 <head>
 </head>
 <body>
<div id="example">
 </div>
 <script>
 document.getElementById("example").innerHTML = "Hello World!";
 </script>
 </body>
</html>

A maneira como o JavaScript faz referência aos elementos da página pode ser confusa para os iniciantes. Adicionar JavaScript com Vue é tão fácil quanto adicionar JavaScript vanilla. Mas com o Vue, você obtém mais funcionalidade e acesso a técnicas modernas de JavaScript. É assim que você insere texto com o Vue:

<html>
 <head>
 <script src="<https://cdn.jsdelivr.net/npm/vue/dist/vue.js>"></script>
 </head>
 <body>
<div id="example">
 {{ message }}
 </div>
 <script>
 var app = new Vue({
 el: '#example',
 data: {
 message: 'Hello Vue!'
 }
 })
 </script>
 </body>
</html>

Vamos dissecar esses exemplos um pouco. Em JavaScript, o código tinha que procurar o elemento, escolher um aspecto dele e alterá-lo. No Vue, dissemos ao HTML onde esperar o texto variável. Em seguida, criamos um objeto JavaScript, atribuímos-o ao elemento e definimos o texto da variável.

Este exemplo simples ilustra um ponto importante. É melhor manter o código separado do HTML. No exemplo do Vue, o Vue não manipula o HTML diretamente. Ele apenas administra seu próprio negócio. E deu ao HTML mais funcionalidade sem adicionar código a ele.

O Vue É Uma Estrutura Ou Não?

Se você está familiarizado com outras estruturas, deve estar ciente de que geralmente precisam que você crie um aplicativo do zero usando sua tecnologia. Isso geralmente envolve a criação de um aplicativo a partir da linha de comando e a inicialização de um servidor. Mas no exemplo anterior, adicionamos Vue a um site estático sem toda essa complexidade.

Vue é uma estrutura, no entanto. Em sua página de introdução, ele diz: “Ao contrário de outras estruturas monolíticas, o Vue foi projectado desde o início para ser adotado de forma incremental.” Isso significa que você pode usar tão pouco ou tanto do poder do Vue quanto quiser em seus aplicativos.

Você pode usar o Vue para gerenciar uma apresentação de slides de imagem, ou você pode construir um aplicativo de página única completo com todos os sinos e assobios. Isso inclui testes, roteamento, gerenciamento de estado, segurança e muito mais.

Para Quem É O Vue?

Devido ao seu poder e versatilidade, o Vue atrai um grande público.

Vue É Para Puristas HTML / CSS / JS

JavaScript é um ecossistema em rápida mudança com muita rotatividade. É possível se dedicar a um conjunto de ferramentas e vê-las ficarem obsoletas dois anos depois. JavaScript também adiciona complexidade aos sites por conta própria. Instalar uma estrutura e uma pilha enorme e instável de pacotes Node só piora as coisas.

Algumas pessoas preferem ficar com o básico por esse motivo. O HTML funciona bem, o CSS tem suas peculiaridades e o JavaScript é meio estranho. Mas eles são todos sólidos! Eles continuam a mudar e evoluir, mas de forma lenta e constante. Muitos frameworks acabam adicionando mudanças que quebrarão seu código.

No entanto, existem alguns scripts, como jQuery e Handlebars, que facilitam sua vida como um programador front-end. jQuery começa muito bem, mas se transforma em espaguete quando sua base de código se torna muito complexa. O guiador também é bom, mas não faz muito para tornar o JS mais fácil de usar.

O Vue pode substituir essas duas ferramentas e resolver seus problemas. E faz isso sem assumir completamente o controle do seu site. Ele apresenta práticas JavaScript modernas sem as dores de cabeça do JavaScript moderno.

Vue É Para Prototipagem Rápida

Vue é uma estrutura leve com a funcionalidade de estruturas muito mais pesadas. Se você tem experiência com desenvolvimento front-end da web, pode aprender Vue em alguns dias. Do contrário, você pode começar apenas com o necessário.

Um dos principais motivos para usar um framework é que as ferramentas que ele oferece tornam o desenvolvimento mais rápido e fácil. Por exemplo, um aplicativo da Web progressivo depende de navegação programática, layout personalizado e estrutura que muda rapidamente. As estruturas de front-end tornam esse desafio quase trivial. E Vue não é exceção.

Agora você pode terminar projetos que costumavam levar meses em semanas, graças a estruturas modernas. E porque o Vue é tão leve e fácil de trabalhar, você pode terminar os protótipos em horas ou dias.

Vue É Para Desenvolvimento De Aplicativos Da Web

Os desenvolvedores esperam certos benefícios de estruturas de front-end modernas. Substituição de string para HTML, arquitetura baseada em componentes e ferramentas são bons exemplos. O Vue tem todos esses benefícios, bem como os mencionados na seção de estrutura acima.

Vue É Para Desenvolvimento De Aplicativos Móveis Nativos

Os desenvolvedores de aplicativos da Web geralmente desejam disponibilizar seus produtos como um aplicativo móvel. Tradicionalmente, eles faziam isso contratando desenvolvedores extras para construir para iOS e Android. Em seguida, eles teriam que encontrar uma maneira de coordenar entre as três plataformas. Mas hoje, existem outras opções.

Uma opção é usar NativeScript para construir aplicativos móveis, o que permite aos desenvolvedores construir para Android e iOS com o mesmo código JavaScript. Os desenvolvedores do Nativescript podem até mesmo portar seu código da web para dispositivos móveis sem ter que contratar novos desenvolvedores. E tem um ótimo suporte para Vue.

Como O Vue Se Compara A Outros Frameworks?

Vue, Angular e React são as três estruturas mais populares de acordo com a pesquisa State of JS de 2019 . Aqui estão alguns pontos a serem considerados sobre eles:

As Três Grandes Estruturas

  • Angular foi a primeira estrutura da web de front-end de grande nome. É publicado pelo Google e existe desde 2010. Ele apresentou ao mundo o HTML dinâmico por meio de diretivas e vinculação de dados de três vias que fazem o código atualizar magicamente na página sem uma atualização.
  • React foi lançado pela primeira vez em 2013 pelo Facebook e é uma alternativa mais acessível ao Angular. React é mais conhecido por usar JSX e componentes.
  • Vue foi lançado em 2014 por Evan You, um ex-funcionário do Google. Vue não apresentou nada muito inovador. Mas introduziu uma maneira muito melhor e mais limpa de trabalhar.

Benefícios Dos Três Grandes

  • O Angular é uma estrutura de nível empresarial. Ele existe há mais tempo e é criado e mantido pelo Google.
  • O React foi o mais amplamente adotado dos três grandes frameworks, de acordo com o 2019 State of JavaScript . É conhecido como fácil de trabalhar e flexível.
  • O Vue é subjetivamente a estrutura mais fácil de aprender e implementar. E continua tão fácil quanto é sem sacrificar um rico e poderoso conjunto de recursos.

Críticas Aos Três Grandes

Angular

Angular foi notoriamente difícil de aprender no passado. A versão 1 (AngularJS) usou muitos jargões da ciência da computação de nível universitário em sua documentação. A versão 2 (Angular) simplificou e otimizou muito, no entanto.

  • Quando o Google lançou o Angular, manteve os conceitos de nível superior do AngularJS. Mas a empresa mudou tanto os detalhes que muitos desenvolvedores ainda achavam isso confuso.
  • Houve muita rotatividade nos primeiros dias do Angular, com mudanças de quebra de código em quase todas as versões. Angular está melhor agora, mas ainda é muito formal, rígido e difícil de aprender para alguns desenvolvedores.

React

Um dos melhores e mais desafiadores aspectos do React é o JSX. Ele condensa HTML, CSS e JS em uma linguagem. Isso torna tudo mais simples para os desenvolvedores, mas mais difícil para os designers.

  • JSX também torna o trabalho com bibliotecas existentes mais difícil. Além disso, é considerado um antipadrão colocar design, layout e código no mesmo lugar. Isso pode criar um código confuso e ilegível.
  • O React lida com isso usando componentes para separar o código. Mas cabe aos desenvolvedores individuais usar os componentes adequadamente.
  • React é tecnicamente uma estrutura. Mas faltam alguns recursos importantes, como navegação e gerenciamento de estado em todo o aplicativo.

Vue

O Vue resolve todos os problemas mencionados sobre os outros dois grandes. Ao contrário do Angular, é fácil de aprender. E, ao contrário do JSX, os componentes do Vue separam HTML, CSS e JS.

  • É muito mais fácil para os designers trabalharem em um componente Vue. E manter tudo limpo não depende inteiramente do desenvolvedor.
  • Os maiores desafios do Vue são a adoção relativamente baixa e a falta de “aplicativos matadores”. Muitas empresas usam o Vue, mas sem dúvida nenhuma delas tem reconhecimento de marca.

Vue É Outra Moda Passageira?

Mesmo que Vue já exista há vários anos, ainda é o novo garoto no bloco. Ele também não tem o apoio corporativo dos outros dois. E, como já mencionado, não existem aplicativos matadores que mostram o que ele pode fazer.

O que falta ao Vue em apoio de nível empresarial, ele compensa com paixão e apoio de base. Evan You executa uma campanha do Patreon para sustentar a si mesmo e a outro desenvolvedor. Em certo sentido, Vue é administrado democraticamente. Enquanto houver interesse suficiente no Vue para que as empresas estejam dispostas a apoiá-lo, o Vue permanecerá.

As Melhores Partes Do Vue

O Vue oferece as melhores partes das outras estruturas de front-end, além de muitos outros recursos exclusivos do Vue. Aqui está apenas uma lista parcial:

  • O Vue usa arquitetura baseada em componentes para estrutura e capacidade de reutilização.
  • Ele mantém HTML, CSS e JS separados em seus componentes.
  • O Vue parecerá familiar para desenvolvedores e designers.
  • Ele oferece uma GUI completa para servir, construir e criar projetos.
  • O Vue usa recarregamento a quente quando é executado como um aplicativo. O recarregamento a quente atualiza apenas o que foi alterado em uma página sem uma atualização.

Vue é um projeto de propriedade privada sem a sobrecarga corporativa e política. Isso pode torná-lo menos desejável para empreendimentos corporativos. Mas é fácil de aprender e divertido de jogar, o que o torna ótimo para startups inovadoras.

Talvez a melhor característica seja que ele é projetado por pragmatismo, não por comitês, que é o objetivo do software livre .


Ajude-nos a crescer, visite SENASNERD no Twitter FacebookInstagram . e deixe o seu gosto, para ter acesso a toda a informação em primeira mão. E se gostou do artigo não se esqueça de partilhar o mesmo com os seus amigos.

SUBSCREVA-SE NO CANAL YOUTUBE SENASNERD

Domingos Massissa

Estudante de Engª Informática, editor do portal amante do mundo NERD, onde engloba cinema tecnologia e Gamers.

Deixe uma resposta

O seu endereço de email não será publicado.

Botão Voltar ao Topo