Keenan
Payne

Frontend Architecture

Thoughtfully making foundational decisions on how to construct complex user interfaces.

Scaling codebases is difficult. When needs outpace available resources, technical debt accrues more quickly and becomes difficult to mitigate.

Everyone and everything suffers as technical debt piles up. Developers can end up working a sub-par codebase that impedes the ability to produce high-quality work efficiently; stakeholders cannot meet the needs of a growing company; your company is limited in its ability to grow and make an impact.

What I offer

Frontend architecture is a subset of my frontend development specialization. The emphasis on architecture intends to illuminate the concerted—not inherent—effort required to craft resilient and scalable user interfaces.

I offer my specialization in frontend architecture to organizations intent on designing and developing long-term solutions for complex user interfaces.

After working together, you will receive a bespoke frontend architecture designed to your specific needs! If we've done our job correctly, we will have addressed any core concerns that you and others have been encountering with your codebase/existing frontend architecture while keeping an eye on how your company may grow in the future.

My process

Requirements gathering

I work rigorously to gather requirements for your project so that smart architectural choices can be made that solve your short-term goals while keeping an eye towards the future.

Time

The quality of what I produce is time- and scope-dependent. I can craft a resilient and composable codebase with a flexible time horizon and a clear goal. Crafting complex frontend architectures typically requires significant time investment, but I firmly believe that it is worth the effort for any long-term software development endeavor.

Tooling

I will happily integrate with your preferred tooling/frameworks if you have already made core architectural decisions. For areas with greater ambiguity, I can guide the decision-making process governing essential decisions that can provide confidence in choosing the right tool that solves your needs.

Learn how I incorporate build tooling here.

Documentation

Well-written documentation provides developers with a resource that guides them through complex codebases. Documentation provides clarity for developers and stakeholders alike, paving the way for mindful decision-making as well as consistent and efficient development.

Documentation is an up-front investment I make for all large frontend architecture projects. I write documentation by hand and generate it automatically using various tools.

Tools of the trade

HTML

  • Templating libraries (Nunjucks, Liquid)

CSS

  • Pre-processors (Sass, LESS)
  • Post-processors (PostCSS)

JavaScript

  • Next.js
  • Vue.js
  • React.js
  • Node.js
  • Babel
  • jQuery (legacy)

Design Systems

  • Storybook
  • Pattern Lab
  • Figma

Content Management Systems (CMS)

  • Netlify CMS
  • Contentful
  • Craft CMS
  • WordPress

Static Site Generators (SSG)

  • Eleventy
  • Astro
  • Statamic
  • Jekyll
  • Hugo

Documentation

FAQ

What is my requirements gathering process?

Interview team members to become educated on the company and problem domain. Some sample questions include

  • What is your current tech stack?
  • What is your "ideal" tech stack?
  • What past architectural decisions have you made?
    • What has gone well?
    • What has gone wrong?
  • What shortcomings you definitely want to avoid having learning from the past?
  • If one thing could be an "out-of-the-park" success for you and your team, what would that be?

How do I implement build tooling into my frontend architectures?

I implement robust build processes using Node.js and NPM to provide a modern and intuitive developer experience. Don't expect a big Webpack mess with my projects—I focus on providing only the simplest solutions to problems before finding advanced solutions (i.e., starting with npm scripts).

Webpack is fine, of course, but it's often used as a starting point when it should be viewed as a potential future outcome following smaller-scale build process implementations.

Mindfulness matters when it comes to making decisions that are so frequently addressed as "one size fits all."