Atomic Design: Breaking Up is Hard to Do, Enter Compound Components!

Abstract

In this talk, we shall highlight the limitations of Atomic Design in complex UI development and introduce Compound Components as a more flexible solution. We will contrast Atomic Design and Compound Components, showing their differences with practical examples as code examples and real-life live coding sessions.

The talk will cover state management and how Compound Components give better ways to manage state throughout an application. We will see Figma designs and translate them into code, covering component decomposition from the ground up. We will share in frontend API architecture how to drive clear and flexible structures about how components interact with each other. Further down, techniques for dealing with complexity and scalability of large projects; and collaboration strategies between designers and developers.

By the end of this talk, you will know how to implement Compound Components to enable the creation of scalable, maintainable, and customizable UI elements in collaboration with designers. This session is jammed with useful information and live coding to bring your React development to the next level!