Shifting expectations in user behaviour online have driven developers to seek new and creative ways of delivering websites and apps that load nearly instantaneously. There’s a wealth of tools and frameworks out there to support developers and the chances are that if you’re looking into developing just such a product then you’ll have heard of GatsbyJS.
Gatsby is a key player in the market and has benefitted from its use of GraphQL and close relationship with the popular ReactJS library. Since 2015, Gatsby has established an active community and has found great success in leveraging members to sing its praises. They encourage the community to host events, showcasing examples of Gatsby in action to highlight the benefits of the framework.
As those who may follow me will know, I have a keen interest in Gatsby and have built my own blog site using the framework. I was keen for MMT Digital to host our own event and we were lucky enough to have Kyle Mathews, the founder of Gatsby, at our evening event in Soho.
To make things even better, the event was a huge success with a fantastic attendance and excellent feedback. Here’s a roundup of my key takeaways from the evening’s presentations and discussions:
- Gatsby is not a Static Site Generator
There is a common misconception that Gatsby is just a static site generator. The reality is that it is much more. To quote Gatsby themselves, “Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps”.
With our React-based websites and applications, we can leverage Gatsby to enhance these products, making use of its rich ecosystem and dedication to performance. Additionally, we can use GraphQL to make more efficient queries, retrieving only the elements we need to deliver the best possible experiences.
- Previews made simple
Gatsby Preview is a relatively new feature that is available for some of the key players in the headless CMS market. It allows content editors and CMS users to see instant previews of the changes they have made through side component panels in the CMS.
The hot news is that Kentico Kontent and Gatsby are working on this as we speak, and it should be available in Kontent very soon.
Gatsby Preview has the potential to massively improve the content editing experience when working with headless CMS, something I know from my own experience that content editors are clamouring for!
- GraphiQL Explorer speeds up your development
For those who haven’t come across it before, GraphiQL is the GraphQL integrated development environment that you will tend to use when building Gatsby websites. I showed a quick demo of GraphiQL with some sample content from Kentico Kontent, where the GraphiQL Explorer can be used to help you transfer the exact GraphQL code you would need to retrieve the data without having to worry about anything that you could be missing on the query when you add it into the React code of your Gatsby site.
- The futures bright, the futures Gatsby
As I mentioned, we were privileged to have Kyle Mathews at our event and had the pleasure of hearing him talk about the future of Gatsby during our Q&A session.
The ambition and vision that Kyle articulated was truly exciting and, alongside news of additional CMS integrations for Gatsby Preview, we learned of the upcoming Incremental Builds feature, a tantalising new component that will supercharge development.
- How to get started using Gatsby with a headless CMS?
During my talk, Journey On Getting Started with Gatsby, I described a few approaches for getting started with Gatsby. One of the approaches I highlighted was the excellent Gatsby Tutorials, which allow you to get to grips with Gatsby and utilising key operations.
If you’re embarking on a headless CMS project and planning to use Gatsby, I would recommend looking at the Gatsby Source Plugin. Here is an example of how to get started with Kentico Kontent.
If a Gatsby Source Plugin doesn’t exist, then usually you can create one with the vendor and invite other people to contribute to it.
- Plugins are your Gatsby friend
There are lots of ways to enhance your website and applications. As I mentioned at the start, Gatsby has a rich ecosystem. The likelihood is that someone has already created what you need.
Rather than creating everything from scratch, it is worth exploring Gatsby Plugins. There are a variety of plugins out there covering SEO, Accessibility, Offline Mode, CSS styling and accessing the DOM (Document Object Model), and lots more. If you’re starting a project using Gatsby, I recommend taking a look at the library first. The less you need to build from scratch, the more you can focus on making a truly great product!
- Gatsby goes beyond static content
We had our very own Jenish Chandracim (MMT Digital) presenting on how you can utilise Gatsby with an API layer (GraphQL API), incorporating data from other sources, e.g. CMS, ecommerce platform. His presentation introduced Apollo Server, an open-source tool for building the APIs for GraphQL.
Using an Apollo Client you can manage dynamic content like authentication or submitting a form in Gatsby without having to rebuild the whole site/state and focusing on retrieving only what you need. A great example of how this is achieved can be seen here - Jason Lengstorf on Gatsby with Apollo.
- Easy to make changes in a CMS and see them on your site
Ondrej Chrastina (Kentico) showed us what the headless CMS Kentico Kontent could offer and how it could operate seamlessly with his sample Gatsby site, especially when editing content. The Components, Pages and Templates structures he had created were an excellent showcase for how we should be embracing a headless CMS site’s code with Gatsby effectively, leveraging the Gatsby Source Plugin to get a head start.
There you have it. That was my top 8 key takeaways from our MMT-Gatsby Event in London, which I hope you will find useful. You can also catch a review from Matt Nield on MMT & Gatsby Meet-up.
Want to attend more MMT Tech Meet-ups?
If you’re interested in Gatsby events and looking for when the next one will be available. We have an event planned November 13th, 2019, London. Make sure you register via the link below: