175 lines
5.5 KiB
Plaintext
175 lines
5.5 KiB
Plaintext
[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/
|