03 November, 2018 - 6:40 PM
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:
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!