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 · World Congress 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
2 months ago

One Does Not Simply Make Architecture Decisions Alone

Vladas Diržys

From Black Box to Glass Box : Bedrock AgentCore Observability thumbnail
21:15
3 months 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
3 months 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
3 months ago

Better Together: Leveraging Your Observability Tools as a SIEM

Mathias Palmersheim

ChatGPT Apps: From Chat to Checkout thumbnail
30:29
3 months ago

ChatGPT Apps: From Chat to Checkout

Aaron Koivunen

Interior Decorating (TypeScript Decorators) thumbnail
29:22
3 months ago

Interior Decorating (TypeScript Decorators)

Michael Dowden

Related videos

The Pragmatic Architect: Balancing Necessity vs. Sufficiency in React Systems thumbnail
20:49
Europe 2026 Virtual • 3 months 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
World Congress 2022 • over 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
World Congress 2022 • over 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
World Congress 2026 Europe • 3 months 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
World Congress 2024 • about 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.