BT

Q&A with Kyle Mathews, Creator of React-Based Static Site Generator Gatsby

| by David Iffland Follow 4 Followers on Jul 11, 2017. Estimated reading time: 3 minutes |

After a series of startups, Kyle Mathews quit his job and started working on one of his side projects full-time. That project, Gatsby, was borne out of a desire to create a website that would allow him to "avoid using anything other than React.js".

Since then, Gatsby, now at version 1.0, has developed into a broad set of tools, including a plugin architecture, a build-time GraphQL-based data layer, and Progressive Web Apps (PWA) support. It includes a CLI and a pre-configured build process built upon Babel and webpack.

To drive the point home about Gatsby's speed, Mathews wrote an Instagram clone intended to show off how it uses Google's PRPL Pattern in order to get pixels on the screen as soon as possible. Part of this speed is that it creates a "static HTML rendering of each page so the initial load is as fast as possible". In addition, prefetching helps the heavy lifting, says Mathews.

Gatsby is much faster since it does prefetching of resources on the client and client side transitions. Several people have commented that clicking around a Gatsby site feels like your on a local site.

In an interview with InfoQ, Mathews spoke about the motivations for Gatsby and where it's headed.

InfoQ: What problems does Gatsby try to solve?

Kyle Mathews: Gatsby is trying to solve the problem of what should a website framework in 2017 look like. Most takes on web frameworks are from the 1st/2nd generations of the web. While they're fantastic, mature frameworks, they're not built for today's massive web, dominated by billions accessing the web on low-end smartphones on unreliable networks.

For a website to be fast on a smartphone, it has live fairly independently of its serve; be able to prefetch code and data and render content on the client.

Smartphones and browsers are plenty fast enough to deliver great experiences over the web — we're just hampered by old frameworks which assume fast, wired network connections and force the little supercomputers in our pocket to wait on unreliable cell networks.

Gatsby has a ton of intelligence baked in to ensure that sites load fast and navigating around a site feels remarkably quick regardless of the network conditions.

Responsive design was an important first step for the mobile web but we desperately need to move to a model where sites are client-rendered and intelligently prefetch content.

InfoQ: How does it compare to other static site generators, both React-based and non?

Mathews: It inherits all the benefits of traditional static site generators e.g. great performance, higher security, lower cost of scaling, and a better developer experience (database migration anyone?). The v1 version of Gatsby blazes new ground for static site generators by enabling rich integrations with CMSs like Contentful, Wordpress, and Drupal, and a suite of features, on by default, that make your sites startlingly fast — route-based code splitting, service workers, offline support, and more.

On the developer experience, all other static site generators do very little to help you with modern CSS and JS. They limit themselves to compiling (markdown generally) to HTML and leave you to setup a modern build/asset pipeline yourself. Gatsby comes 100% ready out of the box to build sophisticated websites using the latest tools and techniques.

InfoQ: What does Gatsby's longevity look like?

Mathews: Gatsby has a ton of momentum and is already the #4 static site generator after only two years. There are quite a few high profile sites already launched on Gatsby or in development. We recently passed 200 contributors to core as well as our 500,000 download of Gatsby. Key to Gatsby's longevity will be establishing a sustainable business model funding Gatsby's core development and a robust open source community building and maintaining plugins and integrations with data sources.

InfoQ: What's next?

Mathews: My personal focus is working on how to fund Gatsby's core development. The project's main focus is building more and more data integrations with APIs, CMSs, and databases to make it trivial to migrate existing sites to Gatsby or rebuild on a modern website framework. Gatsby is production-ready already for building sophisticated, very fast websites. Next on the docket is making sure it's trivial to get your data into Gatsby—wherever it may be right now.

Despite being nearly two years old, it's still early days for the project and plenty of necessary pieces are sure to come. The plugin architecture should allow the community to fill in the gaps and so far, there are about 35 such plug-ins covering technologies such as SASS, TypeScript, and Preact.

For more information, check out the GitHub repository or the Gatsby homepage.

Rate this Article

Adoption Stage
Style

Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Tell us what you think

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread
Community comments

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Discuss

Login to InfoQ to interact with what matters most to you.


Recover your password...

Follow

Follow your favorite topics and editors

Quick overview of most important highlights in the industry and on the site.

Like

More signal, less noise

Build your own feed by choosing topics you want to read about and editors you want to hear from.

Notifications

Stay up-to-date

Set up your notifications and don't miss out on content that matters to you

BT