
Nathalia Rus
Mar 24, 2021
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.
2 months ago
Senior Frontend Engineer

Almedia
Berlin, Germany
Senior
6 days ago
Senior Web Developer bei Cyberport

Hubert Burda Media
Remote
Intermediate
22 days ago
Engineering Manager, AdTech (m/f/d)

Redcare Pharmacy
Sevenum, Netherlands
Senior