Joel Hawksley: The Hidden Costs of Frontend Complexity

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
• Primer Design System
• Axe Accessibility Tools
• GitHub’s ViewComponent Framework

Book Recommendation:

• How Buildings Learn by Stewart Brand

Guest's Links

• Joel Hawksley on GitHub
• Joel Hawksley’s Website

Thanks to Our Sponsor!

Turn hours of debugging into just minutes! AppSignal 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!

Subscribe to Maintainable on:

• Apple Podcasts
• Spotify

Or search "Maintainable" wherever you stream your podcasts.

Keep up to date with the Maintainable Podcast by joining the newsletter.