Substituindo o jQuery pelo Vue.js: nenhuma etapa de compilação é necessária

Tem sido impossível ignorar todo o hype em torno dos frameworks JavaScript ultimamente, mas eles podem não ser adequados para seus projetos. Talvez você não queira configurar um sistema de compilação inteiro para algumas pequenas abstrações das quais você poderia prescindir. Talvez mover um projeto para um sistema de compilação e, portanto, um método de implantação diferente signifique muito tempo e esforço extras que você pode não conseguir cobrar de um cliente. Talvez você não queira escrever todo o seu HTML em JavaScript. A lista continua.

O que algumas pessoas podem não saber é que você pode incorporar o Vue em seu projeto da mesma forma que incorporaria o jQuery, sem necessidade de etapa de construção. Vue é flexível no sentido de que podemos usá-lo diretamente no HTML.

Então, se sua estrutura de página atual se parece com isso:

 <main> <div class="thing"> <p>Some content here</p> </div> </main> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> //some jquery code here </script>

Você pode literalmente alterar a tag de script aqui e ainda usar o HTML e o JS em conjunto, exatamente como fez antes, refatorando apenas alguns pequenos pedaços de código. Você não precisa reescrever o HTML em JavaScript, não precisa usar o webpack e não precisa configurar um sistema gigante:

 <main> <div class="thing"> <p>Some content here</p> </div> </main> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script> <script> //some vue code here </script>

Você pode substituir as tags e deixar a marcação como está. A melhor parte é que você pode pensar que o código ficará mais complicado, mas você pode descobrir ao ler este artigo e ver os exemplos, que o Vue é extremamente simples, legível e fácil de manter e adaptar. Em termos de tamanho, eles também são bastante comparáveis ​​- para usá-los como de um CDN, minificado, a versão 2.5.3 do Vue é de 86 KB . jQuery 3.2.1 tem 87 KB .

Vamos abordar alguns casos de uso comuns em jQuery e como os mudaríamos para o Vue, e por que desejaríamos fazê-lo.

Capturando entradas do usuário

Um caso de uso muito comum para precisar de JavaScript em um site é capturar a entrada do usuário de um formulário, então vamos começar por aí. Na verdade, ainda não incorporaremos a forma completa por motivos de simplicidade e clareza, mas trabalharemos até o final.

Para capturar informações enquanto um usuário digita, veja como faríamos isso no jQuery e no Vue — lado a lado:

 <div> <label for="thing">Name:</label> <input type="text" /> <p class="formname"></p> </div>

 // this is an alias to $(document).ready(function() { $(function() { //keypress wouldn't include delete key, keyup does. We also query the div id app and find the other elements so that we can reduce lookups $('#app').keyup(function(e) { var formname = $(this).find('.formname'); //store in a variable to reduce repetition var n_input = $(this).find('#thing').val(); formname.empty(); formname.append(n_input); }); }); 

 <div> <label for="name">Name:</label> <input type="text" v-model="name" /> <!--v-model is doing the magic here--> <p>{{ name }}</p> </div>

 //this is a vue instance new Vue({ //this targets the div id app el: '#app', data: { name: '' //this stores data values for 'name' } })

Eu uso este exemplo porque ele revela alguns dos pontos fortes do Vue. O Vue é reativo, o que o torna particularmente capaz de responder a mudanças. Você pode ver como, à medida que atualizamos o que estamos digitando, isso muda instantaneamente - não há atraso.

Você também pode ver que na versão jQuery, o DOM está no controle - estamos buscando coisas do DOM, ouvindo e respondendo a ele. Isso nos liga à maneira como o DOM está configurado atualmente e nos força a pensar em como atravessá-lo. Se a estrutura dos elementos HTML mudasse, teríamos que adaptar nosso código para corresponder a essas mudanças.

Na versão Vue, estamos armazenando o estado - rastreamos uma propriedade que queremos atualizar e alterar, e rastreamos o elemento que queremos alterar por uma coisa chamada diretiva. Isso significa que está anexado diretamente ao elemento HTML que precisamos segmentar. A estrutura do DOM pode mudar, o HTML pode se movimentar e nada disso afetaria nosso desempenho ou captura desses eventos. No nosso caso, estamos usando esse atributo v-model na entrada para nos conectarmos aos dados que estamos armazenando no JavaScript.

Mas! Este não é um caso de uso tão comum quanto armazenar algo enquanto você pressiona a tecla Enter, então vamos ver isso a seguir.

Armazenando a entrada do usuário em um único evento

A coisa interessante sobre a forma como o Vue funciona é que ele está dissociado de ter que pensar em eventos DOM específicos ao armazenar e recuperar dados. Em essência, já temos uma ideia do que queremos capturar; estamos dando forma a ele escolhendo um evento para alterá-lo. Em contraste, o jQuery é fortemente acoplado ao que o DOM faz e se baseia nesses eventos DOM para construir as variáveis ​​que ele armazena, que podem ser colocadas em qualquer lugar, em vez de um grupo consistente (em dados) para recuperação. Podemos ver isso na versão atualizada do último exemplo, onde as informações são coletadas ao pressionar a tecla enter:

 <div> <label for="thing">Name:</label> <input type="text" /> <p class="formname"></p> </div>

 // this is an alias to $(document).ready(function() { $(function() { //We query the div id app and find the other elements so that we can reduce lookups $('#app').change(function(e) { var n_input = $(this).find('#thing').val(); $(this).find('.formname').append(n_input); }); }); 

 <div> <label for="name">Name:</label> <input type="text" v-model.lazy="name" /> <p>{{ name }}</p> </div>

 new Vue({ el: '#app', data: { name: '' } });

Nesta versão, o jQuery é um pouco simplificado porque não precisamos capturar coisas a cada pressionamento de tecla, mas ainda estamos pescando coisas do DOM e respondendo passo a passo a essas mudanças. Nosso código em jQuery sempre será mais ou menos assim:

"Vá buscar esse elemento, veja o que ele está fazendo, agarre-se a essas mudanças, faça algo com essas mudanças."

Em comparação: no Vue, estamos no controle do que está mudando, e o DOM responde a essas mudanças com base em nossos comandos. Nós o anexamos diretamente à coisa que gostaríamos de atualizar. No nosso caso, temos uma pequena abstração chamada modificador: v-model.lazy . O Vue agora sabe que não deve começar a armazenar isso até que ocorra um evento de mudança. Muito arrumado!

Alternando classes

A próxima coisa que abordaremos é alternar classes CSS porque, como o todo-poderoso e sempre observador Googly me informou, é a funcionalidade jQuery mais comum.

 <div> <button aria-pressed="false">Toggle me</button> <p class="toggle">Sometimes I need to be styled differently</p> </div>

 .red { color: red; } JS $(function() { $('button').click(function(e) { $('.toggle').toggleClass('red'); $(this).attr('aria-pressed', ($(this).attr('aria-pressed') == "false" ? true : false)); }); }); 

 <div> <button @click="active = !active" :aria-pressed="active ? 'true' : 'false'">Toggle me</button> <p :class="{ red: active }">Sometimes I need to be styled differently</p> </div>

 .red { color: red; } JS new Vue({ el: '#app', data: { active: false } })

Novamente, o que vemos aqui é que na versão jQuery estamos armazenando o estado no DOM. O elemento tem a classe, e o jQuery toma uma decisão com base na presença da classe, que ele verifica fazendo ping no DOM. Na versão Vue, armazenamos uma condição e a estilizamos de acordo com esse estado. Não estamos pedindo essas informações ao DOM, nós as mantemos.

Armazenamos active nos dados, o botão muda a condição e .red é alterado com base nessa condição. Mesmo os estados para acessibilidade, aria-pressed , são declarados muito mais rápido, pois não precisamos definir nada no script no Vue, podemos alternar entre os estados diretamente inline no modelo com base no estado de ' active .'

Você também notará nos últimos exemplos, você pode ter pensado que seria muito mais código para começar a trabalhar com Vue.js do que com jQuery, mas na verdade eles são bastante comparáveis.

Escondendo e mostrando

Outro caso de uso comum do jQuery é esconder e mostrar algo. jQuery sempre fez um trabalho muito bom em tornar essa tarefa realmente simples, então vamos dar uma olhada no que parece lado a lado com o Vue.

 <div> <button type="button" aria-expanded="false"> Toggle Panel </button> <p class="hello">hello</p> </div>

 $(function() { $('#toggle').on('click', function() { $('.hello').toggle(); $(this).attr('aria-expanded', ($(this).attr('aria-expanded') == "false" ? true : false)); }); }); 

 <div> <button @click="show = !show" :aria-expanded="show ? 'true' : 'false'"> Toggle Panel </button> <p v-if="show">hello</p> </div>

 new Vue({ el: '#app', data: { show: true } })

Tanto o jQuery quanto o Vue fazem um bom trabalho em manter essa tarefa simples, mas há algumas razões pelas quais eu realmente trabalho com o Vue para algo como uma alternância. Vue tem uma ferramenta chamada Vue devtools. Isso não é diferente dos devtools do Chrome, mas quando o usamos, obtemos algumas informações especiais sobre o que está acontecendo com o Vue.

Tanto na versão jQuery quanto na Vue, podemos ver que o elemento se esconde e aparece. Mas e se algo desse errado? E se algo em nosso código não estivesse funcionando da maneira que esperávamos? Para iniciar a depuração com jQuery, provavelmente adicionaríamos alguns console.log s ou definiríamos alguns pontos de interrupção para tentar rastrear onde as coisas estavam com erro.

Agora, não há nada de errado com console.log s, mas com a ajuda das ferramentas de desenvolvimento do Vue, podemos realmente obter um Vue prático (não pude resistir) do que o Vue pensa que está acontecendo. Neste gif abaixo, você pode ver como alternamos o botão, o Vue devtools atualiza o estado de verdadeiro/falso de acordo. Se o DOM não funcionasse da maneira que esperávamos, poderíamos ver os dados no Vue em tempo real. Isso torna muito mais fácil depurar; é realmente muito maravilhoso.

A outra coisa que eu gosto sobre isso é que o v-if é fácil de estender para outras condições. Posso decidir usar uma coisa chamada v-show em vez de v-if se a coisa que estou alternando mostrar e ocultar com frequência: v-if desmontará completamente o elemento, enquanto v-show apenas alternará a visibilidade dele. Essa distinção é realmente importante porque é muito mais eficiente alternar a visibilidade em um estilo em vez de desmontar/montar completamente o nó DOM. Posso mostrar ou ocultar algo com base em muitas condições, ou até mesmo na presença de entrada do usuário ou em outras condições. Geralmente é aqui que o jQuery pode ficar um pouco confuso, pingando o DOM em vários locais e coordenando-os. Abaixo está um exemplo de coordenação mostrando algo baseado na presença de entrada do usuário:

 <div> <label for="textarea">What is your favorite kind of taco?</label> <textarea v-model="tacos"></textarea> <br> <button v-show="tacos">Let us know!</button> </div>

 new Vue({ el: '#app', data() { return { tacos: '' } } }) 

 <div> <label for="textarea">What is your favorite kind of taco?</label> <textarea></textarea> <br> <button v-show="tacos">Let us know!</button> </div>

 $(function() { var button = $('.button'); var textarea = $('#textarea'); button.hide(); textarea.keyup(function() { if (textarea.val().length > 0) { button.show(); } else { button.hide(); } }) });

Neste exemplo, você pode ver o valor de ter o Vue mantendo o estado - estamos reagindo às mudanças muito naturalmente e com menos código. Depois de se acostumar com o estilo, é mais rápido de entender porque você não precisa traçar a lógica linha por linha. Muitas pessoas chamam essa diferença de “imperativa versus declarativa”.

Como enviar um formulário

O caso de uso canônico para jQuery historicamente tem enviado um formulário com uma chamada AJAX, então devemos dar uma olhada nisso também. O Vue na verdade não tem algo embutido como o AJAX; é típico na aplicação Vue usar algo como Axios (uma biblioteca JavaScript para fazer requisições HTTP) para ajudar nessa tarefa.

Este exemplo é um pouco mais complicado do que o resto. Vamos fazer algumas coisas aqui:

1. O botão aparecerá cinza antes de começarmos a digitar nosso formulário, então ele receberá uma classe “ativa” e ficará azul;
2. Quando enviarmos o formulário, impediremos o carregamento da página;
3. Quando o formulário for enviado, mostraremos os dados de resposta na página.

 <div> <form action="/"> <div> <label for="name">Name:</label><br> <input type="text" name="name" required/> </div> <div> <label for="email">Email:</label><br> <input type="email" name="email" required/> </div> <div> <label for="caps">HOW DO I TURN OFF CAPS LOCK:</label><br> <textarea name="caps" required></textarea> </div> <button class="submit" type="submit">Submit</button> <div> <h3>Response from server:</h3> <pre class="response"></pre> </div> </form> </div>

 $(function() { var button = $("button"); var name = $("input[name=name]"); name.keyup(function() { if (name.val().length > 0) { button.addClass('active'); } else { button.removeClass('active'); } }); $("form").submit(function(event) { event.preventDefault(); //get the form data var formData = { name: $("input[name=name]").val(), email: $("input[name=email]").val(), caps: $("input[name=caps]").val() }; // process the form $.ajax({ type: "POST", url: "//jsonplaceholder.typicode.com/posts", data: formData, dataType: "json", encode: true }).done(function(data) { $(".response") .empty() .append(JSON.stringify(data, null, 2)); }); }); });

Aqui, veremos as linhas 2-10 lidando com o manuseio da classe de botão, da mesma forma que fizemos antes. Passamos um parâmetro chamado event para o formulário e, em seguida, dizemos event.preventDefault() para evitar recarregar a página. Em seguida, coletamos todos os dados do formulário das entradas do formulário, processamos o formulário e colocamos a resposta na chamada .done() da solicitação AJAX.

 <div> <form @submit.prevent="submitForm"> <div> <label for="name">Name:</label><br> <input type="text" v-model="name" required/> </div> <div> <label for="email">Email:</label><br> <input type="email" v-model="email" required/> </div> <div> <label for="caps">HOW DO I TURN OFF CAPS LOCK:</label><br> <textarea v-model="caps" required></textarea> </div> <button :class="[name ? activeClass : '']" type="submit">Submit</button> <div> <h3>Response from server:</h3> <pre>{{ response }}</pre> </div> </form> </div>

 new Vue({ el: '#app', data() { return { name: '', email: '', caps: '', response: '', activeClass: 'active' } }, methods: { submitForm() { axios.post('//jsonplaceholder.typicode.com/posts', { name: this.name, email: this.email, caps: this.caps }).then(response => { this.response = JSON.stringify(response, null, 2) }) } } })

Na versão Vue, decidimos quais campos precisamos preencher no formulário e os anexamos ao modelo v que usamos anteriormente. Verificamos a presença do nome para alternar a classe. Em vez de passar event e escrever event.preventDefault() , tudo o que temos a fazer é escrever @submit.prevent em nosso elemento de formulário, e isso é resolvido para nós. Para enviar a postagem em si, usamos o Axios e armazenamos a resposta na instância do Vue em response.

Ainda há muitas coisas que gostaríamos de fazer para ter um formulário pronto para produção, incluindo validação, tratamento de erros e testes de escrita, mas neste pequeno exemplo, você pode ver como o Vue pode ser limpo e legível ao lidar com muitos coisas atualizando e mudando, incluindo entrada do usuário.

Conclusão

Definitivamente, não há problema em usar jQuery se for adequado para você! Este artigo serve para mostrar que o Vue também é uma boa abstração para sites pequenos que não precisam de muita sobrecarga. O Vue é comparável em tamanho, fácil de raciocinar, e é bastante trivial mudar pequenos pedaços de funcionalidade para o Vue sem reescrever seu HTML em JavaScript e adotar um sistema de compilação se você não tiver largura de banda. Isso tudo torna bastante atraente a considerar.

Devido à flexibilidade do Vue, também é fácil fazer a transição desse código para uma etapa de construção e estruturas de componentes se você quiser adotar uma estrutura mais complexa ao longo do tempo. É realmente muito divertido experimentá-lo, então quando você estiver pronto para fazê-lo, confira o vue-cli. O que essa ferramenta faz é dar a você a capacidade de montar um Vue e webpack de nível de produção inteiro com apenas alguns comandos de terminal. Isso permite que você trabalhe com componentes de arquivo único, onde você pode usar HTML, CSS e Script em conjunto em um arquivo que compõe componentes únicos e reutilizáveis. Você não precisa configurar a compilação do webpack a menos que queira fazer algo especial, então você economiza muito tempo configurando as coisas. Eles ainda têm um comando integrado para deixar tudo pronto para implantação de produção.

A coisa boa sobre a flexibilidade de escolher qualquer forma de incorporar o Vue em seu projeto significa que você não é pressionado a mudar seu estilo de trabalho de uma só vez, e você pode até fazer alterações lentamente ao longo do tempo. É por isso que as pessoas chamam o Vue de framework progressivo.