WeAreDevelopers Logo WeAreDevelopers
Sign in
For You LIVE
World Congress 2026 Europe - Virtual Stage • Jul 2, 2026 • Session details

Developing a clean architecture-inspired React application with MVVM

Marc Brehmer

Unhealthy codebases delay feature shipping by 124%. Combine Clean Architecture with MVVM in React to isolate core business logic and make your testing completely trivial.

Pause
Mute Enter Fullscreen
#1 about 6 min

Business costs of poor code quality and technical debt

Unhealthy codebases with tight coupling and duplication lead to higher defect rates and wasted developer hours.

#2 about 4 min

Clean architecture layers and framework independence

Separating entities, use cases, and interface adapters ensures core business rules remain independent of UI frameworks and databases.

#3 about 2 min

Applying the dependency inversion principle to decouple logic

Depending on interfaces rather than concrete implementations enables swappable databases and simplified unit testing.

#4 about 2 min

Solving structural problems with clear boundaries

Reusable business logic and isolated components directly resolve code duplication, scalability bottlenecks, and complex migrations.

#5 about 4 min

Enhancing the presentation layer with the MVVM pattern

The Model-View-ViewModel pattern provides complete decoupling between UI rendering and business logic through data binding.

#6 about 3 min

Combining clean architecture and MVVM in React

Merging overall system structure with specific presentation guidance creates predictable, highly testable frontend applications.

#7 about 3 min

Setting up a practical React training application

A simple CRUD to-do application demonstrates architectural patterns without overwhelming production-level complexity.

#8 about 2 min

Tracking internal data flow through architectural layers

User input triggers a sequential flow from the view model through the use case down to the repository for persistence.

#9 about 3 min

Managing project structure and Awilix dependency injection

Organizing folders by architectural role and utilizing Awilix for dependency inversion keeps React components free of instantiation logic.

#10 about 3 min

Building declarative React views without business logic

Pure functional components focus entirely on rendering UI elements and forwarding user events to the view model.

#11 about 4 min

Bridging state and domain logic with view models

View models coordinate presentation state, input validation, and use case orchestration while remaining unaware of the DOM.

#12 about 3 min

Implementing business use cases and data repositories

Repositories strictly handle database interactions, allowing use cases to securely orchestrate complex business workflows.

#13 about 5 min

Reviewing the completed React architectural implementation results

The fully integrated application provides maintainability through strict layer boundaries and predictable change points.

#14 about 3 min

Evaluating when to adopt rigorous software architecture patterns

While essential for long-lived systems with complex domains, strict layering is counterproductive for prototypes and simple CRUD apps.

#15 about 3 min

Evolving software architecture driven by business needs

Starting with basic separation of concerns allows teams to incrementally adopt complex patterns as application demands grow.

Matching moments

4:13 min

Implementing clean architecture with limited code sharing

Petar Marijanović · LIVE

2:02 min

Evolving frontend application architectures from simple to enterprise scale

Michael Egger-Zikes Michael Egger-Zikes · WWC 2025

4:33 min

Building long-term Angular architectures with domain-driven design

Manfred Steyer Manfred Steyer · LIVE

2:14 min

Recapping the complete front-end architecture lifecycle

Abdu Taviq Abdu Taviq · Europe 2026 Virtual

1:22 min

Introduction to front-end architecture design patterns

Abdu Taviq Abdu Taviq · Europe 2026 Virtual

3:46 min

The rise of modern component-based frameworks and modular architecture

Sasha Shynkevich · LIVE

More from World Congress 2026 Europe - Virtual Stage

One Does Not Simply Make Architecture Decisions Alone thumbnail
36:15
29 days ago

One Does Not Simply Make Architecture Decisions Alone

Vladas Diržys

From Black Box to Glass Box : Bedrock AgentCore Observability thumbnail
21:15
about 1 month ago

From Black Box to Glass Box : Bedrock AgentCore Observability

Yasemin Aktürk

Leading in Rhythm: How Women Make Better Decisions with Biological Intelligence thumbnail
30:41
about 1 month ago

Leading in Rhythm: How Women Make Better Decisions with Biological Intelligence

Julia Grosse

Better Together: Leveraging Your Observability Tools as a SIEM thumbnail
39:06
about 1 month ago

Better Together: Leveraging Your Observability Tools as a SIEM

Mathias Palmersheim

ChatGPT Apps: From Chat to Checkout thumbnail
30:29
about 1 month ago

ChatGPT Apps: From Chat to Checkout

Aaron Koivunen

Interior Decorating (TypeScript Decorators) thumbnail
29:22
about 1 month ago

Interior Decorating (TypeScript Decorators)

Michael Dowden

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

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

Testing React Backends Like a Pro: Mocking Databases with SQLite

David Morris

Solution Architect

David Morris
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

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

From Idea to Production with AI: Agentic Development in Practice

Daniel Ostrovsky

UI/UX Architect at Payoneer | AI Architect | Full Cycle Development Expert | Public Speaker | Open Source Contributor |

Daniel Ostrovsky

Related videos

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

Building a large, complex product from the ground up with typescript & Atomic Design:lessons learned thumbnail
28:13
WWC 2022 • about 4 years ago

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

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

Multiple Apps, Millions of Users: Scaling React Native in Production thumbnail
31:45
WWC Europe 2026 • about 1 month ago

Multiple Apps, Millions of Users: Scaling React Native in Production

Milica Aleksic

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

Bringing back reactivity in "reactive" frontend thumbnail
28:43
WWC 2024 • almost 2 years ago

Bringing back reactivity in "reactive" frontend

Michał Moroz

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.