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

Model-View-WebSockets

Garann Means
February 03, 2013

 Model-View-WebSockets

Many front-end developers are familiar with MVC, and almost all are familiar with event-driven architectures (even if they call them something else). How do those two philosophies work together? And, more importantly, how can websockets help future applications become more responsive, more consistent, and easier to develop? We'll reexamine the Controller concept from MVC and figure out how to combine simple browser messaging and websockets to address our application needs and improve our user experiences.

Garann Means

February 03, 2013
Tweet

More Decks by Garann Means

Other Decks in Technology

Transcript

  1. Model-View-
    Controller
    WebSockets
    Garann Means - HTML5.tx 2013

    View full-size slide

  2. ah, JavaScript
    ✏historically, a simple place
    ✏doing just fine without patterns and
    frameworks
    ✏a victim of its own potential
    ✏nothing is simple anymore
    ✏patterns combat complexity

    View full-size slide

  3. #singlepageappproblems

    View full-size slide

  4. SPAs today
    ✏everywhere!
    ✏more SPA-like behavior in static pages
    ✏third-party tools
    ✏systems of dependencies
    ✏easy to set up, but then.. ?

    View full-size slide

  5. win some/lose some
    ✏time to first render
    ✏SEO
    ✏managing HTTP requests
    ✏creating good packages

    View full-size slide

  6. implementation issues
    ✏creating app scaffolding
    ✏how & when to redraw
    ✏where client interactions fit
    ✏those darn HTTP requests

    View full-size slide

  7. some approaches
    ✏twitter
    ✏server-rendered HTML, Flight
    ✏airbnb
    ✏Node, full-stack Backbone
    ✏meteor (ok, not an implementation)
    ✏Node, MVC-style models, EDA-style
    messaging

    View full-size slide

  8. two households, both
    alike in dignity..

    View full-size slide

  9. Model-View-*
    ✏circa late 1970s
    ✏closely tied to OOP
    ✏SmallTalk
    ✏implemented in popular frameworks
    ✏traditionally backend

    View full-size slide

  10. Model
    ✏aka “object”
    ✏closely mirrors data
    ✏track their own relationships like
    relational DBs

    View full-size slide

  11. View
    ✏presentational part of the app
    ✏draw the interface
    ✏interpolate data
    ✏(optionally) capture interactions

    View full-size slide

  12. *
    ✏we’ll get to that in a sec

    View full-size slide

  13. MV* in JavaScript
    ✏MV* follows OOP
    ✏mix in a dash of rapid development..
    ✏fast-forward to now
    ✏numerous options
    ✏range of values for *
    ✏few popular choices outside MV*

    View full-size slide

  14. the new mutiny
    not-so-
    ^

    View full-size slide

  15. Event-Driven
    Architectures
    ✏less formal than MVC
    ✏suit high-I/O systems
    ✏simple and reactive
    ✏seen more in tools than applications

    View full-size slide

  16. events and objects
    ✏less data persisted overall
    ✏models less bound to data
    ✏natural “model” is a state

    View full-size slide

  17. events themselves
    ✏user interaction with view
    ✏server interaction with state
    ✏messaging within application
    ✏highly decoupled

    View full-size slide

  18. EDA in JavaScript
    ✏how we do it
    ✏all JS triggered by client-side events
    ✏event handling has evolved over time
    ✏inline onclick →
    ✏event delegation, pub/sub
    ✏dearth of sophisticated EDA JS
    frameworks

    View full-size slide

  19. a pair of star-crossed
    lovers?

    View full-size slide

  20. dealing with data
    ✏MVC: everything in models
    ✏EDA: models maybe?
    ✏MVC: lends itself to CRUD
    ✏EDA: ad-hoc updates

    View full-size slide

  21. the views
    ✏MVC: one-to-one with data
    ✏EDA: highly composite view reflecting
    state
    ✏MVC: view responsible for interaction
    ✏EDA: interaction first-class component

    View full-size slide

  22. the action
    ✏MVC: triad-specific
    ✏EDA: first-class
    ✏MVC: objects don’t influence controllers
    ✏EDA: objects have event awareness

    View full-size slide

  23. everybody loves MV*

    View full-size slide

  24. the whole family
    ✏MVC: tight triads, view bubbles up
    through controller
    ✏MVP: model and view paired, presenter
    can “float”
    ✏MVVM: model and view super tightly
    coupled, observerish

    View full-size slide

  25. the appeal
    ✏the age of OOP
    ✏big teams, separation of concerns
    ✏the age of REST
    ✏easy mapping to server code
    ✏good tools, obvs

    View full-size slide

  26. how we do it (now)
    ✏lightweight MVC
    ✏controller in router, view, other?
    ✏presenter abstractions
    ✏automatic binding

    View full-size slide

  27. framework choices
    ✏no need for boilerplate
    ✏too much for small apps?
    ✏too little for big apps?
    ✏SoC depends on NoC

    View full-size slide

  28. shaking the yoke of
    inauspicious *s

    View full-size slide

  29. a controller
    ✏Spine.js in TodoMVC
    ✏interface events
    ✏bindings to app functions
    ✏manage model properties
    ✏rendering, init

    View full-size slide

  30. a presenter (kinda)
    ✏Backbone.js in TodoMVC
    ✏interface events
    ✏observer events
    ✏rendering, init

    View full-size slide

  31. a viewmodel
    ✏Knockback.js in TodoMVC
    ✏interface binding events
    ✏magic interface events
    ✏observer events
    ✏controller handles render, init

    View full-size slide

  32. no man is an island
    SPA

    View full-size slide

  33. someone to talk to
    ✏given: server supplies first render
    ✏data
    ✏HTML
    ✏server updates
    ✏localstorage

    View full-size slide

  34. when it’s easy
    ✏CRUD
    ✏REST
    ✏highly automatable

    View full-size slide

  35. when it’s tricky
    ✏changing multiple models
    ✏lots of quick state changes
    ✏uploading offline data

    View full-size slide

  36. hey, it’s WebSocket!

    View full-size slide

  37. what is that tho
    ✏its own protocol
    ✏TCP, port 80, ws: and wss:
    ✏server can push data
    ✏replacement for e.g. long-polling
    ✏example: Word2

    View full-size slide

  38. not your mama’s
    comet
    ✏bi-directional
    ✏no request, no response
    ✏cross-origin support
    ✏dead simple API

    View full-size slide

  39. available now
    ✏FF 16
    ✏Chrome 23
    ✏IE 10
    ✏Opera 12
    ✏Safari 6
    ✏iffy on mobile (iOS yes, Android no)

    View full-size slide

  40. uses
    ✏tickers
    ✏chat
    ✏collaborative editing
    ✏yes, games
    ✏every Node Knockout app ever

    View full-size slide

  41. getting cozier with the
    server

    View full-size slide

  42. EDAing the *s
    ✏controllers/presenters/viewmodels full
    of events
    ✏free events from triads
    ✏subscribe at application level
    ✏any old event system will do

    View full-size slide

  43. event piping
    ✏decouple user and server interaction
    ✏provide place for validation
    ✏allow multiple subscribers

    View full-size slide

  44. EDA + WebSockets
    ✏chained like interface events
    ✏specific controllers can subscribe to
    global events
    ✏updates can be cached and bundled

    View full-size slide

  45. real talk
    time
    ^

    View full-size slide

  46. DIY WebSockets
    ✏declare a socket with URL and protocol
    ✏listen for open connection
    ✏send client messages
    ✏listen for server messages
    ✏close the connection

    View full-size slide

  47. DIY WebSockets
    var msgPane = document.querySelector(“#msgPane”),
    s = new WebSocket(“ws://yoursite.com”, [“soap”]);
    // listen for connection
    s.onopen = function(e) {
    s.send(“open for business!”);
    };
    // listen for server message
    s.onmessage = function(e) {
    msgPane.innerHTML = e.data;
    };

    View full-size slide

  48. on the server
    ✏can also DIY
    ✏becomes handy to use a utility
    ✏niceties like broadcasting
    ✏options for almost any backend

    View full-size slide

  49. socket.io example
    var msgPane = document.querySelector(“#msgPane”),
    s = io.connect(“http://yoursite.com”);
    // listen for connection
    s.on(“connect”, function() {
    s.emit(“open for business!”);
    };
    // listen for server message
    s.on(“newmessage”, function(data) {
    msgPane.innerHTML = data;
    };

    View full-size slide

  50. connecting it
    ✏add messaging anywhere in controller/
    presenter/etc.
    ✏use it for syncing if rolling your own
    ✏replace framework sync calls in
    implementation with socket events
    ✏use WebSockets plugin for framework
    (e.g. backbone.io)

    View full-size slide

  51. sockets for control
    ✏take action based on server messages
    ✏pipe events
    ✏subscribe on models and views
    ✏very similar to MVP

    View full-size slide

  52. controller.js
    var Events = function() {
    // ...
    // simple pub/sub
    };
    var sock = io.connect(“http://yoursite.com”);
    // listen for server message
    sock.on(“newobject”, function(data) {
    Events.publish(“objectadded”, data);
    };

    View full-size slide

  53. collection.js
    var that = this;
    Events.on(“objectadded”, function(data) {
    that.add(data);
    };

    View full-size slide

  54. view.js
    var that = this;
    Events.on(“objectadded”, function(data) {
    that.container.append(that.render(data));
    };

    View full-size slide

  55. together at last
    ✏a tool to use within your pattern
    ✏use a little (ad-hoc)
    ✏use a lot (syncing)
    ✏easy as pie to add

    View full-size slide