WeAreDevelopers Logo WeAreDevelopers
Sign in
For You LIVE
WeAreDevelopers LIVE • Mar 24, 2021

Typescript, React and Atomic Design - a match made in heaven

Nathalia Rus

Are simple UI changes requiring endless cross-team communication? Learn how combining React and TypeScript with Atomic Design builds a predictable, strictly typed frontend architecture that eliminates developer overhead.

Pause
Mute Enter Fullscreen
#1 about 3 min

Overcoming the unmaintainable nature of hacking

Realizing that building scalable applications requires a fundamentally different mindset than rapid prototyping.

#2 about 2 min

Achieving developer velocity through rigid code structures

How clear systems lower communication overhead and actually enable greater flexibility during design changes.

#3 about 4 min

Drawing inspiration from the Airbnb design language

Adopting enterprise-level practices to unify design and engineering for a cohesive user experience.

#4 about 3 min

Introduction to the atomic design hierarchical methodology

Breaking down applications into atoms, molecules, organisms, and templates instead of disconnected pages.

#5 about 3 min

Categorizing user interface elements for faster feature development

Giving engineers a shared vocabulary to locate and modify components based on their logical complexity.

#6 about 2 min

Implementing atomic design from atoms to complete pages

Progressively assembling small, logic-free components into larger, interactive pages.

#7 about 2 min

Defining layout structures with templates and page wrappers

Standardizing repetitive layouts like text constraints or grids before assembling the final page content.

#8 about 2 min

Deconstructing page visuals into reusable design atoms

Training yourself to look at websites as cohesive systems of typography and stylized elements.

#9 about 3 min

Using public UI libraries to guide component architecture

Referencing Ant Design and public Storybooks to understand how complex projects isolate core atoms.

#10 about 3 min

Coding robust atoms with styled components and dynamic themes

Centralizing UI variations within a single functional component to simplify usage for new developers.

#11 about 2 min

Standardizing asset inclusion with an atomic icon component

Managing icons internally so updates automatically propagate consistently across the entire frontend application.

#12 about 2 min

Grouping associated atoms into logic-free structural molecules

Combining multiple basic inputs like radio buttons into unified groups without injecting presentation logic.

#13 about 2 min

Managing feature logic inside organism level React components

Routing data and conditions through specific component wrappers to generate interactive dynamic layouts.

#14 about 3 min

Establishing responsive constraints via programmatic template wrappers

Creating custom components for global scroll behaviors and media queries to align responsive rendering.

#15 about 3 min

Preventing runtime configuration errors with strict static typing

Using TypeScript to guarantee developers adhere exactly to the defined prop options within component interfaces.

#16 about 3 min

Declaring precise type definitions for customized atomic properties

Restricting themes and prop variations through typescript definition files to leverage inline editor intellisense.

#17 about 5 min

Documenting component variants visually using the Storybook environment

Providing an interactive catalog for cross-functional teams to experiment with front-end components and props.

Matching moments

2:40 min

Breaking down complexity with atomic design components

Nathalia Rus · World Congress 2022

5:49 min

Building cohesive interfaces utilizing atomic design system principles

Josh Goldberg · World Congress 2021

2:22 min

Transitioning user interfaces toward atomic design architecture

Rita Castro · World Congress 2022

1:20 min

Exploring tooling choices for interactive UI components

Aurora Scharff Aurora Scharff · World Congress 2025

10:09 min

Transitioning from graphic design to large scale frontend architecture

Erasmo Hernandez Erasmo Hernandez · World Congress 2026 Europe

9:46 min

Questions on architecture typing and team organization

Trishul Goel · JS Congress

More from WeAreDevelopers LIVE

WeAreDevelopers LIVE - Is CSS Catching Up to Flash? thumbnail
1:03:33
10 days ago

WeAreDevelopers LIVE - Is CSS Catching Up to Flash?

Chris Heilmann, Daniel Cranney, Bramus Van Damme

WeAreDevelopers LIVE - Project Chopin: Make Your Team and Agents Play Along thumbnail
1:21:17
17 days ago

WeAreDevelopers LIVE - Project Chopin: Make Your Team and Agents Play Along

Chris Heilmann, Daniel Cranney, Krzysztof Cieślak

Fake or News - AI Toothbrushes, Carrier Pigeon Tech & Life on Mars - Krzysztof Cieślak thumbnail
4:23
18 days ago

Fake or News - AI Toothbrushes, Carrier Pigeon Tech & Life on Mars - Krzysztof Cieślak

Chris Heilmann, Daniel Cranney

WeAreDevelopers LIVE - Open Source Agent Toolkits thumbnail
1:00:38
24 days ago

WeAreDevelopers LIVE - Open Source Agent Toolkits

Chris Heilmann, Daniel Cranney, Eddie Jaoude

Fake or News - AI Music Detectors, Translating Ancient Languages & Tiny Heads in Teslas - Eddie Jaoude thumbnail
6:16
25 days ago

Fake or News - AI Music Detectors, Translating Ancient Languages & Tiny Heads in Teslas - Eddie Jaoude

Chris Heilmann, Daniel Cranney

Fake or News: AI Agents Hire Each Other, Spider-Man Ads in Cars & RAM Thieves - Marc Plogas thumbnail
5:46
30 days ago

Fake or News: AI Agents Hire Each Other, Spider-Man Ads in Cars & RAM Thieves - Marc Plogas

Chris Heilmann, Daniel Cranney, Marc Plogas

Related videos

Building a large, complex product from the ground up with typescript & Atomic Design:lessons learned thumbnail
28:13
World Congress 2022 • over 4 years ago

Building a large, complex product from the ground up with typescript & Atomic Design:lessons learned

Nathalia Rus

Building the Right Product and Building It Right: A Glimpse into Extreme Programming, Atomic Design thumbnail
26:51
World Congress 2022 • over 4 years ago

Building the Right Product and Building It Right: A Glimpse into Extreme Programming, Atomic Design

Rita Castro

The Pragmatic Architect: Balancing Necessity vs. Sufficiency in React Systems thumbnail
20:49
Europe 2026 Virtual • 3 months ago

The Pragmatic Architect: Balancing Necessity vs. Sufficiency in React Systems

Ana Gil Amor

Microfrontends at Scale thumbnail
43:20
World Congress 2021 • about 5 years ago

Microfrontends at Scale

Josh Goldberg

But, you're not Facebook thumbnail
31:12
World Congress 2022 • over 4 years ago

But, you're not Facebook

Kristijan Ristovski

Building software that scales with Typescript thumbnail
37:18
World Congress 2022 • over 4 years ago

Building software that scales with Typescript

Tal Joffe

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.