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.

Remote

Name of

Name of

Remote
Intermediate
PHP
Java
+1

Matching moments

Why TypeScript is the perfect match for atomic design
05:21 MIN

Why TypeScript is the perfect match for atomic design

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

Unlock Moments
Create a free account to watch a limited number of Moments each month.
Upgrade to PRO for unlimited access to the full archive.
Defining the core principles of scalable software
02:47 MIN

Defining the core principles of scalable software

Building software that scales with Typescript

Unlock Moments
Create a free account to watch a limited number of Moments each month.
Upgrade to PRO for unlimited access to the full archive.
Understanding TypeScript's origins and role in scalability
02:37 MIN

Understanding TypeScript's origins and role in scalability

All you need is types

Unlock Moments
Create a free account to watch a limited number of Moments each month.
Upgrade to PRO for unlimited access to the full archive.
Moving from hacking MVPs to building scalable applications
02:31 MIN

Moving from hacking MVPs to building scalable applications

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

Unlock Moments
Create a free account to watch a limited number of Moments each month.
Upgrade to PRO for unlimited access to the full archive.
Structuring code with the atomic design methodology
02:23 MIN

Structuring code with the atomic design methodology

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

Unlock Moments
Create a free account to watch a limited number of Moments each month.
Upgrade to PRO for unlimited access to the full archive.
Achieving scalability with readability, structure, and enforcement
03:59 MIN

Achieving scalability with readability, structure, and enforcement

All you need is types

Unlock Moments
Create a free account to watch a limited number of Moments each month.
Upgrade to PRO for unlimited access to the full archive.
Structuring a production project with web components
03:38 MIN

Structuring a production project with web components

Frameworkless: How to use Web-Components in production?

Unlock Moments
Create a free account to watch a limited number of Moments each month.
Upgrade to PRO for unlimited access to the full archive.
Summary of using types for scalable codebases
01:48 MIN

Summary of using types for scalable codebases

All you need is types

Unlock Moments
Create a free account to watch a limited number of Moments each month.
Upgrade to PRO for unlimited access to the full archive.

Featured Partners

Related Videos

See all 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

4 Steps from JavaScript to TypeScript32:28

4 Steps from JavaScript to TypeScript

Phil Nash

All you need is types48:56

All you need is types

Tal Joffe

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

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

André Kovac

To New Frontiers: The Future of Frontend Development26:00

To New Frontiers: The Future of Frontend Development

Rainer Hahnekamp

Related Articles

View all articles
LM
Luis Minvielle
Developers share the most interesting tech they ever built
Most people's first thoughts about Hacker News revolve around venture capital, stock prices, company valuations, and $1499 dongles. But what if we told you that Hacker News could also be a place for pure, consummate, wholesome content that tackles ho...
Developers share the most interesting tech they ever built
BB
Benedikt Bischof
How we Build The Software of Tomorrow
Welcome to this issue of the WeAreDevelopers Live Talk series. This article recaps an interesting talk by Thomas Dohmke who introduced us to the future of AI – coding.This is how Thomas describes himself:I am the CEO of GitHub and drive the company’s...
How we Build The Software of Tomorrow

From learning to earning

Jobs that call for the skills explored in this talk.