Reputation: 2543
I'm learning about MVVM and Clean Architecture. Then I found some articles present about MVVM + Clean Architecture, but I still didn't get it about the difference between mvvm with clean architecture and mvvm without clean architecture. Any summary about these stuff? Thank you.
Upvotes: 49
Views: 26173
Reputation: 49
I have done some research, and as far as I understand, MVVM is a design pattern just like MVC that operates at a lower abstraction level and is meant to give you a solution on how to solve specific design problems by giving you a practical method, while clean architecture operates at a higher abstraction level and involves how you structure and organize your entire application/system by giving you a set of rules and principles that emphasize the separation of three main layers in your system which are Presentation, Domain, and Data Layers. There are some sources Diff between Clean arc and MVVM in Flutter that say four layers, which classify the use case as a separate layer from the domain.
MVVM expects you to use Model, ViewModel and View to separate the data layer, business logic, and UI logic in an application, respectively, with the emphasis being handling the smooth interaction between the data and UI layer. And it’s mainly designed to solve front-end problems, while clean architecture is designed to solve every part of the application, including the back end and other services, and applies the same principle in the front end and back end.
The presentation layer in clean architecture can be a Flutter UI in the front end and an API endpoint in the back end. Or a smartwatch, refrigerator, car screen, or any other way to communicate with the end user or a service. Clean architecture emphasizes separation of concern, especially when it comes to the business logic, and expects it to be testable and understandable independent of the framework/language being used. And using interfaces/repositories is mandatory when it comes to clean architecture but not so much when it comes to MVVM, but it’s best practice to do so.
When we come to the community/developers about referring to and conflating MVVM and clean architecture, it’s a mess, and they usually don’t understand what those mean, and for those that know a little bit more, there is a debate on what they mean, the difference between them, and how to use them together. But I think I understand where the confusion and using them together came from especially the popular take that says MVVM is supposed to be used in the presentation layer of the clean architecture, because Clean architecture is supposed to include the whole application/system and for the front end you can use MVVM but this arrangement assume that there is a back end/system that already has a domain and data layer and the entire app is supposed to be a “presentation” layer but the way people use it is the mobile app (includes web, desktop, etc.) is the entire system and clean architecture is applied to it and they created a mixed version of MVVM and Clean architecture in which in some cases they implement the domain and data layer without MVVM and use MVVM as the presentation layer by making the model interact and use the entity class returned from the use case class as a “data source” or by just adding a domain layer to the MVVM model and moving the view model to the presentation layer which as far as I’m aware are not official practices and just an informal norm created by developers.
Upvotes: 0
Reputation: 345
Let's refer to the primary sources.
Main differences:
Here is a quote from the book "Clean Architecture: A Craftsman’s Guide to Software Structure and Design":
The architect can employ the Single Responsibility Principle and the Common Closure Principle to separate those things that change for different reasons, and to collect those things that change for the same reasons—given the context of the intent of the system. User interfaces change for reasons that have nothing to do with business rules. Business rules themselves may be closely tied to the application, or they may be more general. The database, the query language, and even the schema are technical details that have nothing to do with the business rules or the UI.
Thus we find the system divided into four decoupled horizontal layers — the application-independent business rules, Application-specific business rules, UI, and the Database.
Later in the book Robert Martin describes in detail how to build these 4 corresponding layers:
Here is another quote, regarding the View Model from the Clean Architecture:
If the application wants to display money on the screen, it might pass a Currency object to the Presenter. The Presenter will format that object with the appropriate decimal places and currency markers, creating a string that it can place in the View Model. If that currency value should be turned red if it is negative, then a simple boolean flag in the View model will be set appropriately. Anything and everything that appears on the screen, and that the application has some kind of control over, is represented in the View Model as a string, a boolean, or an enum. Nothing is left for the View to do other than to load the data from the View Model into the screen.
As you can see ViewModel from the clean architecture is more like a "state" of the View, and the logic of the View goes to the "Presenter". In MVVM on another hand, ViewModel holds both the state and logic of the View.
In summary: MVVM and Clean Architecture are completely different and there is no way you can build an MVVM with the Clean Architecture.
Upvotes: 2
Reputation: 157
Clean Architecture is a set of rules and principles that helps you maintain and architect a software system. While MVVM is a Design Pattern (similarly like other ones MVP, MVC) that is originated from Clean Architecture.
As Clean Architecture strongly recommends to separate each layer UI, Controllers, Use-cases & Entities, MVVM does the same job as it separates each of them in:
That's what I understood. Hope this helps :)
Upvotes: 2
Reputation: 3444
As I understand:
MVVM without clean architecture:
______________________________________________
UI
- - - - - - - - - - - - - - - - - - - - - - -
Presenter/ViewModel (Business Logic)
______________________________________________
Repository
DataSource
______________________________________________
MVVM with Clean Architecture:
______________________________________________
UI
Presentation Layer
Presenter/ViewModel
______________________________________________
UseCases + Entity (Business Logic) Domain/Business Layer
______________________________________________
Repository
Data Layer
DataSource
______________________________________________
Upvotes: 18
Reputation: 1595
MVVM is just a technique to manage the View layer of whatever architecture you're using.
Clean Architecture is a way of organizing communication between layers. They aren't mutually exclusive
The Layers of MVVM with Clean Architecture The code is divided into three separate layers:
Presentation Layer
Is here, where the logic related with views and animations happens. It uses Model-View-ViewModel ( MVVM), but you can use any other pattern like MVC or MVP
Upvotes: 5
Reputation: 5841
MVVM is just part of the clean architecture in the presentation layer
. It just a set of rules on how to display the data from UseCase.
One of the benefits of using clean architecture is we can change our design pattern in presentation layer
without changing domain layer
or use case.
So for example, if we're using let say MVI and then changing to MVVM, it can be done smoothly with ease.. :)
Upvotes: 22
Reputation: 467
Clean architecture aims to separate the layers. Business Layer, Data Layer and Presentation Layer will be separate applications. Therefore you will increase the reusability for each one of them. MVVM as design pattern should be implemented in the Presentation Layer. Presentation Layer will interact with Business Layer (or Domain Layer) and the Business Layer will use Data Layer for sharing data.
Upvotes: 34