Some thoughts on Gatsby

I've recently had my first venture into the world of Gatsby. Here is what I've learned.

What is Gatsby?

As per the Gatsby website, Gatsby is an "open source frontend framework for creating dynamic, optimized websites..."

Gatsby is React-based, in that you use React components to build your site. Gatsby handles a lot of the technical things, including performance optimizations, security, accessibility, etc. It uses plugins (which are analogous to node modules but Gatsby-specific and a bit more powerful) that which make things like handling images or connecting to content sources much easier. (They also provide a cloud platform for hosting, but as I haven't yet used that I'll keep this post focused solely on the framework itself.)

Essentially, Gatsby does to React what React does to vanilla JavaScript: it abstracts the hard stuff so that you can spend less time making your site work and more time focusing on the site content.

Tradeoffs of Gatsby

This convenience does come with a bit of a tradeoff: you lose some control of the more technical aspects of your site. In most cases this isn't really relevant, you don't often really need that level of control. Plus, Gatsby handles things better than many people would if they did it themselves. However, if you do need to do something particularly unorthodox with that part of your site, Gatsby might get in the way.

That being said, Gatsby does come with a whole host of customization options, and you can overwrite most of the things that Gatsby does for you, so this tradeoff is more "easier development experience at the cost of having to learn yet another system in order to change the abstracted stuff."

What's it like?

My experience with Gatsby is limited to one project, this site. That means that I haven't used many of the starter packs (or any, actually), and I haven't completely mastered it.

From what experience I do have, it makes things super easy. Essentially, your project directory is set up as follows:

.
|-- .cache/
|-- node_modules/
|-- src/
|    -- pages/
|         -- index.js
|-- public/
|-- static/
|-- gatsby-config.js
|-- gatsby-node.js
|-- README.md

Any components in the pages directory get automagically transformed into files. For example, if you were to put about.js into that pages directory (and have a valid React component exported from said file), you could go to site.domain.com/about and then there your component would be, as a page.

Any assets you put into the static folder are available after building the site, so if you have assets that you need and you know you will need a lot, you can just put them there to have them bundled with the rest of your site. Note: if you put lots of big things there, it will make you site slower to download.

The gatsby-config.js file is pretty self explanatory. It's where you configure the Gatsby stuff, like plugins and whatnot.

The gatsby-node.js file is a file that lets you interact with the node environment at build-time, letting you export things you want it to use, enabling you to do lots of things, like implementing programatically-created files.

Everything else should be familiar if you are coming from ReactJS. If not, I'd suggest checking the React docs for more info.

Gatsby provides automation for development servers, building, and deploying.

Opinions

I think Gatsby is an awesome thing to use when you don't need super-fine control over every aspect of your app. It makes developing a super performant, secure, and accessible site much easier, and way faster.