Back-End, Framework, Front-end

Passionnés par le développement depuis plusieurs années, 2 frères nommés Alexandre et Sébastien Chopin ont décidé de créer ensemble le framework NuxtJs afin d’améliorer l’expérience des développeurs.
Simple, puissant et intuitif sont les maîtres mots de ce framework JavaScript.

Qu’est-ce que NuxtJs

NuxtJs est un framework gratuit et Open Source basé sur VueJs et NodeJS. Il est très apprécié par les développeurs pour sa flexibilité et son architecture modulable.

NuxtJs permet une simplification et une accélération du développement mais aussi une optimisation des applications.

Le framework Js est surtout connu pour le développement d’applications dites “universelles” ou encore “isomorphes”. Le code a la particularité de pouvoir tout aussi bien être exécuté côté serveur que côté client.

 

Les avantages du développement avec NuxtJs

Développer avec le framework NuxtJs apporte plusieurs avantages. Le premier que l’on peut citer est celui de l’apprentissage. En effet, étant basé sur VueJs et NodeJs, le framework utilise des technologies JavaScript déjà connues. Il n’y a donc pas besoin pour les développeurs d’apprendre un nouveau langage de programmation.

De plus, NuxtJs permet de développer des applications qui peuvent s’exécuter côté client comme côté serveur avec le même code grâce au plugin SSR (Server Side Rendered). Les développeurs ont donc moins de code à gérer et à mettre à jour, le débogage se fait plus simplement.

Contrairement à VueJs, NuxtJs est auto-configuré et prêt à l’emploi. Bien sûr, ces configurations par défaut sont totalement modifiables mais, elles permettent tout de même de commencer un projet avec une base sans avoir à se préoccuper de ces réglages qui peuvent s’avérer fastidieux.

Enfin, avec NuxtJs le système des routes est entièrement automatisé, ainsi lorsque vous ajoutez, modifiez ou supprimez une page, cela se met automatiquement à jour dans votre fichier routes. Pour cela, il vous suffira de créer votre page VueJs et de la placer à la racine de NuxtJs, dans le dossier nommé “pages”. NuxtJs sera capable d’extraire le nom de cette nouvelle page et de la générer dans le fichier de configuration du routeur.

 

3 modes de rendu proposés par NuxtJs

NuxtJs propose 3 modes de rendu différents : le mode SPA, universel et statique.

 

Le mode SPA

Le mode SPA (Single Page Application ou en français application web monopage) proposé par NuxtJs permet de créer des monopages qui seront exécutés uniquement du côté client. Les pages n’existent pas sur le CDN, elles sont chargées directement dans le navigateur de l’utilisateur. Avec ce mode, il n’y a donc pas besoin d’utiliser de serveur.

Le mode universel

Le mode universel proposé par le framework NuxtJs est aussi appelé le rendu côté serveur. Il permet aux développeurs de créer une page entière côté serveur pour ensuite l’envoyer côté client déjà prête. L’avantage avec ce mode est qu’il permet aux robots d’indexation de lire les métadonnées et donc d’indexer correctement la page. Cela entraîne aussi un temps de chargement des pages beaucoup plus rapide, améliorant ainsi l’expérience utilisateur.

Le mode statique

Grâce au mode statique et à la commande “nuxt generate”, NuxtJs va, au moment du build, générer le fichier des routes sous forme d’un code HTML. L’avantage avec ce mode est que le site web peut être déployé sur n’importe quel hébergeur web sans avoir besoin d’un serveur pour être exécuté. En effet, tout le code est généré dans des fichiers HTML et JavaScript y compris les appels aux API.

 

Le retour d’expérience d’un développeur NuxtJs

Grégory est développeur front-end depuis 3 ans, il travaille principalement avec les technologies VueJs et NuxtJs. Nous l’avons interrogé afin d’avoir son retour d’expérience sur le framework NuxtJs.

Pour introduire le framework Js dans les grandes lignes, il parle d’un outil permettant d’allier le meilleur des deux mondes que sont le SSR (Server Side Rendering) et le CSR (Client Side Rendering). NuxtJs c’est les bons côtés de la majeure partie des mauvais côtés de VueJs.

Grégory utilise NuxtJs depuis maintenant 2 ans. Il a trouvé la courbe d’apprentissage du framework Js extrêmement facile car la documentation est abondante et très claire. De plus, le framework javascript dispose d’une grande communauté active sur Discord. Grégory indique même que lorsqu’il est bloqué et qu’il pose sa question sur le canal NuxtJs, il reçoit une réponse dans les 15 minutes qui suivent, lui permettant de se débloquer rapidement.

Concernant les difficultés rencontrées au quotidien par le développeur, il indique les plugins créés par la communauté dont l’intégration peut parfois se révéler difficile. Selon les plugins déjà utilisés au sein du projet, l’intégration peut être incompatible. Il précise donc de toujours bien se renseigner avant d’utiliser ces plugins.

D’une manière générale, Grégory est très satisfait du développement sous NuxtJs, il conseille à tous les développeurs voulant se former sur ce framework d’avoir de bonnes bases avec VueJs afin de pouvoir différencier exactement ce que gère NuxtJs de VueJs. Mais surtout, il faut être capable d’utiliser tous les raccourcis qui facilitent la vie d’un développeur, en comprenant ce qui se passe derrière ceux-ci afin d’éviter certaines problématiques, certains bugs.

Si votre projet a besoin du référencement mais que vous voulez garder la souplesse du CSR et du SSR, qu’il soit en interne ou public mais que vous souhaitez bénéficier de la vitesse de rendu, vous pouvez privilégier VueJs et son framework NuxtJs.

Si cet article vous a plu, nous vous invitons à lire notre article dédié à VueJs, ou à consulter notre blog pour voir nos derniers articles.

Partager

Twitter Linkedin

Vous serez peut-être aussi intéressé par :

Sylius Plus - vignette

Sylius Plus, l’offre entreprise du framework e-commerce et un bundle MarketPlace

Sylius est un jeune framework PHP e-commerce basé sur Symfony, dont la version stable (1.0.0) est sorti en septembre 2017.
Si ce framework fait de plus en plus parler de lui, c’est parce qu’il représente un sérieux concurrent face aux autres plateformes e-commerce traditionnelles telles que PrestaShop Magento, qui sont souvent considérées comme plus lourdes.
Aujourd’hui Sylius en est a sa version 1.5.1 et il passe à la vitesse supérieure en proposant un service plus complet avec une offre entreprise.

Cet article s’adresse en priorité à des lecteurs connaissant déjà le framework PHP Sylius.
Si vous ne cernez pas encore réellement ce dernier, on vous conseille de lire dans un premiers temps notre article présentant Sylius.

Kendo, une bibliothèque javascript de composants UI

Kendo UI : une bibliothèque javascript de composants UI

Aujourd’hui on va vous parler de Kendo Ui, une bibliothèque Javascript distribuée par la société Télérik.
Si vous ne le savez pas, le kendo est un art martial japonais moderne s’apparentant à de l’escrime, et c’est justement sur cette représentation que s’appuie l’outil dont nous allons vous parler. Non, nous n’allons pas vous parler de sport de compétition, mais bien d’un outil pour vous faire gagner du temps lorsque vous développez une application Web.

Bootstrap 4 : un framework CSS innovant

Bootstrap 4 : un framework CSS innovant

Durant le début de l’année, l’équipe de Bootstrap a annoncé la version 4 de son outil. Pour rappel, Bootstrap est une “boîte à outils” open source permettant de développer des applications en HTML, CSS, JavaScript. La version 4 propose des améliorations par rapport à la version 3, c’est ce que nous allons voir dans cet article.