Model View Controller
INF 123 – Software architecture
tdebeauv@uci.edu
1
MVC and separation of concerns
• Model
– State and logic
• View
– Display state to user
• Controller
– Translate user inputs into model logic
• Simple, yet so many variants …
2
Outline
•
•
•
•
Vanilla MVC
Reactive MVC
Web MVC
Game MVC
3
VANILLA MVC
4
Vanilla MVC
• Model
– Unaware of the view(s) and controller(s)
• View
– Display only when notified by the controller
– Aware of the model’s structure
• Controller
– Aware of the model’s structure
– (Only works when receiving user inputs)
5
MVC != main and subroutines
MVC
Main and subroutines
Number of
Components
3*
1+N
Connectors
Not specified – could be anything
Must be procedure calls
Level of
abstraction
Higher level (closer to the domain Lower level (closer to the code)
of “applications with GUI and
user inputs”)
Concerns
Separate rendering and user
input from state and logic.
Break down a long program into
self-contained and functionally
meaningful subroutines.
* There may be multiple views or controllers, but only one model.
6
REACTIVE MVC
7
Reactive MVC
• Model
– Smarter than usual: must be aware of the view(s)
– Takes half of the controller’s job away
• View
– Register for notifications from the model
– Only called by the model
• Controller
– Only updates the model
– No more notifying the view
8
Reactive programming (low level)
b=1
c=2
a=b+c
print a # 1+2=3
b=4
print a # 4+2=6 !!
9
Observer pattern (OO design pattern)
• Most languages are non-reactive
• So they need a design pattern
10
Observer pattern
• A pattern frequently used for GUI widgets
• Lower-level of abstraction (code) than MVC
(overall system structure)
• In reactive MVC, the view observes the model
11
WEB MVC
12
Web MVC
• Model
– Usually very little logic (DB, data access objects, …)
• Views
– A puppet in the controller’s hands
• Controller
– Select which view will do the rendering
– Fetch data from the model, and give it to the view
– In other words: map each user input to a view, not
to a model logic
13
Model 2/EJB-JSP-servlet
• 2000s: Java is the rage
• Mixes Java (server) and
HTML (client) 
<p>Counting to three:</p>
<% for (int i=1; i<4; i++) { %>
<p>
This number is <%= i %>.
</p>
<% } %>
<p>OK.</p>
• 2010s: JavaScript is the
rage, goodbye JSP!
14
Web MVC
• HTML in your Java/python/C#
• Or C#/python/Java in your HTML
• Either way: not good
15
If you’re interested …
• iOS Cocoa MVC
• Enterprise Java Bean – Java Server Page –
Servlet
• ASP.NET MVC, Spring MVC, …
• http://msdn.microsoft.com/enus/library/dd381412%28VS.98%29.aspx
• http://docs.spring.io/spring/docs/current/spri
ng-framework-reference/html/mvc.html
16
GAME MVC
17
Game MVC
• Vanilla MVC where the loop wakes up
everyone
• Treat the loop/clock as a controller and you
have vanilla MVC
18
Main loop
m = Model()
c = Controller(model)
v = View(model)
while not m.game_over:
sleep(0.02)
c.poll()
m.update()
v.display()
19
Model API
m = Model()
c = Controller(model)
v = View(model)
while not m.game_over:
sleep(0.02)
c.poll()
m.update()
v.display()
20
Controller API
m = Model()
c = Controller(model)
v = View(model)
while not m.game_over:
sleep(0.02)
c.poll()
m.update()
v.display()
21
View API
m = Model()
c = Controller(model)
v = View(model)
while not m.game_over:
sleep(0.02)
c.poll()
m.update()
v.display()
22
More refs
• http://bowlingbash.blogspot.com/2011/09/mvc-forgames.html
23