Remplacement de jQuery par Vue.js : aucune étape de construction nécessaire

Il a été impossible d'ignorer tout le battage médiatique entourant les frameworks JavaScript ces derniers temps, mais ils pourraient ne pas convenir à vos projets. Peut-être que vous ne voulez pas mettre en place un système de construction complet pour certaines petites abstractions dont vous pourriez vous passer. Peut-être que le déplacement d'un projet vers un système de construction et donc une méthode de déploiement différente signifierait beaucoup de temps et d'efforts supplémentaires que vous ne pourrez peut-être pas facturer à un client. Peut-être que vous ne voulez pas écrire tout votre code HTML en JavaScript. La liste continue.

Ce que certaines personnes ne savent peut-être pas, c'est que vous pouvez incorporer Vue dans votre projet de la même manière que vous incorporeriez jQuery, aucune étape de construction n'est nécessaire. Vue est flexible dans le sens où nous pouvons l'utiliser directement dans le HTML.

Donc, si la structure de votre page actuelle ressemble à ceci :

 <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>

Vous pouvez littéralement changer la balise de script ici et continuer à utiliser le HTML et le JS en tandem comme vous le faisiez auparavant, en ne refactorisant que quelques petits morceaux de code. Vous n'avez pas besoin de réécrire le HTML en JavaScript, vous n'avez pas besoin d'utiliser webpack, et vous n'avez pas besoin de mettre en place un système géant :

 <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>

Vous pouvez remplacer les balises et laisser le balisage tel quel. La meilleure partie est que vous pourriez penser que le code deviendra plus compliqué, mais vous pourriez découvrir en lisant cet article et en voyant les exemples que Vue est extrêmement simple, lisible et facile à maintenir et à adapter. En termes de taille, ils sont également assez comparables - pour les utiliser tels quels à partir d'un CDN, minifié, la version 2.5.3 de Vue fait 86 Ko . jQuery 3.2.1 fait 87 Ko .

Couvrons quelques cas d'utilisation courants dans jQuery et comment nous les ferions passer à Vue, et pourquoi nous voudrions même le faire.

Capture des entrées utilisateur

Un cas d'utilisation très courant pour avoir besoin de JavaScript sur un site consiste à capturer les entrées de l'utilisateur à partir d'un formulaire, alors commençons par là. Nous n'incorporerons pas encore le formulaire complet dans un souci de simplicité et de clarté, mais nous y travaillerons d'ici la fin.

Pour capturer des informations au fur et à mesure qu'un utilisateur tape, voici comment nous procéderions dans jQuery et Vue — côte à côte :

 <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' } })

J'utilise cet exemple car il révèle quelques-uns des points forts de Vue. Vue est réactif, ce qui le rend particulièrement capable de réagir aux changements. Vous pouvez voir comment, au fur et à mesure que nous mettons à jour ce que nous tapons, cela change instantanément - il n'y a pas de délai.

Vous pouvez également voir que dans la version jQuery, le DOM est sous contrôle - nous récupérons des éléments du DOM, les écoutons et y répondons. Cela nous lie à la manière dont le DOM est actuellement configuré et nous oblige à réfléchir à la manière de le parcourir. Si la structure des éléments HTML devait changer, nous devrions adapter notre code pour correspondre à ces changements.

Dans la version Vue, nous stockons l'état - nous gardons une trace d'une propriété que nous voulons mettre à jour et modifier, et suivons l'élément que nous voulons modifier par une chose appelée une directive. Cela signifie qu'il est directement attaché à l'élément HTML que nous devons cibler. La structure du DOM peut changer, le HTML peut se déplacer, et rien de tout cela n'affectera nos performances ou la capture de ces événements. Dans notre cas, nous utilisons cet attribut v-model sur l'entrée pour nous connecter aux données que nous stockons dans le JavaScript.

Mais! Ce n'est pas un cas d'utilisation aussi courant que de stocker quelque chose lorsque vous appuyez sur la touche Entrée, alors regardons cela ensuite.

Stockage de l'entrée de l'utilisateur sur un seul événement

Ce qui est intéressant dans le fonctionnement de Vue, c'est qu'il est découplé de la nécessité de penser à des événements DOM spécifiques lors du stockage et de la récupération des données. Essentiellement, nous avons déjà une idée de ce que nous voulons capturer ; nous lui donnons forme en choisissant un événement avec lequel le modifier. En revanche, jQuery est étroitement lié à ce que fait le DOM et repose sur ces événements DOM pour créer les variables qu'il stocke, qui peuvent être placées n'importe où, plutôt qu'un groupe cohérent (dans les données) pour la récupération. Nous pouvons le voir dans la version mise à jour du dernier exemple, où les informations sont recueillies sur une touche d'entrée :

 <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: '' } });

Dans cette version, le jQuery est quelque peu simplifié car nous n'avons pas besoin de capturer des choses à chaque frappe, mais nous continuons à pêcher des choses hors du DOM et à répondre étape par étape à ces changements. Notre code dans jQuery ressemblera toujours à ceci :

"Allez chercher cet élément, voyez ce qu'il fait, conservez ces changements, faites quelque chose avec ces changements."

En comparaison : dans Vue, nous contrôlons ce qui change, et le DOM répond à ces changements en fonction de nos commandes. Nous l'attachons directement à la chose que nous aimerions mettre à jour. Dans notre cas, nous avons une petite abstraction appelée modificateur : v-model.lazy . Vue sait maintenant ne pas commencer à stocker cela avant qu'un événement de modification ne se produise. Génial!

Basculer les classes

La prochaine chose que nous aborderons est le basculement des classes CSS car, comme le tout-puissant et toujours attentif Googly m'a informé, c'est la fonctionnalité jQuery la plus courante.

 <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 } })

Encore une fois, ce que nous voyons ici, c'est que dans la version jQuery, nous stockons l'état dans le DOM. L'élément a la classe, et jQuery prend une décision basée sur la présence de la classe, qu'il vérifie en cinglant le DOM. Dans la version Vue, nous stockons une condition et nous la stylisons en fonction de cet état. Nous ne demandons pas ces informations au DOM, nous les détenons nous-mêmes.

Nous stockons active dans les données, le bouton change la condition et .red est modifié en fonction de cette condition. Même les états d'accessibilité, aria-pressed , sont indiqués beaucoup plus rapidement, car nous n'avons rien à définir dans le script dans Vue, nous pouvons basculer entre les états directement en ligne dans le modèle en fonction de l'état de ' active .'

Vous remarquerez également que dans les derniers exemples, vous auriez pu penser qu'il faudrait beaucoup plus de code pour commencer à travailler avec Vue.js qu'avec jQuery, mais ils sont en fait assez comparables.

Cacher et montrer

Un autre cas d'utilisation courant de jQuery est de cacher et d'afficher quelque chose. jQuery a toujours fait un très bon travail pour rendre cette tâche très simple, alors regardons à quoi cela ressemble côte à côte avec 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 } })

jQuery et Vue font du bon travail en gardant cette tâche simple, mais il y a quelques raisons pour lesquelles je travaille vraiment avec Vue pour quelque chose comme une bascule. Vue a un outil appelé Vue devtools. Ce n'est pas différent des outils de développement Chrome, mais lorsque nous l'utilisons, nous obtenons des informations spéciales sur ce qui se passe avec Vue.

Dans les versions jQuery et Vue, nous pouvons voir que l'élément se cache et apparaît. Mais que se passe-t-il si quelque chose tourne mal ? Et si quelque chose dans notre code ne fonctionnait pas comme prévu ? Afin de commencer le débogage avec jQuery, nous ajouterions probablement quelques console.log s ou définirions des points d'arrêt pour essayer de localiser les erreurs.

Maintenant, il n'y a rien de mal avec console.log s, mais avec l'aide des outils de développement de Vue, nous pouvons réellement obtenir une vue pratique (ne pouvait pas résister) de ce que Vue pense qu'il se passe. Dans ce gif ci-dessous, vous pouvez voir que lorsque nous basculons le bouton, les devtools de Vue mettent à jour l'état vrai/faux en conséquence. Si jamais le DOM ne fonctionnait pas comme prévu, nous pourrions voir les données dans Vue en temps réel. Cela rend le débogage tellement plus facile ; c'est en fait assez merveilleux.

L'autre chose que j'aime à ce sujet est que le v-if est facile à étendre à d'autres conditions. Je peux décider d'utiliser une chose appelée v-show au lieu de v-if si la chose que je bascule s'affichera et se cachera fréquemment : v-if démontera complètement l'élément, tandis que v-show basculera simplement sa visibilité. Cette distinction est vraiment importante car il est beaucoup plus performant de basculer la visibilité dans un style plutôt que de démonter/monter complètement le nœud DOM. Je peux afficher ou masquer quelque chose en fonction de nombreuses conditions, ou même de la présence d'une entrée utilisateur ou d'autres conditions également. C'est généralement là que jQuery peut devenir un peu désordonné, cinglant le DOM à plusieurs endroits et les coordonnant. Vous trouverez ci-dessous un exemple de coordination montrant quelque chose basé sur la présence d'une entrée utilisateur :

 <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(); } }) });

Dans cet exemple, vous pouvez voir l'intérêt d'avoir Vue en maintenant l'état - nous réagissons aux changements très naturellement et avec moins de code. Une fois que vous vous êtes habitué au style, c'est plus rapide à comprendre car vous n'avez pas à tracer la logique ligne par ligne. Beaucoup de gens appellent cette différence "impératif vs déclaratif".

Soumettre un formulaire

Le cas d'utilisation canonique de jQuery a toujours été de soumettre un formulaire avec un appel AJAX, nous devrions donc également y jeter un coup d'œil. Vue n'a en fait pas de chose intégrée comme AJAX; il est typique dans l'application Vue d'utiliser quelque chose comme Axios (une bibliothèque JavaScript pour faire des requêtes HTTP) pour aider à cette tâche.

Cet exemple est un peu plus compliqué que les autres. Nous allons faire quelques choses ici :

1. Le bouton apparaîtra en gris avant que nous commencions à taper notre formulaire, puis il recevra une classe «active» et deviendra bleu;
2. Lorsque nous soumettons le formulaire, nous empêchons la page de se charger ;
3. Une fois le formulaire soumis, nous afficherons les données de réponse sur la page.

 <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)); }); }); });

Ici, nous verrons que les lignes 2 à 10 traitent de la gestion de la classe de boutons, de la même manière que nous l'avons fait auparavant. Nous passons un paramètre appelé event au formulaire, puis disons event.preventDefault() pour éviter de recharger la page. Ensuite, nous collectons toutes les données du formulaire à partir des entrées du formulaire, traitons le formulaire, puis insérons la réponse dans l'appel .done() de la requête 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) }) } } })

Dans la version Vue, nous décidons quels champs nous devons remplir dans le formulaire, puis nous les attachons avec ce modèle en V que nous avons utilisé précédemment. Nous vérifions la présence de name afin de basculer la classe. Au lieu de transmettre event et d'écrire event.preventDefault() , tout ce que nous avons à faire est d'écrire @submit.prevent sur notre élément de formulaire, et c'est pris en charge pour nous. Pour soumettre le message lui-même, nous utilisons Axios et nous stockons la réponse dans l'instance Vue en réponse.

Il y a encore beaucoup de choses que nous voudrions faire pour avoir un formulaire prêt pour la production, y compris la validation, la gestion des erreurs et l'écriture de tests, mais dans ce petit exemple, vous pouvez voir à quel point Vue peut être propre et lisible tout en gérant beaucoup de les choses mises à jour et modifiées, y compris les entrées de l'utilisateur.

Conclusion

Vous pouvez certainement utiliser jQuery si cela vous convient ! Cet article sert à montrer que Vue est également une jolie abstraction pour les petits sites qui n'ont pas besoin de beaucoup de surcharge. Vue est de taille comparable, facile à raisonner, et il est assez simple de basculer de petites fonctionnalités vers Vue sans réécrire votre code HTML en JavaScript et adopter un système de construction si vous n'avez pas la bande passante. Tout cela le rend assez convaincant à considérer.

En raison de la flexibilité de Vue, il est également facile de faire passer ce code à une étape de construction et à des structures de composants si vous souhaitez adopter une structure plus complexe au fil du temps. C'est en fait assez amusant de l'essayer, alors quand vous êtes prêt à le faire, consultez le vue-cli. Cet outil vous donne la possibilité d'échafauder une version complète de Vue et de webpack au niveau de la production avec seulement quelques commandes de terminal. Cela vous permet de travailler avec des composants à fichier unique, où vous pouvez utiliser HTML, CSS et Script en tandem dans un fichier qui constitue des composants uniques et réutilisables. Vous n'avez pas besoin de configurer la construction du webpack à moins que vous ne souhaitiez faire quelque chose de spécial, vous gagnez donc beaucoup de temps à configurer. Ils ont même une commande intégrée pour tout préparer pour le déploiement en production.

La bonne chose à propos de la flexibilité de choisir l'une ou l'autre manière d'incorporer Vue dans votre projet signifie que vous n'êtes pas obligé de changer votre style de travail en même temps, et vous pouvez même apporter des modifications lentement au fil du temps. C'est pourquoi les gens appellent Vue le framework progressif.