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. 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
  2. SPAs today ✏everywhere! ✏more SPA-like behavior in static pages ✏third-party

    tools ✏systems of dependencies ✏easy to set up, but then.. ?
  3. implementation issues ✏creating app scaffolding ✏how & when to redraw

    ✏where client interactions fit ✏those darn HTTP requests
  4. some approaches ✏twitter ✏server-rendered HTML, Flight ✏airbnb ✏Node, full-stack Backbone

    ✏meteor (ok, not an implementation) ✏Node, MVC-style models, EDA-style messaging
  5. 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*
  6. events themselves ✏user interaction with view ✏server interaction with state

    ✏messaging within application ✏highly decoupled
  7. 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
  8. dealing with data ✏MVC: everything in models ✏EDA: models maybe?

    ✏MVC: lends itself to CRUD ✏EDA: ad-hoc updates
  9. the views ✏MVC: one-to-one with data ✏EDA: highly composite view

    reflecting state ✏MVC: view responsible for interaction ✏EDA: interaction first-class component
  10. 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
  11. the appeal ✏the age of OOP ✏big teams, separation of

    concerns ✏the age of REST ✏easy mapping to server code ✏good tools, obvs
  12. how we do it (now) ✏lightweight MVC ✏controller in router,

    view, other? ✏presenter abstractions ✏automatic binding
  13. framework choices ✏no need for boilerplate ✏too much for small

    apps? ✏too little for big apps? ✏SoC depends on NoC
  14. a controller ✏Spine.js in TodoMVC ✏interface events ✏bindings to app

    functions ✏manage model properties ✏rendering, init
  15. a viewmodel ✏Knockback.js in TodoMVC ✏interface binding events ✏magic interface

    events ✏observer events ✏controller handles render, init
  16. someone to talk to ✏given: server supplies first render ✏data

    ✏HTML ✏server updates ✏localstorage
  17. 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
  18. available now ✏FF 16 ✏Chrome 23 ✏IE 10 ✏Opera 12

    ✏Safari 6 ✏iffy on mobile (iOS yes, Android no)
  19. EDAing the *s ✏controllers/presenters/viewmodels full of events ✏free events from

    triads ✏subscribe at application level ✏any old event system will do
  20. EDA + WebSockets ✏chained like interface events ✏specific controllers can

    subscribe to global events ✏updates can be cached and bundled
  21. DIY WebSockets ✏declare a socket with URL and protocol ✏listen

    for open connection ✏send client messages ✏listen for server messages ✏close the connection
  22. 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; };
  23. on the server ✏can also DIY ✏becomes handy to use

    a utility ✏niceties like broadcasting ✏options for almost any backend
  24. 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; };
  25. 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)
  26. sockets for control ✏take action based on server messages ✏pipe

    events ✏subscribe on models and views ✏very similar to MVP
  27. 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); };
  28. together at last ✏a tool to use within your pattern

    ✏use a little (ad-hoc) ✏use a lot (syncing) ✏easy as pie to add