Here at ComputerMinds, we think of ourselves as Drupal specialists for the UK, but we don't limit ourselves to that. We offer clients a close working relationship and our general flexibility to get stuck into applying our skills to most problems. One of our clients, Alfresco, has come to trust us with more than just our Drupal wisdom. They wanted a new hub that would bring together documentation for a variety of their open source products, which are already on Github. Their documentation was written as Markdown files, so the hub would need to import and transform those files into HTML pages for the web. Essentially, a static site generator was needed.
GatsbyJS is one of these static site generators, based on the incredibly popular React javascript library. It's very easy to get it to work with Markdown files, it's blazing fast, and helps us fulfil a variety of other requirements too. As much as we love Drupal, it's not the right tool for every job. (That's a subject for another day!) A 'JAMstack' approach was appealing for this project because the site would be a clever front-end for content that already existed elsewhere. There would be no need to have user authentication, content workflow, moderation, or many other dynamic website features that Drupal excels at.
For many of us at ComputerMinds, this was our first dive into working with React, let alone Gatsby itself. So the wonderful documentation and tutorials for Gatsby were a huge help. As our project was for displaying documentation, the Gatsby documentation site itself was a helpful influence on the eventual design and user interaction of our site.
The most obvious difference between Drupal and GatsbyJS, was that the coding was mainly in javascript, rather than PHP. It was great to use much more modern javascript code patterns and tools - even if it took a bit of head-scratching to get there! All credit should go to Steve Tweeddale in our Coventry office for his patience with my million questions as we worked towards building a Minimum Viable Product early on in the project timeline. As the site took shape beyond that, we drew on more and more concepts from the GatsbyJS and React ecosystems. Here's a few that were particularly interesting:
- Writing components in JSX and MDX - syntax extensions to javascript and markdown, respectively. These open up some pretty powerful possibilities!
- Hooking into the GatsbyJS lifecycle APIs
- Building our own custom source plugins for content in git repositories
- Using React's class components to be able to handle state
- GraphQL is a pretty neat way of getting at data, regardless of where it came from. The new schema customisation API will be really handy when it comes to pulling in known content structures... like those defined in Drupal.
No doubt someday we'll be turning our hands to bring the best of Gatsby and Drupal together! 'Headless', or 'decoupled' Drupal has become one of the new trendy ways to use Drupal. This means using Drupal to define your app's information architecture or as a content repository. Other applications can then connect to it to display content to users. Those applications could be made in Gatsby, React, Drupal, or almost anything else. We still feel this is usually only worthwhile when Drupal is used as a back-end system for multiple front-ends. But regardless we are looking forward to using GatsbyJS again!