Exprimentando Vue.js - aplicando no /dev/All
Tags: vue, javascript, ptbr, braziliandevs
Published: 2021-06-16 13:18:15

---
title: Exprimentando Vue.js - aplicando no /dev/All
published: true
description: 
tags: vue, js, ptbr, braziliandevs
cover_image: https://miro.medium.com/max/2430/1*ACR0gj0wbx91V_xgURifWg.png
---
Recentemente comecei a buscar frameworks JavaScript para serem aplicados em nossos projetos na itexto. Publiquei algum tempo atrás <a href="https://devkico.itexto.com.br/?p=2469">minha experiência de aprendizado envolvendo o Angular.js</a>: chegou a hora de falar sobre o Vue.js.
<h2>Como fui parar no Angular.js</h2>
<img class="aligncenter size-medium wp-image-2470" src="https://devkico.itexto.com.br/wp-content/uploads/2016/04/angular-js_600x400-300x208.png" alt="angular-js_600x400" width="300" height="208" />

Aprender Angular foi uma experiência muito enriquecedora para mim pois me pos em contato mais profundo com diversas ferramentas usadas no ambiente JavaScript, tais como o Gulp e o NPM.

O que mais gosto no Angular é a ideia de templates renderizados do lado cliente. Apesar de na esmagadora maioria dos nossos projetos boa parte da renderização ser realizada do lado servidor (diversas razões para isto, o que, por si só, já daria um post), em alguns casos a renderização do lado cliente nos parece a solução ideal.

Um dos nossos projetos em que os templates do Angular cairam como uma luva foi o <a href="http://www.devall.com.br">/dev/All</a> que, até a versão 1.8 usava este framework do lado cliente.  Não conhece o site? Abaixo você pode ver um print do mesmo:

<img class="aligncenter size-medium wp-image-2502" src="https://devkico.itexto.com.br/wp-content/uploads/2016/06/devall_vue-175x300.png" alt="devall_vue" width="175" height="300" />

Com o passar do tempo a arquitetura do /dev/All foi sofrendo algumas modificações, dentre elas a criação de uma API na qual estamos trabalhando aos poucos. Entre as chamadas desta API está a nossa busca, que é usada atualmente na interface do site com o usuário final.

A primeira versão do /dev/All era 100% renderizada do lado servidor. Com isto, sempre que o usuário paginava os posts ou realizava uma busca, todo o conteúdo da página era carregado novamente (ignorando os cacheamentos de JavaScript e CSS).

Este problema foi a razão pela qual na versão 1.8 do /dev/All passamos a usar o Angular na confecção da nossa interface gráfica. O resultado foi muito bom: os usuários agora baixavam uma única vez o código da página e em todas as chamadas subsequentes o Angular fazia o trabalho de atualização da interface.
<h2>Como encontrei o Vue.js</h2>
<img class="aligncenter  wp-image-2501" src="https://devkico.itexto.com.br/wp-content/uploads/2016/06/vuejs-300x300.png" alt="vuejs" width="179" height="179" />

Tivemos esta experiência bem sucedida com o Angular mas fiquei com a impressão de que ele era uma solução muito complicada para as nossas necessidades. A curva de aprendizado do Angular é muito íngreme: são muitos conceitos para que você comece a se tornar produtivo: <strong>controladores, módulos, injeção de dependências, inversão de controle, diretrizes</strong>. Minha <strong>única preocupação era a view</strong>: eu só queria um template que fosse renderizado do lado cliente e que tirasse proveito da nossa API.

Eu também queria algo com o qual pudesse reaproveitar conhecimentos que já dominava, como o jQuery: misturar Angular e jQuery é complicado para dizer o mínimo (sei que é possível, mas mesmo assim é mais complexo que o necessário).

Nisto passei por algumas soluções interessantes: <a href="https://mustache.github.io/">Mustache</a>, <a href="http://rivetsjs.com/">Rivets</a>, <a href="https://github.com/petersirka/Tangular">Tangular</a> (apenas 2Kb!) e mais algumas alternativas, dentre as quais estava o Vue.js, cujo primeiro contato foi feito totalmente por acaso através de <a href="https://www.youtube.com/watch?v=JERbwwjQjrY">um vídeo do Vedovelli</a>.

Resolvi experimentar o Vue.js: o primeiro passo foi ler o seu <a href="http://vuejs.org/guide/">guia para desenvolvedores</a>. <strong>A leitura do guia me fez esquecer o Angular. </strong>Achei a documentação do Vue.js uma das melhores que já li: rápida, direta e <strong>curta.</strong> Terminada sua leitura você já consegue criar coisas interessantes com o framework.

(o guia do Vue.js devia ser usado como exemplo de documentação bem feita: virei fã)

A impressão que tive do Vue.js foi a de se tratar de um "<strong>Angular" fácil de aprender</strong>. Em <strong>aproximadamente três horas</strong> de estudo você já consegue criar aplicações com o Vue.js: no caso do Angular levou <strong>pelo menos uma semana para começar</strong>.  Vi esta experiência de aprendizado se repetir com Lucas, nosso estagiário na itexto.

A versão 1.9 do /dev/All, publicada no dia 19/6/2016 substituiu o Angular pelo Vue.js (usamos a versão 1.0). Quantas linhas de código JavaScript precisamos escrever para criar <strong>toda</strong> a interface do site? <strong>30 (!)</strong>, incluindo o boiler plate padrão do jQuery ($(document).ready).

O jQuery faz as chamadas ao servidor e o Vue.js renderiza o resultado para nós. É simples assim. :)
<h2>Outras coisas que gostei no Vue.js</h2>
Além da excelente documentação e facilidade de ser usado com outras bibliotecas (jQuery), houve outras razões pelas quais este framework me ganhou.
<h3>API fácil</h3>
A API do Vue.js é muito simples: essencialmente você só precisa conhecer o construtor <strong>Vue</strong>. E não só o guia é fácil de ler: a <a href="https://vuejs.org/api/">documentação da API</a> também é excelente!

Levou um tempo até que eu me habituasse com o modo como a injeção de dependências é realizada no Angular (especialmente os problemas que podem surgir durante a minificação e "uglyficação" do código). No caso do Vue, como é focado apenas na view e não há controladores, tudo fica muito mais fácil.
<h3>Tem o que gostei no Angular</h3>
A sintaxe dos templates do Vue é <strong>muito</strong> parecida com a do Angular. Tanto é que não precisei reescrevê-los ao migrar para o Vue.js: a grosso modo bastou trocar as diretrizes "ng-*" por "v-*".  A mesma sintaxe "mustache" se mantém.

Também há diretrizes, como o Angular, assim como filtros. A diferença está na facilidade de aprendizado.

Outra similaridade importante: também implementa o <strong>data binding bidirecional</strong>. Este recurso é muito interessante, especialmente quando se quer construir interfaces de cadastro mais complexas como, por exemplo, formulários do tipo mestre-detalhe ou mesmo simulação de planilhas (para estes dois casos já estamos projetando soluções baseadas no Vue.js na itexto).

Por falar em data binding, o modo como lida com formulários é também essencialmente o mesmo que temos no Angular.
<h3>Criação fácil de componentes</h3>
Assim como o Angular, o Vue.js também te permite <a href="http://vuejs.org/guide/components.html">criar componentes</a>. No caso, o Vue é muito inspirado na spec <a href="https://github.com/w3c/webcomponents/blob/gh-pages/proposals/Slots-Proposal.md">Web Components do W3C</a>. Note que é <strong>inspirado</strong> e não <strong>uma implementação</strong> desta spec.

A vantagem é que você pode escrever sua biblioteca de componentes reaproveitáveis com o Vue e, caso deseje abandoná-lo no futuro, o trabalho de reescrita (em teoria) deve ser bem menor.
<h2>Concluindo</h2>
Para situações nas quais só me interessa a renderização do lado cliente e a aplicação não é muito complexa (como o /dev/All), creio que Vue.js seja uma solução mais interessante que o Angular.

Se você ainda não o conhece, sugiro que leia seu guia e brinque um pouco com ele: é uma experiência <strong>muito</strong> interessante.  Na excelente documentação oficial há uma seção interessante na qual o <a href="http://vuejs.org/guide/comparison.html">comparam com outros frameworks</a>, recomendo sua leitura, apesar de naturalmente se tratar de um texto tendencioso.

Creio que, apesar de ter preferindo o Vue, <strong>estudar Angular é essencial</strong>: tenho certeza de que boa parte da facilidade que tivemos em aprendê-lo (Vue) se deve aos conceitos que precisamos aprender em nosso estudo do Angular.

Se você gosta de vídeos, o Fabio Vedovelli tem <a href="http://www.vedcasts.com.br/series/vuejs">uma série a respeito</a> que vale muito à pena assistir (como tudo o que ele faz).

PS: livros interativos não funcionaram. Prova disto foi a morte da indústria do CD-ROM, que não foi substituída pela Internet.
<h3></h3>