How to implement MVVM using flow that includes action, input and output with RxSwift

Steve Kim
6 min readFeb 23, 2021

--

There is no clear iOS template for the recently used MVVM architecture. While this provides a high degree of freedom, there is no standard implementation method, so it is difficult to understand and implement the MVVM concept.

To solve this problem, I defined the MVVM standard template and flow to be used within the team. This is named RxMVVM, and this article describes an example implemented using RxMVVM.

The most important part when designing RxMVVM was to delegate the ViewController’s business logic to the ViewModel as much as possible, and to avoid imperative programming by maximizing the RxSwift Observable binding.

Start an article to share it.

RxMVVM Architecture Flow

What you should pay attention to in the flow of the RxMVVM architecture is the flow relationship between each layer and Action, Input, and Output. For the connection between each layer, the data model of Action, Input, and Output was defined, and these are the most important elements of this template.

If you understand the flow, let’s go deeper with a simple example.

Here’s a simple example made with cute animal friends. I will explain the purpose and use of Action, Input, and Output by looking at examples.

예제 캡쳐 화
Example screenshot
Events and data flow

Action

An event that occurs in the View is defined as an Action. It means the Lifecycle of ViewController or events of other controls.

In the example, Action is defined as the click event of each button up, down, left, and right.

Output

ViewModel executes business logic by receiving Action from View. The dataset that is passed to the view and will be responsible for rendering is defined as output.

In the example, it is the data to display the change in the position of the animal friends and move the position.

Input

This is the data model for starting the ViewModel, and it will mainly be the parameter value received from the previous or parent ViewController. This data is optional. (This is not covered in the example.)

ViewModel Integration

Description for implemented

bindAction

It implements the action to make output by binding the actions received from the user.

bindOutput

It implements a case where a change in another output is required due to a change in a specific output. In the example, output.infoText is changed by binding output.pointChanges.

inputDidChange

It implements a case where a change in another output is required due to a change in a specific output. In the example, output.infoText is changed by binding output.pointChanges.

ViewController Integration

Conclusion

There will be various ways to implement MVVM. However, if you do not define and use your own or standard templates, you will gradually get lost as you progress through multiple projects. Relying on popular open sources may also be a way to go. But I haven’t found a good open source that works for me yet.

In the next article, I would like to show how to unit test ViewModel and include examples of its use.

--

--

Responses (1)