[1] Aaron Bushnell

Hi, I'm Aaron!

Born and raised in the midwest and notorious [3]golden retriever hoarder.

  • [4]
    Featherhour
  • [5]
    Mastodon
  • [6]
    GitHub
  • [7]
    Twitch
  • [8]
    Spotify
  • [9]
    Twitter

You are beautiful. ❤️

[10] Aaron Bushnell

Hi, I'm Aaron!

Born and raised in the midwest and notorious [11]golden retriever hoarder.

  • [12]
    Featherhour
  • [13]
    Mastodon
  • [14]
    GitHub
  • [15]
    Twitch
  • [16]
    Spotify
  • [17]
    Twitter

You are beautiful. ❤️

[18]← View all posts
August 28, 2023

Keep your stack short

Not long ago [19]I wrote about using Gatsby.js on a Craft CMS project. If you
want to learn more about that particular pairing you may want to read that
post. But, for the sake of this one, I'll briefly summarize the tech stack:

[20]Craft CMS handles the backend (content). [21]Gatsby.js, [22]GraphQL, and 
[23]React handles frontend. The on-paper benefits sound like a great approach
for building a website:

  • Craft CMS: The best CMS out there (in my opinion)
  • React: One templating language for static-generated content and client-side
    interactivity
  • GraphQL: A centralized dataset accessible from a single API
  • Performance: Serving a compiled, static version of the site is extremely
    fast

If this were a web framework's website you'd see a column of ✅s next to another
framework's pitiful column of ❌s.

But, there's always a catch

There's no such thing as a free lunch and that goes double for programming.

If you've ever set up a system like this it's tempting to think that—once it's
established—the hardest part is over. But, it's not.

The hardest part isn't setting it up. It's coming back to it a year later.

A year later you're more likely to be mired in:

  • Time-consuming training and documentation for team members
  • Out-of-date dependencies
  • Updates that cause breaking changes across your stack
  • Workflows that make trivial updates time-consuming

You wind up with a great deal of complexity that prevents you from adding the
features your client needs ASAP. While your stack is conceptually
well-separated and tidy, the separation itself becomes your greatest liability
to be productive.

Low abstraction trends

Maybe you've heard, but [24]there's a post or two about [25]Tailwind and its
controversial approach.

I'm not going to proselytize a framework or tool. But there's an obvious influx
in tools like Tailwind that aim to reduce overhead and abstractions.

Tailwind does this by encouraging you to style your components directly in your
templates:

<!-- High Abstraction -->
<div class="card"></div>

<!-- Low Abstraction (Tailwind) -->
<div class="bg-white rounded-lg p-4"></div>

React (by way of JSX) allows you to put your structure and interactions into a
single file. (And, if you inline your styles, you can collocate everything).

<button onClick={() => alert('I think you are great!')}>
  What do you think about me?
</button>

Developers find value in these types of low-overhead tools because:

 1. They can collocate a component's structure, functionality, and styling into
    a single file
 2. Detecting "leakage" can be easier because changes to structure,
    functionality, and styling can occur in this single file

Shortening the stack

Revisiting our Gatsby.js example, there's a similarly large distance between
the content being stored and the views being presented. It's separated by
tools, by protocol, and even by language. All of these bridges require
connectors—any of which can fail for any number of reasons and require
intervention.

But, if we were to reduce the stack from Craft CMS, Gatsby.js, GraphQL, and
React to just Craft CMS and [26]Twig (Craft's templating language) it
eliminates a massive set of complexity and overhead.

Not only does it reduce a large number of dependencies, but it eliminates all
of the connecting protocols and an entirely different language to keep the
stack working. It means fewer bridges to cross, fewer competing dependencies,
and a dramatically simpler stack to revisit a year later.

Wrapping up

I do want to be clear in stating that this isn't an indictment against
Gatsby.js, Craft, or a pairing between the two. Rather, I hope it causes you to
consider all technical challenges not as something that needs to be solved
once, but sustained indefinitely.

When you're building something it's not quite appropriate to ask "will this be
hard to set up?". You're smart and I believe you can set it up!

Instead, ask yourself: "Will this be harder a year later?"


References:

[1] https://aaronmbushnell.com/
[3] https://aaronmbushnell.com/images/goldens.png
[4] https://featherhour.com/
[5] https://mastodon.social/@aaronbushnell
[6] https://github.com/aaronbushnell
[7] https://www.twitch.tv/aaronbushnell
[8] https://open.spotify.com/user/aaronmbushnell
[9] https://twitter.com/aaronbushnell
[10] https://aaronmbushnell.com/
[11] https://aaronmbushnell.com/images/goldens.png
[12] https://featherhour.com/
[13] https://mastodon.social/@aaronbushnell
[14] https://github.com/aaronbushnell
[15] https://www.twitch.tv/aaronbushnell
[16] https://open.spotify.com/user/aaronmbushnell
[17] https://twitter.com/aaronbushnell
[18] https://aaronmbushnell.com/
[19] https://aaronmbushnell.com/running-gatsby-js-sites-with-craft-cms
[20] https://craftcms.com/
[21] https://www.gatsbyjs.com/
[22] https://graphql.org/
[23] https://react.dev/
[24] https://www.google.com/search?q=site%3Amedium.com+tailwind
[25] https://tailwindcss.com/
[26] https://twig.symfony.com/
