De nombreux utilisateurs de Gatsby ne sont pas des professionnels de React ou n’étaient pas des professionnels de React lorsqu’ils ont commencé à utiliser Gatsby. Certains ont déjà utilisé d’autres frameworks. Certains connaissaient JavaScript. D’autres encore sont peut-être entièrement nouveaux dans la programmation!
Dans tous les cas de figure, cette personne possédant une expérience et une expertise disparates était capable d’utiliser, d’apprécier et d’aimer utiliser Gatsby.
Je suis moi-même même un exemple de cette idée d’échelle générale. J’ai commencé ma carrière en tant que développeur iOS et Node.js depuis plusieurs années. Au fur et à mesure que mes compétences se sont élargies, elles se sont améliorées et étendues en ajoutant Angular, React, Gatsby à ma chaîne d’outils de prédilection.
Dans cet article, je souhaite expliquer comment Gatsby m’a amené à apprendre React et comment votre projet Gatsby peut évoluer en prenant en exemple mon site personnel et mon expérience. Gatsby s’adapte parfaitement à l’utilisation de React de base aux modèles React complexes, du Markdown de base au CMS “headless” - Gatsby adapte votre expertise et votre portée.
Les débuts#
Lorsque j’ai découvert Gatsby pour la première fois il y a un peu moins de deux ans, React était déjà très populaire. J’ai décidé de l’apprendre pour m’investir davantage dans le développement front-end moderne. Auparavant, je travaillais sur des sites Web AngularJS, Angular.
Bouge rapidement et cassez des choses#
Après avoir lancé mon site en Vue avec Vuepress, j’ai continué à apprendre React et Gatsby. Comme cela ne vous limite pas à la façon dont vous pouvez utiliser React. J’ai traité mon site web comme une expérience. J’ai expérimenté de nouvelles techniques en React juste pour voir comment elles fonctionnaient. Gatsby a aussi beaucoup à apprendre: GraphQL, gatsby-images, pour n’en nommer que quelques-uns.
L’écosystème de plug-ins riche de Gatsby m’a permis d’essayer facilement d’autres packages. J’ai essayé différentes approches de style, différentes sources de données, etc. La plupart des plug-ins fonctionnent sans configuration manuelle: installez le paquet, mettez-le dans votre configuration et voyez-le fonctionner - génial!
Au cours des derniers mois qui ont suivi, j’ai vraiment progressé rapidement et j’ai brisé des choses, mais j’ai beaucoup appris au cours du processus. Le point important ici est que: Gatsby n’a jamais été le goulet d’étranglement ni la raison pour laquelle je ne pouvais pas essayer quelque chose.
Les motivations pour en savoir plus#
J’ai expliqué à quel point l’expérience d’apprentissage que j’avais vécue avec Gatsby était bonne. Mais maintenant, je veux vous dire que retirer les choses difficiles (au début) peut aussi être une raison pour en apprendre plus.
Pourquoi? Vous obtenez une introduction douce à des sujets tels que GraphQL. Certaines restrictions peuvent être gênantes dans certains cas extrêmes, mais au début, il est bon de n’avoir qu’une seule façon de faire les choses. Cela signifie que vous n’avez pas besoin de bien comprendre tous les mécanismes pour avoir un site rapide ou GraphQL pour l’interrogation des données - mais vous avez certainement une idée de la façon dont cela pourrait fonctionner à la fin.
Après avoir utilisé Gatsby, beaucoup de gens disent: “Waouh, GraphQL pour l’interrogation de données est tellement génial, je ne veux pas le manquer!” Et je dirais que ces personnes vont certainement essayer d’intégrer GraphQL dans leurs autres projets par la suite.
Le diagramme de Venn tente de montrer comment l’exemple ci-dessus peut également être appliqué à d’autres technologies/outils utilisées par Gatsby. En plus de GraphQL, j’ai choisi React, CMS headless et les performances générales du site Web.
Vous pouvez essayer différents frameworks / composants React, apprendre à configurer votre propre serveur GraphQL ou améliorer les performances de votre site Web. CMS headless est un autre domaine très intéressant à explorer. Et c’est ce que j’ai fait. J’ai utilisé Next.js avec Apollo et d’autres bibliothèques géniales, Prisma pour configurer mon propre serveur GraphQL et optimisé les performances de mon site Web (optimisation des polices, par exemple).
Résultat: Mes projets Gatsby peuvent bénéficier des connaissances acquises!
Dernières pensées#
Les applications monolithiques du CMS sont en train d’être remplacées par des systèmes de contenu spécialisés, comme Sam Bhagwat l’avait déjà écrit dans sa série “Delivering Modern Website Experiences: The Journey to a Content Mesh”. Gatsby embrasse cette modularité avec son vaste écosystème de plug-ins et la possibilité d’apporter vos propres données depuis n’importe où. C’est cette modularité qui permet non seulement aux professionnels d’utiliser leurs services, techniques et pratiques avancés préférés, mais également aux débutants de se familiariser avec les écosystèmes et les normes React et GraphQL. Gatsby est une plate-forme incroyable pour acquérir une compréhension et une expertise dans les deux domaines. Commencez petit et développez votre expertise et votre compréhension avec Gatsby.
En outre, c’est également une excellente plate-forme pour apprendre d’autres technologies et voir les optimisations de performances Web en direct. Sans être empêtré dans une complexité de bas niveau, vous pouvez construire votre stack (pile) et vos connaissances sur une base solide et performante, ce qui rend Gatsby parfait pour votre passe-partout (boilerplate) React.