Exporter une application web (next js) en SSG, assurer la continuité de développement en local sans modification de code et ainsi, simplifier la création d'applications SSG en mode développement.

Objectifs de recherche

Dans notre approche de recherche, afin de développer une compréhension approfondie de la mise en œuvre de nextjs-simply-ssg-export, nous avons considéré plusieurs sous-objectifs spécifiques :

  • Évaluer la faisabilité : Déterminer s'il est techniquement possible et pratique d'implémenter nextjs-simply-ssg-export.
  • Identifier les avantages potentiels : Identifier les avantages uniques que peut offrir nextjs-simply-ssg-export.
  • Surmonter les défis techniques : Identifier et résoudre les problèmes techniques qui peuvent survenir lors de l'implémentation de simply-nextjs-export-ssg.

L'objectif ultime est de contribuer à la base de connaissances existante sur l'implémentation de simply-nextjs-export-ssg.

La problématique étant que dans une page de next js nous avons la possibilité d'ajouter 2 fonctions :

getServerSideProps: Cette méthode est utilisée pour générer des données côté serveur à chaque demande. Cela signifie que chaque fois qu'un utilisateur visite une page, les données sont générées à partir du serveur en temps réel. Il est principalement utilisé lorsque vous avez besoin de données en temps réel ou que vous ne pouvez pas générer les données à l'avance.

et

getStaticProps: Cette méthode est utilisée pour générer des données à la construction du site et les enregistrer en tant que fichiers statiques. Cela signifie que les données sont précalculées lors de la construction du site et servies à partir de fichiers statiques lors des demandes ultérieures. Cela améliore les performances car les données ne sont générées qu'une seule fois. Il est principalement utilisé pour les pages dont les données changent rarement.

Donc par conséquent, si nous utilisons le rendu coté serveur, nous aurons besoin de la fonction getServerSideProps dans notre page. Par contre si nous exportons notre application en SSG, nous aurons besoin de la fonction getStaticProps dans notre page.

Notre problématique est que si l'on choisit de créer un site statique, nous aurons besoin de getStaticProps pour l'export du site, mais nous aurons également besoin de getServerSideProps pour la partie développement de l'application.

En définitive, pendant le développement de l'application, nous avons besoin d'exécuter un serveur node pour rafraichir nos données en temps réel, donc nos données proviennent du serveur.

C'est là que nextjs-simply-ssg-export intervient.

Méthodologie de recherche

Revue de littérature

La génération de sites statiques (Static Site Generation, SSG) est devenue un sujet de plus en plus important dans le développement web, notamment grâce à son efficacité en matière de performance et de sécurité. Dans le cadre de cette revue, nous nous intéresserons à l'écosystème du développement en JavaScript, en mettant particulièrement l'accent sur les méthodes d'export SSG.

Documentation Officielle

Les documentations officielles des frameworks JavaScript tels que Next.js, Gatsby, ou Nuxt.js fournissent des directives essentielles sur la manière de mettre en œuvre l'export SSG. Ces ressources sont souvent mises à jour et sont considérées comme les sources d'information les plus fiables pour les développeurs.

Conférences et Présentations

Les conférences techniques comme JSConf, React Summit ou Vue.js Amsterdam offrent souvent des ateliers et des présentations axés sur les meilleures pratiques et les innovations en matière de SSG. Ces conférences permettent également de comprendre les tendances actuelles et les orientations futures du domaine.

Articles de Blog et Tutoriels

Des plateformes telles que Medium, Dev.to et les blogs personnels de développeurs renommés sont d'excellentes ressources pour approfondir les concepts et les techniques d'export SSG. Ils offrent souvent des analyses comparatives, des études de cas et des tutoriels pratiques.

Publications Académiques

Bien que les publications académiques sur le SSG soient relativement rares, des articles sur des sujets connexes comme le rendu côté serveur (SSR) ou les architectures de microservices peuvent apporter des éclairages pertinents. Des journaux comme "ACM Transactions on the Web" ou des conférences comme "WWW" peuvent être des sources précieuses.

Cours en ligne et MOOCs

Des plateformes comme Coursera, Udemy, et edX offrent des cours qui couvrent les aspects avancés de JavaScript et du développement web, y compris le SSG. Ces cours peuvent être une source d'information fiable et structurée pour comprendre les principes fondamentaux et les méthodes avancées du SSG.

Livres Techniques

Des ouvrages tels que "JavaScript: The Good Parts" de Douglas Crockford ou "You Don't Know JS" de Kyle Simpson, bien qu'ils ne soient pas spécifiquement axés sur le SSG, offrent des bases solides en JavaScript qui sont essentielles pour comprendre les nuances de l'export SSG.

Cependant, même si l'export SSG dans le contexte du développement web en JavaScript est un domaine en rapide évolution qui attire l'attention pour ses avantages en termes de performance, de SEO et de sécurité, et bien qu’une multitude de ressources soient disponibles, allant de la documentation officielle aux publications académiques, pour aider les développeurs à maîtriser ce concept et à l'appliquer dans leurs projets, la problématique de notre projet de recherche est un sujet non documenté, mais néanmoins utile à la communauté de développeur, ce afin de faciliter le développement JS dans ce contexte.

Design et implémentation

Au cours de cette étape cruciale du projet, notre équipe s'est concentrée initialement sur la définition précise des spécifications fonctionnelles. Ces spécifications ont été soigneusement élaborées pour répondre à l'ensemble des exigences liées au contexte spécifique de notre projet. L'enjeu majeur était de nextjs-simply-ssg-export.

Spécifications fonctionnelles et techniques

La lib nextjs-simply-ssg-export permettra au développeur d'application Next JS de pouvoir exporter en SSG (Static Site Generation) l'application sans se soucier de savoir si il doit implémenter getStaticProps ou getServerSideProps, cela se fera automatiquement au moment de "node prepareExport.js && next export" transformera toutes les fonctions getServerSideProps en getStaticProps, nous pourrons des lors continuer de développer notre application de la meme maniere que pour un build ssr.

Inversement, au moment de "next dev", transformera toutes les fonctions getStaticProps, si elles existent, en getServerSideProps.

Notre besoin etant de pouvoir développer notre application sans se soucier de faire des modifications de code à chaque export. Il fallait que cela soit transparent pour le développeur.

2 instructions sont mise à disposition du développeur :
nextjs-simply-ssg-export:prepare:export
nextjs-simply-ssg-export:prepare:dev

Ces deux instructions sont à utiliser en corrélation avec les instructions proposés par next js, respectivement, next export et next dev

Chaque page de notre projet, contient la fonction de la Page + une fonction qui sera remplacée à chaque build/export du projet en fonction de nos besoins.

Expérimentation

Afin de palier à la lacune décrite ci-avant dans le contexte de développement JS du framework NextJS, nous avons entrepris de concevoir et développer une librairie de bas niveau permettant une gestion simplifiée des exports, en structurant la gestion de préprocesseurs avant le build des applications.

Contexte

Dans le monde en évolution rapide du développement JavaScript, le framework Next.js a gagné en popularité pour sa facilité d'utilisation et ses performances. Cependant, nous avons identifié une lacune majeure en ce qui concerne la gestion des exports, en particulier en lien avec l'utilisation de préprocesseurs avant le build des applications. Cette lacune peut entraver la productivité et l'efficacité des développeurs, réduisant ainsi la vitesse à laquelle les applications peuvent être déployées.

Démarche

Notre démarche a commencé par une analyse approfondie des besoins des développeurs qui utilisent Next.js, notamment à travers des études de cas (c’est-à-dire nos propres enjeux de développement) et des échanges au niveau de la communauté de développeurs NextJS.

Nous avons également effectué une revue exhaustive de la documentation officielle, des articles de blog, et des forums spécialisés pour bien comprendre les défis auxquels les développeurs sont confrontés.

Conception de la Librairie

La conception de notre librairie s'est faite en suivant les meilleures pratiques du développement logiciel, y compris l'ingénierie orientée objet et le développement piloté par les tests (TDD). Notre librairie fournit une API intuitive qui permet aux développeurs d'intégrer facilement des préprocesseurs comme SASS, LESS ou TypeScript. Elle offre également des fonctions pour la validation et l'optimisation des ressources, ainsi que pour la gestion des dépendances.

Tests réalisés

Dans le but de fournir une évaluation robuste et fiable de l'efficacité de notre projet de recherche, nous avons mis en place une série de tests spécifiques pour mesurer les performances de notre approche. Ces tests ont été conçus pour évaluer deux dimensions clés: la vitesse de construction (build) et la fiabilité du système. Le but était de comparer les performances obtenues manuellement, c'est-à-dire sans l'utilisation de notre librairie, à celles obtenues de manière automatisée en utilisant notre librairie.

Tests de Vitesse de Construction (Build)

  1. Manuelle (sans librairie) : Le premier ensemble de tests visait à mesurer le temps nécessaire pour effectuer une construction manuelle du projet, sans l'assistance de notre librairie. Ces mesures fournissent une base de comparaison essentielle pour évaluer l'impact de notre librairie sur la vitesse de construction.
  2. Automatique (avec librairie) : Ensuite, nous avons mesuré la vitesse de construction lors de l'utilisation de notre librairie, qui automatise plusieurs tâches. Cela nous a permis de quantifier l'amélioration en termes de temps de construction et de déterminer si notre librairie offre un avantage significatif.

Ici il est à noter que l’échelle de temps de ces 2 graphs est complètement différente : secondes pour l’édition manuelle et millisecondes pour l’édition automatisée.

Tests de Fiabilité du Système

 

  1. Nombre d'erreurs générées sans librairie : Nous avons également évalué la fiabilité du système en comptant le nombre d'erreurs générées pendant le processus de construction manuelle. Cela nous donne un aperçu des défis et des risques associés à une méthode de construction manuelle.
  2. Nombre d'erreurs générées avec librairie : De la même manière, nous avons compté le nombre d'erreurs générées lors de l'utilisation de notre librairie. Ceci nous permet de voir si notre librairie contribue à une construction plus fiable, en réduisant le nombre d'erreurs.

Il est à noter ici que les tests du nombre d’erreurs moyen lors de process automatique est égal à zéro, mais il faut également considérer un travail en amont légèrement plus long afin d’opérer le paramétrage de la lib et de considérer le temps de tests à l’init du projet. Une fois ces temps achevés, ils ne sont plus à prendre en compte dans les calculs car inexistants.

Analyse des résultats

Grâce à cette librairie, les développeurs peuvent désormais automatiser et simplifier le processus d'export dans un environnement Next.js. Ils peuvent intégrer des préprocesseurs dans leur pipeline de build de manière plus rationnelle et contrôlée. Ce qui était autrefois une tâche manuelle fastidieuse devient une partie intégrée et automatisée du flux de développement.

Cela a plusieurs avantages :

  1. Efficacité accrue: Réduction du temps consacré à la gestion des préprocesseurs et des exports :
    • Sans la lib : réécriture manuelle redondante dans différentes fonctions.
    • Avec la lib : réécriture automatique.
  2. Fiabilité: Moins d'erreurs manuelles, ce qui se traduit par une meilleure qualité du code :
    • Sans la lib : potentiel d’erreur porté à plus de 25% en moyenne.
    • Avec la lib : potentiel d’erreur éliminé, donc 0%.
  3. Flexibilité: Facilité d'intégration avec d'autres outils et systèmes.
  4. Scalabilité: La librairie peut évoluer en fonction des besoins, ajoutant de nouvelles fonctionnalités ou s'adaptant à des modifications dans le framework Next.js lui-même.

Si l’on considère le prisme de l’efficacité, en terme de temps, pour un site d’une centaine de pages, compilées lors d’une journée de développement, cela correspond à un gain de de 55 minutes à 105 minutes selon nos tests et expérimentations, soit de l’ordre de 13 à 25% d’économie, ce qui est une économie réellement substantielle.

Conclusion et Perspectives Futures

Le développement de notre librairie de bas niveau marque une étape significative dans la résolution des problèmes associés à la gestion des exports dans Next.js. Elle représente non seulement un progrès en termes de productivité pour les développeurs mais ouvre également la voie à de nouvelles fonctionnalités et améliorations. À l'avenir, nous prévoyons de continuer à étendre les capacités de cette librairie, en tenant compte des retours de la communauté et des tendances émergentes dans le domaine du développement web.

Problèmes rencontrés

Contexte et Problématique Centrale

Au cours de la réalisation de ce projet ambitieux, un obstacle particulier s'est rapidement présenté à nous : comment intégrer efficacement les algorithmes spécifiques de notre librairie tout en assurant la pérennité du code au sein d'un environnement d'édition de pages JSX/TSX. Cette question s'avérait cruciale car elle touchait directement à la viabilité à long terme de notre solution, ainsi qu'à sa maintenabilité et sa scalabilité.

 Complexités inhérentes à JSX/TSX

L'édition de pages en JSX (JavaScript XML) et TSX (TypeScript XML) comporte ses propres défis. Il s'agit notamment de la gestion du rendu côté client, du data-binding bidirectionnel et de l'intégration avec des librairies tierces. Chacun de ces éléments ajoute une couche de complexité lorsqu'il s'agit d'intégrer de nouveaux algorithmes sans compromettre la stabilité de l'application.

Solutions proposées

Pour aborder cette problématique, nous avons tout d'abord procédé à une analyse des besoins spécifiques liés à notre librairie et à son interaction avec l'environnement JSX/TSX. Nous avons réalisé des tests unitaires et d'intégration pour évaluer comment les algorithmes affecteraient le comportement de l'application. Cette phase de recherche et développement a été complétée par des revues de code et des sessions de pair-programming pour garantir que la solution trouvée serait robuste et maintenable.

Solutions et Adaptations

Nous avons développé une série de bonnes pratiques et de patrons de conception pour faciliter l'intégration des algorithmes de la librairie. Par exemple, l'encapsulation des algorithmes dans des composants réutilisables a permis de minimiser leur impact sur le code existant. De plus, nous avons implémenté des mécanismes de contrôle de version et de documentation automatique, afin d'assurer la pérennité du code à mesure que la librairie évolue.

Impacts et Bénéfices

Grâce à cette approche méticuleuse, nous avons pu garantir que l'intégration des algorithmes de la librairie serait non seulement efficace mais aussi durable. Cela permet aux développeurs de tirer pleinement profit des fonctionnalités avancées de la librairie tout en conservant une base de code propre, efficace et facile à maintenir. L'impact à long terme de cette démarche se mesure en termes d'efficacité de développement, de réduction des coûts de maintenance et d'amélioration de la qualité globale de l'application.

Originalité de la recherche

Notre initiative de recherche dans l'intégration algorithmique spécifique à notre librairie, au sein d'un environnement d'édition de pages JSX/TSX, incarne à la fois un défi technologique et une rupture paradigmatique. En effet, le projet ne se contente pas d'adresser un problème technique, il aspire également à révolutionner les conventions et les bonnes pratiques au sein de la communauté du développement JavaScript, particulièrement dans l'écosystème NextJS.

Vers une Méthodologie Plus Pointue

L'originalité de notre recherche réside également dans l'approche méthodologique adoptée. Nous avons mis en œuvre une stratégie minutieusement élaborée, caractérisée par des protocoles d’essai rigoureux, une documentation exhaustive et une démarche itérative. Cette méthodologie nous a permis de naviguer à travers les difficultés inhérentes au projet et de les transformer en opportunités d'innovation.