This blog post was originally posted on the LekoArts Blog
In any scenario, this individual of disparate experience and expertise was able to use, enjoy, and love using Gatsby.
In this post, I want to explain how Gatsby led me into learning React and how your Gatsby project can scale by considering my personal site and experience, as an example. Gatsby seamlessly scales from basic React usage to complex React patterns, from basic Markdown to full-featured headless CMS — Gatsby scales with your expertise and scope.
When I first discovered Gatsby two years ago, React was already quite popular. I decided to learn it to get more into modern front-end development and to step up my game. Before that I did static HTML/CSS/JS websites with the help of SCSS and Gulp. I never used a server-side scripting language (e.g. PHP) or a scripting engine (e.g. Nunjucks). So this was a big step, wasn’t it?
Gatsby offers you a playground to learn React.
After the v1 release of Gatsby (June ‘17) I also went live with my personal site which used Markdown as its source and the built in CSS Modules for styling. I didn’t know much React at that point and hence used it more as a templating language — but still had a PWA and excellent Lighthouse scores!
After I launched my site I continued to learn React and Gatsby. As it doesn’t limit you in how you can use React. I treated my website as an experiment. I experimented with new, cutting-edge React techniques just to see how they worked, and they worked quite well! Gatsby also had a lot more to learn: GraphQL, Node APIs and gatsby-image, to name a few.
Gatsby’s rich plugin ecosystem allowed me to easily try other packages. I tried different styling approaches, different data sources, and so on… Most plugins work without manual configuration: Install the package, put it in your config and see it working — awesome!
Over the following couple of months I really moved fast and broke things, but learned a lot in the process. The important bit here is: Gatsby was never the bottleneck or the reason I couldn’t try something.
I explained how good of a learning experience I have had with Gatsby. But now I want to tell you that taking the hard things away (at first) also can be a reason to learn more.
Why? You get a gentle introduction to topics like GraphQL. Certain restrictions can be bothersome in some edge cases, but at the beginning it’s good to only have one way of doing things. This means that you don’t have to fully understand all the bells and whistles to have a fast site or GraphQL for data querying — but you certainly have a feeling of how it could work in the end.
So many people say after using Gatsby: “Wow, GraphQL for data querying is so great, I don’t want to miss it!” And I’d say that these people definitely will try to integrate GraphQL into their other projects afterwards.
The Venn diagram tries to show how the above example can also be applied to other technologies/tools that Gatsby uses. Besides GraphQL I chose React, Headless CMS, and general website performance.
You can try different React frameworks/components, you can learn how to setup your own GraphQL server or learn how to increase website performance. Headless CMS is another very interesting field to explore. And that’s what I did. I used Next.js with Apollo and other great libraries, used Prisma to set up my own GraphQL server, and tuned my website performance (e.g. with optimizing fonts).
Result: My Gatsby projects can benefit from the gained knowledge!
Monolithic CMS applications are being replaced by specialized content systems as Sam Bhagwat already wrote in his series “Delivering Modern Website Experiences: The Journey to a Content Mesh”. Gatsby embraces this modularity with its vast plugin ecosystem and the ability to bring your own data from anywhere. It is this very modularity that not only allows professionals to use their favorite services, techniques, and advanced practices, but also beginners to have a gentle introduction to the React and GraphQL ecosystems and standards. Gatsby is an incredible platform to gain an understanding and expertise in both. Start small and scale your expertise and understanding with Gatsby.
Furthermore it’s also a great platform to learn other technologies and see web performance optimizations live in action. Without being entangled in low-level complexity, you can build up your stack and knowledge upon a solid and performant foundation which makes Gatsby perfect for your go-to React boilerplate.