WeAreDevelopers Logo WeAreDevelopers
Sign in
For You LIVE
World Congress 2022 • Jun 15, 2022

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

Nathalia Rus

Front-end maintenance costs significantly more than initial feature development. Stop writing spaghetti code. Discover how decoupling business logic using atomic design and TypeScript scales your complex applications.

Pause
Mute Enter Fullscreen
#1 about 4 min

Bridging theoretical advice and practical codebase structure

Moving from boilerplate templates to a scalable engineering architecture requires actionable standards beyond abstract theoretical best practices.

#2 about 2 min

Adopting design systems and detangling business logic

Implementing a robust design methodology successfully isolates user interface styling updates from core application behavior and spaghetti code.

#3 about 3 min

Breaking down complexity with atomic design components

Dividing user interfaces into distinct atoms, molecules, organisms, templates, and pages simplifies front-end mental models and team collaboration.

#4 about 2 min

Exploring a practical atomic design folder structure

Organizing repositories according to specific component roles ensures predictable file placement and streamlined synchronization across parallel development teams.

#5 about 3 min

Building scalable icon and button libraries internally

Centralizing fundamental interactive styling pieces within reusable index files streamlines future interface visual upgrades and complex a/b testing.

#6 about 4 min

Refactoring interface architectures using isolated development environments

Utilizing independent component viewing tools forces interface modules to exist autonomously while automatically generating technical user documentation.

#7 about 4 min

Balancing quick iteration workflows with early abstracting

Prematurely generalizing fundamental business logic blocks deliberately restricts agile application flexibility as essential core platform features expand.

#8 about 2 min

Prioritizing integration testing and modern framework primitives

Introducing modern functional state paradigms alongside early end-to-end testing cycles preserves engineering throughput when identifying localized rendering blockages.

#9 about 3 min

Ensuring framework independence and strict technical boundaries

Retaining complex state management inside independent libraries while isolating query implementations successfully prevents destructive structural framework lock-in.

#10 about 4 min

Leveraging early typing logic for consistent scalability

Applying shallow static definitions structurally guards against significant volumes of unhandled rendering behavior without necessitating cryptic type abstractions.

#11 about 2 min

Restricting common interface patterns through rigid guidelines

Adhering to inflexible interface separation rules organically blocks deep component nesting bottlenecks and unseen progressive processing degradation.

Matching moments

5:49 min

Building cohesive interfaces utilizing atomic design system principles

Josh Goldberg · WWC 2021

2:22 min

Transitioning user interfaces toward atomic design architecture

Rita Castro · WWC 2022

4:33 min

Building long-term Angular architectures with domain-driven design

Manfred Steyer Manfred Steyer · LIVE

1:01 min

Implementing atomic design from atoms to complete pages

Nathalia Rus · LIVE

10:09 min

Transitioning from graphic design to large scale frontend architecture

Erasmo Hernandez Erasmo Hernandez · WWC Europe 2026

1:20 min

Core takeaways for end-to-end TypeScript development

Marco Podien Marco Podien · WWC 2025

More from World Congress 2022

What the heck do "declarative" and "reactive" actually mean? thumbnail
30:40
almost 4 years ago

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

André Kovac

The Design and Evolution of C++ thumbnail
1:01:15
about 4 years ago

The Design and Evolution of C++

Bjarne Stroustrup

But, you're not Facebook thumbnail
31:12
about 4 years ago

But, you're not Facebook

Kristijan Ristovski

Communicate efficiently with Software Architecture Diagrams thumbnail
28:11
about 4 years ago

Communicate efficiently with Software Architecture Diagrams

Simon Lasselsberger

Get Ready for Jakarta EE 10! thumbnail
42:53
about 4 years ago

Get Ready for Jakarta EE 10!

Ivar Grimstad

Keep your code refactorable thumbnail
26:46
about 4 years ago

Keep your code refactorable

Gerrit Stapper

Upcoming sessions on this topic

Open session

World Congress 2026 North America

One Repo, One Strategy: Scalable Full-Stack Testing in a Monorepo World

Bartosz Leczycki, Paweł Matynia

Bartosz Leczycki
Paweł Matynia
Open session

World Congress 2026 North America

Testing React Backends Like a Pro: Mocking Databases with SQLite

David Morris

Solution Architect

David Morris
Open session

World Congress 2026 North America

Architecting AI in Angular: WebMCP, A2UI, and the Agent Experience

Ankita Sood

Sr. Principal Engineer @ Secureworks | Angular GDE

Ankita Sood
Open session

World Congress 2026 North America

Beyond Vibe Coding: An AI Builder’s Guide to Migrating 10k+ React Components

Shubham Chaurasia

Senior Software Engineer @ Meta

Shubham Chaurasia
Open session

World Congress 2026 North America

How to generate business value through performance optimizations

Nikolai Sidiropulo

Software Engineer at Meta

Nikolai Sidiropulo
Open session

World Congress 2026 North America

Culture Doesn't Scale Itself: Leading Engineering Teams Through Hypergrowth and the AI Transition

Thanos Baskous

VP of Engineering and Co-founder of Cogent Security

Thanos Baskous

Related videos

Typescript, React and Atomic Design - a match made in heaven thumbnail
40:05
LIVE • over 5 years ago

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

Nathalia Rus

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

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

Rita Castro

Building software that scales with Typescript thumbnail
37:18
WWC 2022 • about 4 years ago

Building software that scales with Typescript

Tal Joffe

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

Microfrontends at Scale

Josh Goldberg

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

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

Ana Gil Amor

But, you're not Facebook thumbnail
31:12
WWC 2022 • about 4 years ago

But, you're not Facebook

Kristijan Ristovski

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.