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 full-size slide

  2. Pablo
    Astigarraga

    View full-size slide

  3. !
    @poteland
    github.com/pote

    View full-size slide

  4. Surculus Fructum

    View full-size slide

  5. !
    Thank you
    RubyConf Ar
    <3

    View full-size slide

  6. Model
    View
    Controller

    View full-size slide

  7. Models
    Data
    +
    Behavior

    View full-size slide

  8. Views
    User
    Interface
    !

    View full-size slide

  9. Controllers
    Glue. (?)

    View full-size slide

  10. Browser
    GET / HTTP/1.1

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  22. What about Logic?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  27. “Everything
    is an
    Object”

    View full-size slide

  28. Message
    Passing

    View full-size slide

  29. Integrated
    Development
    Environment

    View full-size slide

  30. Graphical
    Interfaces
    (pretty much)

    View full-size slide

  31. Graphical
    Interfaces are why
    MVC exists.

    View full-size slide

  32. MVC in Smalltalk

    View full-size slide

  33. Interactions

    View full-size slide

  34. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  37. 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 full-size slide

  38. “Thin Client”

    View full-size slide

  39. We can do this.

    View full-size slide

  40. “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 full-size slide

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

    View full-size slide

  42. “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 full-size slide

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

    View full-size slide

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

    View full-size slide

  45. GET /timelines/1
    http http

    View full-size slide

  46. PUT /timelines/1
    http

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  49. Model
    after_save :notify_views

    View full-size slide

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

    View full-size slide

  51. Websockets <3

    View full-size slide

  52. (Never said it was
    a good idea)

    View full-size slide

  53. MVC
    in the
    browser.

    View full-size slide

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

    View full-size slide

  55. Empower
    your Views

    View full-size slide

  56. So what is MVC’s
    purpose?

    View full-size slide

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

    View full-size slide

  58. Tailor MVC to
    your needs.

    View full-size slide

  59. Gracias!
    @poteland

    View full-size slide

  60. Questions?
    @poteland
    References:

    View full-size slide