All About Flutter Architecture: MVP, MVC, MVVM
Whenever we create applications like apps, web, or backend it needs two important factors scalability and maintainability.
And now what are scalability and maintainability? When we add some new features to our projects over a period of time then we can easily add them by scalability. And if we want to change some features in our existing projects we can easily change them by maintainability features. Good architecture helps us to write good code with scalability and maintainability
There are different architecture patterns we could implement in our project — MVC(Model-View-Controller), MVP(Model–view–presenter), and MVVM(Model-View-ViewModel). These architecture patterns mainly focus on two things — 1. Separation of concerns 2. Unit Testing
Separation of concerns: We break our applications into different components like user interface components, business logic components, database components, etc. And if we change one of these components this effect should not affect other components.
MVC Architecture Pattern
The Model-View-Controller (MVC) is an architectural pattern that separates an application into three layers. Model, View, and Controller are the three layers of the application. Each of these components handles specific development parts.
Model: Models are the core data flow in this architecture. It can contain business logic also.
View: The job of the view is to take input from the user and show the UI to the user.
Controller: The controller contains business logic with input data handling.
Some free resources to learn the MVC pattern deeply:
- MVC Pattern in Flutter — By CodeCave(19 minutes Youtube Video)
- Design Patterns in Flutter(MVC) by Yashwant Kumar
MVP Architecture Pattern
In Model-View-Presenter (MVP) pattern controller is replaced by the presenter. First The presenter takes user actions from the view and updates the model. Then The presenter retrieves updated data from the model and updates the UI in the view.
Some free resources to learn the MVP pattern deeply:
MVVM Architecture Pattern
MVVM stands for Model–View–ViewModel. MVVM is a very famous and established architecture pattern in development. By applying MVVM our code will be reuseable, maintainable, easily testable, and extensible.
Model: The model can contain some business logic, code validation, and database-related queries. The model interacts with ViewModel.
ViewModel: The ViewModel requests data for the model and sends it to the view. ViewModel is the mediator between view and model. First ViewModel deals with user interactions then it requests data from the model and sends it to the view.
View: What we see on the device screen is the View. The View is mainly the user interface of an application where a user interacts with widgets. Users interact with some of the events which all are done by the ViewModel.
Some free resources to learn the MVP pattern deeply:
Difference between MVC, MVP, and MVVM
MVC: MVC is one of the oldest models. It is used for small-scale projects. Unit testability is the lowest in this architecture. The Model View Controller architecture tightly couples the view and the model components of the architecture.
MVP: MVP is the updated version of the MVC pattern. This software architecture has a dependent user interface as it uses the presenter to act as a link between the view and the model. The components are coupled loosely. Thus we can make changes to it. We can use it for complex projects. It allows appreciable unit testability.
MVVM: MVVM is the established architecture pattern that is highly recommended for industry use. MVVM implements data binding and allows easy separation of the model and the view. We can easily make changes to it. MVVM also allows maximum unity testability.
You can support me here: https://www.buymeacoffee.com/souravemon16
Find me on GitHub: https://github.com/souemon16
Find me on LinkedIn: https://bd.linkedin.com/in/inventedmyself