50 Shades of MVC

Video: https://vimeo.com/89377195

We at the Rails world are very proud of embracing the Model-View-Controller design pattern, it is integral to the way we build web applications and there is a general consensus that all of us generally know what we are talking about in regards to it, hell , most of our code files are under a model, controller or views directories! We've got to know what we are doing, right?

Much like Object Orientation the Model-View-Controller pattern is one of the most popular-yet-heavily-altered concepts in modern computer science, what were the original propositions of the pattern? How was it applied back in the 70's, when it was proposed as a part of Smalltalk? How much have we changed it to adapt it to the web application scene? How can we apply this to our day to day work in 2013? is altering the original pattern necessarily a bad thing?

On this talk I present different aspects of the MVC pattern and its changes from its inception to modern day use, what to keep in mind about the pattern as opposed to a single framework's implementation of it and how knowing this should make us all around better programmers.

Transcript

1. 50 Shades
   of
   MVC
   

   View Slide

2. Pablo
   Astigarraga
   

   View Slide

3. !
   @poteland
   github.com/pote
   

   View Slide

4. tarmac.io
   

   View Slide

5. Surculus Fructum
   

   View Slide

6. Uruguay
   

   View Slide

7. Uruguay
   

   View Slide

8. Argentina
   

   View Slide

9. View Slide

10. !
    Thank you
    RubyConf Ar
    <3
    

    View Slide

11. Model
    View
    Controller
    

    View Slide

12. 2004 - 2005
    

    View Slide

13. View Slide

14. Models
    Data
    +
    Behavior
    

    View Slide

15. Views
    User
    Interface
    !
    

    View Slide

16. Controllers
    Glue. (?)
    

    View Slide

17. View Slide

18. Browser
    GET / HTTP/1.1
    

    View Slide

19. Web Server
    

    View Slide

20. Router
    MyApp::Application.routes.draw do!
    get '/' => 'sessions#new'!
    root :to => 'sessions#new' !
    end!
    

    View Slide

21. Router
    MyApp::Application.routes.draw do!
    get '/' => 'sessions#new'!
    root :to => 'sessions#new' !
    end!
    

    View Slide

22. Router
    MyApp::Application.routes.draw do!
    get '/' => 'sessions#new'!
    root :to => 'sessions#new' !
    end!
    

    View Slide

23. Controller
    class SessionsController < ApplicationController!
    def new!
    @model = FictionalModel.last!
    render :new!
    end!
    end!
    

    View Slide

24. Model
    class FictionalModel < ActiveRecord::Base!
    # validations!
    # other stuff (?)!
    end!
    

    View Slide

25. Database
    SELECT * FROM fictional_models ORDER BY
    fictional_models.id DESC LIMIT 1
    

    View Slide

26. Model
    # => #name: "Derek Zoolander">
    

    View Slide

27. Controller
    class SessionsController < ApplicationController!
    def new!
    @model = FictionalModel.last!
    render :new!
    end!
    end!
    

    View Slide

28. Controller
    class SessionsController < ApplicationController!
    def new!
    @model = FictionalModel.last!
    render :new!
    end!
    end!
    

    View Slide

29. View
    !
    !
    Our last registeded model is: <%= @model.name %>!
    !
    !
    Sign in with Google!
    !
    

    View Slide

30. Browser
    !
    !
    Our last registeded model is: Derek Zoolander!
    !
    !
    Sign in with Google!
    !
    

    View Slide

31. View Slide

32. What about Logic?
    

    View Slide

33. Logic in Views?
    (›°□°)›ớ sʍǝıᴧ
    

    View Slide

34. Logic in Controllers?
    (›°□°)›ớ sɹǝʃʃoɹʇuoↃ
    

    View Slide

35. Logic in Controllers?
    Controllers ϊ( ʄ-ʄϊ)
    

    View Slide

36. Logic in Models?
    ¯\_(π)_/¯
    

    View Slide

37. ಠ_ಠ
    

    View Slide

38. ?
    

    View Slide

39. ಠ_ಠ
    

    View Slide

40. 197x - 1988
    

    View Slide

41. “Everything
    is an
    Object”
    

    View Slide

42. Smalltalk
    

    View Slide

43. Xerox PARC
    

    View Slide

44. Message
    Passing
    

    View Slide

45. Integrated
    Development
    Environment
    

    View Slide

46. Inspired:
    

    View Slide

47. Graphical
    Interfaces
    (pretty much)
    

    View Slide

48. Graphical
    Interfaces are why
    MVC exists.
    

    View Slide

49. MVC in Smalltalk
    

    View Slide

50. Interactions
    

    View Slide

51. View Slide

52. Controller
    Sends commands to its associated
    view to change the view's
    presentation
    !
    Sends commands to the model to
    update the model's state
    

    View Slide

53. View
    Requests from the model the
    information that it needs to generate
    an output representation to the user.
    

    View Slide

54. Model
    Notifies its associated views and
    controllers when there has been a
    change in its state.
    

    View Slide

55. Model
    A passive implementation of MVC
    omits these notifications, because the
    application does not require them or
    the software platform does not
    support them
    

    View Slide

56. View Slide

57. “Thin Client”
    

    View Slide

58. We can do this.
    

    View Slide

59. Websockets
    

    View Slide

60. View Slide

61. “Active” MVC.
    class Timeline < ActiveRecord::Base!
    !
    after_save :notify_views!
    !
    def websockets_channel!
    "#{ self.class }#{ self.id }".hash!
    end!
    !
    private!
    !
    def notify_views!
    Pusher.trigger(self.websockets_channel, 'update',
    { self: self.to_json })!
    end!
    end!
    

    View Slide

62. class Timeline < ActiveRecord::Base!
    !
    after_save :notify_views!
    !
    def websockets_channel!
    "#{ self.class }
    #{ self.id }".hash!
    “Active” MVC.
    

    View Slide

63. “Active” MVC.
    class Timeline < ActiveRecord::Base!
    !
    after_save :notify_views!
    !
    def websockets_channel!
    "#{ self.class }#{ self.id }".hash!
    end!
    !
    private!
    !
    def notify_views!
    Pusher.trigger(self.websockets_channel,
    

    View Slide

64. class Timeline < ActiveRecord::B
    !
    after_save :notify_views!
    !
    def websockets_channel!
    "#{ self.class }#{ self.id }
    end!
    !
    “Active” MVC.
    

    View Slide

65. “Active” MVC.
    end!
    !
    private!
    !
    def notify_views!
    Pusher.trigger(!
    self.websockets_channel,!
    'update',!
    { self: self.to_json }!
    )!
    end!
    end!
    

    View Slide

66. View Slide

67. GET /timelines/1
    http http
    

    View Slide

68. PUT /timelines/1
    http
    

    View Slide

69. Web Server
    

    View Slide

70. Router
    MyApp::Application.routes.draw do!
    get '/' => 'sessions#new'!
    root :to => 'sessions#new' !
    end!
    

    View Slide

71. Controller
    class TimelinesController < ApplicationController!
    def update!
    @timeline = Timeline.find(params[:id])!
    if @timeline.update_attributes(params[:timeline])!
    #...!
    #...!
    end!
    end!
    

    View Slide

72. Model
    after_save :notify_views
    

    View Slide

73. Model
    def notify_views!
    Pusher.trigger(!
    self.websockets_channel,!
    'update',!
    { self: self.to_json }!
    )!
    end!
    

    View Slide

74. View Slide

75. View Slide

76. View Slide

77. Websockets <3
    

    View Slide

78. (Never said it was
    a good idea)
    

    View Slide

79. 2009 - 2013
    

    View Slide

80. JavaScript
    

    View Slide

81. MVC
    in the
    browser.
    

    View Slide

82. Full
    Circle.
    

    View Slide

83. View
    Requests from the model the
    information that it needs to generate
    an output representation to the user.
    

    View Slide

84. Empower
    your Views
    

    View Slide

85. Backbone.js
    

    View Slide

86. Angular.js
    

    View Slide

87. View Slide

88. So what is MVC’s
    purpose?
    

    View Slide

89. Separation
    of Concerns
    !
    (for graphical interface apps)
    

    View Slide

90. Guideline.
    

    View Slide

91. Tailor MVC to
    your needs.
    

    View Slide

92. You > MVC
    

    View Slide

93. Gracias!
    @poteland
    

    View Slide

94. View Slide

95. Questions?
    @poteland
    References:
    

    View Slide