MV(C, mvvm) in iOS and ReactiveCocoa

MV(C,VM) in iOS & ReactiveCocoa

Neo

OutlineMV* Family

Original What & why Components in MVC & MVVM Architecture MVC & MVVM in iOS Something wrong?

ReactiveCocoa Original What & why FRP - Functional Reactive Programming How to use Something right?

Conclusion

MV* FamilyOriginal Trygve Reenskaug(Noway computer scientist)

The original MVC reports [1](I made the first implementation and wrote the original MVC reports…) CAD/CAM

MVC be changed a lot, and extended new patterns(main principle)

MVC - Model-View-Controller MVVM - Model-View-ViewModel MVP - Model-View-Presenter MTV - Model-Template-View

[1]http://heim.ifi.uio.no/~trygver/2007/MVC_Originals.pdf

What are them? Design pattern (Architecture pattern) Diagrams for establish a robust program architecture

Why need them? Data, logical, and UI code are like shit in early code when GUI appearance.

separate concrete of concerns Handle more and more complex program

Understandable manageable maintainable reusable etc…

Components in MVC and MVVM They are same in Model(M) and V(View)

Model (M) - the domain knowledge or data, it can be simple value, object or class. View (V) - everything graphical user can see

C in MVC Controller (C) - A link between model and view, and also an event handler.

VM in MVVM ViewModel (VM) - it’s the same as controller, but contain all jobs which not belong to view/model

What are they different in thinking? Controller think that they can be three independent components ViewModel think that view and controller cannot be separated clearly

Architecture improvement Smalltalk’80 MVC

Microsoft MVVM

ref. from:[2]

ref. from:[2]

Architecture improvement Smalltalk’80 MVC

Microsoft MVVM

ref. from:[2]

ref. from:[2]

ref. from:[3]

Architecture improvement Smalltalk’80 MVC

Microsoft MVVM

ref. from:[2]

ref. from:[2]

ref. from:[3]ref. from:[4]

Architecture improvement Smalltalk’80 MVC

Microsoft MVVM

ref. from:[2]

ref. from:[2]

ref. from:[3]ref. from:[4]

ref. from:[5]

Architecture improvement Smalltalk’80 MVC

Microsoft MVVM

ref. from:[2]

ref. from:[2]

It’s divergent in concepts

ref. from:[3]ref. from:[4]

ref. from:[5]

Design pattern is still improving and evolving

MVC in iOS In iOS, model and view always communicate each other through by controller Model and view never talk to controller directly, but controller do.

ref. from:[2]

MVVM in iOS In iOS, view controller still exist, but same as view’s task ViewModel handler all controller’s logic block, includes business logic, presentation logic, network request, etc…

Why is MVC in iOS? Standard implementation Objective-C references features of smallTalk Official tutorial documents or classes all tell us MVC

(These pictures ref. from:[6][7])

Why Cocoa design pattern did not follow Smarttalk’80 ?

View and model did not loose-couple It’s not reusable Ambiguous about what they concern

Simple to see difference in MVCs and MVVM

MVC View modelview No YES

model YES NO

MVC in iOS View modelview No NO

model NO NO

MVVM View modelview No NO

model NO NO

Three tables about components communication

MVC’s example If i want an very simple App which can input family name and display what I input……

A model - Store family data A view - a App’s GUI for user A controller - Handle event and user’s action

View in MVC View does not provide any method about data, it just provides accessor’s method to interaction with controller.

Model in MVC Model has a class object about data, and some method’s related data. Also, it does not care about View.

Controller in MVC In the controller, we need to implement:

notification, Delegation or other mechanism to update view or model. Event handler(user action or data change)

if interesting, https://github.com/flamelad/MVFamilyPractice

MVVM’s example Family name App again lol

Difference - MVVMViewModel files It responses for anything which is not responded by Model and View

ViewController In MVVM

Where are these functions?

ViewModel In MVVM Those functions all in ViewModel

But, how communicate with ViewController?

ViewModel In MVVM

In *.h file, declare all properties which are needed to show in screen or accepted data input.

ViewController update screen: (KVO, Notification) Monitor these properties for update properties

ViewController input data: (Accessor method) Access the property which is designed for receive data in VewModel

ViewModel

Model ViewController Viewdelegate

Setter

Accessor MethodNotification KVO Notification

KVO

Something wrong? (Let’s thinking what problem may we meet in iOS MVC now…)

Controller god damn fat Some methods are inexplicit (ex: network request about data) KVO and notification mechanism lead to difficult understand it View and controller cannot be really separated clearly Difficult to do unit test Difficult to understand your controllers

ReactiveCocoa is saver..….maybe?

ReactiveCocoa

Original Github for Mac App’s Developers - Josh & Justin ReactiveCocoa developed by them when they develop Github for Mac

What is it It’s a open source framework which implementation base on Functional Reactive Programming (FRP) https://github.com/ReactiveCocoa/ReactiveCocoa Only supports OS X 10.9+ and iOS 8.0+ new version is concentrated on the Swift

Why is it The framework with MVVM tried to solve problems what we meet in MVC

FRP - Functional Reactive Programming

It’s a programming diagram which combine reactive programming and functional programming Function programming (Just very simply describe their difference here)

Imperative programming - write and execute steps by step Ex: for (int i=0;i<arr.count;i++){logical for find MaxNumber}; Functional programming - function, input, output.Ex: int MaxNumber= MaxNumber(1,10);

Reactive programming What is it? Concept is around data flows and propagation of change Let’s easy to know it Ex:

proactive vs. reactive a = 2;b = 3;

c = a+b; a = 3;

Now, c = ?c = 5 c = 6

After combine functional and reactive programming It’s like pipe, you do not need to know how the pipe transfer water It’s like pipe, you put something in, always something out It’s like pipe, something always are not changed during in the pipeIt’s like pipe, water in the pipe is continuous, data flow too. It’s like pipe, pipes can be concatenated to process it centrally It’s like pipe, output can be filter, reduce, and map

What advantages are worth to adapt it? Code clean - KVO, notification, target-action or observer can be centralized Make code more understandable Decrease problem that value be changed at somewhere

Is it no disadvantage? No, it is. 1. it performance is lower than native2. Debug is difficult 3. return value type always id.

How to start ReactiveCocoa(RAC)? Getting started https://github.com/ReactiveCocoa/ReactiveCocoa#getting-started/ Framework overviewhttps://github.com/ReactiveCocoa/ReactiveCocoa/blob/master/Documentation/FrameworkOverview.md There are many component to transfer and process dataSignal, Subjects, Commands, Sequences, Schedulers, mapping, etc…… Familiar it, and then do it

[Simply Demo]

[Demo Page]

Problem thinking again Controller god damn fat Some methods are inexplicit (ex: network request about data) KVO and notification mechanism lead to difficult understand it View and controller cannot be really separated clearly Difficult to do unit test Difficult to understand your controllers

Something right? According to presentation, we known: 1. MVVM can solve Controller is too fat 2. MVVM can solve concerns ambiguous 3. MVVM can solve redefine View and ViewController 4. MVVM can be more easier understand ViewController 5. ReactiveCocoa can let logical be centralize 6. ReactiveCocoa can help MVVM clear code and separate

Conclusion If MVVM is so good, why Apple does not use it?

In fact, although it’s not same all, Apple used some concepts and logical in OSX App implementation- ref. from:[4]

If MVC is so bad, why Apple use it? In fact, although MVC has some disadvantage, but it still a nice design pattern. Of course, the most important is that ObjC come from smallTalk……

Do we really need reactiveCocoa? No, not really. It won’t have any help for a engineer grow up. Yes, it does. it can help us clean code, clear logical, and centralize code implementation

What time is best to introduce reactiveCocoa?

The most important - it’s just a framework, a tool, not language.

An Sample Code of MVVM by completion App https://medium.com/@syshen/reactivecocoa-in-practice-4f04119efc68

Reference 2)http://ieeexplore.ieee.org/xpl/login.jsp?tp=&arnumber=6827095&url=http%3A%2F%2Fieeexplore.ieee.org%2Fxpls%2Fabs_all.jsp%3Farnumber%3D6827095

3)http://www.diva-portal.org/smash/get/diva2:738269/FULLTEXT01.pdfw&bvm=bv.80642063,d.eXY

4)http://www.itu.dk/courses/VOP/E2005/VOP2005E/8_mvc_krasner_and_pope.pdf

5)https://msdn.microsoft.com/en-us/library/hh848246.aspx 6)http://www.sprynthesis.com/2014/12/06/reactivecocoa-mvvm-introduction/

7)http://www.objc.io/issue-13/mvvm.html 8)http://www.itiger.me/?p=38 (a lot of sample code)

Q & A

Thanks