> Markdown version of [/videos/398-building-the-right-product-and-building-it-right-a-glimpse-into-extreme-programming-atomic-design?t=179](https://www.wearedevelopers.com/videos/398-building-the-right-product-and-building-it-right-a-glimpse-into-extreme-programming-atomic-design?t=179). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md).

---

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

How do you prevent fragile codebases when scaling frontends? Discover how harmonizing Extreme Programming and Atomic Design empowers autonomous teams to deploy resilient React micro-frontends.

- **Speakers:** Rita Castro
- **Event:** World Congress 2022
- **Published:** June 15, 2022
- **Duration:** 26:51
- **URL:** https://www.wearedevelopers.com/videos/398-building-the-right-product-and-building-it-right-a-glimpse-into-extreme-programming-atomic-design

## Summary

Building scalable, user-driven applications requires a delicate balance of engineering practices and structural design. For the software development teams at Volkswagen, this balance is achieved by harmonizing Extreme Programming (XP), Atomic Design, and micro-frontend architecture. By structuring teams around balanced roles of designers, product managers, and developers, and leveraging XP principles like pair programming and Test-Driven Development (TDD), teams can confidently align their engineering efforts directly with true user needs. The micro-frontend approach allows autonomous, full-stack teams to independently deploy customer-facing React applications, such as a dealership car tracker, that seamlessly compose into a larger unified platform without creating overly nested, fragile codebase structures.

While often considered a design-only methodology, applying the Atomic Design framework directly to code architecture fundamentally transforms how front-end components are built. Categorizing React components by complexity—from indivisible atoms like text and buttons up through molecules, organisms, templates, and pages—actively prevents the chaotic tangles often caused by purely feature-driven development. This structured progression automatically pairs with TDD. Small, unbreakable atoms are easily rendered and rigorously tested, while composing them into higher-order organisms simplifies data flow and defines clear functional test boundaries.

A crucial insight for building resilient interfaces lies in evaluating how these atomic components are verified in practice. Drawing on the philosophy that tests should mirror actual user behavior rather than relying on underlying implementation details, engineers utilize the React Testing Library to simulate the genuine user journey. Instead of asserting against isolated component internals or inspecting localized DOM hierarchies, tests are written to query for visible text or interactive links exactly as a human would experience the page. Combining the courage to discard failing software inherent to XP with the strictly composed bounds of Atomic Design empowers teams to independently deliver high-quality, scalable micro-frontends with total deployment confidence.

**Keywords:** extreme programming agile practices, atomic design framework, micro-frontend architecture, test-driven development cycle, react testing library strategies, front-end component encapsulation, balanced product teams, pair programming dynamics, declarative ui testing, independent frontend deployments, feature-driven development challenges, mocking integration tests, user-centric software design, scalable react architecture

## Chapters

1. **Defining the right product and building it right** (00:53) — Essential traits of a successful product and the architectural methodologies needed to scale it.
1. **Organizing cross-functional and balanced product teams** (02:01) — How designers, product managers, and developers collaborate to translate user needs into feasible software.
1. **Applying the five core values of extreme programming** (02:59) — Structuring agile workflows around communication, simplicity, feedback, courage, and team respect.
1. **Implementing pair programming and test-driven development workflows** (05:22) — Executing extreme programming practices through shared workstations and the red-green-refactor loop.
1. **Identifying workflow bottlenecks through targeted user research** (06:52) — Using direct customer interviews to discover process inefficiencies and outline crucial software requirements.
1. **Integrating independent web applications using micro frontends** (10:49) — Merging decentralized frontend projects built by autonomous teams into a single overarching interface.
1. **Transitioning user interfaces toward atomic design architecture** (14:36) — Restructuring messy feature-driven codebases into manageable blocks of increasing UI complexity.
1. **Writing test cases for basic atomic web components** (16:59) — Asserting rendering expectations directly against base HTML elements to strictly enforce design requirements.
1. **Assembling and testing composite molecule and organism structures** (18:38) — Combining multiple basic atoms into grouped interfaces that convey direct functionality to users.
1. **Evaluating mocking strategies and user-centric integration testing** (20:19) — Writing robust software tests that mimic actual human interactions instead of inspecting underlying code structures.
1. **Validating complete user journeys using structured page templates** (23:29) — Instantiating templates to verify holistic screen accessibility and end-to-end navigational workflows.

## Related Moments

- [Breaking down complexity with atomic design components](https://www.wearedevelopers.com/videos/457-building-a-large-complex-product-from-the-ground-up-with-typescript-atomic-design-lessons-learned) (from "Building a large, complex product from the ground up with typescript & Atomic Design:lessons learned")
- [Cross-functional roles and collaboration in a balanced team](https://www.wearedevelopers.com/videos/66-how-to-be-balanced-in-a-software-development-team) (from "How to be balanced in a software development team")
- [Applying design thinking and lean software development principles](https://www.wearedevelopers.com/videos/64-shared-mobility-for-everyone) (from "Shared mobility for everyone!")
- [Connecting principles and practices in extreme programming](https://www.wearedevelopers.com/videos/709-an-introduction-to-extreme-programming) (from "An introduction to Extreme Programming")
- [Adopting test-driven design as a strategic development methodology](https://www.wearedevelopers.com/videos/446-treat-yourself-a-tale-about-dog-training-and-test-driven-development) (from "Treat yourself - A tale about dog training and test-driven development")
- [Building cohesive interfaces utilizing atomic design system principles](https://www.wearedevelopers.com/videos/236-microfrontends-at-scale) (from "Microfrontends at Scale")

## Related Articles

- [How to Avoid Over-Engineering](https://www.wearedevelopers.com/magazine/546-how-to-avoid-over-engineering)
- [Dev Digest 139 - Soft and hard queries](https://www.wearedevelopers.com/magazine/487-dev-digest-139-soft-and-hard-queries)
- [Now is the time for industrialized software development](https://www.wearedevelopers.com/magazine/601-now-is-the-time-for-industrialized-software-development)
- [Dev Digest 120 - Apple and peers](https://www.wearedevelopers.com/magazine/455-dev-digest-120-apple-and-peers)

## Related Jobs

- [Junior Frontend Engineer](https://www.wearedevelopers.com/jobs/ext/1532351-junior-frontend-engineer) at **Almedia**
- [Software Engineer](https://www.wearedevelopers.com/jobs/ext/1377585-software-engineer) at **Bitpanda**
- [Software Engineer, React & Angular (Broker Web Platform](https://www.wearedevelopers.com/jobs/ext/1558399-software-engineer-react-angular-broker-web-platform) at **Bitpanda**
- [Senior Software Engineer, React (Investing & Trading)](https://www.wearedevelopers.com/jobs/ext/1937625-senior-software-engineer-react-investing-trading) at **Bitpanda**
- [Software Engineer](https://www.wearedevelopers.com/jobs/ext/1304673-software-engineer) at **Bitpanda**
- [Senior Software Engineer, Client Apps Platform](https://www.wearedevelopers.com/jobs/ext/1773893-senior-software-engineer-client-apps-platform) at **GitHub**