Nathalia Rus

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

What if you could prevent 38% of your bugs? Learn how combining TypeScript and Atomic Design creates a resilient, scalable frontend.

Building a large, complex product from the ground up with typescript & Atomic Design:lessons learned
#1about 2 minutes

Navigating the challenge of scaling a new codebase

Starting with a boilerplate create-react-app requires a clear strategy to build a scalable and maintainable product like those from major tech companies.

#2about 2 minutes

Adopting atomic design for structure and clarity

Design systems like atomic design are crucial for separating UI logic from business logic, leading to cleaner code and better performance.

#3about 3 minutes

A practical guide to the atomic design folder structure

The codebase is organized into atoms, molecules, organisms, pages, and templates, giving every component a designated and predictable place.

#4about 3 minutes

Creating scalable component libraries for icons and buttons

Centralizing components like icons and buttons into their own libraries makes updates, theming, and A/B testing manageable across the application.

#5about 3 minutes

Using Storybook to document and refactor components

Storybook helps document the UI component library, enforce component isolation, and provides a clear path for refactoring an existing codebase to atomic design.

#6about 5 minutes

Balancing pragmatism and avoiding overengineering

While the 'don't repeat yourself' principle is valuable, abstracting core business domain features too early can lead to rigid, hard-to-maintain code.

#7about 3 minutes

Lessons on testing, hooks, and framework lock-in

Prioritizing end-to-end testing on the frontend and using state management libraries like Redux helps avoid framework lock-in and ensures stability.

#8about 4 minutes

Why TypeScript is essential for building large applications

Adopting TypeScript significantly reduces bugs, provides auto-documentation through type definitions, and enforces a more scalable way of thinking.

#9about 2 minutes

How atomic design prevents common frontend anti-patterns

The principles of atomic design naturally discourage common anti-patterns like deeply nested components, which improves performance and maintainability.

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

Angular Developer

Picnic Technologies B.V.
Amsterdam, Netherlands

Intermediate
Senior

Featured Partners

Related Videos

Typescript, React and Atomic Design - a match made in heaven40:05

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

Nathalia Rus

Building software that scales with Typescript37:18

Building software that scales with Typescript

Tal Joffe

Microfrontends at Scale43:20

Microfrontends at Scale

Josh Goldberg

Lies we Tell Ourselves As Developers31:13

Lies we Tell Ourselves As Developers

Stefan Baumgartner

All you need is types48:56

All you need is types

Tal Joffe

4 Steps from JavaScript to TypeScript32:28

4 Steps from JavaScript to TypeScript

Phil Nash

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

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

André Kovac

Don't compromise on speedy delivery nor type-safety by choosing TypeScript29:44

Don't compromise on speedy delivery nor type-safety by choosing TypeScript

Jens Claes

From learning to earning

Jobs that call for the skills explored in this talk.