Navigating Front-End Complexity: A Blueprint for Loosely Coupled Front-End Systems

(Formerly Building your Front-End With Intention: Architecture and Tooling for your next Front-End project!) Front-End code bases can quickly become really difficult to maintain or add new features to. This mainly comes from our Front-End components being highly coupled either through poorly written CSS or components having too many responsibilities But there is a way we can avoid these such code bases. We will learn in this talk how building your Front-End Architecture with intention will keep code bases manageable and easy to reason about, allowing for rapid development and easily responding to changing requirements. And we will also learn how this also leads to code bases that’s easier for new people to onboard and contribute to, allowing them to learn the code base at their own pace. This is done by leveraging Component-Driven Design and Brad’s Frost’s Atomic Design to promote component isolation. With the attributes these architectural decisions promote, we can leverage techniques such as Functional CSS to further promote component isolation by inverting the flow of control of our CSS. These and other tools and techniques will allow us to build a code base of loosely coupled components, where Engineers only need to understand the component they are working in to start providing value. By the end of this talk, those in attendance will have the tools they’ll need to build or migrate their code bases to something more loosely coupled, decreasing Engineering time for tasks, promoting rapid iteration and simply making a Front-End code base much more of a joy to work in.