Tens of thousands of developers use the Gatsby framework to build websites and applications that get noticed for their speed and performance. I caught up with Mark Dischler, Urban Insight's Director of Technology, to discuss all things Gasby including a case study of the Urban Insight development team's use of the Gatsby framework to build The Broad's mobile museum guide. The following is a transcription of our conversation and Mark's insights into the integration of Gatsby with Drupal:
What is Gatsby?
Gatsby is a React-based open source framework used to build super-fast, highly-performant websites and apps designed to be secure, scalable, and accessible. Gatsby sites are built using React, and the data layer is powered by GraphQL.
Gatsby allows for impressive flexibility in choosing a data source whether it be from an API, databases, static files, or a content management system like Drupal or WordPress. During the build process, Gatsby pulls in data to populate the pages of the site. Gatsby's GraphQL interface then organizes and shapes the data before the site is built.
What problem does Gatsby solve?
Urban Insight's foray into the world of Gatsby began with a rebuild of The Broad museum's mobile app. We launched a brand new Drupal 8 site for The Broad that became the primary data source for their collection objects and artist information. The Broad had a native mobile app that wasn't fitting their needs because their data was duplicated in two places: the website and the mobile app.
The Broad wanted to quickly develop a replacement for their mobile app that allowed them to manage and edit their content in a single data store. Our search for a technology we could use to build a lightweight mobile app using Drupal as a data source naturally led us to Gatsby.
What is the opportunity for museums and cultural arts organizations to use Gatsby?
Most museums have some kind of digital collections management system. In fact, we recently learned that of the top 48 largest U.S. museums, 22 (46%) use Drupal as the museum's content management platform. Gatsby is great at interpreting structured data and presents a unique opportunity to rapidly develop lightweight in-gallery experience apps. Through creating a minimal template for an artist page and an artwork page, you can easily spin up something very performant, engaging, and visually appealing using Gatsby.
Gatsby offers a simple way to enhance the museum experience and is ideal for organizations with a website that utilizes structured collections data. Gatsby makes it easy to create a responsive and performant mobile application without the need to update data in multiple places.
The Broad has used Gatsby ingeniously as a promotional tool and informational resource. When a user signs into the WiFi at the museum, they are immediately redirected to the Gatsby application on their mobile device. With a traditional application, you'd have to visit the App Store, waste time trying to remember your password, and then download and install the app. This approach eliminates those steps.
In preparing for The Broad museum reopening, we've revamped the mobile app. It will serve not only as an informational website, but also as a digital brochure for families, a digital visitor services associate, and an audio tour guide. We've taken the physical touchpoints from the museum experience (museum staff, physical collateral like print brochures, and maps) and baked them all into the mobile app with interactivity, audio, and a real-time chat feature.
What competitors did you consider when researching Gatsby?
We looked at a number of other JavaScript frameworks including React, Angular, and Vue.js. Gatsby impressed us with its ability to scale up to rapidly develop our project. Various case studies for integrating Gatsby and Drupal showed us that the Drupal community supports Gatsby as an effective method for building static sites that have a Drupal backend. We were confident that the case studies, example code, documentation, and community support would be a solid foundation of resources, should any issues arise during development.
Was the integration with Gatsby and Drupal as easy as you thought it would be?
It's a fairly lightweight integration. Using Drupal 8's RESTful Web Services API we exposed the resources that we needed to populate the Gatsby site.
One challenge we faced was keeping content synced between the Drupal site and the mobile app. To address this, we built a custom solution in Drupal, to track all content updates related to the mobile app. To sync the updates with the Gatsby app, we set up a scheduled task to trigger a rebuild of the app, only when updates are detected.
What's innovative about Gatsby?
Gatsby is built for speed and performance. Given that Gatsby sites and apps are static, there's no need for a webserver to generate a page from a database query.
Gatsby sites load fast. Once your device begins downloading the Gatsby site, Gatsby uses a prefetching mechanism to preload the site. By the time a user gets around to clicking a link, the page content has likely been prefetched, and it loads almost instantaneously. The experience is more akin to a native app and less like that of a traditional website where a full page refresh is more noticeable.
What are some challenges in using Gatsby?
We always hope that cross-browser issues will be minimal when working with JavaScript frameworks, it's not always a given that what you build will display consistently across all browsers. For the most part, we found that Gatsby was able to display consistently across all browsers with the exception of some of the more complex features we implemented for The Broad's mobile app.
When browsers don't comply with web standards and issues arise, it's a huge challenge to track down and fix or workaround the issue. For example, we encountered some unexpected errors in Safari that made it difficult to implement a React audio player. We ultimately resolved the issue on the frontend, but Safari's non-standard handling of service workers forced us to launch without full offline support.
Unforeseen difficulties are almost inevitable when using a new framework, but I think it's oftentimes worth the risk. If you wait for a framework to become mature before using it, you miss out on some great new opportunities. Overall, we're happy with our experience with Gatsby.
What are the best Gatsby tutorials?
Gatsbyjs.com has incredible tutorials, videos, and documentation. They also have over 2,000 plugins and starter templates. It's a very active community.
What's the future of Gatsby?
Progressive Web Apps (PWAs) and static sites are the future. Gatsby sites are fast, engaging, and reliable, and can be built to work in offline mode. A marketing site or a simple web tool is well served by the PWA format. Many popular sites and tools that you may already be using have been rebuilt as PWAs. You can find PWA games, apps, and tools on various online directories.
My favorite example of offline functionality in a PWA is a currency converter that only needs to be refreshed once per day to grab the latest exchange rates. Not only are Progressive Web Apps the future, but they also make travel more convenient.
Do you think that Gatsby is in any way related to The Great Gatsby?
The 'G' in the Gatsby logo has a decidedly Art Deco look and feel. My intuition says that this was a design choice rather than an accident.
How can I build a Gatsby app or website?
To get started with a Gatsby site or app, reach out to discuss your next web project.
