Ryan Bateman logoRyan BatemanFull Stack Web Developer

Website Rebuild

03 November, 2018 - 6:40 PM

I spent the better part of last week at the Bay Area Drupal Camp (BADCamp) and was lucky enough to get a chance to hear Kyle Matthews (creator of GatsbyJS) talk about Gatsby, where it fits in among static site generators, the JAM Stack (javascript, APIs, markup), and what it can offer for folks interested in Decoupled Drupal.

Ever since I started tinkering with React in late 2015, I really enjoyed how empowering it feels as a developer to work with a front-end library that handled state management and data flow in a reasonable and sensible manner. I had also seriously considered decoupling my personal blog site for a long time, but largely had avoided it because of the additional maintenance load I would take on in maintaining two codebases. However, once I heard more about Gatsby I figured I would give it a shot.

So, late one night last week I started hacking away in my hotel room in Berkeley on the site that you're reading right now! It only took me roughly a week to develop the new front-end from scratch using GatsbyJS. And that was only with a couple hours of hacking after work each night. And I refactored my backend codebase to tie into a better devops workflow!

And here we are now: ryanbateman.space runs on a decoupled architecture - Drupal 8 serves content on the back-end using the JSON API module, and on the front-end we have a statically generated site built with React and Gatsby.

Over the next few days I'm going to post a more exhaustive tutorial/postmortem/analysis of my upgrade to the new site, but in the meantime suffice to say one thing: it's way faster. Check out these two Google Chrome Lighthouse audits from today:

Lighthouse audit. Performance: 92
My new site performance audit.
Lighthouse audit: performance: 45
Old site performance audit.

Those speed gains are huge. My old site wasn't necessarily a slouch (at least, so I thought) and it was especially good at getting down first meaningful paint (1670ms, which is close to what the new site gets),but in time to interactive we see a 60% reduction in load times. Crazy!

Anyway, keep your eyes peeled for a deeper dive into how, why, and what for in the next few days or week, and hope you all enjoy the new site!

Invert color scheme