Nathalia Rus
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
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
17:07 MIN
Organizing UI components using the atomic design methodology
Microfrontends at Scale
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
25:14 MIN
Audience Q&A on patterns, typescript, and frameworks
10 must-know design patterns for JS Devs
13:55 MIN
Structuring a production project with web components
Frameworkless: How to use Web-Components in production?
21:40 MIN
Best practices for documenting a design system
Microfrontends at Scale
34:34 MIN
The benefits of a composable JavaScript ecosystem
GraphQL + Apollo + Next.js: A Lovely Trio
03:03 MIN
Building with familiar React APIs and real CSS
Lynx: Native for More
Featured Partners
Related Videos
28:13Building a large, complex product from the ground up with typescript & Atomic Design:lessons learned
Nathalia Rus
26:51Building the Right Product and Building It Right: A Glimpse into Extreme Programming, Atomic Design
Rita Castro
59:03Multiple Ships to the Island - Micro Frontends & Island Architectures
Florian Rappl
30:07Accessibility in React Application
Julia Undeutsch
25:22Building Interactive Async UI with React 19 and Ariakit
Aurora Scharff
43:20Microfrontends at Scale
Josh Goldberg
51:04Meet Your New BFF: Backend to Frontend without the Duct Tape
Noam Honig
37:18Building software that scales with Typescript
Tal Joffe
From learning to earning
Jobs that call for the skills explored in this talk.
![Senior Software Engineer [TypeScript] (Prisma Postgres)](https://wearedevelopers.imgix.net/company/283ba9dbbab3649de02b9b49e6284fd9/cover/oKWz2s90Z218LE8pFthP.png?w=400&ar=3.55&fit=crop&crop=entropy&auto=compress,format)
Senior Software Engineer [TypeScript] (Prisma Postgres)
Prisma
Remote
Senior
Node.js
TypeScript
PostgreSQL
Frontend Developer (Angular)
Picnic Technologies B.V.
Amsterdam, Netherlands
Intermediate
Senior
CSS
RxJS
JavaScript
Principal Backend Engineer (Node.js)
Almedia
Berlin, Germany
€80-110K
Senior
NestJS
Node.js
Express
TypeScript
+1
