Nathalia Rus

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

Is your React app becoming unmaintainable as it scales? Learn to build a robust component library using Atomic Design and TypeScript.

Typescript, React and Atomic Design - a match made in heaven
#1about 4 minutes

The challenge of building scalable frontend applications

Moving from rapid prototyping to building maintainable, scalable code requires a structured system to manage complexity and team growth.

#2about 4 minutes

Learning from Airbnb's design language system

Large companies like Airbnb solve UI consistency and developer communication challenges by implementing a unified design language system (DLS).

#3about 5 minutes

Introducing the Atomic Design methodology

Atomic Design provides a methodology for creating design systems by breaking UIs into a hierarchical structure of reusable components.

#4about 7 minutes

Understanding the five levels of Atomic Design

The component hierarchy consists of atoms, molecules, organisms, templates, and pages, which are assembled from the bottom up like Lego bricks.

#5about 6 minutes

Implementing atoms and molecules in React code

Atoms are the smallest UI elements like buttons and icons, while molecules are simple groups of atoms without complex logic.

#6about 4 minutes

Building organisms and templates with logic and layout

Organisms combine smaller components to add business logic, while templates define page layouts and global styles like responsive breakpoints.

#7about 5 minutes

Enhancing component robustness with TypeScript

TypeScript's static typing enforces strict contracts for component props, preventing bugs and improving developer experience through autocompletion.

#8about 5 minutes

Documenting your component library with Storybook

Storybook creates an interactive website to visualize and document your UI components, making the design system accessible to the entire team.

Related jobs
Jobs that call for the skills explored in this talk.

Matching moments

How atomic design prevents common frontend anti-patterns
26:11 MIN

How atomic design prevents common frontend anti-patterns

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

Organizing UI components using the atomic design methodology
17:07 MIN

Organizing UI components using the atomic design methodology

Microfrontends at Scale

Adopting atomic design for structure and clarity
02:36 MIN

Adopting atomic design for structure and clarity

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

Audience Q&A on patterns, typescript, and frameworks
25:14 MIN

Audience Q&A on patterns, typescript, and frameworks

10 must-know design patterns for JS Devs

Structuring a production project with web components
13:55 MIN

Structuring a production project with web components

Frameworkless: How to use Web-Components in production?

Best practices for documenting a design system
21:40 MIN

Best practices for documenting a design system

Microfrontends at Scale

The benefits of a composable JavaScript ecosystem
34:34 MIN

The benefits of a composable JavaScript ecosystem

GraphQL + Apollo + Next.js: A Lovely Trio

Building with familiar React APIs and real CSS
03:03 MIN

Building with familiar React APIs and real CSS

Lynx: Native for More

Featured Partners

Related Videos

See all videos
Building a large, complex product from the ground up with typescript & Atomic Design:lessons learned28:13

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

Nathalia Rus

What the heck do "declarative" and "reactive" actually mean?30:40

What the heck do "declarative" and "reactive" actually mean?

André Kovac

Microfrontends at Scale43:20

Microfrontends at Scale

Josh Goldberg

Front-End Micro Apps35:17

Front-End Micro Apps

Serg Hospodarets

Vuejs and TypeScript- Working Together like Peanut Butter and Jelly44:31

Vuejs and TypeScript- Working Together like Peanut Butter and Jelly

Rob Richardson

The Art and Craft of Type Development43:20

The Art and Craft of Type Development

Michael Hladky & Stefan Baumgartner

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

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

Rita Castro

Accessibility in React Application30:07

Accessibility in React Application

Julia Undeutsch

From learning to earning

Jobs that call for the skills explored in this talk.