Gatsby Part 1: Gatsby, the JAMstack and Serverless Architecture
A series based on a Gatsby talk I gave at BrumJS, a Javascript Meetup in Birmingham, UK.
In this series I’ll be looking a bunch of different aspects of Gatsby, a Static Site Generator based on React.js and GraphQL.
This post is an introduction to the series and to Gatsby. What is it and why is it good?
Quick disclaimer first of all. Throughout this series I’m going to say a fair amount of negative things about WordPress. I used to be a WordPress developer and I truly believe that it’s an incredibly powerful tool, which — when used right — is really versatile and flexible.
Having said that…
Ok, that’s an exaggeration. But the WordPress stack has a few issues.
It’s slower than it could be. WordPress includes a bunch of files that a lot of websites neither use nor want, and their developers may not even be aware they’re loaded. I was certainly surprised when I first looked at all the files it loads.
That’s not all though, there are security issues, unhelpful database error messages, plugins to update all the time and — worst of all — it means that to deploy a website, front-end developers have to learn back-end code. WordPress is a huge tool — something like 20% of the internet — but if you’ve no interest in learning PHP or how to use SQL databases, then you might be out of luck, particularly with WP.
Even if it wasn’t for these problems, creating a lightning fast website in 2018 is a big job. Checkout this link to a Smashing Magazine performance checklist. It’s a 53-minute read with 43 different items on it! If it takes an hour to read, implementing all of these features is a big undertaking!
This is where Gatsby comes in. A static site generator that an ordinary member of the public — and my wife — called “So quick it’s almost scary”. She isn’t even a developer. She’s a real person.
The idea of static site generators isn’t new. If you’re into Ruby, you might have checked out Jekyll. Gatsby is to React like Jekyll is to Ruby. There’s also Next.js which is build on React — and Nuxt.js built on Vue— but that’s a little more app-focussed, with more features for server-side rendering etc. Gatsby takes in a project and spits out plain ol’ HTML, CSS and JS files. That means that the sites you create are super fast, don’t need any back-end at all, and can pull from a whole bunch of data sources including APIs, CMSs or Markdown files. It puts the data in templates at build-time to create a static site ready for deployment.
The structure above isn’t only useful for Gatsby. It’s reflective of serverless architecture. Serverless and JAM stack are closely linked — there’s no servers or back-ends, just Javascript, APIs and Markup files in HTML & CSS. This is a really flexible way of dealing with websites without servers or back-end development, and definitely an idea that I’ve bought into.
I was a bit worried about it at first. We need the back-end right? We need it for the databases and forms and everything! But I attended a Codepen talk by Nick Moreton in which he made a Vue.js app which pulled data from Firebase (something like this pen). I didn’t know the words at the time, but this was a JAM-stack app. And, having done a bit of research, it turns out there are a whole tonne of services out there to facilitate features that we would have needed a back end for. In fact, Chris Coyier of anything good and front-end ever has a whole site dedicated to The Power of Serverless. It’s a great read-through, with a whole list of external services from databases to authentication to sending emails and taking payments. There’s also a cool list of potential projects to give a go.
One of the biggest advantages of serverlessness — is that alright? Serverlessness? — is it’s speed, and Gatsby is absolutely no exception. We’ll get round to some examples, but there are some neat features bundled with Gatsby that make it quick to load — and to work with — out of the box.
- Offline Access
- Page Caching
- Progressive & Responsive image loading — load a crappy image, then overlay it with a lazy-loaded better version.
- Critical CSS — we only load the styles the user sees, then lazy-load the rest!
- SCSS support
- ES6 support
- Routing
- Hot Reloading
- React
- GraphQL
There’s also a whole bunch of features that Gatsby has plugins for as well:
- CMSs including Headless WordPress, Contentful and Drupal as well as databases like Firebase, Google Sheets and Medium.
- Accessing Markdown files inside your app or on a CMS and turning them into HTML.
- AMP — Google’s Accelerated Mobile Pages initiative.
- React Helmet for site meta
- Google Analytics
- Typescript
- Mailchimp
- E-commerce
And a whole bunch more. Take a look on Gatsby’s plugin page for all the different things it can do.
We can see that a lot of the things that might have ended up on that front-end checklist are handled for us by Gatsby with a little configuration. I’ll be going into some these in future posts, but for now let’s just look in some broad strokes at some examples of Gatsby sites.
RossWhitehouse.com
Is this a little indulgent? Sure. But, is my website blazing fast? Also yes.
My website is like this all the way down. Some yellow, some text, and that’s pretty much it. It’s really light and that’s how I like it. No big images or anything. As such, you might expect it’s pretty quick, and it is! Funnily enough, Google’s Pagespeed insights has never been able to give me a number! I mean, I know it’s good, but maybe it’s too quick for Google to measure! Can’t go wrong with that!
Reactjs.org
I’m sure if you’re a React dev reading this you’re fairly familiar with React’s documentation site. I was surprised myself to find out it’s actually built on Gatsby. Like mine, it’s mainly just text, but there’s a lot of it! Tutorials and docs with code and a few more images, it’s not a small site by any means, but still blazing fast!
In terms of Google Pagespeeds, we’re looking at a minimum of 0.7 seconds. 700 miliseconds! Aside from that, the optimisation for speed is 98 to 99 out of 100! That’s nuts! Google thinks this is nearly perfect. That’s setting a pretty high bar for documentation sites, if not all sites!
CajunBowFishing.com
This is an interesting site that sells bows for fishing. Like bow and arrows bows. How’s that work? No idea. Spool on the bow and line attached to the arrow I guess? I can’t imagine that’s too healthy for the fish. I mean, look at the logo! The arrow’s going right through that guy! Rough.
Anyway, I included this site because it’s a little more bells and whistles than either of the others, there’s that big image you can see, and a large full-width video loaded at the bottom of the page. With that in mind, let’s run through the page speeds. On a phone, it’ll load up in 1.3 seconds. Again, on desktop there isn’t a Pagespeed available, but if we switch to GTMetrix, it says the fully loaded time of 2.2 seconds. That’s really fast for a site like this. It also goes to show that Gatsby isn’t just for static, text-based sites. It’s capable of handling e-commerce and most things that ‘regular’ site stacks can.
Wrap-up
This was a quick look at what Gatsby is, the power of the JAM Stack and serverless, and the kind of speeds you can get with this way of making websites. I think the JAM stack is changing the way we make websites, and Gatsby is doing so much to make that easy to pick up and play. If I made a website today that needed to be fast to make, easy to optimise and get great page speeds without me doing much at all, I’d reach straight for Gatsby.
In this series I’ll be doing a whole bunch of posts about Gatsbyjs, looking at the technology behind it, integrating Gatsby with CMS systems like Contentful, and deploying a Gatsby site to the internet proper.
In the meantime, if you want to give Gatsby a go, it’s super easy to get started on their docs site and give it a whack. I learned from LevelUpTutorials’ Gatsby Pro Series, in which Scott Tolinski explains how to use Gatsby to do some really awesome stuff.
Thanks for reading this! You can find me on Twitter and Instagram, and check out my other posts!
