React Native with MVVM
Introduction -
If you have ever experienced the situation, when you open the code you see an unmaintainable and unstructured code, and you are also afraid to touch the code because maybe it crashed.
Javascript is easy to pick up and start coding with it but when you have a small project it’s ok you can manage it by any way but when it comes to a big project managing it in a good way is very important.
So we apply the MVVM(Model-View-ViewModel) pattern architecture in our react native project.
Architecture Pattern - is a combination of predefined systems with their specific responsibility and it also has guidelines which organize the system.
Some other architectural patterns also try to solve the same problem as MVVM done, you can check others too which handle the code loosely coupled, maintainable and easy to test as well.
Some Questions - may be in your mind there are some questions like if you know the redux and flux then why you need to learn one more architectural pattern, and this is a very genuine question.
And the answer is if you don’t know the other then how could you compare it, how you know the reduc is best and it fits for all your project so first, you need to try some other architecture too.
MVVM Blocks -
MVVM has 4 main blocks, we describe these as following.
View - View is a UI layer, which users interact most with.
ViewController - It handles the user inputs and has access to ViewModal as well.
ViewModel - It handles the business logic and has access to modal as well.
Model - this is the main data source of the application.
MVVM Component-
So let’s start with the description of these blocks in detail.
View -
In react native for user interaction we build the UI, which most of you are familiar with and also the way how we implement this in our project.
View is the only point where users can interact with your applications. When the user touches anything in interaction with the view controller that is handled by any events such as key press, mouse movement, etc.
It is also used for showing the output to the user based on the input which user gave.
React.Component is a reactive component which handles everything in every possible way and updates the changes automatically.
Syntax - Continue Reading: MVVM Component