Article original : What is Gatsby and why it's time to get on the hype train
Les frameworks viennent et partent, et bien que Gatsby puisse éventuellement dériver comme le fait la technologie, les gains de performance et de productivité sont de solides arguments pour plonger dès maintenant.
Attendez, qu'est-ce que Gatsby ?
Gatsby est un framework gratuit et open source basé sur React qui aide les développeurs à créer des sites web et des applications ultra-rapides.
Leur emphase (je vais expliquer plus tard). J'aime le décrire comme Create React App sur stéroïdes, où c'est un moyen facile de démarrer une application React et de se concentrer sur les parties vraiment différentes de votre application. Au cœur, c'est une application Webpack glorifiée, où tout est construit sur ce même pipeline Webpack que vous avez eu du mal à écrire et à comprendre pleinement jusqu'à ce jour (ou peut-être que c'est juste moi).
La beauté, cependant, est que ce qu'il produit est un site web statique (un simple fichier HTML) avec votre application pré-rendue pour une livraison optimale. Cela signifie qu'il peut essentiellement fonctionner n'importe où, comme simplement le déposer dans S3 et le servir comme une page web statique ou encore plus facile, avoir Netlify le construire et le servir pour vous.
Tout est dans les scripts
Chubbs avec Happy Gilmore
Gatsby est l'un des nombreux outils disponibles qui supportent l'architecture JAMstack. Pour les non-initiés, JAM signifie Javascript, APIs et Markup, ou en gros un site web statique HTML qui utilise javascript pour faire la magie.
Les applications JAMstack ont beaucoup d'avantages dès la sortie de la boîte, notamment :
- Facile à héberger
- Peu coûteux à héberger
- Il se charge super rapidement (la plupart du temps)
Cela signifie généralement plus souvent qu'autrement, vous allez avoir un site rapide qui ne vous coûte pas beaucoup d'argent à la fois pour l'hébergement et la maintenance.
Ça vous semble un peu familier ?
Il est facile de comparer cela à Rails, comme je l'entends souvent de la part des autres membres de mon équipe, et à juste titre. Il y a beaucoup de magie derrière les scènes dans Gatsby !
Mais à moins que vous ne vous appuiiez purement sur des plugins et des thèmes (ce qui est bien), à la fin de la journée, vous construisez toujours une application React comme vous le feriez ailleurs. Votre application peut presque être portée vers n'importe quel autre framework (à l'exception de la partie sourcing de données et génération de pages). Les composants sont des composants, les styles sont des styles.
const Nav = () => {
return (
<nav>Un composant nav normal dans une application Gatsby normale.</nav>
)
}
Gatsby est opinionné sur de nombreux aspects, mais ces opinions tombent principalement en dehors de l'idée que vous construisez toujours une application webpack et que ces conventions sont celles de webpack et de la configuration derrière lui, pas nécessairement celles de Gatsby.
Alors, qu'est-ce qui le rend si génial ?
Littéralement démarrer en moins d'une minute
Parks and Recreation "Littéralement"
Sérieusement. Lancer un nouveau site Gatsby est la définition littérale de tous ces articles clickbait disant que vous pouvez faire quelque chose en 5 minutes. Installez le CLI et vous êtes à 3 commandes de votre application lancée localement ou construite statiquement.
Par exemple, si vous voulez lancer un nouveau projet barebones avec Sass :
$ gatsby new my-cool-gatsby-project https://github.com/colbyfayock/gatsby-starter-sass
$ cd my-cool-gatsby-project
$ yarn develop
Démarrage d'une application Gatsby
Une communauté de Starters fournit un point d'entrée facile pour votre nouvelle application (ou la totalité de ce que vous voulez).
Note : le "en moins d'une minute" dépend du type de connexion que vous avez, car vous devrez attendre que les dépendances se téléchargent et s'installent.
Tout rassembler dans le content mesh
L'un des concepts derrière Gatsby est l'idée du "content mesh" et Gatsby étant la solution pour tout rassembler. De nombreuses applications, et de plus en plus, sont construites avec l'architecture JAMstack, ce qui aide à l'idée que nous pouvons sourcer autant de notre contenu à partir de nombreux endroits que nous voulons et l'intégrer dans une application performante.
https://www.gatsbyjs.org/blog/2018-10-04-journey-to-the-content-mesh/
Quand tout est dit et fait, vous pouvez intégrer des données de nombreuses sources dans une application compilée statiquement. C'est effectivement ultra-rapide. ?
Boost de performance gratuit !
Dès la sortie de la boîte, vous obtenez votre configuration webpack superchargée incluant le code splitting, le prefetching, les styles en ligne, la minification des assets, et une tonne d'autres grandes fonctionnalités. Améliorez cela facilement avec une multitude de plugins faciles à configurer comme la configuration de votre application en tant que PWA (progressive web app) et fournissant la capacité pour le mode hors ligne
Beaucoup de buzzwords là-dedans, mais à la fin de la journée, cela signifie que votre site web devrait être réactif basé sur les meilleures pratiques qui optimisent tous les assets de votre site pour la vitesse et la livraison, tout en le rendant aussi accessible que possible en transpilant pour les anciens navigateurs et en s'assurant que les connexions lentes ne gaspillent pas de ressources précieuses. Il est difficile de confirmer comme une statistique dure, mais Kyle Mathews (fondateur de Gatsby) affirme que les sites Gatsby sont 2-3x plus rapides que des types de sites similaires.
Productivité accrue !
Vous n'avez plus à vous soucier des complexités de vous assurer que votre application est performante en réécrivant et en ajustant votre configuration webpack selon les nouvelles meilleures pratiques pour chaque nouvelle application que vous démarrez. Gatsby fait tout cela pour vous. Il vous permet de vous concentrer sur les parties importantes qui rendent votre application spéciale, pas sur l'échafaudage.
Cela est poussé plus loin avec les plugins de Gatsby et l'ajout de Thèmes. Les thèmes ne sont pas ce à quoi vous vous attendez dans le sens traditionnel, ou ce à quoi vous vous attendez de Wordpress, mais ils fournissent un moyen d'abstraire n'importe quelle partie de votre application Gatsby afin que vous puissiez la réutiliser d'une application à l'autre.
Avez-vous une bibliothèque de composants de base que vous utilisez à chaque fois ? Faites-en un thème. Avez-vous une configuration particulière pour le sourcing de données que vous ne voulez pas réécrire à chaque fois ? Faites-en un plugin. Pouvoir abstraire ces pièces clés de votre application vous fait gagner du temps et du stress sur chaque nouveau projet que vous lancez, sans parler de la capacité à maintenir ces pièces en un seul endroit, en corrigeant les bugs et les améliorations avec une simple mise à jour de package.
Grande communauté
Gatsby lui-même a déjà une communauté assez grande, mais en plus de cela, vous avez Webpack et React, qui existent depuis un moment. React est le framework UI le plus populaire en ce moment, ce qui rend le débogage via une simple recherche Google beaucoup plus facile. Il est difficile de trouver un problème que vous êtes le premier et le seul à rencontrer.
Si vous avez une question particulière sur Gatsby, leur Github Issues est rempli de personnes prêtes à vous aider à déboguer ou à résoudre le prochain bug. Tout ce qu'ils demandent, c'est que vous leur fournissiez poliment un moyen de reproduire, ce qui rend simplement plus facile pour eux de vous aider en premier lieu !
Ami de Hackerman
Vous aimez retrousser vos manches et tweaker le pipeline vous-même ? Gatsby fournit des moyens faciles de patcher dans le traitement, qu'il s'agisse de s'accrocher au cycle de vie de la construction ou de tweaker la configuration webpack. Cela permet au cœur de votre application d'être aussi facile ou avancé que vous le souhaitez, bien que si vous êtes aussi avancé, peut-être aidez à écrire un plugin ou deux !
Hackerman
Les peut-être pas si géniaux...
Construire rapidement entraîne plus de bugs
Vous devriez vous attendre à rencontrer quelques obstacles ici et là en restant sur la dernière et la meilleure version, après tout, il s'agit de logiciels open source en développement pour plus que juste votre site individuel.
L'équipe Gatsby a été en train de construire très rapidement, ce qui est génial, mais aller vite est sujet à négliger des choses en cours de route. Heureusement, ils commencent à pousser les tests automatisés partout pour aider à renforcer le code et ils essaient intentionnellement d'éviter de se précipiter sur le travail pour répondre à ce type de préoccupation.
Assurez-vous simplement d'être minutieux sur les tests de vos mises à jour de packages et n'ayez pas peur de rétrograder et de verrouiller votre version de package si vous rencontrez des problèmes.
Les sites statiques sont de première classe, pas les applications web
Gatsby se présente comme une solution tout compris pour les applications statiques et non statiques, mais est-ce le cas ? La prise en charge des routes client uniquement nécessite un plugin ou un ajustement de création de page ce qui est bien, mais leur ton sur les problèmes tend à suggérer qu'ils ne sont pas toujours également concentrés sur les deux.
Vraiment, le seul argument ici est pourquoi utiliseriez-vous Gatsby plutôt que Create React App pour ce cas d'utilisation ? Bien que cela ne soit peut-être pas de première classe, c'est toujours assez fonctionnel avec un bonus des avantages sous-jacents standard de Gatsby, mais clairement les bugs et les fonctionnalités ne vont pas être priorisés vers cet objectif.
Essayez-le déjà !
Mon opinion ou celle de tout autre ne compte pas jusqu'à ce que vous l'essayiez. Dans le pire des cas, vous avez littéralement perdu 5 minutes entre l'installation des dépendances et la suppression du dossier avec le projet, ce qui, sur une note positive, est une expérience d'apprentissage. Dans le meilleur des cas, vous venez de découvrir un outil génial qui va vous aider à faire de grandes choses.
Lego - nous pourrions construire un vaisseau spatial !
Allez construire, allez expérimenter, et partagez les grandes choses que vous faites !
Edit : Changé « ralentir » en « éviter de se précipiter » pour clarifier l'intention de la déclaration, car ils ne ralentissent pas la quantité de travail réel effectué, mais essaient d'être plus prudents avec celui-ci.
Publié à l'origine sur https://www.colbyfayock.com/2019/09/what-is-gatsby-and-why-its-time-to-get-on-the-hype-train