Qu'est-ce que Gatsby JS et comment les développeurs de commerce électronique l'utilisent-ils pour créer des magasins ultra-rapides ?

Scott Fitzgerald a écrit une lettre à son éditeur en 1922 annonçant son intention de commencer à écrire un nouveau roman qu'il a décrit comme : 

"[S]quelque chose de nouveau – quelque chose d'extraordinaire, de beau, de simple et de motifs complexes."

Trois ans plus tard, il publie "The Great Gatsby".

C'est cette belle simplicité, par opposition à l'extravagance somptueuse du personnage de Jay Gatsby, que le framework open source GatsbyJS évoque. Créé en mai 2015 par Kyle Mathews, Gatsby est, à la base, un moyen simple de créer un site Web avec React.

Fitzgerald est décédé avant que "The Great Gatsby" ne soit largement acclamé, mais Mathews a eu plus de chance. Un peu plus de six mois après son lancement, lorsque Mathews a pris la parole lors de la conférence React en janvier 2016, les gens l'utilisaient déjà.

"J'avais supposé que les gens n'utilisaient que des sites statiques pour des sites démarqués ou basés sur JSON, mais il s'est avéré qu'il y avait un grand groupe de développeurs intéressés à repousser les limites de ce que les sites statiques peuvent faire", a déclaré Mathews.

La popularité a tellement augmenté qu'en 2018, Mathews et plusieurs contributeurs principaux ont formé Gatsby Inc. pour aider les équipes de développement à créer des "sites Web alimentés par CMS avec des outils modernes".

Aujourd'hui, plus de 107 000 sites en direct sur Internet utilisent Gatsby JS.

Qu'est-ce que Gatsby ?

Gatsby est un générateur de site Web statique open source (SSG) basé sur le framework de développement frontal React et utilisant les technologies Webpack et GraphQL. Il peut être utilisé pour créer des sites statiques qui sont des applications Web progressives, conformes aux dernières normes Web et optimisés pour la vitesse et la sécurité.

Dans un article sur le BigCommerce Developer Blog de Karen White, note la perception que les SSG ne peuvent être utilisés que pour les sites axés sur le contenu, pas ceux avec des éléments dynamiques. Mais elle dit qu'avec React à ses côtés, Gatsby peut créer des sites similaires à des applications, même pour le commerce électronique.

"Tout cela pour dire que Gatsby apporte la vitesse d'un site généré statiquement ainsi que la fonctionnalité d'un framework", écrit-elle.

EN SAVOIR PLUS SUR GATSBY + BIGCOMMERCE

Pour plus d'informations sur la façon dont Gatsby et BigCommerce fonctionnent ensemble, consultez notre blog des développeurs.

Lire maintenant

1. Générateur de site statique.

D'une certaine manière, les "générateurs de sites statiques" sont exactement ce à quoi ils ressemblent. Mais qu'est-ce que cela signifie réellement? Le fait qu'un site soit statique ou dynamique dépend du fait que la page est codée à la main en tant que page statique puis accessible par un utilisateur, ou si la page est générée dynamiquement à la demande via un système de gestion de contenu lorsque les utilisateurs y accèdent. Ce dernier nécessite un traitement côté serveur.

Un générateur de site statique offre un compromis entre les deux en permettant essentiellement aux développeurs "d'écrire dynamiquement et de publier statiquement". Avec les SSG, les développeurs créent un site statique déployé sur un serveur HTTP. Il n'y a que des fichiers et des dossiers - pas de bases de données, pas de rendu côté serveur. Lorsqu'un utilisateur demande une page, alors, le serveur renvoie le fichier correspondant.

Les SSG présentent également des avantages en matière de cybersécurité. Les cyber-attaquants utilisent des méthodes telles que les scripts, les injections de bases de données SQL ou les vulnérabilités des bases de données côté serveur, mais les SSG contournent cela car ils ne sont composés que de fichiers statiques et ne font pas référence aux bases de données.

2. Réagissez.

React est une bibliothèque JavaScript efficace et flexible pour créer des interfaces utilisateur, selon Reactjs.org. Ce cadre basé sur des composants fournit aux développeurs un ensemble de fonctionnalités de base légères et largement applicables qu'ils peuvent utiliser pour créer des applications monopage ou mobiles.

L'un des avantages de l'utilisation des composants React est qu'une construction modulaire permet de garder tout cohérent lorsque vous avez des interfaces utilisateur compliquées.

3. GraphQL.

GraphQL est un langage de requête pour les API et le runtime permettant de répondre à ces requêtes avec vos données existantes. Cela est devenu populaire parmi les développeurs pour plusieurs raisons. Premièrement, vos demandes de données peuvent être structurées de manière déclarative, ce qui signifie que vous pouvez interroger l'API pour les champs exacts que vous souhaitez sans avoir à traiter une réponse qui inclut des propriétés supplémentaires.

Ensuite, les requêtes GraphQL peuvent englober plusieurs ressources dans une seule requête. "Une API GraphQL a essentiellement un point de terminaison unique qui peut interroger toutes les données disponibles", a déclaré White.

Il redéfinit la conception des API et l'interaction client-serveur pour améliorer l'expérience des développeurs, permettant des expériences utilisateur fluides, même multiplateformes et sur mobile.

4. Pack Web.

Webpack est un bundle de modules open source pour JavaScript. Il "met tous vos actifs - y compris JavaScript, images, polices et CSS, dans un graphique de dépendance". L'utilisation de Webpack présente plusieurs avantages, notamment un style plus facile, une division du code, un meilleur contrôle du traitement des actifs, des déploiements de production stables et une vitesse de chargement de page plus rapide.

L'écosystème Gatsby :plugins et démarreurs

Les plugins vous permettent de connecter Gatsby à des plates-formes tierces et d'importer des données exposées via une couche GraphQL.

L'une des raisons pour lesquelles les développeurs aiment Gatsby est qu'il est basé sur React. Cela signifie que vous pouvez utiliser n'importe lequel des packages que vous utilisez déjà avec NPM (un gestionnaire de packages pour les packages Node.js).

Gatsby est livré avec des démarreurs par défaut et réduit le besoin de code passe-partout. Parce que Gatsby est open source, cependant, vous aurez également accès à un nombre important et croissant de plugins, démarreurs et transformateurs construits par la communauté Gatsby existante. Il suffit de regarder la page de Gatsby sur GitHub pour voir plus de 3 500 contributeurs.

De plus, BigCommerce a publié un modèle de CMS Gatsby-Netlify pour lancer le développement d'une vitrine PWA sans serveur.

4 caractéristiques remarquables de Gatsby

S'il y a une chose sur laquelle tout le monde peut s'entendre, c'est que les sites Web Gatsby peuvent être très rapides. Mais il existe également de nombreux autres avantages, en particulier si vous êtes un développeur déjà familiarisé avec React. Voici quelques-unes des fonctionnalités les plus remarquables de Gatsby.

1. Conçu pour la performance.

Selon les tests de performances menés par le fondateur de Gatsby, Kyle Matthews, les sites Gatsby sont, en moyenne, 2 à 3 fois plus rapides que les types de sites similaires, et le framework lui-même est responsable des performances, donc ce n'est pas votre rôle en tant que développeur.

"Tout ce que vous avez à faire est de créer le code source, et Gatsby.js compilera ensuite la configuration Webpack la plus performante pour créer votre site", a déclaré Sarah Mischinger de Storyblok.

Les générateurs de sites statiques comme Gatsby augmentent la vitesse et les performances car tout ce que le serveur a à faire est de renvoyer un fichier au lieu d'effectuer des requêtes de base de données et de construire chaque page à la demande. Gatsby gère toutes les récupérations de données et utilise ces données pour générer des fichiers HTML statiques, JavaScript et CSS, ce qui le rend plus rapide.

Dans un article sur Medium, Nicholas Feitel écrit que son site Gatsby « s'est chargé plus de deux fois plus vite que ma simple application React et CINQ fois plus vite qu'un site complexe comme LinkedIn ». Avec Gatsby, vous n'aurez pas à compter sur des serveurs pour la génération de pages dynamiques ; au lieu de cela, pré-rendez-les lors de la création et utilisez des CDN pour la livraison.

2. Écosystème open source.

Gatsby dispose d'un vaste écosystème de plugins, d'intégrations puissantes et d'une excellente documentation. Sa vaste communauté open source est l'une des plus grandes forces du méta-framework. La communauté Gatsby a déjà créé plus de 2 000 plugins, il est donc très probable que vous puissiez trouver un outil déjà conçu pour répondre à vos besoins.

3. Peut facilement transférer des données.

Avec Gatsby, vous pouvez charger des données à partir de presque toutes les sources de données, de sorte que vous pouvez utiliser les outils que vous préférez pour gérer le contenu tout en utilisant React et GraphQL côté développement. Les plugins source vous permettent d'intégrer des solutions SaaS et d'autres outils tiers sans configuration approfondie, et Gatsby fournit également un support API pour l'ajout de données personnalisées.

C'est, selon Karen White, la grande force de Gatsby :"Gatsby introduit le concept de "maillage de contenu" pour décrire la manière dont il relie les plateformes tierces."

"Le maillage de contenu est une évolution des plates-formes monolithiques tout-en-un vers un modèle où chaque plate-forme tierce apporte une fonctionnalité spécialisée à l'architecture globale - permettant à chaque plate-forme de faire ce qu'elle fait le mieux et le maillage de contenu à rassemblez le tout de manière cohérente. »

4. Gatsby rend les pages et les itinéraires avec un minimum de problèmes.

En utilisant simplement React, vous devrez toujours créer une route pour les composants de votre dossier de pages. Dans Gatsby, cependant, en ayant un composant dans un dossier de pages, génère la page automatiquement - sans routeur ni commutateur.

Difficultés avec le cadre Gatsby

Comme la plupart des frameworks open source, Gatsby évolue encore. Mais dans l'état actuel des choses, il y a quelques inconvénients à travailler avec, en fonction de vos compétences en développement et du temps que vous êtes prêt à consacrer à la construction.

1. Courbe d'apprentissage pointue.

Si vous êtes prêt à consacrer du temps et des efforts, Gatsby a beaucoup de documentation robuste disponible et une communauté d'utilisateurs engagés. Et, comme le note Matthew Bunday de Zen of React, "Déployer trop d'efforts dans la création de votre boutique en ligne à l'aide de nouvelles technologies pourrait nuire à votre cœur de métier."

2. Les plugins et les starters ne sont pas toujours de la plus haute qualité.

Avec le développement open source, vous devez porter une attention particulière à la qualité de ce que vous obtenez et aux normes suivies par les constructeurs. Kalin Chernev écrit :"Si GatsbyJS doit être pris au sérieux, les exemples et les points de départ dans la communauté devraient avoir de meilleures normes."

3 cas d'utilisation importants de Gatsby

Les cas d'utilisation de Gatsby sont en constante expansion, mais voici les trois principaux cas d'utilisation actuels, y compris un cas d'utilisation spécifique au commerce dans le commerce sans tête.

1. Créez un site statique à l'aide d'un CMS sans tête.

Si tout ce dont vous avez besoin est une page Web statique qui sert HTML, JavaScript et CSS, Gatsby est un excellent choix. Vous pouvez l'utiliser pour créer des pages dynamiquement à partir de presque n'importe quelle source. Lorsque vous mettez à jour le contenu de votre CMS, vous pouvez configurer un déclencheur automatisé pour mettre à jour le contenu sur le site statique. Cela signifie que le site Web n'est reconstruit que lorsque le contenu est mis à jour.

2. Créez des applications Web progressives (PWA).

Gatsby est conçu dès le départ pour être un framework PWA. Il est livré avec des fonctionnalités PWA robustes et est conçu pour être rapide et hautement accessible.

Gatsby offre une expérience de type PWA car il pré-rend votre site - il n'y a pas de code côté serveur, de base de données, etc. Une fois chargé, React prend le relais pour offrir une expérience de navigation semblable à celle d'une application et des performances perçues élevées. L'optimisation prête à l'emploi fournie avec Gatsby comprend le fractionnement des groupes de codes, les itinéraires de chargement différé, la pré-extraction d'actifs importants et l'intégration de CSS critiques.

3. Créez un site de commerce électronique sans tête.

Le concept de maillage de contenu de Gatsby s'aligne bien avec l'approche du commerce sans tête consistant à remplacer les solutions tout-en-un par la modularité et la flexibilité. Le commerce sans tête dissocie le frontend (ou tête) du site de commerce électronique du moteur de commerce électronique qui alimente le backend.

Comme l'explique Karen White :"Un site de commerce électronique sans tête utilisant BigCommerce utiliserait BigCommerce pour gérer les produits, les commandes et la création de paniers, mais une technologie autre que Stencil pour rendre la couche de présentation. La couche de présentation alternative pourrait être un frontal React personnalisé, un CMS comme WordPress ou Drupal - ou Gatsby."

Évaluer si Gatsby a du sens pour vous

Que vous deviez ou non utiliser Gatsby dépend fortement de votre vision de votre entreprise et de vos capacités de développement internes.

Si vous avez une équipe qui est à l'aise avec les technologies associées de Gatsby, et surtout si vous avez déjà un système de gestion de contenu que vous aimez, alors utiliser Gatsby pour votre boutique en ligne est une excellente option. Les magasins qui sont très complexes ou qui ajoutent fréquemment de nouveaux produits devraient examiner de plus près les avantages et les inconvénients avant de se lancer.

1. Voulez-vous un site statique, comme un simple site Web personnel ou un blog ?

"Statique" ne signifie pas que le contenu n'est pas interactif ou qu'il ne change jamais. Mais les sites statiques sont un excellent choix pour les sites Web simples avec beaucoup de contenu qui ne change pas souvent. Bien que vous n'ayez techniquement pas besoin d'un CMS pour gérer ce contenu, il est fortement recommandé de faciliter l'utilisation de ce contenu.

2. Votre site est-il complexe ?

Les sites très complexes avec beaucoup de données changeantes et de pièces mobiles peuvent être ralentis par l'augmentation des temps de construction. De plus, si votre site dépend de données qui ne sont pas récupérées tant que la page n'est pas affichée, vous perdrez les avantages d'une page générée de manière statique.

3. Avez-vous déjà des itinéraires générés dynamiquement ?

Si vous avez des itinéraires générés dynamiquement sur votre site, vous ne bénéficierez pas des avantages des pages générées statiquement si vous ne les connaissez pas au moment de la construction.

Conclusion

Gatsby est très populaire parmi les développeurs en ce moment, et pour cause. Les développeurs adorent React, sur lequel Gatsby est basé, et de nombreuses ressources sont disponibles autour de React et de Gatsby. Il est également très flexible et extensible. Lorsqu'il est associé à un système de gestion de contenu sans tête, il peut constituer un moyen rapide et puissant de diffuser du contenu.

Gatsby et les générateurs de sites statiques similaires commencent également à devenir populaires pour les magasins de commerce électronique, mais c'est un cas d'utilisation un peu plus complexe. Nous suggérons de vraiment creuser dans les exigences et les capacités avant de se lancer. Pour le bon type de magasin avec la bonne équipe, cependant, Gatsby peut présenter magnifiquement et rapidement une vitrine riche en contenu avec un backend de commerce électronique stable et sécurisé.