Tous les articles pour Vue.js

  • Comment faire du routage strict avec Vue Router et Vue Server Renderer ?

    L'URL www.example.com/foo n'est pas la même URL que www.example.com/foo/. Or, si cela n'est pas gênant dans une application monopage (plus loin SPA pour « Single Page Application »), cela devient critique pour de l'optimisation de moteur de recherche (plus loin SEO pour « Search Engine Optimization ») dès lors que le contenu est généré côté serveur.

    Côté serveur, les routeurs comme celui d'Express possèdent un mode strict pour que l'adresse /foo ne soit pas la même que l'adresse /foo/. Mais qu'en est t-il de Vue Router ? Et surtout, comment faire concorder le routage client et le routage serveur pour que l'hydratation (la prise en main côté client d'un rendu côté serveur) concorde ?

    Je vous le donne en mille : de base, là où Express en mode strict vous renverra une page 200 pour /foo/ et une page 404 pour /foo, Vue Router lui, en mode strict, vous renverra exactement l'inverse !

    Comment dans ce cas utiliser Vue Router et Vue Server Renderer pour du routage strict dont les moteurs de recherche sont si friand pour une SEO à toute épreuve ? La réponse à la fin !

    Cependant, afin que ce billet soit utile également pour ceux n'ayant pas (encore) ce problème et qui souhaitent découvrir par l'exemple comment fonctionne du SSR avec Vue (et de facto, qu'est-ce que c'est réellement), je vais élaborer un code pour vous accompagner dans cette compréhension, pas à pas. Seulement ensuite nous mettrons en évidence notre problème avant de le résoudre.


  • Pourquoi vous ne comprenez rien au JavaScript ?

    Vous avez un pied dans le monde du numérique depuis quelques années, ou vous côtoyez les métiers du web de près ou de loin, et pourtant vous ne comprenez pas totalement encore les problématiques des développeurs Front-end, ou même maintenant des développeurs Full-stack.

    Pourquoi finalement ne peut t-il pas « simplement » y avoir un développeur web comme au bon vieux temps. Quelle est là réelle différence avec un intégrateur HTML/CSS ? Pourquoi le web client n'est t-il plus si abordable pour les développeurs ? Pourquoi coûte t-il si cher à présent ?

    Je vous propose, à partir d'une petite discussion fictive entre, un acteur du numérique qui n'a plus l’œil partout, et un développeur Full-stack sur le feu, de mettre en lumière en quoi le web d'aujourd'hui est « compliqué ».

    Cet article est inspiré et adapté en français de l'article « How it feels to learn JavaScript in 2016 », lui-même inspiré par « It's The Future » que j'ai modifié pour y apporter ma propre expérience. Vous pouvez lire les articles originaux respectivement ici et ici.

    Cet extrait n'est qu'une mise en situation, et tout comme n'importe quelle bibliothèque JavaScript, il ne devrait pas être pris trop au sérieux !

    En espérant que vous y apprendrez des choses !


  • Vue + NodeAtlas : de l'art du SSR ou Rendu Côte Serveur avec JavaScript

    Nous allons voir dans cet article comment faire du rendu côté serveur ou SSR (Server-Side Render) avec le framework JavaScript client MVVM (Modèle Vue Vue-Modèle) Vue couplé au framework JavaScript serveur MVC(2) (Model View Controller) NodeAtlas !

    Alors ce titre parle peut-être aux habitués des architectures clientes MVVM qui ont des difficultés avec le référencement et semble peut-être barbare pour d'autres. Lançons nous dans une petite explication histoire de rendre cet article intéressant également pour les néophytes : comprenons le problème et trouvons la solution à travers cette page.

    Quel est le problème traité dans cet article ?

    Le problème avec les frameworks MVVM client est qu'ils construisent le site à partir de rien. Fouillez la source du code de la réponse HTTP de la page courante, celle lue par les indexeurs de contenus ou les navigateurs sans JavaScript ; il n'y a rien. Aussi, si je créé une liste d'actions futures pour la roadmap de ma super App, et que je souhaite pouvoir manipuler aisément (ajout et retrait) ses éléments grâce à un coupleur de données vue-modèle ; le revers de la médaille sera que les informations utilisées pour cette construction proviendront de fichier JavaScript ou morceau de HTML qui ne veulent rien dire pour les indexeurs où même les validateurs de page. Vos sites sont donc souvent « SEO merdique » et « W3C bancale ».

    Quel solution ?

    Le SSR ou Rendu Côté Serveur. Voyons ça au travers de cette page exemple avec Vue et NodeAtlas !


  • Vue.js vs React vs Angular vs les autres MVVM

    Vue.js est un framework JavaScript client progressif permettant de créer, maintenir et évoluer des interfaces utilisateurs en liant les données utilisées entre la Vue et le Model. C'est une alternative sérieuse à React, Angular et les autres frameworks MVVM (Modèle Vue VueModèle).

    Vue.js

    J'ai eut l'occasion d'essayer Vue.js dans sa version 1 et son extrême simplicité et flexibilité m'a séduite. À l’instar de NodeAtlas, sa puissance vient de ses fonctionnalités intégrables de manière évolutives et versatiles ; on peut tout aussi bien utiliser Vue simplement sur le formulaire d'une page ou à plus grande échelle avec des composants et du routage à travers l'architecture d'un site complet.

    Cependant, là où en version 1, Vue paraissait une alternative séduisante à AngularJS (aka Angular 1) ou Knockout, dans sa version 2 il devient de plus une alternative sérieuse à Angular (aka Angular 2), React et les autres frameworks MVVM tant sur le plan des fonctionnalités que des performances.

    Pour faire simple —si vous débarquez dans le monde des framework JavaScript client MVVM et que vous ne savez pas quoi choisir— vous devriez choisir Vue ! Quoi qu'il arrive, il sera un choix pertinent pour les cas d'utilisation que vous en ferrez.

    Nous allons dans cet article :

    1. rapidement exposé pourquoi vous devriez utiliser Vue en lieu et place de Angular ou React dès maintenant et
    2. traduire des explications approfondies à propos des différences entre Vue et les autres frameworks.

  • Outil Munchkin : Listez, Mélangez, Classez, Triez et Créez vos Jeux !

    Je suis fan de Munchkin depuis des années maintenant ! Mais j'ai un assez gros problème depuis quelques temps avec le Munchkin : plus les extensions augmentes et plus j'ai des difficultés à pouvoir jouer avec des jeux équilibrés. Vous avez peut-être le même sentiment et si vous vous êtes déjà confronté aux problèmes listés ci-après, cette page peut vous être utile !

    Elle va vous permettre de :