Model-View-
Controller
WebSockets
Garann Means - HTML5.tx 2013
Slide 2
Slide 2 text
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
Slide 3
Slide 3 text
#singlepageappproblems
Slide 4
Slide 4 text
SPAs today
✏everywhere!
✏more SPA-like behavior in static pages
✏third-party tools
✏systems of dependencies
✏easy to set up, but then.. ?
Slide 5
Slide 5 text
win some/lose some
✏time to first render
✏SEO
✏managing HTTP requests
✏creating good packages
Slide 6
Slide 6 text
implementation issues
✏creating app scaffolding
✏how & when to redraw
✏where client interactions fit
✏those darn HTTP requests
Slide 7
Slide 7 text
some approaches
✏twitter
✏server-rendered HTML, Flight
✏airbnb
✏Node, full-stack Backbone
✏meteor (ok, not an implementation)
✏Node, MVC-style models, EDA-style
messaging
Slide 8
Slide 8 text
two households, both
alike in dignity..
Slide 9
Slide 9 text
Model-View-*
✏circa late 1970s
✏closely tied to OOP
✏SmallTalk
✏implemented in popular frameworks
✏traditionally backend
Slide 10
Slide 10 text
Model
✏aka “object”
✏closely mirrors data
✏track their own relationships like
relational DBs
Slide 11
Slide 11 text
View
✏presentational part of the app
✏draw the interface
✏interpolate data
✏(optionally) capture interactions
Slide 12
Slide 12 text
*
✏we’ll get to that in a sec
Slide 13
Slide 13 text
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*
Slide 14
Slide 14 text
the new mutiny
not-so-
^
Slide 15
Slide 15 text
Event-Driven
Architectures
✏less formal than MVC
✏suit high-I/O systems
✏simple and reactive
✏seen more in tools than applications
Slide 16
Slide 16 text
events and objects
✏less data persisted overall
✏models less bound to data
✏natural “model” is a state
Slide 17
Slide 17 text
events themselves
✏user interaction with view
✏server interaction with state
✏messaging within application
✏highly decoupled
Slide 18
Slide 18 text
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
Slide 19
Slide 19 text
a pair of star-crossed
lovers?
Slide 20
Slide 20 text
dealing with data
✏MVC: everything in models
✏EDA: models maybe?
✏MVC: lends itself to CRUD
✏EDA: ad-hoc updates
Slide 21
Slide 21 text
the views
✏MVC: one-to-one with data
✏EDA: highly composite view reflecting
state
✏MVC: view responsible for interaction
✏EDA: interaction first-class component
Slide 22
Slide 22 text
the action
✏MVC: triad-specific
✏EDA: first-class
✏MVC: objects don’t influence controllers
✏EDA: objects have event awareness
Slide 23
Slide 23 text
everybody loves MV*
Slide 24
Slide 24 text
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
Slide 25
Slide 25 text
the appeal
✏the age of OOP
✏big teams, separation of concerns
✏the age of REST
✏easy mapping to server code
✏good tools, obvs
Slide 26
Slide 26 text
how we do it (now)
✏lightweight MVC
✏controller in router, view, other?
✏presenter abstractions
✏automatic binding
Slide 27
Slide 27 text
framework choices
✏no need for boilerplate
✏too much for small apps?
✏too little for big apps?
✏SoC depends on NoC
Slide 28
Slide 28 text
shaking the yoke of
inauspicious *s
Slide 29
Slide 29 text
a controller
✏Spine.js in TodoMVC
✏interface events
✏bindings to app functions
✏manage model properties
✏rendering, init
Slide 30
Slide 30 text
a presenter (kinda)
✏Backbone.js in TodoMVC
✏interface events
✏observer events
✏rendering, init
Slide 31
Slide 31 text
a viewmodel
✏Knockback.js in TodoMVC
✏interface binding events
✏magic interface events
✏observer events
✏controller handles render, init
Slide 32
Slide 32 text
no man is an island
SPA
Slide 33
Slide 33 text
someone to talk to
✏given: server supplies first render
✏data
✏HTML
✏server updates
✏localstorage
Slide 34
Slide 34 text
when it’s easy
✏CRUD
✏REST
✏highly automatable
Slide 35
Slide 35 text
when it’s tricky
✏changing multiple models
✏lots of quick state changes
✏uploading offline data
Slide 36
Slide 36 text
hey, it’s WebSocket!
Slide 37
Slide 37 text
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
Slide 38
Slide 38 text
not your mama’s
comet
✏bi-directional
✏no request, no response
✏cross-origin support
✏dead simple API
Slide 39
Slide 39 text
available now
✏FF 16
✏Chrome 23
✏IE 10
✏Opera 12
✏Safari 6
✏iffy on mobile (iOS yes, Android no)
EDAing the *s
✏controllers/presenters/viewmodels full
of events
✏free events from triads
✏subscribe at application level
✏any old event system will do
Slide 43
Slide 43 text
event piping
✏decouple user and server interaction
✏provide place for validation
✏allow multiple subscribers
Slide 44
Slide 44 text
EDA + WebSockets
✏chained like interface events
✏specific controllers can subscribe to
global events
✏updates can be cached and bundled
Slide 45
Slide 45 text
real talk
time
^
Slide 46
Slide 46 text
DIY WebSockets
✏declare a socket with URL and protocol
✏listen for open connection
✏send client messages
✏listen for server messages
✏close the connection
Slide 47
Slide 47 text
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;
};
Slide 48
Slide 48 text
on the server
✏can also DIY
✏becomes handy to use a utility
✏niceties like broadcasting
✏options for almost any backend
Slide 49
Slide 49 text
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;
};
Slide 50
Slide 50 text
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)
Slide 51
Slide 51 text
sockets for control
✏take action based on server messages
✏pipe events
✏subscribe on models and views
✏very similar to MVP
Slide 52
Slide 52 text
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);
};
Slide 53
Slide 53 text
collection.js
var that = this;
Events.on(“objectadded”, function(data) {
that.add(data);
};
Slide 54
Slide 54 text
view.js
var that = this;
Events.on(“objectadded”, function(data) {
that.container.append(that.render(data));
};
Slide 55
Slide 55 text
together at last
✏a tool to use within your pattern
✏use a little (ad-hoc)
✏use a lot (syncing)
✏easy as pie to add