# Joel Hawksley: The Hidden Costs of Frontend Complexity

EP-195 | January 14, 2025 | 46:13



Topics: Frameworks, Architecture


Joel Hawksley, Staff Software Engineer at GitHub, joins Robby to discuss the challenges of scaling frontend systems and ensuring accessibility across a massive platform. With over six years of experience at GitHub, Joel reflects on the evolution of their design system, Primer, the importance of changeability in software, and strategies for addressing the complexities of frontend maintenance.





## Show Notes

## Topics Discussed

- The **importance of changeability** as a core characteristic of well-maintained software.
- How GitHub has approached **accessibility** as a business and legal imperative.
- The evolution of GitHub’s frontend system, spanning over 2,000 pages, and the concept of **"frontend vintages."**
- Primer: GitHub’s design system and the paradox of its success—consistency vs. changeability.
- The disproportionate **maintenance costs** of frontend systems compared to backend systems.
- Using tools like **Axe** and **keyboard-only tests** to identify and resolve accessibility issues.
- The philosophical balance between creativity and usability in software design.
- Practical advice for teams starting their **accessibility journey** with limited resources.
- How frontend complexity affects scalability, especially in app-like experiences.
- Joel’s advocacy for adopting **off-the-shelf components** to reduce complexity for smaller teams.

## Key Takeaways

### [00:01:12] What Defines Well-Maintained Software?

Joel explains how **changeability** —the confidence to make and deploy changes—provides the foundation for high-quality software.

### [00:03:05] Accessibility as a Priority

The Microsoft acquisition drove GitHub’s investment in accessibility, introducing SLAs, automated tools, and manual processes to track progress.

### [00:08:49] Primer: GitHub’s Design System

Primer fosters consistency but introduces the challenge of making changes across a vast, interconnected system.

### [00:12:54] The Cost of Frontend Complexity

Joel shares how browser quirks, device diversity, and other variables make frontend maintenance far more expensive than backend systems.

### [00:28:05] Where to Start with Accessibility

Joel recommends focusing on key user workflows like signing up, making payments, and completing core tasks. He emphasizes the importance of tools like **Axe** and **keyboard-driven tests.**

## Notable Time-Stamps

- [00:01:12] **What Makes Software Well-Maintained?** Joel shares how changeability drives quality.
- [00:03:05] **GitHub’s Accessibility Journey:** The role of SLAs, audits, and automation.
- [00:08:49] **Primer and Design Systems:** Balancing consistency with innovation.
- [00:12:54] **The Hidden Costs of Frontend Complexity:** Lessons learned at GitHub.
- [00:20:33] **Balancing Creativity with Usability:** Joel reflects on the intersection of design and functionality.
- [00:28:05] **Accessibility Best Practices:** Where teams should focus their initial efforts.

## Resources

- [Joel Hawksley’s Website](https://hawksley.org/)
- [Primer Design System](https://primer.style)
- [Axe Accessibility Tools](https://www.deque.com/axe/)
- [GitHub’s ViewComponent Framework](https://github.com/github/view_component)

## Book Recommendation:

- [How Buildings Learn](https://en.wikipedia.org/wiki/How_Buildings_Learn) by Stewart Brand

## Guest's Links

- [Joel Hawksley on GitHub](https://github.com/joelhawksley)
- [Joel Hawksley’s Website](https://hawksley.org/)

### Thanks to Our Sponsor!

Turn hours of debugging into just minutes! [AppSignal](https://www.appsignal.com/?utm_source=maintainable&utm_medium=podcast) is a performance monitoring and error-tracking tool designed for Ruby, Elixir, Python, Node.js, Javascript, and other frameworks.

It offers six powerful features with one simple interface, providing developers with real-time insights into the performance and health of web applications.

Keep your coding cool and error-free, one line at a time! 

Use the code **maintainable** to get a 10% discount for your first year. [Check them out!](https://www.appsignal.com/?utm_source=maintainable&utm_medium=podcast)








## Transcript