The Great GatsbyJS: Drupal's lightning fast front-end companion
rcaracaus
edisch
If your agency's resident front-end developer wants to build your next client's website as a single page ReactJS client-side application... Watch out! Der' be dragons:
- Will Google's crawler read this Javascript dependent website?
- Is client-side routing even accessible using a screenreader?
- Is my website actually an app? Should it work offline? Service worker? I'm confused!
- How, and more vaguely, WHEN do I get data from Drupal into my application?
- How do we do things like log Google Analytics page views or render image styles in this weird JS app?
GatsbyJS and its vast ecosystem of plugins attempt to address many of these challenges. This React-based static website generator uses modern tooling/techniques like Webpack, Yarn and code-splitting to give front-enders the latest wow. Out of the box it is incredibly fast, often generating scores of 100 in Chrome's performance audit. The framework, built by an ex-Drupaler Kyle Matthews, actually had Drupal in mind during its development. "The Great GatsbyJs" can be used as a wholesale replacement for Drupal's theme system, but don't worry, we will address why sticking with a trusty Twig-based Drupal front-end sometimes makes sense.
This 90 minute "builder" session will be aimed at both front-end and back-end Drupal developers with a nod towards managers looking to evaluate the software. After introducing the topic we will cover practical steps involved in building a GatsbyJs website on top of a Drupal back-end application including:
- Setting up Drupal 8 to securely GET data from endpoints
- Feeding JSON into Gatsby's GraphQL instance using the Drupal source plugin included in Gatsby core
- How to query GraphQL and inject this data into your components (filters, sorting, contexts)
- How to navigate the Gatsbyisms around Webpack, adding plugins, etc
- Pulling in images and/or image styles from Drupal
- Where to host your site (spoiler, Netlify!)
- Coolness around continuous integration, A/B testing and styleguides