1. Model View Controller INF 123 – Software architecture tdebeauv@uci.edu 1

2. 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

3. Outline Vanilla MVC Reactive MVC Web MVC Game MVC 3

4. VANILLA MVC 4

5. 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

6. MVC != main and subroutines MVCMain and subroutines Number of Components 3*1 + N ConnectorsNot specified – could be anythingMust be procedure calls Level of abstraction Higher level (closer to the domain of “applications with GUI and user inputs”) Lower level (closer to the code) ConcernsSeparate rendering and user input from state and logic. Break down a long program into self-contained and functionally meaningful subroutines. 6 * There may be multiple views or controllers, but only one model.

7. REACTIVE MVC 7

8. 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

9. Reactive programming (low level) b = 1 c = 2 a = b + c print a # 1+2=3 b = 4 print a # 4+2=6 !! 9

10. Observer pattern (OO design pattern) Most languages are non-reactive So they need a design pattern 10

11. 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

12. WEB MVC 12

13. 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

14. Model 2/EJB-JSP-servlet 2000s: Java is the rage Mixes Java (server) and HTML (client)  Counting to three: This number is. OK. 2010s: JavaScript is the rage, goodbye JSP! 14

15. Web MVC HTML in your Java/python/C# Or C#/python/Java in your HTML Either way: not good 15

16. If you’re interested … iOS Cocoa MVC Enterprise Java Bean – Java Server Page – Servlet ASP.NET MVC, Spring MVC, … http://msdn.microsoft.com/en- us/library/dd381412%28VS.98%29.aspx http://msdn.microsoft.com/en- us/library/dd381412%28VS.98%29.aspx http://docs.spring.io/spring/docs/current/spri ng-framework-reference/html/mvc.html http://docs.spring.io/spring/docs/current/spri ng-framework-reference/html/mvc.html 16

17. GAME MVC 17

18. Game MVC Vanilla MVC where the loop wakes up everyone Treat the loop/clock as a controller and you have vanilla MVC 18

19. 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

20. 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

21. 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

22. 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

23. More refs http://bowling- bash.blogspot.com/2011/09/mvc-for- games.html http://bowling- bash.blogspot.com/2011/09/mvc-for- games.html 23