https://s3-us-west-2.amazonaws.com/secure.notion-static.com/2a1cbdd6-4169-44e5-9b28-8f2ebbe10205/Frame_3.24_(1).png

When I first learned React and Redux in 2015, I made a gargantuan mess of the production codebase I working on.

Back then, class-based components and Redux were coolest kids on the block.

Despite whatever solid footing I could find myself on, I found myself constantly out of date with React "best practices". React constantly pushed forward and introduced new and better ways to organize code your view layer code. This is a good thing. Optimizing for developer experience is pivotal to deciding which tools stay popular and which don't.

There's a downside though. Read this painfully accurate quote from Joel Hooks.

Developers are confused about where to start and what to choose when they start learning to write high-quality React applications. They want a strong foundation of knowledge and the confidence to architect React applications at scale built to current industry standards.

They are frustrated that there are no widely accepted standards for building React applications consistently, coherently, and with minimal risks to their professional reputations and livelihoods.

On top of that, there is a sea of choices and tradeoffs that React developers face every single day. From how the project is even started, which framework to use, how to manage state, how does it get bundled, accessibility, and deployment just to get going.

At each fšŸ¬kin' stop, there's a new choice to make. A new chance to be wrong.

Trying to build a solid foundation in React feels like a slot machine.

ā€” @jhooks, June 17th, 2020

Some point later in my developer journey, I too realized I was facing these challenges. I got frustrated. I realized that I could never keep up to date with the current trends of the libraries and frameworks I was using. I also decided I didn't want those nuances to dictate my professional reputation or livelihood. It wasn't good enough for me. I needed something better.

Eventually, I sought out the originating principlesā€” the fundamentals, to client-side architecture. I sought out to construct a standard for building client-side apps. A professional one.


This guide teaches you client-side architecture fundamentals.

It's the result of my research through through first principles on how to design and develop robust, flexible, testable, and maintainable client-side applications.

My experience working on client-side apps of varying sizes, I've come to realize some serious upfront design can have a huge impact on the quality of the code for the duration of its life.

From simple dashboards for internal use, to multi-layered client-side experiences with rendering layers, domain logic belonging to numerous groups of users, this guide teaches you the essential design principles most frontend developers are looking for. It proposes architectural standards for client-side web development.

This guide is primarily focused on React, because it's the most popular library with the least amount of structure, but the principles are transferrable.