IAENG International Journal of Computer Science, 45:3, IJCS_45_3_03

______________________________________________________________________________________

MMVMi: A Validation Model for MVC and

MVVM Design Patterns in iOS Applications
Mariam Aljamea, and Mohammad Alkandari

Abstract—Design patterns have gained popularity as they not work as desired as it will lead to a famous problem
provide strategies for solving specific problems. This paper in iOS community: the Massive View Controller problem.
explores two common design patterns in iOS development field: When Controller objects exceed 150 lines, this is an indicator
Model View Controller (MVC) and Model View ViewModel
(MVVM) design patterns. The paper investigates the problems of Massive View Controller problem. Controller objects will
with MVC design pattern. Then, it introduces a validation be massive when they handle many responsibilities more than
model that detects MVC problems, and helps programmers their own. The Model View ViewModel (MVVM) design
make the decision to switch between MVC and MVVM design pattern rescuers gracefully by strictly distributing the roles
pattern. The proposed validation model consists of two phases: and responsibilities among objects [6]. By using MVVM
phase one is to detect MVC problems, and phase two is
to validate the relation between MVVM objects. The model design pattern Controller objects will just set the values
was then applied to a Cloudy app as a case study. As a for UI components while all data logic preparation for UI
result, the model was able to detect MVC problems. The will be located in ViewModel objects. As a rule of thumb,
relation between MVVM objects was also validated. Further, both of MVC and MVVM have their own advantages and
this research provided some recommended solutions to satisfy disadvantages, choosing one of them as a design pattern is
the relations between MVVM objects in the project.
highly dependents on the project architecture. For instance,
Index Terms—design pattern, mvc, mvvm, validation, model. JavaScript has different frameworks each of them used either
MVC or MVVM according to the framework needs. Namely
AngularJS, Angular 2, and Vue.js are based on MVC, while
I. I NTRODUCTION Ember.js is built based on MVVM [7]. In essence, the
objectives of this study are:
VER the years, softwares have been grown and
O changed to accommodate users’ demands. Users need
to interact with softwares through interfaces, where the
1) To understand the impact, role and importance of
Design Patterns in iOS development.
2) To help developers to make a decision when to use
emerge of interfaces has catalyzed a new demand of design MVC or MVVM.
patterns to help keep interfaces user friendly and to improve 3) To provide a method to check and validate the relations
them [1]. Since then, several design patterns appeared then between MVVM objects.
evolved and matured [2]. Design patterns reuse the same set To address these objectives, we proposed a model that will
of ideas to construct a solution to solve certain problems help developers to indicate the time to switch from MVC
occur commonly [3]. Model View Controller (MVC) design design pattern to MVVM design pattern. The proposed model
pattern is used frequently to architect interactive software consists of two phases. Phase one will detect if the project
systems [4]. MVC design pattern offers a way to struct has a Massive View Controller problem. The second phase,
application’s components into different separate roles [3]. will check the relations between project’s objects if they obey
In fact, recent technologies encourage separating the roles to MVVM correctly or not. Hence, there are three significant
of application early in design phase [4]. Thus, roles sepa- contributions in this paper. First, MVC problems is presented.
rating improves the implementation of the application as it Then, this paper develops a validation model that accomplish
composes a robust and flexible application. MVC separates these objectives: detecting massive controller objects, and
roles as follow: View objects in MVC displays data to users, validate the relations between MVVM objects.
while user interaction is processing by Controller objects
The remainder of this paper is organized as follows:
[4]. Application logic and data are the responsibility of
section 2 provides a background knowledge of Model View
Model objects [4]. The Model View Controller (MVC) de-
Controller (MVC) and Model View ViewModel (MVVM)
sign pattern is recommended by Apple since its frameworks
design patterns. Section 3 presents the related work. Sec-
built based on it [5]. Consequently, any iOS developer will
tion 4 introduces MMVMi, our model to validate MVC or
start programming an iOS application based on Model View
MVVM in iOS applications, and explains its two phases. Fol-
Controller (MVC) design pattern. For some projects MVC
lowed by applying MMVMi to two cases and demonstrating
will work perfectly: as desired leading to reusable objects,
the results. After that, MMVMi evaluation by comparing it
easily extensible objects and much more numerous benefits.
with other tools in section 6. The conclusion is described in
However, for some other projects, MVC design pattern will
section 7. The paper concludes with a future work in section
Manuscript received October 3, 2017; revised May 9, 2018.
8.
M. Aljamea is a graduate student in the Department of Computer
Engineering at College of Engineering and Petroleum - Kuwait University,
Kuwait e-mail: (mrm259@gmail.com). II. BACKGROUND
M. Alkandari is an Assistant Professor in the Department of Computer
Engineering at College of Engineering and Petroleum - Kuwait University, Design patterns have been part of application development
Kuwait e-mail: (m.kandari@ku.edu.kw). process as they help and guide developers to develop efficient

(Advance online publication: 28 August 2018)

 IAENG International Journal of Computer Science, 45:3, IJCS_45_3_03
______________________________________________________________________________________

of iOS applications with their new demands introduced

and revealed weak spots in the traditional MVC design
pattern [10]. Therefore, to overcome all the limitations in
the traditional MVC design pattern, Apple enhanced it as
shown in Figure 2 [6]. In Apple’s MVC, Controller objects
know about View objects and Model objects [11]. Also,
Controller objects have the ability to update View objects and
Model objects when it needed [11]. While it is not required
for Model objects to know anything about View objects or
Fig. 1. The traditional MVC design pattern
Controller objects [11]. Similarly, it is unnecessary for View
objects to know about Model objects or Controller objects
[11]. However, View objects respond to user interactions,
then they send these interactions to Controller objects by
delegation pattern or target-action pattern [11]. Thereby,
View objects are totally decoupled from Model objects in
Apple’s Model View Controller design pattern [12]. As a
result, application logic is separated from user interface [13]
that leads to more reusable objects and more extensible
applications [14]. Apple’s MVC divided the roles between
objects as follow: (1) Model objects hold and manage
Fig. 2. Apple’s MVC design pattern application’s data, (2) View objects render the interactive
visual elements, and send user actions to Controller objects
(3) Controller objects bind Model objects and View objects
and robust applications. Design patterns provide a strategy together and contain application logic [15]. In more details
to solve common problems in software development projects Controller objects have the following roles: create views,
[8]. The provided solution is an abstract that is not related update views, validate the input, query models, modify
to a specific programming language or platform [8]. Design models, map user actions to update model, handle segues to
patterns help avoiding or solving a problem but they do not other controllers, and hold network logic [5]. Indeed, View
provide an exact solution as they require additional works objects and Controller objects do their tasks as a pair by
in order to be adapted into specific projects [8]. Design allowing user to interact with the rendering objects in the
patterns improve the flexibility of the code which is a good user interface. These rendering objects are View objects.
investment as it makes the code adaptable and robust [8]. While user interactions are handled by Controller objects
Developers choose the desired design pattern according to [10]. However, MVC decouples View objects from Controller
projects’ requirements and their experiences [9]. Presentation objects and treats each of them as a separate object [10]. With
design patterns are used for GUI-based applications [2]. this decoupling, MVC enhances separation of concerns (SoC)
Separation of Concerns (SoC) is the fundamental concept concept [10]. Obviously, Apple UIKit frameworks obey to
of presentation design patterns [2]. This section provides MVC design pattern as their names reveal its philosophy.
a background knowledge about two common presentation For example, a UIViewController tells the UIView what
design patterns the Model View Controller (MVC) design to render in the screen, which is according to MVC a
pattern and the Model View ViewModel (MVVM) design UIViewController is a Controller object and a UIView is a
pattern. View object [11]. To illustrate that, a data source (model)
provides a UIPickerView with its data, so UIPickerView is
a View object that got its data from a Model object [11].
A. Model View Controller (MVC) Design Pattern Apple’s MVC design pattern separate application’s roles
In 1979 Trygve Reenskaug introduced Model View Con- loosely between three main objects: Model object, View
troller (MVC) design pattern during his work on Smalltalk object, and Controller object. This loosely separation leads
at Xerox PARC [2]. The intent of MVC is to separate to downside effects by assigning many different roles to
application’s concerns into three objects each of these objects Controller objects. Also, there are some parts of the code
has its own tasks to handle [10]. MVC separates the concerns that developers don’t know where to write them as these
as follows: object to store and manage data, object to parts do not belong to View objects or Model objects. For
display data, and object to handle user interactions [10]. example: table view delegate methods, network requests,
With this strict separation among application logic and its loading data from databases, view layout, and much more.
interface, MVC supports developing extremely maintainable Mostly, all these parts will be written in Controller objects.
well structured applications [10]. As a result, application based code will end up with massive
Figure 1 depicts the traditional MVC design pattern. It controllers, which are complex [5]. Consequently, it will be
consists of three entities: Model objects, View objects, and difficult to test these massive controllers as they contain
Controller objects. As shown in Figure 1, each of the three several unrelated roles [5]. In addition, these unrelated roles
entities recognizes the other two entities [6]. Thereby, entity with their different responsibilities make massive controllers
reusability will be reduced and this is considered as a main hard to reuse and hard to maintain. Undoubtedly, Controller
drawback that makes the traditional MVC design pattern not objects should not contain any logic, they should only act
applicable for iOS applications [6]. In addition, the evolution as an intermediary between Model objects and View objects.

(Advance online publication: 28 August 2018)

 IAENG International Journal of Computer Science, 45:3, IJCS_45_3_03
______________________________________________________________________________________

have the following roles: create views, update views, map

user actions to update model, and handle segues to other
controllers [5]. In contrast, the roles of ViewModel objects
include: gathering data from Model objects, preparing data
for presentation, input validation, and hold network logic [5].

III. R ELATED WORK

This section discusses the related work and shows how
the proposed model related to other existed work. The
founded related work are available on GitHub which is a
Fig. 3. MVVM design pattern website to host code or software repositories by using Git
Source Code Management (SCM) tool [18]. GitHub satisfied
the demand of Open Source Software (OSS) projects as it
Also, massive controllers will increase the chance of writing helps developers and programmers to share their code and
errors in the code without recognizing them as they are long to collaborate with each other. GitHub enables its users
and they are difficult to test [5]. The next subsection will to track other users actions by offering community-visible
explain a solution to the Massive View Controller problem. profiles [18]. This transparent social integration improvs
learning from each other by observing and by following
other programmers actions such as: the way they code,
B. Model View ViewModel (MVVM) Design Pattern the recommended ways to solve problems, inspiring the
In 80s the Model View ViewModel (MVVM) design programmers with ideas from observing other works, and
pattern was introduced in Smalltalk to overcome the lim- much more activities [19]. Luft [20] is a Xcode Plugin that
itations of MVC and to gain from some of its strengths aims to improve the quality of view controllers by helping
[2]. In fact, both MVC and MVVM assert the concept programmers keep view controllers shorter, and lighter. The
of Separation of Concerns (SoC), which increases code main advantage of Luft is: it’s availability during coding as
quality [9]. However, MVVM separates concerns more than it colors Xcode gutter depending on the view controller’s
MVC which reduces complexity and maximizes testability status. According to number of lines, Luft has three status
and reusability. MVVM introduced a new object named for view controller: (1) a light view controller that is less
it ViewModel object. This object has the logic to prepare than 150 lines, (2) a bit heavier view controller which is
the data for View object, which was the responsibility of greater than or equal to 150 lines or less than or equal
Controller object in MVC [5]. Furthermore, similar to MVC to 300 lines, and (3) a massive view controller that has
View objects and Controller objects work as pair, but MVVM more than 300 lines. Luft colors Xcode gutter with a green
merged them into one single object and called it View color in the case of a light view controller. However, in
objects [10]. Thereby, MVVM increases data independent a massive view controller case, Luft colors Xcode gutter
and application logic encapsulation [9]. A recent study [16] with a red color. When a view controller gets a bit heavier
exploits MVVM design pattern to show that it compacts Luft warns programmers by turning Xcode gutter to yellow
the based code and makes it flexible. Absolutely, there are color. Currently, the latest stable release of Xcode is version
various versions of MVVM, iOS community use Microsoft 9.2 which comes with many improvements. Since Xcode
MVVM [10]. Moreover, the study in [17] demonstrates Pro- version 8, code signing requirements have been changed and
tocol Oriented Model View View Model (POP MVVM) by the introduction of Xcode extensions. Both of these two
using it in developing Tintm3 iOS application. POP MVVM factors made adding Xcode Plugin more complicated and
takes advantage of Protocol Oriented Programming paradigm sometime impossible [20]. As a result, there is no simple
to enhance the original MVVM. The intent of MVVM is way to use Luft with Xcode current version so this is
to separate application’s logic concerns from user interface considered as a huge drawback. It is clear that Luft is related
concerns by distributing distinct responsibilities between to Massive Controller Detection (MCD) phase in MVC &
three objects: first, View objects to render user interface, MVVM Validation Model for iOS (MMVMi). Both of Luft
Second, ViewModel objects take the responsibility of user and MCD have the same three status: a light view controller,
interactions and view state, Third, Model objects to handle a bit heavier view controller, and a massive view controller.
data [10]. Additionally, to work with application’s data, However, MCD counts view controller lines more accurate
ViewModel objects own Model objects and have a direct than Luft because MCD counts the code without counting
access to them [10], as it is demonstrated clearly in Figure 3 comments and empty. Moreover, MCD is a python script
[6]. On the other hand, View objects and ViewModel objects that is independent of Xcode. Therefore, any update to Xcode
cooperate in a new way that is introduced by Microsoft will not affect Massive Controller Detection (MCD) python
and it is Data Binding [10]. Data Binding improves logic script. According to Object Relations Validation (ORV)
separation between View objects and ViewModel objects phase, we found the following open sources that are related
[10]. In MVVM, View objects and Model objects have to our work: objc dependency visualizer [21], and Depcheck
the same roles as in MCV. Indeed, MVVM reduces the [22]. Objc dependency visualizer is a tool that visualizes
roles of Controller objects, by moving some of them to the dependency in Objective-C project or in Swift project.
ViewModel objects. As shown in Figure 3, ViewModel Objc dependency visualizer produces dependency graph that
objects sit between Model objects and View/ViewController visualizes classes coupling [21]. This tool used d3js library to
objects [2]. Controller objects in MVVM design pattern give the visualizations a nifty style [21]. On the other hand,

(Advance online publication: 28 August 2018)

 IAENG International Journal of Computer Science, 45:3, IJCS_45_3_03
______________________________________________________________________________________

UIKit provides programmers with variety of UIViewCon-

troller subclasses, each subclass has its own special-purpose
[23], including UITabBarController, UITableViewController,
UICollectionViewController, and more. In addition, pro-
grammers can customize UIViewController by subclassing
UIViewController or by subclassing any of its subclasses.
To illustrate the subclassing: a programmer will subclass
UITabBarController to give the app a unique user interface.
Therefore, the proposed model have to be intelligent to detect
all these cases by finding all the UIViewController and its
subclasses that are provided by UIKit, and also the model
have to find all the customized classes that are created by
Fig. 4. MVC and MVVM Validation Model for iOS (MMVMi)
programmers to satisfy programmers needs. To accomplish
this intelligent detection, MCD used python Regular Expres-
sion (RE). The next subsection explains the methodology of
Depcheck is a tool that analyzes the dependency in Swift Massive Controller Detection (MCD).
projects. For each class, Depcheck generates a dependency
report, that enables programmers to detect classes that are Algorithm 1 Massive controllers detection in iOS project
dependent on many other classes. Also, the generated reports INPUT: iOS project directory F .
help to detect independent classes and the most used classes. OUTPUT: All controllers in the project with detection for
Depcheck has the ability to generate a dependency graph the massive ones.
for Swift projects. Nevertheless, none of the aforementioned
tools visualize the relations in iOS project as the relations 1: for all files fi in F do
between objects in Model View ViewModel (MVVM) design 2: if fi is an instance of a subclass of UIViewController
pattern. As far as we know, Object Relations Validation then
(ORV) is the first tool to generate a dependency graph that 3: Store fi in Co
visualizes the relations between objects in iOS project and 4: end if
demonstrates project’s objects in point view of Model View 5: end for
ViewModel (MVVM) objects. 6: for all controllers ci in Co do
7: if line is not a comment or not an empty line then
IV. MVC & MVVM VALIDATION M ODEL FOR I OS 8: increment the total number of lines L
(MMVM I ) 9: end if
10: if L < 150 then
The previous section clearly demonstrates the problem 11: not a massive controller
with Apple’s MVC design pattern. This section, provides 12: end if
a detailed explanations of the proposed Validation Model. 13: if L >= 150 or L <= 300 then
Figure 4 depicts MVC & MVVM Validation Model for iOS 14: not a massive controller but warn the programmer
(MMVMi). The first phase is: Massive Controller Detection to take care
(MCD). Then, the second phase is Object Relations Valida- 15: end if
tion (ORV). The next two subsections discuss each of these 16: if L > 300 then
phases in details. 17: a massive controller
18: end if
A. Phase one: Massive Controller Detection (MCD) 19: end for

The first phase of the proposed Validation Model is

Massive Controller Detection (MCD). As shown in Figure 4, Massive Controller Detection (MCD) Methodology: Reg-
MCD consists of two steps: the first step is finding all con- ular Expression (RE) used to match a set of specifics strings
trollers in the iOS project. Then the second step is for each [25]. Patterns in Regular Expression (RE) identifies the
controller check if it is massive or not. Basically, there are format of input values [26]. Thus, MCD used a pattern
three major controller types in Cocoa frameworks: coordinat- regular expression to detect controller objects. Algorithm
ing controllers, view controllers, and mediating controllers 1 demonstrated MCD methodology. The directory of iOS
[23]. Coordinating controllers are available on both iOS and project contains all the files including model objects, view
OS X, in iOS the role of coordinating controller is involved objects, controller objects, configuration files, etc. MCD’s
in view controllers [23]. However, the second type, view pattern regular expression has the ability to find all controller
controllers are available just on iOS [23]. While the third objects (files) that belong to one of the following controllers:
type which are mediating controllers, are available just on OS UIViewController, subclass of UIViewController, subclass
X [23]. Our model is developed for iOS. Thus, the model of UIKit’s UIViewController subclasses, custom UIView-
implementation is based on the second type of controller Controller, subclass of custom UIViewController, or even
types, which are view controllers. View controller classes any class that is inherited from UIViewController. In fact,
in iOS are instances of UIViewController subclasses [24]. there is no such strict rules to determine number of lines
These view controller classes are provided by UIKit [23]. of the massive controller. However, there are conventions

(Advance online publication: 28 August 2018)

 IAENG International Journal of Computer Science, 45:3, IJCS_45_3_03
______________________________________________________________________________________

in iOS community that determine the massive controller as of UIView or any of its subclasses such as: UIButton,
the following: when controller has more than 300 lines, UITableViewCell, UILabel, UIImageView, UISwitch and the
it is a massive controller. In contrast, any controller that rest of the subclasses that UIKit provides. All these view
has less than 150 lines is considered as a thin controller. classes are provided by UIKit framework for iOS, while
Another key contribution to mention, MCD aims to help OS X view classes are provided by AppKit framework [12].
programmers more and to let them get the most benefits of Furthermore, there are dozens of View objects in Interface
the proposed model, so Massive Controller Detection model Builder Library [12]. On the other hand, there is no direct or
warns them when it detects a controller which has 150 lines simple way to find Model objects, and ViewModel objects
or more but less than or equal 300 lines. This warning is because they are not subclasses of known classes. In addition,
important because keeping controller objects less than 150 programmers create Model objects, and ViewModel objects
lines not only helps in testing but also helps in maintaining in variety ways. As a result, when users run ORV script,
the project, which in terms, helps improving the performance it will ask users to enter the name of Model objects, and
of the project overall. It is obvious that programmers write ViewModel objects. Then, ORV will generate a dot file
comments to help them in several ways such as documen- that has the attributed graph text. As shown in Algorithm
tations, or posting comments for other programmers. Also, 2, in line 1 to generate the dot file, the script will col-
programmers insert new lines to make the file readable and lect all MVVM objects: Controller objects, View objects,
to follow conventions in coding style. With these two reasons ViewModel objects, and Model objects. Then, in line 2 the
in mind, Massive Controller Detection model counts the lines script will start writing each object in its cluster: Controller
in an accurate way by ignoring all comments and all empty objects in controller cluster, View objects in view cluster,
lines. ViewModel objects in view model cluster, and Model objects
in model cluster. After that, in line 3 ORV will open each
B. Phase two: Object Relations Validation (ORV) file (object) of MVVM and read it to check if the object
has a relation with other objects. If the relation exist, ORV
After phase one, object relations validation (ORV) phase
will connect the objects, otherwise ORV will not generate
comes, ORV used dot [27] language to draw a directed
a connection. Also, ORV will check the existing relations
graph that represents the relations between objects in iOS
are they obey to MVVM rules or not. Then, ORV will draw
project. These objects are MVVM objects: Model object,
all illegal relations with a dotted arrow as written in line
View object, and ViewModel object. The generated graph
6 in Algorithm 2. Moreover, ORV will search carefully to
from ORV shows how MVVM objects are related to each
detect the exact line number that is the reason of the wrong
other. For wrong relations cases, ORV will draw these wrong
relation. After that, ORV will display this line number in a
edges with a dotted arrow. It will also detect the exact line
warning message. To accomplish this checking successfully,
number which cases the wrong relation and display it to the
ORV used python regular expression (RE) pattern to find a
user. The methodology of object relations validation (ORV)
match. The used RE pattern is accurate since it checks the
phase will be explained in the next subsection.
file line by line: searching for other objects if they exist in
this file. Moreover, sometimes programmers name methods
Algorithm 2 MVVM objects relations validation in iOS
or variables with the same name of other files or part of
project
it. For example, suppose we have a Model object its name:
INPUT: iOS project directory F . Students, and suppose that in ViewModel object there is a
OUTPUT: A directed graph with all relations between method named: findAllStudents. ORV used word boundaries
MVVM objects. in the used RE pattern, therefore it will be intelligent enough
to ignore findAllStudents and avoid partial matches. The
1: for all MVVMObjects fi in F do result of running ORV script is a dot file that has all the
2: write fi in its cluster relations between MVVM objects written as attributed graph
3: if fi has a relation with any other MVVM Objects text. Finally, the user will run the dot file to generate the
then directed graph that depicts the relations between MVVM
4: draw the relation objects in the project. If there is any wrong relation, ORV
5: if fi is a wrong relation then will depict a dotted arrow. For instance, according to Model
6: draw it with a dotted arrow View ViewModel design pattern, it is not allowed for Model
7: detect the line number that causes the wrong objects to communicate with View objects. Consequently, if
relation ORV finds Model object that is communicated with View ob-
8: display a WARNING message jects, ORV will draw this relation arrow with a dotted arrow
9: end if to indicate that this relation is a wrong relation. Thereby,
10: end if object relations validation phase will help programmers or
11: end for developers to construct a robust application architecture by
writing a valid MVVM design pattern with correct relations
Object Relations Validation (ORV) Methodology: ORV between all objects.
follows the same strategy that is used in MCD to find Figure 5 shows the flow chart of MVC & MVVM Validation
all Controller objects. Additionally ORV will find all View Model for iOS (MMVMi). Any iOS project can be written
objects. In order to find View objects, ORV modifies MCD by following Model View Controller design pattern, Model
pattern regular expression instead of finding all UIViewCon- View ViewModel design pattern, or mix of them, or even
troller. It will find all View objects (files) which are subclass any other available design patterns. As depicted in Figure

(Advance online publication: 28 August 2018)

 IAENG International Journal of Computer Science, 45:3, IJCS_45_3_03
______________________________________________________________________________________

Start

iOS
project
directory

MCD

Massive yes Warn

controllers the user

no
Fig. 6. Cloudy App: (a) Main view, and (b) Settings view
ORV

in Figure 6(a), the main view shows the weather information

including temperature, windSpeed, summary of the current
Draw
weather status, and an icon to represent the current weather
relations status. In addition, Cloudy app offers two different formats
for time, temperature, and windSpeed. Users can choose their
preferences in the Settings view as illustrated in Figure 6(b).
Stop Initially, Cloudy app was built with Model View Controller
(MVC) design pattern. Then, the author aims to let Cloudy
Fig. 5. MMVMi Flow chart
app architecture: robust, and scalable. So, this architecture
should have lighter view controllers and should separate
concerns in a way that improves testability, and maintain-
5, the input to MMVMi is iOS project directory. First, ability. To achieve all these goals, the developer refactored
MCD detects massive controllers. In case the project has Cloudy app from Model View Controller (MVC) design
massive controllers, MMVMi advises the user to switch to pattern to Model View ViewModel (MVVM) design pattern.
MVVM design pattern. Next, ORV checks the relations, if Both implementations of Cloudy app MVC-based [28] and
all relations are satisfied, MMVMi ends processing. ORV MVVM-based [29] are available as open sources on GitHub.
advices the user to fix the wrong relations if it finds relations The next two subsections provide detailed explanations about
that are not satisfied by MVVM design pattern. applying MMVMi on Cloudy app that has valid relations
between MVVM objects. Then, the final section shows the
invalid relations between MVVM objects.
V. C LOUDY A PP CASE
In the previous section, MVC & MVVM Validation Model
B. Case one: Massive Controller Detection phase on Cloudy
for iOS (MMVMi) was introduced with its two phases. In
App
this section, we apply MMVMi model on iOS application
named Cloudy with different two cases. Case one has a valid Massive Controller Detection (MCD) is the first phase of
relations between MVVM objects, while the second case MMVMi. We applied it on Cloudy app MVC implementa-
has invalid relations between MVVM objects. The section tion. Figure 7 shows MCD result, it is obvious that Cloudy
begins with an introduction to the application. After that, the application doesn’t have any massive controller, even though
two phases of MMVMi model are explained and applied on it is implemented based on Model View Controller (MVC)
Cloudy app which has valid relations. Then, MMVMi model design pattern. This is common: even if MVC project doesn’t
is applied on Cloudy app with invalid relations. have any massive view controller, the developer aims to
refactor the code to MVVM design patter. This refactoring
has several benefits, one of the main benefits is concerns
A. Introduction to Cloudy App separation that enhances many non functional requirements
Cloudy is an iOS application that is developed by Bart such as: testability, maintainability, and many more. So, after
Jacobs, the founder of Code Foundry. Cloudy is a weather refactoring the code, we ran Massive Controller Detection
application that provides daily and weekly weather forecasts. on Cloudy MVVM implementation, the result is shown in
Cloudy gets the user current location, and then fetches the Figure 8. This result proves that MVVM improves Cloudy
weather information from Dark Sky API after ”Cloudy” based code by reducing the total number of lines for many of
displays the weather information for the user. As depicted its Controller objects. From the result, we can conclude that

(Advance online publication: 28 August 2018)

 IAENG International Journal of Computer Science, 45:3, IJCS_45_3_03
______________________________________________________________________________________

Fig. 7. MCD result for Cloudy app MVC-based

Fig. 8. MCD result for Cloudy app MVVM-based

Fig. 9. Object Relations Validation without relations between objects in

the following Controller objects got benefits from refactor- the same cluster
ing: SettingsViewController was 102 lines after refactoring
it became 91 lines. WeekViewController was 94 lines, while ViewCell. According to MVVM objects relations: con-
in MVVM implementation WeekViewController is just 66 troller objects act as intermediary between View objects and
lines. Thus, with MVVM design pattern WeekViewCon- ViewModel objects. These controller’s relations are clearly
troller got rid of 28 lines. In addition, with Model View demonstrated in Figure 9. To illustrate, it let us consider
Controller design pattern DayViewController was 68 lines. the following example: WeatherDayTableViewCell is a View
In contrast with Model View ViewModel design pattern, object, its user actions are interpreted by WeekViewCon-
DayViewController has 48 lines. Moreover, it is obvious that troller that is a Controller object. Next, WeekViewCon-
both RootViewController and WeatherViewController remain troller maps user actions to WeekViewViewModel. After that,
the same. After Cloudy app has been passed MCD phase WeekViewViewModel can update WeatherDayData. Weath-
successfully, it is time to apply ORV phase and validate the erDayData is a Model object so as shown in Figure 3
relations between objects. ViewModel objects own Model objects and update them,
that is clearly depicted in Figure 9. Consequently, Cloudy
C. Case one: Object Relations Validation phase on Cloudy app successfully passed Object Relations Validation phase
App as all the relations between Cloudy app objects are valid
and they satisfied the constraints of Model View ViewModel
The output of Object Relations Validation phase is two
(MVVM) design pattern.
directed graphs where the first graph represents the relations
between MVVM objects without depicting the interrelations
between objects in the same cluster. This graph is shown in D. Case two: Cloudy App with invalid relations
Figure 9. On the other hand, the second graph as illustrated In the previous case RootViewController communicates
in Figure 10, shows the relations in more details. As demon- with WeatherDayData via WeekViewViewModel. Because
strated in Figure 9, the WeatherViewController is not related RootViewController is a controller object, and WeatherDay-
to any object. However, Figure 10 shows that the Weath- Data is a model object. As one of MVVM rules: controller
erViewController has two relations with two objects in the objects are not allowed to communicate with model objects
same cluster: DayViewController and WeekViewController. directly, there should be view model objects to manage
Cloudy app has five controller objects: RootView- these communications. In this case, WeekViewViewModel
Controller, SettingsViewController, WeekViewController, was deleted from Cloudy app. As a result, all its code was
DayViewController, and WeatherViewController. All these moved to RootViewController. Thus, when MMVMi ran on
controller objects are grouped in Controller cluster as shown Massive Controller Detection phase as shown in Figure 11, it
in Figure 9. While View Model cluster consists of the follow- warned the developer to take care about RootViewController
ing ViewModel objects: SettingsViewTimeViewModel, Set- as it has a chance to be a massive controller. Next, Relations
tingsViewUnitsViewModel, SettingsViewTemperatureView- Validation phase detects exactly where the wrong relations
Model, DayViewViewModel, WeekViewViewModel, and occur. Then, it shows a warning message with the objects of
WeatherDayViewViewModel. In Figure 9, the upper right the wrong relation and the line number that causes this wrong
corner contains Model cluster that has Model objects: Weath- relation. The warning message for our case is illustrated in
erDayData, and WeatherData. On the other hand, as shown Figure 12, it shows that in line 16 RootViewController com-
in the bottom of Figure 9 View cluster has the following municates with WeatherDayData which is a wrong relation.
View objects: SettingsTableViewCell, and WeatherDayTable- Finally, MMVMi generated a directed graph which colored

(Advance online publication: 28 August 2018)

 IAENG International Journal of Computer Science, 45:3, IJCS_45_3_03
______________________________________________________________________________________

Fig. 10. Object Relations Validation with relations between objects in the same cluster

Fig. 11. MCD result for Cloudy app case 2

Fig. 12. Warning message for wrong relations between MVVM objects

the wrong relation arrow with a dotted line as depicted in

Figure 13.

VI. E VALUATION AND RESULTS Fig. 13. Invalid relations between MVVM objects

This section evaluates MMVMi model by comparing it

with relevant tools such as Depcheck and Objc Dependency

(Advance online publication: 28 August 2018)

 IAENG International Journal of Computer Science, 45:3, IJCS_45_3_03
______________________________________________________________________________________

Fig. 14. Detecting massive controllers by using Krzysztof Zablocki script

on Cloudy MVC version

Visualizer tool. The first subsection, evaluates Massive Con- Fig. 15. Detecting massive controllers by using Krzysztof Zablocki script
on Cloudy MVVM version
troller Detection phase. While Object Relations Validation
phase is evaluated in the next two subsections. Subsection
two, compares Object Relations Validation phase with De-
pcheck by running both of them on Cloudy app MVVM
version. The next subsection, applies Objc Dependency Visu-
alizer on Cloudy app MVVM version. All results and graphs
output of the aforementioned tools will be discussed in detail
in this section.

A. Massive Controller Detection phase Comparison

Massive Controller Detection phase helps developers to
detect massive controllers in iOS projects. In a Good iOS
Application Architecture: MVVM vs. MVC vs. VIPER talk,
Krzysztof Zablocki proposed a script that triggers warnings
when the project has massive controllers. Krzysztof Zablocki
script outputs all files in the project with their full path and
the total number of lines for each file. The results of running
Krzysztof Zablocki script on Cloudy app MVC version is
shown in Figure 14. Indeed there is no doubt that the output
of MCD in Figure 7 is much more abstract than Figure 14.
In addition, Krzysztof Zablocki script ran on Cloudy app
MVVM version and its output is depicted in Figure 15. On
the other hand, the same project was run on MCD and its
output is illustrated in Figure 8. By comparing all those
different outputs, it is obvious that Krzysztof Zablocki script
has a major drawback as it computes the total number of
lines for all files, not just the controller files. Accordingly, Fig. 16. Depcheck analyze command output
developers have to scan through all the output files to
check the total number of lines for each controller file. In
contrast, MCD script searches for controller files implicitly,
dependencies, run usage command. To generate a depen-
and then it displays just controller files. Thus, MCD pro-
dency graph, run graph command [22]. Figure 16 shows
vides a convenient method for developers to detect massive
a screenshot of terminal output, when analyze command
controllers. Furthermore, Krzysztof Zablocki script counts
ran on Cloudy App MVVM version. Obviously, analyze
all lines including comments and empty lines, unlike MCD
command output is useless as it reports class name with
which ignores comments and empty lines and just counts
the number of dependencies. Actually, when developers used
code lines. Thereby, MCD is more accurate. For example, the
visualizing tools, they aim to visualize projects details with
total number of lines in WeatherViewController is 38 lines as
useful information that help them to inspect the project
shown in Figure 7 and Figure 8. While Krzysztof Zablocki
smoothly. Depcheck’s analyze command should be improved
script shows that WeatherViewController has 72 lines in total
by displaying the name of all the dependencies not just the
as illustrated in Figure 14 and Figure 15.
number. Furthermore, even though in case a class is not de-
pendent on any other classes, analyze command will display
B. Comparison with Depcheck this class with zero number beside it. For example, in Figure
This subsection compares MMVMi with Depcheck, in 16, AppDelegate, DataManagerError, SettingsRepresentable,
terms of visualizing the relations in iOS project. As men- TimeNotation, JSONDecoderError, WeatherViewController
tioned in the related work section, Depcheck is an analyzer and much more all of them have zero dependencies. This
tool for Swift projects [22]. Basically, Depcheck has three is really worthless.
command: analyze, usage, and graph. To report dependencies Figure 17 illustrates part of the dependency graph which
per classes, run analyze command. While, to count each class is generated by running Depcheck’s graph command on

(Advance online publication: 28 August 2018)

 IAENG International Journal of Computer Science, 45:3, IJCS_45_3_03
______________________________________________________________________________________

Fig. 17. Depcheck graph command output

Cloudy App MVVM version. Roughly, this graph helps view dismissed all these ViewModel nodes relations because these
the relations between objects in the project. However, the relations are not with other ViewModel nodes. Indeed, de-
graph is huge which makes it unclear and difficult to find a velopers need to check how ViewModel nodes are linked
specific relation. On the contrary, Figure 9 depicts MMVMi with Model nodes and Controller nodes. This relations check
dependency graph for the same project: Cloudy App MVVM is clearly illustrates in MMVMi graph as shown in Figure
version. Definitely MMVMi graph is more helpful than 9. Moreover, filter option can be considered as a drawback
Depcheck graph for several reasons. Such as MMVMi graph because in order to use it, users must have a good knowledge
omits unnecessary relations, whereas Depcheck graph draws in regular expression to write a regular expression that fulfills
all relations between objects even the relation between the their need.
object and itself as shown in Figure 17: RootViewController
has an arrow from its node to itself. Moreover, MMVMi VII. C ONCLUSION
graph assists developers to observe the relations between
MVVM objects easily. However, using Depcheck graph Design patterns have a huge impact that affects several
might help but in a complex way as it has numerous arrows. aspects of software engineering including development, and
architecture. In this work, we focused on iOS application
development with two design patterns: Model View Con-
C. Comparison with Objc Dependency Visualizer
troller (MVC) design pattern, and Model View ViewModel
Objc dependency visualizer tool illustrates the relations (MVVM) design pattern. MVC suffers from many limitations
between classes in iOS project in an interactive way. In as discussed earlier. Consequently, developers tend to use
this subsection, objc dependency visualizer graph will be Model View ViewModel to overcome MVC limitations. The
compared with MMVMi graph. Figure 18 displayed objc overall objective of our work is to help developers to stick
dependency visualizer graph for Cloudy MVVM version. In to the rules of MVC design pattern, and help them to check
the top right corner, there is a Live editor that gives users and detect if they have Massive View Controller problem. In
the ability to control circle size, charge multiplier, and link this case, they have to switch to MVVM design pattern. We
strength. Users can control all these options in a simple way aim to advice developers to switch to MVVM design pattern
by moving and adjusting the sliders according to their needs. as it separates concerns in a better way and it distributes the
Also, there is ”show names” option where when it checked roles more productively. To achieve these objectives, we have
all classes name will be appeared on their corresponding developed a validation model: MVC & MVVM Validation
nodes. Last but not least, filter option where users can type Model for iOS (MMVMi). The presented validation model
a regular expression to filter nodes. By comparing Figure 9 addressed our goals and aims as it helps developers to
with Figure 18, it is clear that Figure 18 shows how each validate their projects with MVC rules. The proposed model
class is linked to other classes which made it crowded and validates the relations between project objects and check if
messy. Therefore, in Figure 19 we applied filter to show just they satisfy the MVVM objects relations rules. We assert that
Controller objects. After applying Controller objects filter, such a validation model will aid developers and programmers
the arrows relations will be illustrated between only nodes to successfully apply MVC or MVVM on their iOS projects
that have controller within their name. It will be better if the and get the main benefits from applying design pattern
Live editor has an option to omit unrelated nodes, and other correctly. We hope this work will help iOS community and
option to show the relations between the filtered nodes and guide them to build robust iOS applications that are well
other nodes. structured with a valid design pattern.
Figure 20 depicts ViewModel filter, the filter is re-
ally useless as it just shows the relation between
WeekViewViewModel node and WeatherDayViewView- VIII. F UTURE WORK
Model node. However, there are many ViewModel Currently, Object Relations Validation phase in MMVMi
nodes including DayViewViewModel, SettingsViewTemper- used dot language to produce the directed graph. We see that
atureViewModel, SettingsViewTimeViewModel, and Set- this is an aspect that needs to be improved. The output of
tingsViewUnitsViewModel. Objc dependency visualizer tool ORV phase is a simple directed graph that does not allow

(Advance online publication: 28 August 2018)

 IAENG International Journal of Computer Science, 45:3, IJCS_45_3_03
______________________________________________________________________________________

Fig. 18. Objc dependency visualizer output for Cloudy MVVM version

the user to interact with it. User interactions can come in [6] B. Orlov, “ios architecture patterns,” https://medium.com/
different forms such as giving the user the ability to move ios-os-x-development/ios-architecture-patterns-ecba4c38de52,
(Accessed on 04/03/2018).
a cluster or nodes to anyplace. All these interactions can [7] T. Lee and T. Brunner, “A prototype to increase social networking
be done with d3js library and they will be visualized in a between staff: A web application for companies,” 2017.
powerful interactive way. In fact, in iOS community there [8] A. Freeman, Pro design patterns in swift. Apress, 2015.
[9] J. Patel, S. Okamoto, S. M. Dascalu, and F. C. Harris Jr, “Web-
are many projects that use both design patterns: Model View enabled toolkit for data interoperability support,” in Proceedings of
Controller, and Model View ViewModel. So, we plan to the 21th International Conference on Software Engineering and Data
improve the proposed model in which, the model should have Engineering (SEDE-2012), Los Angeles, CA, 2012, pp. 161–166.
the ability to specify the project type, and it should be able [10] A. Syromiatnikov and D. Weyns, “A journey through the land of
model-view-design patterns,” in Software Architecture (WICSA), 2014
to deal with projects that use both of MVC, and MVVM. IEEE/IFIP Conference on. IEEE, 2014, pp. 21–30.
Hence, the aforementioned improvements will enhance the [11] M. Neuburg, IOS 8 Programming Fundamentals with Swift: Swift,
MMVMi and will make it more powerful. Xcode, and Cocoa Basics. ” O’Reilly Media, Inc.”, 2015.
[12] “Model-view-controller,” https://developer.apple.com/library/content/
documentation/General/Conceptual/DevPedia-CocoaCore/MVC.html,
(Accessed on 04/03/2018).
R EFERENCES [13] A. Allan, Learning iOS Programming: From Xcode to App Store. ”
O’Reilly Media, Inc.”, 2013.
[1] E. Sorensen and M. Mikailesc, “Model-view-viewmodel (mvvm) de- [14] R. B’far, Mobile computing principles: designing and developing
sign pattern using windows presentation foundation (wpf) technology,” mobile applications with UML and XML. Cambridge University Press,
MegaByte Journal, vol. 9, no. 4, pp. 1–19, 2010. 2004.
[2] R. Vice and M. S. Siddiqi, MVVM Survival Guide for Enterprise [15] K. Topley, F. Olsson, J. Nutting, D. Mark, and J. LaMarche, Beginning
Architectures in Silverlight and WPF. Packt Publishing Ltd, 2012. IPhone Development with Swift: Exploring the IOS SDK. Apress,
[3] D. Patterns and C. Pattern, “Model-view-controller,” 2014.
Microsoft Patterns & Practices, http://msdn. microsoft. [16] H. Sun, J. Zhang, G. Sun, and Y. Li, “Agricultural traceable and
com/practices/type/Patterns/Enterprise/DesMVC, 2003. marketing system based on ios-platform and wireless sensor network,”
[4] A. Leff and J. T. Rayfield, “Web-application development using the Journal of Computer and Communications, vol. 5, no. 06, p. 45, 2017.
model/view/controller design pattern,” in Enterprise Distributed Object [17] L. Nguyen and K. Nguyen, “Application of protocol-oriented mvvm
Computing Conference, 2001. EDOC’01. Proceedings. Fifth IEEE architecture in ios development,” 2017.
International. IEEE, 2001, pp. 118–127. [18] K. Peterson, “The github open source development process,” url:
[5] D. A. Lo, Sensor Plot Kit: An iOS Framework for Real-time plotting http://kevinp.me/github-process-research/github-processresearch.pdf
of Wireless Sensors. University of California, Irvine, 2015. (visited on 05/11/2017), 2013.

(Advance online publication: 28 August 2018)

 IAENG International Journal of Computer Science, 45:3, IJCS_45_3_03
______________________________________________________________________________________

Fig. 19. Applying Controller filter on Cloudy MVVM version

[19] L. Dabbish, C. Stuart, J. Tsay, and J. Herbsleb, “Social coding in Mariam Aljamea earned bachelor degree in computer engineering from
github: transparency and collaboration in an open software repository,” Kuwait University in 2012. Currently she is a master student in computer
in Proceedings of the ACM 2012 conference on Computer Supported engineering at Kuwait University and she is working on distribution systems
Cooperative Work. ACM, 2012, pp. 1277–1286. using Apache Spark for her thesis. Also, she is an iOS Developer in Ministry
[20] “Github - k0nserv/luft: The xcode plugin that helps you write of Education. She is a researcher in apache spark and bioinformatics.
lighter view controllers,” https://github.com/k0nserv/luft, (Accessed on
04/03/2018).
[21] “Github-paultaykalo/objc-dependency-visualizer: Objective-c and
swift dependency visualizer. it’s tool that helps to visualize current
state of your project. it’s really easy to see how tight your classes are
coupled.” https://github.com/PaulTaykalo/objc-dependency-visualizer,
(Accessed on 04/03/2018).
[22] “Github-wojteklu/depcheck: Dependency analyzer tool for swift
projects,” https://github.com/wojteklu/depcheck, (Accessed on
04/03/2018).
[23] “Controller object,” https://developer.apple.com/library/content/
documentation/General/Conceptual/DevPedia-CocoaCore/
ControllerObject.html#//apple ref/doc/uid/TP4000895-CH11-SW1, Mohammad Alkandari is an Assistant Professor of computer engineering
(Accessed on 04/04/2018). at Kuwait University, Kuwait, where he has been on the faculty since 2012.
[24] “Uiviewcontroller-uikit — apple developer documentation,” He received his Ph.D. degree in computer science at College of Engineering
https://developer.apple.com/documentation/uikit/uiviewcontroller, from Virginia Polytechnic Institute and State University (Virginia Tech).
(Accessed on 04/03/2018). He was the director of the Office of Engineering Education Technology at
[25] S. Brin, “Extracting patterns and relations from the world wide web,” Kuwait University, College of Engineering and Petroleum for 3 years. He
in International Workshop on The World Wide Web and Databases. is currently the coordinator of Software and Systems Engineering Research
Springer, 1998, pp. 172–183. Group at Computer Engineering Department. He is a researcher in software
[26] H. Hosoya and B. Pierce, “Regular expression pattern matching for engineering, requirements engineering, software project management, soft-
xml,” in ACM SIGPLAN Notices, vol. 36, no. 3. ACM, 2001, pp. ware quality assurance, privacy and data protection, and human-computer
67–80. interaction.
[27] E. Koutsofios, S. North et al., “Drawing graphs with dot,” Technical
Report 910904-59113-08TM, AT&T Bell Laboratories, Murray Hill,
NJ, Tech. Rep., 1991.
[28] “bartjacobs/cloudy at mvc,” https://github.com/bartjacobs/Cloudy/tree/
mvc, (Accessed on 04/03/2018).
[29] “bartjacobs/cloudy: Mastering model-view-viewmodel with swift,”
https://github.com/bartjacobs/Cloudy, (Accessed on 04/03/2018).

(Advance online publication: 28 August 2018)

 IAENG International Journal of Computer Science, 45:3, IJCS_45_3_03
______________________________________________________________________________________

Fig. 20. Applying ViewModel filter on Cloudy MVVM version

(Advance online publication: 28 August 2018)