Mon expérience avec Nuxt, le framwork basé sur Vue.js

Spoiler alert : J'ai adoré

Je souhaitais me créer mon petit espace à moi sur la toile où raconter mes aventures de codeur. J'avais pas envie d'un site Wordpress à papa (sooooo 2010), mais plutôt d'une approche serverless. Je suis tombé sur Nuxt et je suis comblé.

C'est quoi Nuxt ?

Dans le monde bouillonnant des frameworks Javascript, trois produits ont réussit à faire leur trou. Angular, React et Vue ont le vent en poupe en ce moment. Chez Angular tout y est intégré et présent dès le déballage : routing, formulaires, testing ... avec des modules officiels maintenus par Google. Chez React et Vue, c'est un peu différent : on a un produit "minimaliste" et ensuite il faut aller chercher les librairies à droite et à gauche à coup de npm install pour ajouter à notre installation de base tout ce qu'il manque. C'est à dire beaucoup de choses. Cette approche offre une grande liberté, mais moi j'avoue que ça me plaît moyen de chercher et de comparer les packages pour réussir à faire quelque chose d'aussi simple que du routing ou de gérer un store de données.

C'est là que le framework Nuxt entre en jeu. Il est battit sur Vue.js et intègre la crème des modules Vue.js, le tout parfaitement packagé. Un vrai gain de temps et des prises de tête en moins pour le développeur. Mais il va beaucoup plus loin ! En effet les frameworks Javascript, c'est bien joli car on obtient des applications ultras réactives mais cela à un prix : le référencement. Allez afficher le code source d'un application Angular, Vue ou React et vous ne verrez pratiquement rien : tout est Javascript et interprété par le navigateur.

Impossible dans ces conditions d'avoir un SEO digne de ce nom et de ne pas se retrouver enterré au fin fond des résultats de recherche Google. Il faut donc se débrouiller pour faire ce que l'on appelle du Server Side Rendering (SSR). Il s'agit là de produire sur le serveur le rendu de notre page en bon vieux HTML et en parallèle d'envoyer au visiteur notre application JS ultra-réactive. Le meilleur des deux mondes ! Cependant, c'est un processus complexe, j'ai essayé de le faire en Angular 6 et c'était franchement la purge.

headache

Nuxt a l'avantage de proposer le SSR "Out Of The Box" ! Lors de l'initialisation du projet il suffit de cocher cette option et il se débrouille tout seul ! Plus qu'à héberger notre application sur un serveur Node.js (Heroku par exemple) et le tour est joué. Mais ce n'est pas tout, il peut aussi générer toute un version statique de notre site. A quoi bon avoir un site statique si on peu avoir du SSR sans même transpirer ? Profiter des hébergements Zeit & Netlify qui déploient gratuitement votre application sur des CDN (Content Delivery Network). Avec Nuxt on va aussi pouvoir aller titiller de la Jamstack !

Qu'apporte Nuxt aux développeurs Vue.js

Je ne vais pas insister sur le SSR qui peut être la raison principale d'utilisation de Nuxt, mais plutôt sur toutes les petites choses qui vont faciliter la vie du développeur et qui améliorent encore l'utilisation de Vue.js

L'installeur

Par défaut Nuxt propose un installeur en ligne de commande qui nous déploie un projet vide auquel on peut ajouter divers outils :

Ajouter un framework UI pour gérer la partie graphique. On retrouve ici les plus célèbres : Bootstrap, Bulma, Tailwind CSS ... et Vuetify mon préféré pour obtenir une interface material design du plus bel effet

Des outils d'aide au développement de type Linting comme Prettier, ESLint, StyleLint etc... pour produire un code plus propre

L'ajout du framework de test comme Jest

L'installeur nous propose aussi l'intégration d'Axios (pour les requêtes HTTP) et même si on souhaite créer une Progressive Web App (PWA). Pas besoin de jouer avec les services workers, toute cette partie est gérée par le framework. Là aussi ça nous fait des vacances !

Le routing

Avec Vue, React ou Angular, l'ajout d'un composant permettant d'ajouter une nouvelle page à notre application implique la gestion d'un fichier de routing. En gros, ce fichier va permettre de faire le lien entre une URL et le composant qui doit être appelé.

En Nuxt, pas besoin de gérer le fichier de routage : il est automatiquement généré par Nuxt en fonction de l'arborescence de notre répertoire "pages". Si j'ajoute un fichier à l'intérieur de ce dossier, Nuxt va me créer pour moi la route correspondante dans son fichier de routing.

Bien sûr, pour ceux qui veulent gérer leur routing à la main, c'est aussi possible.

La gestion des stores de données & des middlewares

Pour obtenir une application où les données sont les mêmes dans tous les composants sans avoir à trop se prendre la tête, il est souvent nécessaire d'intégrer un store de données. Celui-ci sera la référence de nos données dans toute notre application. Chez React on a Redux, chez Angular on a NgRX et chez Vue on a Vuex.

Nuxt intègre dès le départ Vuex et travaille dans l'ombre pour nous faciliter notre vie de développeur. En effet si un fichier est ajouté dans le répertoire "store" de notre application, le framework va ajouter Vuex. Les stores ainsi créés seront automatiquement accessibles dans toute notre application.

Le fonctionnement des middlewares (des fonctions exécutées avant le rendu des pages) est assez similaire : il suffit de les ajouter dans le répertoire "middlewares" et ils seront utilisables partout dans votre application.

giphy

Pour terminer

Grâce à Nuxt, le Server Side Rendering est accessible à tous et sans souffrance. Mais au final ce que j'apprécie le plus c'est d'avoir un ensemble d'outils cohérents et complets qui me facilitent grandement le développement. De plus la documentation en Français est bien fichue (les fondateurs du projet Alexandre et Sébastien Chopin sont français ce qui doit aider) et je n'ai rencontré aucun point de blocage lors de mon développement. Bref, que du bonheur et j'avoue que j'aurai maintenant du mal à commencer une application Vue sans ce superbe outil.

Site officiel de Nuxt.js