My experience with GatsbyJS and modern web development

As I mentioned in my previous post, I’m Rebuilding my website with GatsbyJS. At the moment of writing this the migration is pretty much done. I spend the morning setting up a temporary domain, nginx and Digital Ocean to see how it would look and behave when deployed. There are still some things to improve but I think is a good time to pause and see how the experience has been.

The main goal of this change was to improve the website by removing some hacks I had to do to Jekyll, add some features but most importantly, keep it a static site based on markdown files.

The advantage of having my posts in markdown files is that I can easily move between platforms easily, and the best proof of this has been this migration. Having the content in plain text files means that I just had to copy them over a new folder and that’s it.

Gatsby uses React and all the modern web tools like Babel and Webpack, but the magic of it is that it uses server side rendering to generate plain and boring HTML that can be quickly loaded in any browser.

But wait, server side rendering? Don’t we need to run node in a server for that? No! That’s the best of Gatsby. It is a static site generator after all. It runs the server side rendering when generating the site, in my computer. This means that the end result is just HTML as with any other static site generator, but instead of using specific template languages it uses React and JSX.

The best of both worlds

But Gatsby doesn’t stop there. When the plain HTML is rendered in your user’s browser, thanks to using React and modern webtools, Gatsby is able to start loading React on the client and hand over the control of the webpage to it.

After the initial HTML load your static webpaage becomes a dynamic web application. This allows Gatsby to start preloading and caching the links of your page so that when the user clicks on an article it is already downloaded.

Furthermore, it uses React navigation to replace the content of the page in line so the user sees the new page immediately without any wait or loading.

You will see buzzwords like JAMstack and PWA thrown at you, be if you’re not a passionate web developer you don’t really care about all of this. What you care is that with this technology your website benefits from the best of both worlds.

A quick, boring an standard load of plain HTML that works everywhere, and a progressive improvement into modern dynamic web apps.

A great architecture

Without any doubt the thing that hook me up was Gatsby’s great architecture.

Gatsby separates the sources of data from the source code of your website. This allows you to bring your own data. In my case these are posts in form of Markdown files, but it could be anything else: CSVs, JSON, any Database or web API and even full CMS like Wordpress.

Yes that’s right, you could use Wordpress as a CMS, pull the data into Gatsby and statically generate your website. This is ideal for people that is not so nerd to deal with markdown.

The diagram in Gatsby’s website is the best representation of its architecture. And it’s probably because I have a tendency to love well designs systems, but everytime I see this diagram makes me super excited.

But having support for all this different data sources would be a real pain if you had to deal with each of them in a different way. Luckily for us this is were Gatsby shines the most thanks to GraphQL.

GraphQL is one of the most important developments in recent years. Yes React has done a lot for UI development, but in my opinion GraphQL is what sets modern development apart, and believe me, I still have to deal with REST APIs everyday.

Thanks to GraphQL you can access all the different data sources in the same way. You just need to build your GraphQL query (and thanks to Graphql that is super easy!) and Gatsby will look for the data using each data source plugin available.

With the query defined, the gathered data is then injected into your pages, usually using React components. This allows you to just give a UI to your data or go further and use Javascript to manipulate it. And thanks to the React paradigm implementing UI in small components make it really easy to build decent websites (making a good design is another story :P).

Multiple collections

One of the things that makes my website not a standard installation Jekyll is the fact that I have multiple collections. You’re reading now my blog but you can also check my old podcast and portfolio.

This is the main reason I had to do some changes to Jekyll and I was expecting that thanks to Gatsby architecture and having by default support for multiple data sources it would make this easy.

At a first glance it is, because in your config file where you define the plugins you can define multiple instances of the same plugin, each one looking into different directories. That means that I can bring markdown files from different folders.

The issue is that by default the file system plugin doesn’t add the id (or any info) about the collection in the GraphQL nodes, so I had to do some tweaking to add them myself. Thankfully Gatsby has a hook for this so it was really simple to do.

With that in place I just had to be careful when querying for posts and make sure to always filter based on the right collection.

query BlogQuery {
    allMarkdownRemark(
      filter: {fields: {collection: {eq: "blog"}}}

Hot workflow

Design wise I really enjoy flexbox and being able to make independent components that can I can reuse across the site. I’m hoping that in the upcoming v2 Gatsby makes it much easier for a React component to requests its own data, that’s a small inconvenience that I’ve found.

But of course, the best feature of using modern web tooling is hot reloading. And with Gatsby you get it for free, not only for your code but also for your content. I’m using macOS split-full-screen with my markdown in one side and my website in the other while I’m writing this!

Yes, Jekyll also has hot-reloading, but with the hacks I had to make it mean that it never worked for me.

Conclusions

I’m sure when I have this website in production I will find some drawbacks, nothing is perfect. But as long as it delivers the same or better performance than Jekyll I will be happy.

I think GatsbyJS is a great tool for static website, but for me personally, the best thing that has done is showed me that modern web development can be simple to use and setup, something that no other tool has ever made before.