First Impressions: Gatsby.js
I’ve been seeing a lot of people talking about Gatsby on Twitter, and everyone seems to love it. I tried it a few months back but had some difficulties with my Node setup and then worked picked up, so I forgot about it for a bit.
Over the break, I wanted to redo my site using Gatsby and get it ready for 2018. So I started to go through all the tutorials, and I was blown away by just how much I can do. Not only is it built on a stack I love (React, Webpack, GrapQL) but the ideas it exposed me to make me want to create a lot of sites using this. It seems that there are so many possibilities with Gatsby and I’m sure I’m just scratching the surface with what this thing can do.
Setup
The setup for Gatsby is straightforward, check out the Getting Started section of the docs. One npm install and then learn a couple of Gatsby commands, and you are all set.
Tutorials
The tutorials were excellent; I typically skip around in tutorials to the parts I care about or think I don’t know which often proves painful. This time I adopted a crazy new approach, go from start to finish through all of them without skipping around. Much better! 😀
The tutorials themselves do a great job illustrating concepts within Gatsby and how it does what it does. Be sure to take your time and understand each section because missing an idea can throw you off a bit. So if you feel like one of the tutorials didn’t quite click then I suggest doing it again.
All in all, I think it took me about an hour or so to go through everything. After I finished, I decided to take a look at a couple of the sections in a bit more detail. The point is to go slow and pay attention, and you should have a pretty good understanding of some basics using Gatsby in one afternoon.
Development Experience
The development experience for this seems to be super smooth and very responsive. You get HMR (Hot Module Replacement) out of the box plus all the goodness of using the Webpack Dev Server. I don’t know of a faster or better development experience right now.
Magic
I’m not the biggest fan of tools having a lot of magic so I was hesitant when I first saw this GraphQL query in a component but it’s not so bad once you get used to it and understand how the magic works.
import React from "react";export default ({ data }) => {
const post = data.markdownRemark;
return (
<div>
<h1>{post.frontmatter.title}</h1>
<div dangerouslySetInnerHTML={{ __html: post.html }} />
</div>
);
};export const query = graphql`
query BlogPostQuery($slug: String!) {
markdownRemark(fields: { slug: { eq: $slug } }) {
html
frontmatter {
title
}
}
}
`;
In the docs, it points out this magic and states that this is powered by them transforming each file into an AST and then parsing this part out of the file. The central piece to understand here is that the resulting data from this query is passed into your component as a property called data. You can then drill down from there and grab whatever pieces of data you need.
Again at first, I didn’t like this, but once you get used to it, it’s nice to use to quickly query for data and understand where that data is originating.
Flexibility & Extensibility
Initially, when starting the tutorial, they have you creating pages within the /pages directory which is great but me being the control freak that I am. I wanted to dictate the folder structure and how I created pages. So initially that was disappointing, but as I got further into the tutorial, I realized you could create pages how you want using the Gatsby APIs, which is great because now I have full control over the setup of my site.
Regarding extensibility, Gatsby has a very useful plugin ecosystem building. Kyle Mathews and the team of contributors behind Gatsby made the plugin ecosystem a top priority. I think they nailed it!
Take some time, pick a plugin, then read its source and you will see just how approachable and understandable it is to develop a plugin.
Kyle Mathews went a step further and created an issue in Gatsby outlining a list of plugins that he’d like to have. So if you are looking for an opportunity to get into Open Source and contribute then, I suggest checking that out. I have a couple of ideas for ones that are not on the list that I think might be useful.
Performance
Gatsby is fast! It generates static files that are straightforward to deploy to any service you need to. Looking to host this on Github Pages? 👍🏼 Surge? ✅ Netlifly? 💯
To see how to handle each of these and more check out the deploy section of the Gatsby docs.
On top of it being a static site, it also is a PWA (Progressive Web App) which means you get client side code splitting and lazy loading of assets as well as prefetching of other pages.
All of this leads to a very performant solution for your website.
Closing Thoughts
All in all, I’m glad I came back to Gatsby and checked this out. Fast developer experience, fun tech stack, powerful ideas! 👍
If you are interested in React and building static sites, then I highly recommend checking out Gatsby!
If you liked this article then please show some ❤️ below. If you didn’t then lets talk about it below 😃.
Originally posted on my blog at https://www.johnstewart.io.
