Rencontre du troisième type avec Vue.js

Cela fait un petit moment que je teste Vue.js, un framework Javascript frontend moderne. Sachant qu’il s’agit de mon premier contact avec ce genre d’outil (lisez : du même style qu’Angular et compagnie), j’ai nommé mon article en conséquence.

Prologue¶

Tout d’abord il faut que vous sachiez que j’ai été élevé avec jQuery.

Enfin, pas toujours. Au début de mon apprentissage du web - c’est à dire en 2006 - j’ai évidemment touché au Javascript pur, mais j’ai remarqué au bout d’un an que c’était pas compatible partout, et que certains trucs étaient répétitifs ou chiants à faire. J’ai alors découvert Mootools, que j’ai vite abandonné pour jQuery. Je l’ai tout de suite kiffé et utilisé jusqu’à maintenant, c’est à dire pendant environ 10 ans.

Je peux vous dire que quasiment 10 années de jQuery, ça laisse des méchantes traces. C’est tellement facile à utiliser, à appréhender et puissant que ça en devient malsain : on en oublierait comment coder autrement, et au final on ne pense que “jQuery”. Du coup, dès que j’avais besoin de manipuler le DOM, j’utilisais de facto jQuery.

Bref, si vous souhaitez avoir un avant-goût de Vue.js et que vous vous reconnaissez dans les paragraphes ci-dessus, continuez à lire.

A wild Vue.js appears¶

Les frameworks Javascript frontend “modernes” qui permettent de créer des applis web type MVP facilement, j’en entends parler depuis plusieurs années maintenant. Angular, React, Ember, Mithril, Backbone, Knockout, et j’en passe : il en existe tellement qu’un site a été créé pour pouvoir en choisir un (c’est le monde du Javascript, cherchez pas à comprendre 😉).

Dans cet article, je ne vais pas vous expliquer pourquoi j’ai choisi Vue.js (because why not) ni comment l’utiliser ou comment il fonctionne (il y a un site et un livre pour ça). Je vais juste vous présenter deux codes différents qui parlent d’eux-même : l’un écrit en jQuery et l’autre en Vue.js. En soit ils ont le même but : modifier la vue (le V de MVP) côté client (le navigateur web). C’est juste une façon de faire différente.

J’ai donc créé une appli web pour m’entraîner dont voici un petit cahier des charges. Un truc bidon :

• Afficher une liste prédéfinie de personnes
  • Pouvoir trier cette liste par nom
  • Pouvoir rechercher dans cette liste par nom
  • Pouvoir ajouter une personne
• Pour chaque personnes, pouvoir la supprimer
• Que ça soit lors d’une recherche ou non :
  • Afficher un message si aucune personne dans la liste
  • Afficher le nombre de personnes au total

Résultats¶

• jQuery (source)
• Vue.js (source)

Attention : il serait con de comparer le nombre de lignes. Comparez plutôt la façon de faire.

Notez deux choses :

• La recherche dans la démo jQuery est case-sensitive. Flemme de faire en sorte qu’elle fonctionne parfaitement ;
• Je n’ai pas implémenté le tri dans la démo jQuery. C’était la dernière fonctionnalité à implémenter, et après l’avoir fait avec une facilité scandaleuse avec Vue.js, la flemme s’est emparée de moi à nouveau.

Conclusion¶

J’ai créé ces applis de test en même temps, fonctionnalité par fonctionnalité, en commençant par Vue.js puis avec jQuery. Je peux vous dire que je me suis dit de nombreuses fois, après avoir terminé une fonctionnalité avec Vue.js : “rhan merde faut le faire avec jQuery maintenant pfff ‘chier…”.

Je n’ai évidemment fait qu’effleurer Vue.js pour le moment. Je suis en train de créer une autre petite appli sympathique qui utilise des autres fonctionnalités super cool de Vue.js. Et il y en a, des autres fonctionnalités super cool.