Marc Brehmer

Developing a clean architecture-inspired React application with MVVM

Building a to-do app with Clean Architecture is total overkill. But it’s the perfect way to learn how to build complex, maintainable React applications.

Developing a clean architecture-inspired React application with MVVM
#1about 3 minutes

Identifying common problems in software development

Many projects suffer from structural issues like tight coupling, code duplication, and scalability challenges that create business costs.

#2about 1 minute

Understanding the business cost of poor code quality

Poor code quality leads to significant business costs, including slower development speed, higher defect rates, and wasted developer time.

#3about 4 minutes

Introducing the core principles of clean architecture

Clean architecture provides a structural foundation with four concentric layers governed by the dependency inversion principle.

#4about 2 minutes

How clean architecture directly solves development issues

The principles of clean architecture directly address problems like tight coupling and testing complexity through modular layers and framework independence.

#5about 3 minutes

Using MVVM to complete the presentation layer

The Model-View-ViewModel (MVVM) pattern complements clean architecture by providing specific guidance for the presentation layer, decoupling the UI from business logic.

#6about 2 minutes

Combining clean architecture and MVVM for robust applications

Together, clean architecture and MVVM create a complete architectural approach with clear boundaries, enhanced testability, and a scalable structure.

#7about 4 minutes

Building a to-do application as a practical example

A simple to-do application serves as a learning tool to demonstrate every architectural pattern, including dependency flow and data flow across layers.

#8about 2 minutes

Structuring the project with folders and dependency injection

The project's folder structure mirrors the clean architecture layers, and a dependency injection container manages dependencies to enable inversion of control.

#9about 2 minutes

Implementing the view layer as a simple React component

The view component is kept simple and focused on rendering the UI and forwarding user events to the view model, with no business logic or state management.

#10about 3 minutes

Implementing the view model using React hooks

The view model, implemented as a custom React hook, manages presentation logic and state, acting as a bridge between the view and the use cases.

#11about 3 minutes

Implementing the use case and repository layers

Use cases orchestrate complex business workflows, while repositories handle data access by implementing interfaces defined in the domain layer.

#12about 4 minutes

Reviewing the final solution and its benefits

The combined architecture solves the initial problems by creating a maintainable, testable, and framework-independent application with clear separation of concerns.

#13about 3 minutes

Deciding when to apply these architectural patterns

These patterns are ideal for complex, long-lived applications with multiple teams but are overkill for simple CRUD apps, prototypes, or short-term projects.

#14about 3 minutes

Key takeaways for applying these patterns effectively

Start simple and evolve your architecture based on business needs, focusing on solving real problems like tight coupling and testability.

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

Featured Partners

Related Articles

View all articles

From learning to earning

Jobs that call for the skills explored in this talk.