Upgrade to Pro — share decks privately, control downloads, hide ads and more …

50 Shades of MVC

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.

Pablo Astigarraga

June 07, 2013
Tweet

More Decks by Pablo Astigarraga

Other Decks in Programming

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