Vue, j’l’avais pas vu

This entry was posted in Programmation and tagged javascript js react reactjs vue vue.js on by

(Pour Max: je t’ai mis un exemple de code tout fait en bas de page car je sais que ça va te saouler de tout lire)

Elle était facile, mais ça fait des années que le blog est up, je peux pas avoir de l’inspiration tout le temps.

Dans le dernier article, je vous offrais votre dose maintenant obligatoire de bashing de l’écosystème JS. En l’occurrence en suggérant que React était un bouquet de roses avec plus d’épines que de pétales.

Mais bon, si les gens utilisent React, ça n’est pas QUE parce que c’est la mode. C’est parce que cette techno répond à un besoin de plus en plus impérieux en dev front end : avoir un outil valable pour créer des GUI avancées en JS.

Parce que le combo jQuery + moteur de template, ça nous a mené loin, mais on arrive au stade où ça scale plus.

Pas mal de tentatives ont été faites pour répondre au problème : knockout, angular 1, polymer, etc.

La nouvelle génération (react, riot, vue, angular 2+, etc) est beaucoup plus mature et performante, et offre des fonctionnalités très sympas:

  • DOM virtuel qui permet de faire des mises à jour fréquentes sur de très nombreux objets à l’écran sans freezer le browser.
  • Découplage très élégant des données et de leurs représentations.
  • Facilité de manipulation des éléments HTML, des events et du cycle de vie de tout le bordel.
  • Création de composants graphiques isolés et réutilisables.

En gros, partout où on faisait avant $(selecteur).trucmuche(element), on peut maintenant faire ça plus facilement, plus rapidement et plus proprement. (Par contre Vue/React/etc font pas l’AJAX, tournez-vous vers axios ou gardez jQuery sous le coude).

Bon, si ils offrent TOUS ces éléments là, pourquoi diable est-ce que j’ai une préférence pour Vue.JS plutôt que Riot, Angular ou React ?

Souvenez-vous, je reprochais essentiellement ceci à React:

  • Grosse courbe d’apprentissage. Ce qui impacte la productivité de tout nouveau dans l’équipe.
  • Mauvaise ergonomie du JSX qui du coup s’écrit, se lit et se debug lentement.
  • Mauvaise foi totale de la communauté qui prétend qu’on peut utiliser React sans la tonne de nutella autour, ce qui est comme argumenter qu’on peut faire du Java sans IDE.
  • Nutella sus-nommé qui est blindé d’huile de palme et de vidange.
  • Globalement une API inélégante et peu intuitive.

Mais alors, qu’est-ce que Vue.js fait de mieux ?

Ben tout, mes amis. Tout.

Légèreté

A l’heure où les codeurs hypes de la vibe du flex ont tous un fichier de conf webpack de 3 km, mais déjà obsolète et qui pétera à la prochaine upgade, Vue offre un point de vue rafraîchissant sur la question.

TOUTE, j’ai bien dit TOUTE, la puissance de vue.js est accessible avec une simple inclusion de balise script.

Vous en avez marre des pages de 3Mo ? Minifié et gzippé, Vue.js pèse moins de 30ko.

Dans un monde où il faut soit faire un site Web, soit faire une SPA (aux chiottes l’amélioration progressive !), Vue permet de ne remplacer que quelques bouts de vos pages si vous n’avez pas envie de tout transformer en un monstre de JS.

La doc, très bien faite, vous permettra de prendre l’outil en main en une après-midi. En buvant du thé.

Le tout, sans besoin d’aucun écosystème particulier. Aucun. Rien. Ca marche out of the box.

En gros, là où tout le monde vous vend du scale up, Vue vous permet de scale down.

Puissance

Malgré cela, Vue reste parfaitement adaptée aux gros projets. En fait, elle a été créée pour et par l’équipe du site du géant chinois, alibaba.com. Alors oui, c’est sûr, c’est pas Facebook et son milliard d’utilisateurs, mais comme mes projets ne servent pas 10 millions de pages par jour, contrairement à Alibaba, je pense que je suis ok.

Dans la pratique, qu’est-ce que ça veut dire ?

Et bien d’abord, Vue est plus rapide que React. Ouais ça fait mal au cul de lire ça quand on vient de finir d’optimiser son pipeline de rendu JSX, surtout que la techno a été créée pour la vitesse. Mais voilà, c’est le cas.

Vue supporte aussi parfaitement l’inclusion dans un écosystème plus gros si le besoin s’en fait sentir :

En gros, Vue peut faire absolument tout ce que les autres font. Mais ne vous oblige pas à commencer en sortant le bazooka. Vue est ce que React aurait dû être depuis le début.

Notez qu’on peut remercier les devs de React pour avoir popularisé de nombreux concepts que Vue utilise. Standing on the giants’ shoulders et tout, et tout. Vue n’aurait jamais existé sans React. Mais maintenant que Vue est là, on peut laisser React en paix.

Elégance

De par son design, Vue vous permet donc de commencer doucement, en ajoutant 30ko à votre projet et en l’utilisant un peu ici et là. Puis quand vous en avez besoin, vous pouvez commencer à utiliser des fonctionnalités avancées.

Par exemple, vous pouvez comme avec Angular 1 balancer toutes vos variables et binding dans le HTML de votre page en vrac. Et plus tard tout refactoriser en composant comme avec React. Tranquille.

L’API de Vue est petite, et surtout, facile à comprendre car tout est bien nommé, et bien rangé. Voyez plutôt:

Vue({
  el: "#app", // l'élément sur lequel attacher la vue
  created: function(){
    // code lancé au démarrage
  },
  mounted: function(){
    // code lancé quand la vue est attachée à la page
  },
  updated: function(){
    // code lancé quand la vue est mise à jour
  },
  destroyed: function(){
    // code lancé quand la vue est détruite
  }
  data: {
    // ben ici y a vous données statiques
  },
  methods: {
    // ici les fonctions à rendre disponibles dans le HTML
  },
  computed: {
    // ici on met les données à recalculer à la volée
    // à chaque refresh
  }
})

Voilà vous avez là 50% de l’API de Vue. Very hard indeed.

On sent partout que les devs ont apporté des soins à des petits détails comme:

<!-- Lance truc() juste au premier click.
Appelle preventDefault automatiquement. -->
<a v-on:click.once.prevent="truc()">Foo</a>

D’une manière générale, tout template Vue est du HTML valide, ce qui fait qu’il est très facile d’insérer du Vue sur un site existant.

Un petit bout de vue

Mais alors, pour tous ceux qui en sont restés à jQuery et handlebar.js, à quoi ça ressemble tout ça ?

Ben un todo ressemble à ça en Vue:

<!DOCTYPE html>
<html>
<head>
  <title>Todo</title>
  <script src="https://unpkg.com/vue"></script>
</head>
<body>
<!-- Cette partie va être contrôlée par la vue -->
<div id="app">
 
<!-- Quand on soumet le formulaire, on ajoute la tâche -->
<form v-on:submit.prevent="addTask(newTask)">
  <!-- L'input est maintenant lié à la variable newTask -->
  <p><input v-model="newTask"> <button>Ajouter</button></p>
</form>
 
<ul>
  <!-- Créer un li pour chaque tache dans mon array 'tasks' -->
  <li v-for="task in tasks">{{task}}</li>
</ul>
 
</div>
 
<script type="text/javascript">
app = new Vue({
  el: "#app", // j'attache cette vue à l'élément avec l'id App
  data: {
    tasks: [], // mes tâches seront stockées dans l'array 'tasks'
    newTask: "", // ce que contient l'input du formulaire
  },
  methods: {
    addTask: function(task){
      this.tasks.push(task); // on ajoute la tâche dans l'array
      this.newTask = ""; // on vide l'input
    }
  }
})
</script>
 
</body>
</html>

(Vous pouvez littéralement copier-coller ce code dans un fichier todo.html et ça marche. Essayez de faire ça avec React…)

Comme avec Angular/React/Riot on a séparé complètement la logique de manipulation des données de celle de l’affichage qui est mis à jour automatiquement quand les données changent.

Contrairement à React, on n’est pas obligé de créer un arbre complexe de composants qui transforme toute sa page en soupe de JS(X). Mais contrairement à Angular, on n’est pas obligé de rester sur cet exemple simple, et on peut créer une hiérarchie de composants.

Un composant peut complètement isoler le JS, le HTML et le CSS (qui n’affecte alors que le composant):

Et pour que ça marche, pas besoin de préprocesseur, pas besoin de ES6, ES7, typescript, babel, webpack, npm… Vous pouvez les utiliser. Sur un gros projet je me fais chier à setup ce qui vaut le coup. Mais vous n’êtes pas obligé.

La communauté

La communauté est importante pour un projet, et celle de vue est très agréable. Ce sont des gens polis, humbles, et compétents. Ils pensent aux petits détails. Regardez par exemple cette page pleine de jolis schémas.

En comparaison, la communauté React est criarde. Les confs des devs de Facebook sont faites par des présentateurs tout droit sortis de South Park. Quand on critique react, on se fait insulter personnellement sur twitter par les fan boys plutôt que de tenter de discuter, preuve systématique de l’absence d’arguments.

Enfin les seuls éléments donnés pour combattre les critiques sont les raisons des problèmes, un rappel de la taille des utilisateurs et des “moi j’aime” laconiques.

Mais faites un test. Prenez 3 dev, un react, un jquery, un vue. Faites leur faire un agenda CRUD avec recherche et autocompletion qui tape en Ajax dans un backend Django/Rails/Whatever. Donnez leurs des machines vierges. Et sortez le pop corn.

Pour le moment, React possède encore deux avantages: react native, et la masse (fb, les utilisateurs, le nombre de plugins, etc).

Mais honnêtement ? Il y a très peu de bénéfices à utiliser React plutôt que Vue sur la plupart des projets pur Web. Et un coût garanti d’être élevé.

Angular 1 est en train de mourir de l’abandon de Google. Après la sucette de l’incompatibilité d’Angular 2, je n’ai aucune confiance en la techno et ne compte donc pas réinvestir de billes dedans. De plus Angular 2+ souffre du même problème d’obligation d’installer la terre entière avant de commencer à coder.

Riot est une meilleure alternative, mais l’obligation de passer par des composants est un no-go IMO. Créer des composants pour moi est l’exception, pas la règle. Je le fais en dernier, à la phase de refactoring.

Donc ne vous emmerdez pas, prenez quelques heures pour jouer avec Vue, ça coûte pas cher, et c’est chouette.

————-

On me signale dans l’oreillette de linker dans la doc française.

53 thoughts on “Vue, j’l’avais pas vu”

  • Oprax

    Vous avez une store et un routeur pour vue. -> je dirais UN store non ? et le lien pour le router pointe vers vuex

    Sinon je plussoie l’article, j’ai commencé par vue.js et j’avais toute suite accroché. J’ai fais du react durant un hackaton mais ce n’était pas la joie :/

  • batisteo

    Y’a quelques mois je devais implémenter à La Rache un petit calculateur de prix. J’ai commencé avec jQuery, je me suis arrêté vite-fait.

    Finalement je me suis tourné vers Knockout, parce que j’avais pas compris qu’on pouvait utiliser Vue juste avec une balise de script. Pour la prochaine fois donc.

    Mais sinon, je suis de plus en plus intéressé par Intercooler pour faire de l’Ajax sans prise de tête, en HTML (oui ça utilise jQuery derrière). Qu’est-ce que vous en pensez ?

  • Robin Dupret

    Petite typo : “comme mes projets ne servent pas”.

    Super article en tous cas, merci ! :-)

  • Biganon

    Crillarde → criarde (pas sûr que ce soit le terme adapté d’ailleurs)

    De part → de par

  • Sam Post author

    Aucune idée mais c’est une lib qui est exterieur a vue. Pas vraiment d’avantages par rapport à axios, si ce n’est que ça te fait le wrapping de l’url comme le faisait angular resource.

  • David CHANIAL

    Merci Sam,

    J’ai toujours eu du mal avec les Frontends et Javascript (et ce n’est pas prêt de changer)

    Entre ton don du mois, ton post sur React, et ce post sur Vue, tu m’as donné enfin de l’insérer ici où là et de voir où ça va me mener.

    David

  • manatlan

    A pas compris le “progressive aux chiottes” ..

    Il n’y a pas de comparaison possible entre une SPA et une PWA ?! non ?

    Sinon, Pour VueJS : si on veut faire des composants “.vue” , alors on est obligé de passer par un browserify/bower ;-( … ça c’est bête !

    (en riotjs : c’est possible ;-)

  • Sam Post author

    L’amélioration progressive, c’est quand tu as un site qui marche sans JS, mais avec JS activé a plus de fonctionalités.

    Par ailleurs, on peut parfaitement faire des composants sans utiliser le .vue. Ils ont tout prévu chez vue :à

  • Pythoresque

    Excellent post, comme d’habitude. Ca fait un moment que je suis ce blog, et toujours avec autant de plaisir !

    De mon côté, j’utilise aussi Vue.JS avec Flask/Django. Mais je me suis rendu compte que mon défaut, c’est l’organisation du code en général. J’essaie d’appliquer le bouquin “Clean Code” mais j’ai, je pense, du mal à bien procéder sans une aide visuelle sous le coude.

    J’ai déjà fouillé le net, mais sans grande trouvaille…

    Connaîtriez-vous un très bon exemple sur GitHub codé proprement et bien écrit avec de jolis tests unitaires/documentation aux petits oignons de sites webs ou apps avec Flask puis Django + Vue.JS :) ?

  • Sebastien

    VueJS à l’air pas mal en outsider d’ Angular4+

    Par contre, moi ce qui me dérange et du coup me fait un peu peur (peur d’investir du temps pour me former sur cette techno)

    C’est qu’il n’y a qu’un seul gars aux manettes derrière (Evan You) , le jour ou le manque de temps ou de moyen ce fera sentir, j’ai peur que VueJS tombe un peu dans l’oublie comme les frameworks Durandal ou Aurelia (eux aussi plein de promesse et créer par un ancien de chez google ).

    D’autant plus que dans la v4 Angular à rattraper (voir dépasse) question benchmark et dans la v5 (en octobre) beaucoup d’amélioration sont attendu au niveau de la taille des fichiers …

    Pensez vous que ça vaille quand même le coup d’investir sur Vuejs ?

  • Sylvain POLLET-VILLARD

    Evan You est passé indépendant et bosse à plein temps sur Vue, il est supporté par plusieurs boîtes et particuliers et dispose d’un confortable Patreon à +10.000$/mois (https://www.patreon.com/evanyou). Il y a trop de fric en jeu pour que l’auteur décide de tout laisser en plan.

    Aussi la comparaison avec Aurelia est mal appropriée, Rob Eisenberg est toujours sur le coup. Il faisait encore sa promo au dernier MS Build. Aurelia n’est peut être pas aussi populaire que ses concurrents mais il n’est certainement pas abandonné.

    Quant à ce qu’Angular surpasse Vue en performances et taille de fichiers … c’est pas demain la veille haha !

  • Sam Post author

    @Sebastien : je pense que si tu veux la garantie qu’une techno soit encore là dans 5 ans, choisi React. Je crois en vue, je ne pense pas que ça se casse là gueule, mais tu n’aurais jamais autant de sécurité qu’avec un produit qui est au coeur de tout le code d’un des sites les plus utilisés au monde.

  • Sam Post author

    Pareil. Des fois j’ai l’impression qu’elle a été écrite par des potes.

  • ThomasG77

    “Pour le moment, React possède encore deux avantages: react native, et la masse (fb, les utilisateurs, le nombre de plugins, etc).”

    L’écart s’amincit vite:

    La masse “critique est en train d’être atteinte: 54077 stars pour Vue sur Github et 67104 côté React.
    Weex https://weex.apache.org/ semble être assez similaire à React-native. Il utilise Vue par défaut pour créer des applis natives. Utilisé par Alibaba, très gros acteur côté Chine (300 milliards de capitalisation)

  • bunam

    “Il faut se méfier des Chinois !!” Peut-être que la *haine envers VueJS en provenance des autres FW c’est simplement du racisme ?

    Bon il faut que je m’y colle !!!

    Sinon j’aime bien le ton détendu du site, mais ne comprends pas cette phrase : “Sur un gros projet je me fais chier à setup ce qui vaut le coup. Mais vous n’êtes pas obligé.” :p

  • Sam Post author

    Sur un gros projet, je vais mettre webpack + babel + es6 + browsersync + sass. Mais un projet vuejs peut très bien s’en passer. Ca devient un choix effectué quand il est en ma faveur, pas un cout d’entrée obligatoire.

  • Seb

    Pour l’intégration avec les templates de Django ça se passe comment ? Parce que les {{ variables }} vont être transformées par le moteur de template…

  • netchose

    Merci pour l’article.

    je voulais m’y mettre mais webpack avait eu raison de moi.

    pour les “Vue single file composant” j’ai finalement opté pour cette solution “paresseuse”, rapide et efficace:

    Jinja2 :

    je mets la partie template et CSS dans des” block assignement” de Jinja2.

    ensuite plus qu’à insérer ces blocks dans la partie template du composant, et dans la partie data pour le block css

    avec l’injection de code de Pycharm, on la coloration syntaxique pour chaque partie.

    Aux chiottes Webpack :p

  • Netchose

    il me semble qu’il manque “props” dans le schéma de l’api ?

  • Gulliver

    Salut à tts,

    J’aimerais me mettre à VueJS, mais pour ça je cherche un exemples/sources fonctinnelle et sécurisé d’une authentification via token JWT (VueJS Expressjs) car je ne sais pas developer cette partie (je trove que des exemples incomplet).

    Si quelqu’un à un lien Web/Github ça serais super … bon vuejs à tous ;-)

  • Shin

    Sympathique quicktour, surtout mis en parallèle avec le React bashing rédigé récemment :D.

    Je serai curieux d’avoir votre retour sur Aurelia. Vous l’avez essayé ? C’est un framework que j’affectionne, mais il y a encore assez peu de monde qui l’utilise (et ça risque de ne pas changer, il faut croire), donc, peu de feedbacks comme celui-ci.

  • Nicolas DEVAUX

    Personnellement je suis fou d’Afflelou mais je suis indépendant et les boîtes qui embauchent aiment la grosse techno bien lourde à la mode.. Donc obligé d’investir dans les deux… Pour la joie et pour manger..

    Ps: super blog que je découvre !

  • Bast

    Ton article m’a convaincu et depuis quelques jours, je tente d’élargir mon écosystème de Django à vuejs. Je me dis qu’une formation serait pas mal à propos. Est-ce que tu sais qui propose ça?

  • Sam Post author

    C’est pas encore très répandue en France. Si tu veux utiliser ton CPF, y a plb et apollo formation de mémoire. Après si tu as pas besoin du CPF, je peux twitter ça et te trouver un indé qui le fera.

  • M_Dziwny

    J’utilise vue.js depuis quelques semaines sur deux projets, l’un associatif moyennement complexe et l’autre pro pour une UI complexe dans une très grosse boite. Dans les deux cas, j’en suis plus que content.

    La prise en main est extrêmement rapide, en une semaine j’étais déjà très à l’aise et les autres projets qui ont migré en s’inspirant de ce que j’avais fait on rapidement trouvé leurs marques sans que j’ai besoin de passer du temps avec eux.

    Le fait de ne pas être obligé de partir avec grunt/webpack/… sur des projets simples est un gros plus, surtout quand des gens encore peu expérimentés en frontend sont amené à intervenir sur le projet, ça permet une montée en compétence progressive.

    Le framework est complet (avec Vuex, le router, …), je n’ai pas encore trouvé de points bloquants, les messages d’erreurs du framework sont bien foutus et guident bien pour le debut.

    …

  • Aurélien

    Coucou,

    Oui Vue c’est que du bon :)

    Une petite typo dans le code de vue :

    destroyed: functon(){ // manque le i

  • francis

    Il est certe très agréable de pouvoir créer son petit fichier bim bim et ça fonctionne direct.

    Mais quelque chose qui m’a vraiment fait kiffer c’est vue-cli.

    https://github.com/vuejs/vue-cli

    tu tappes ta ligne de commande :

    vue init webpack my-project

    et paf tu as un projet dans lequel tu écris en ES6, qui intègre automatiquement Babel, qui te webpack tes fichiers, qui intègre un hot reload (tu sauvegarde ton fichier, le browser met la page à jour tout seul), qui intègre un linter (tu fais une faute évidente dans le js, t’as même pas à debugger, la page affiche le message du linter en te disant que t’as fait une boulette).

    En gros tu tapes une ligne et tu es prêt à commencer à coder tes jolis petits fichiers .vue

    Le kiff si tu veux pas t’emmerder.

    A essayer

  • Finrod

    Excellent article, c’est un peu ce que j’avais senti en cherchant un framework pour migrer notre appli Backbone.

    On avait choisi Vue pour deux raisons :

    – la courbe d’apprentissage toute douce

    – la possibilité de migrer progressivement, on a actuellement des pages Backbone et Vue qui cohabitent parfaitement !

    Aucun regret :)

    @Bast : ce n’est pas de la formation pro, mais Grafikart a fait une très bonne série de vidéo sur VueJS : https://www.grafikart.fr/formations/vuejs

  • Emkaf

    Bonjour Sam et merci beaucoup pour ce message super intéressant !

    Je suis dev web amateur, sur mon temps libre, et pour un petit projet personnel, je me suis dit que je me mettrais à utiliser Vue pour du frontend (après avoir vu votre post notamment). Mais en fait, je ne sais pas trop comment interfacer ça avec DRF. J’ai vu que vous parliez d’Axios et je pense que c’est une bonne piste mais cela ne me suffit pas pour savoir vraiment bien où placer mon vuejs et comment le lancer !

    Avez-vous des exemples de projets un peu plus complets que hello-vue-django ou DjangoVue qui pourraient m’aiguiller ?

    Merci pour tous ces posts en tout cas, ça fait plaisir pour un amateur de lire tous ces messages clairs et pleins d’informations !

  • Sam Post author

    Vue + Axios + DRF n’a rien de particulier. Si tu comprends comment chaque morceau fonctionne individuellement, les faire marche ensemble ne demande pas de connaissance en plus. Donc d’abord:

    • apprend comment fonctionne HTTP, le protocole. Le principe des requête, les headers, le JSON, les verbes, tout le bordel. C’est la base du web, et trop de personnes essayent de créer des pages web sans savoir ça. Mais comprendre HTTP répond à la moitié des questions.

    • ensuite, apprend comment utiliser django normalement.

    • puis essaye de faire des requêtes avec axios vers django, sans DRF, pour récupérer du JSON que tu as fais manuellement.

    • puis essaye de faire la même chose avec DRF.

    • enfin rajoute Vue par dessus.

    Y a moult choses à savoir :)

  • Zoubi

    Fais chier, j’ai investi du temps sur Angular4, tout en sachant que c’était pas le must, mais juste pour pouvoir utiliser ionic !

    Maintenant que Ionic va devenir complètement indépendant du framework (cf. https://stenciljs.com/), j’hésite entre rester sur le bouzin angular, ou ré-apprendre un autre framework comme Vue.

    Pour moi, pouvoir utiliser facilement un framework front au sein de templates back, c’est game changing !

    Typiquement, le projet d’enculés avec un dashboard métier hyper complexe de 100 pages, tu sais très bien que si tu fais une SPA pour ça, tu te tires une balle dans le crâne assez vite tellement ça n’avance pas.

    Du coup, tu le fais en Django pur, avec des bons templates old school. Mais y’a toujours le moment où t’as besoin d’avoir de l’affichage dynamique, et tu ressors le bon vieux jQuery malgré toi, la larme à l’oeil…parce que tu vois pas d’autres solutions simples.

    Là, on pourrait avoir à la fois :

    – Django en back-end only + Vue en SPA (avec Stencil par dessus éventuellement) (2 projets)

    – Django en MVT + certaines pages incluant du Vue au sein des templates (1 projet)

    La belle vie putain.

    La simplicité est la feature la plus importante !!!!

  • Quentin

    Merci pour cet article ..
    Je dev sur Django toute la journée, et rajouter des bouts de jquery me rend fou, je trouve ça laid, et bricolo.

    Selon toi/vous (les commentateurs), est-il viable de faire un Django en utilisant le moteur de template de Django et utiliser vuejs ci et là, ou de passer sur un Backend Django REST, et générer les templates entièrement avec vuejs ?

    Merci !

    En tout cas +1 pour la doc, et la philosophie de vuejs en général, ça me réconcilie clairement avec le JS

  • Sam Post author

    Les deux sont valables, ca depends sir le projet est orienté contenu ou activité.

Comments are closed.

Des questions Python sans rapport avec l'article ? Posez-les sur IndexError.