10 raisons d’utiliser Nuxt.js pour sa prochaine application web

Si vous êtes développeur et adepte de Vue.js, vous avez probablement déjà entendu parler de Nuxt.js. Mais vous ne savez peut-être pas en quoi le framework mérite tout ce tapage. Vous vous demandez probablement : « Pourquoi ai-je besoin d’un framework pour coder un framework ? » Vue facilite déjà le développement d’applications JavaScript. Quel peut bien être la valeur ajoutée à utiliser Nuxt.js ?

Dans cet article, Agily vous présente les 10 raisons pour lesquelles Nuxt est l’outil dont vous avez besoin pour votre prochain projet. 

 

Qu’est-ce que Nuxt.js ?

 

Nuxt.js est un framework de niveau supérieur qui s’appuie sur Vue. Il simplifie le développement d’applications Vue universelles ou à page unique.

 Nuxt.js résume les détails de la distribution du code serveur et client afin que vous puissiez vous concentrer sur le développement d’applications. L’objectif de Nuxt est d’être suffisamment flexible pour que vous puissiez l’utiliser comme base de projet principale. 

Quels sont les avantages à utiliser Nuxt pour le web design ?

Parce que ce framework se concentre en grande partie sur la phase de développement, vous pouvez profiter de nombreuses fonctionnalités en échange de seulement quelques kilo-octets supplémentaires ajoutés à vos fichiers JavaScript.

 Maintenant que les présentations sont faites, explorons plus en détails les raisons pour lesquelles vous devriez utiliser Nuxt.js pour votre prochain projet Vue.

1. Utiliser Nuxt.js pour créer des applications universelles plus facilement 

 

L’un des principaux arguments de vente de Nuxt.js est qu’il facilite la création d’applications universelles.

 A ce stade, vous vous demandez certainement : Qu’est-ce qu’une application universelle ?

 Une application universelle est utilisée pour décrire le code JavaScript qui peut s’exécuter à la fois côté client et côté serveur.

 De nombreux frameworks JavaScript récents, comme Vue, visent à créer des applications à page unique (SPA). Cette option offre de nombreux avantages comparée à un site Web traditionnel. Par exemple, vous pouvez créer des interfaces utilisateur ultra performantes qui se mettent à jour rapidement. Mais les SPA présentent également des inconvénients tels que de longs temps de chargement. Elles sont aussi mal vu par Google, le moteur de recherche n’appréciant que moyennement qu’il n’y ait pas de contenu initialement sur la page à explorer à des fins de référencement. Tout le contenu est généré via JavaScript, après coup.

 Une application universelle consiste à avoir une SPA, mais au lieu d’avoir une page index.html vide, vous préchargez l’application sur un serveur Web et envoyez le rendu HTML en réponse à une requête du navigateur pour chaque itinéraire. Résultat : cela accélère significativement  le chargement et améliore donc le référencement en facilitant l’exploration de la page par Google.

Nuxt.js vous aide à coder plus facilement des applications universelles 

La création d’applications universelles peut être fastidieuse car vous devez effectuer de nombreuses configurations à la fois côté serveur et côté client.

 C’est le problème que Nuxt.js vise à résoudre pour les applications Vue. Nuxt.js simplifie le partage de code entre le client et le serveur afin que vous puissiez vous concentrer sur la logique de votre application.

 Nuxt.js vous donne accès à des propriétés telles que isServer et isClient sur vos composants. Cela vous permettra de décider plus facilement si vous souhaitez afficher un composant sur le client ou sur le serveur. Il existe également des composants spéciaux comme leno-ssr qui est utilisé pour empêcher délibérément le rendu du composant côté serveur.

 Cerise sur le gâteau : Nuxt vous donne accès à une méthode asyncData au sein même de vos composants. Vous pourrez l’utiliser pour récupérer des données et les restituer côté serveur. Et encore, il ne s’agit que de la pointe de l’iceberg. Nuxt peut faire bien plus pour vous faciliter le développement d’applications universelles. 

2. Rendre statiques vos applications Vue et bénéficier de tous les avantages d’une application universelle sans serveur

 

La plus grande innovation qu’apporte l’utilisation de Nuxt vient avec sa commande nuxt generate. Cette commande génère une version complètement statique de votre site Web. Elle générera du code HTML pour chacun de vos itinéraires et le placera dans son propre fichier.

 Par exemple si vous avez les pages suivantes (i.e. les terme de Nuxt pour les routes) :

-| page/

—-| à propos de.vue

—-| index.vue

 Nuxt générera pour vous la structure de dossiers suivante :

 

-| distance/

—-| sur/

——| index.html

—-| index.html

 Les avantages de cette commande sont très similaires à ceux qu’offrent les applications universelles. Soit un balisage pour accélérer le chargement de la page et aider les moteurs de recherche et les bots des réseaux sociaux à explorer votre site Web.

La différence est que si vous décidez d’utiliser Nuxt.js, vous n’avez plus besoin de serveur. Tout est généré pendant la phase de développement. C’est très intéressant,  parce que vous bénéficiez des avantages du rendu universel sans avoir besoin d’un serveur. Vous pouvez simplement héberger votre application sur les pages GitHub ou Amazon S3.

 

3. Utiliser Nuxt.js pour fractionner automatiquement du code (pre-rendered pages)

 

Nuxt.js est capable de générer une version statique de votre site Web avec une configuration Webpack spéciale.

 Pour chaque route (page) générée statiquement, la route obtient également son propre fichier JavaScript. Ce dernier contient uniquement le code nécessaire pour exécuter cette route.

 Utiliser NuxtJs peut donc vous aider en matière de vitesse de chargement. Le framework va en effet permettre de réduire la taille du fichier JavaScript, par rapport à la taille de l’ensemble de votre application.

4. Configuration via la ligne de commande avec le modèle de démarrage

 

Nuxt.js dispose également d’un modèle de démarrage appelé starter-template qui vous fournit tout l’échafaudage dont vous avez besoin pour démarrer un projet avec une bonne structure de dossiers.

Dans quels cas faut-il utiliser Nuxt ?

Assurez-vous que vue-cli soit installé et exécutez la commande suivante : $ vue init nuxt-community/starter-template <nom-projet>

Ensuite, il vous suffit d’accéder à l’application et d’exécuter npm install et vous devriez être prêt à coder !

5. Configurer facilement des transitions entre vos itinéraires

Vue a un élément wrapper <transition> qui simplifie la gestion des animations JavaScript, des animations CSS et des transitions CSS sur vos éléments ou composants.

Nuxt.js configure vos itinéraires de manière à ce que chaque page soit enveloppée dans un élément <transition> afin que vous puissiez créer simplement des transitions entre les pages.

6. Utiliser Nuxt.js pour bénéficier d’une excellente structure de projet par défaut

Dans de nombreuses petites applications Vue, vous finissez par gérer la structure du code, bon gré mal gré, à partir de plusieurs fichiers. La structure d’application Nuxt.js par défaut vous offre un excellent point de départ pour organiser votre application de manière plus fluide

Voici quelques-uns des principaux répertoires avec lesquels vous pourrez configurer votre application :

  • composants — Un dossier vous permettant d’organiser vos composants Vue individuels.
  • layouts — Un dossier contenant les principaux layouts de votre application.
  • pages — Un dossier contenant les itinéraires de votre application. Nuxt.js lit tous les fichiers .vue à l’intérieur de ce répertoire et crée le routeur d’application.
  • store — Un dossier contenant tous les fichiers Vuex Store de votre application.

7. Coder facilement des composants de fichier unique

Dans de nombreux petits projets Vue, les composants sont définis à l’aide de Vue.component, suivi de new Vue({ el: ‘#container’ }) pour cibler un élément conteneur dans le corps de chaque page.

Cela fonctionne bien pour les petits projets, dans lesquels JavaScript n’est utilisé que pour améliorer certaines vues. Mais pour les projets de plus grande envergure, cela peut devenir rapidement assez difficile à gérer.

Or vous pouvez résoudre ce type de problèmes en utilisant des composants à fichier unique avec une extension .vue. Pour cela, il vous suffit de mettre en place un processus de construction avec des outils comme Webpack et Babel.

L’avantage à utiliser Nuxt.js est que le framework est préconfiguré avec Webpack. Vous pourrez ainsi commencer à utiliser les fichiers .vue sans avoir à configurer vous-même un processus de construction compliqué.

8. Compiler ES6/ES7 sans aucun effort supplémentaire

Parallèlement à Webpack, Nuxt.js est également pré-configuré avec Babel. Babel gère la compilation des dernières versions de JavaScript comme ES6 et ES7, qui peuvent être exécutés sur des navigateurs plus anciens.

Nuxt.js se charge de configurer Babel à votre place afin que tous les fichiers .vue et tout le code ES6 que vous écrivez dans les balises <script> se compilent en JavaScript. Un bon moyen de vous assurer que votre application fonctionne parfaitement sur tous les navigateurs.

9. Configurer avec un serveur de mise à jour automatique pour un développement simplifié

Comparé à la configuration manuelle de ce processus ou au processus de modification-actualisation-modification-actualisation auquel nous, développeurs Web, sommes habitués, utiliser Nuxt.js est un jeu d’enfant. Nuxt configure votre application avec un serveur de développement à mise à jour automatique.

Pendant que vous développez et travaillez sur vos fichiers .vue, Nuxt.js utilise une configuration Webpack pour vérifier les modifications. Plus intéressant encore, il compile le tout pour vous. Vous pouvez exécuter la commande npm run dev dans un projet Nuxt.js et ainsi configurer automatiquement le serveur de développement.

10. Entrer dans la communauté Nuxt.js

Le dernier avantage à utiliser Nuxt.js consiste à accéder à sa compilation GitHub. Nommée Nuxt Community, elle compile des bibliothèques utiles, des modules, des kits de démarrage et bien plus de ressources pour faciliter le développement de votre application. 

Jetez-y un coup d’œil pour voir si ce dont vous avez besoin est disponible avant de le coder vous-même.

Le mot de la fin

Toutes ces fonctionnalités font du développement d’applications Vue.js une expérience beaucoup plus agréable. Même si vous n’avez pas besoin d’une application universelle et que vous souhaitez vous en tenir à un SPA, utiliser Nuxt.js présente tout de même de nombreux avantages. Il peut être la base principale de votre projet en vous permettant d’accéder plus facilement à vos fichiers .vue, de compiler ES6 et de profiter de bien d’autres fonctionnalités.

Besoin d’aide pour mener à bien le développement de votre application web avec Nuxt.js ? Nous sommes là pour vous aider ! Découvrez nos services et parlez-nous de votre projet

Vous avez un projet en tête ?

Discutons-en ! 

Découvrez nos autres articles de blog

Loading...