Date post: | 19-May-2015 |
Category: |
Documents |
Upload: | james-lewis |
View: | 2,581 times |
Download: | 0 times |
OMG! Someone broke the internet!James Lewis
Monday, 24 May 2010
• Introductions
• So what are Websockets then?
• Interactions on the World Wide Web
• Implications for building application
• Recap
Monday, 24 May 2010
Monday, 24 May 2010
Developer
XP Coach
Sometime architect
James Lewis
Monday, 24 May 2010
201020001990
A brief history of push to the browser
Monday, 24 May 2010
201020001990
late ’80’s...Al Gore invents the interweb
A brief history of push to the browser
Monday, 24 May 2010
201020001990
1995...Push inventedmultipart/x-mixed-replace
A brief history of push to the browser
Monday, 24 May 2010
201020001990
1996...MS start using pushXMLHTTP
A brief history of push to the browser
Monday, 24 May 2010
201020001990
~2003...MozillaXHR
A brief history of push to the browser
Monday, 24 May 2010
201020001990
2006...The term COMET is coined
A brief history of push to the browser
Monday, 24 May 2010
201020001990
2008...HTML 5 (draft)
A brief history of push to the browser
Monday, 24 May 2010
201020001990
Dec 2009...Chrome build 4.0.249.0Websocket support added
A brief history of push to the browser
Monday, 24 May 2010
201020001990
A brief history of push to the browser
Monday, 24 May 2010
An ExampleGrid computing
Monday, 24 May 2010
An ExampleGrid computing
What do you need to create a grid?
Monday, 24 May 2010
An ExampleGrid computing
Clients that are capable of exectuting arbitrary algorithms
What do you need to create a grid?
Monday, 24 May 2010
An ExampleGrid computing
Clients that are capable of exectuting arbitrary algorithms
A co-ordinating service to push code / data to clients and assemble the results
What do you need to create a grid?
Monday, 24 May 2010
Monday, 24 May 2010
Monday, 24 May 2010
OS
JVM
app
client - server
Anatomy of a traditional grid client
Monday, 24 May 2010
OS
JVM
app
client - server
<Publisher> A co-ordinating service to push code / data and assemble the results
Anatomy of a traditional grid client
Monday, 24 May 2010
OS
JVM
app
client - server
<Listener>
<Publisher>
Clients that are capable of exectuting arbitrary algorithms
A co-ordinating service to push code / data and assemble the results
Anatomy of a traditional grid client
Monday, 24 May 2010
Monday, 24 May 2010
SKYNET
Monday, 24 May 2010
SKYNETSKYNETwe-run-any-code.com
Monday, 24 May 2010
How does we-run-any-code.com work?
Monday, 24 May 2010
How does we-run-any-code.com work?
Well, it doesn’t at the moment...
Monday, 24 May 2010
How does we-run-any-code.com work?
Well, it doesn’t at the moment...
But if it did...
Monday, 24 May 2010
OS
JVM
app
client - server
<Listener>
<Publisher>
Monday, 24 May 2010
OS
JVM
app
client - server
<Listener>
<Publisher>
Browser
js engine
app
we-run-any-code.com
Monday, 24 May 2010
OS
JVM
app
client - server
<Listener>
<Publisher>
Browser
js engine
app
we-run-any-code.com
Map
Monday, 24 May 2010
OS
JVM
app
client - server
<Listener>
<Publisher>
Browser
js engine
app
we-run-any-code.com
Map
Reduce
Monday, 24 May 2010
What do you need to create a grid?
Monday, 24 May 2010
Execute arbitrary code
Co-ordinating service
Push code to client
What do you need to create a grid?
Monday, 24 May 2010
eval(string)Execute arbitrary code
Co-ordinating service
Push code to client
What do you need to create a grid?
Monday, 24 May 2010
eval(string)
Umm, a web server?
Execute arbitrary code
Co-ordinating service
Push code to client Any ideas?
What do you need to create a grid?
Monday, 24 May 2010
“The HTML5 initiative introduced the Web Socket interface -- now developed as an independent specification -- which defines a full-duplex communications channel that operates over a single socket and is exposed via a JavaScript interface in compliant browsers. “Source: websockets.org
Monday, 24 May 2010
[Constructor(in DOMString url, in optional DOMString protocol)]interface WebSocket {
<snip>
// networking attribute Function onopen; attribute Function onmessage; attribute Function onerror; attribute Function onclose; boolean send(in DOMString data); void close();};<snip>
Monday, 24 May 2010
WebsocketsInteractions on the World Wide Web
Monday, 24 May 2010
WebsocketsInteractions on the World Wide Web
GET /nextJob HTTP/1.1Host: werunanycode.comConnection: UpgradeUpgrade: WebSocket
Monday, 24 May 2010
HTTP/1.1 101 WebSocket Protocol HandshakeUpgrade: WebSocketConnection: Upgrade
WebsocketsInteractions on the World Wide Web
GET /nextJob HTTP/1.1Host: werunanycode.comConnection: UpgradeUpgrade: WebSocket
Monday, 24 May 2010
WebsocketsInteractions on the World Wide Web
Monday, 24 May 2010
WebsocketsInteractions on the World Wide Web
websocket: function(url, s) {<snip>
$(ws) .bind('open', $.websocketSettings.open) .bind('close', $.websocketSettings.close) .bind('message', $.websocketSettings.message) .bind('message', function(e){ var m = $.evalJSON(e.originalEvent.data); var h = $.websocketSettings.events[m.type]; if (h) h.call(this, m); }); <snip> }
Monday, 24 May 2010
WebsocketsInteractions on the World Wide Web
public class ClientMessageCallback implements WebSocket {
private Outbound outbound;
public void onConnect(Outbound outbound) { }
public void onDisconnect() { }
public void sendMessage(String message) { try { outbound.sendMessage(message); } catch (IOException e) { throw new RuntimeException(e); } }}
Monday, 24 May 2010
WebsocketsInteractions on the World Wide Web
Monday, 24 May 2010
WebsocketsInteractions on the World Wide Web
Monday, 24 May 2010
WebsocketsInteractions on the World Wide Web
{"type":"message", "data": {"algo":"2+2"}}
Monday, 24 May 2010
WebsocketsInteractions on the World Wide Web
{"type":"message", "data": {"algo":"2+2"}}
Monday, 24 May 2010
WebsocketsInteractions on the World Wide Web
{"type":"message", "data": {"algo":"2+2"}}
{"type":"answer", "data": "4"}
Monday, 24 May 2010
WebsocketsInteractions on the World Wide Web
{"type":"message", "data": {"algo":"2+2"}}
{"type":"answer", "data": "4"}
Monday, 24 May 2010
What did we just see?
Monday, 24 May 2010
What did we just see?
Raw TCP/IP based sockets
Monday, 24 May 2010
What did we just see?
Raw TCP/IP based sockets
Message exchange
Monday, 24 May 2010
What did we just see?
Raw TCP/IP based sockets
Message exchange
State transition logic in the client
Monday, 24 May 2010
What did we just see?
Raw TCP/IP based sockets
Message exchange
State transition logic in the client
The building blocks of the World Wide Web
Monday, 24 May 2010
What did we just see?
Raw TCP/IP based sockets
Message exchange
State transition logic in the client
The building blocks of the World Wide Webthick clien
ts
^the World Wide Web
Monday, 24 May 2010
OS
JVM
app
Browser
js engine
app<Listener>
<Publisher>
<Listener>
<Publisher>
See? It’s a thick client!
Monday, 24 May 2010
But that doesn’t break the internet does it?
Monday, 24 May 2010
But that doesn’t break the internet does it?
well, what is the internet?
Monday, 24 May 2010
Monday, 24 May 2010
Monday, 24 May 2010
Characteristics of the interwebernet
identification of resources
manipulation of resources through representations
self-descriptive messages
HATEOAS
Source: Fielding, Roy. 2000. Architectural Styles and the Design of Network-based Software Architectures. PhD diss
layered system
Monday, 24 May 2010
Image of ISP Backbone Connectivity reflecting Skitter Path Data - 1998 http://www.caida.org/Tools/Skitter/viz9808.html
Monday, 24 May 2010
Feature #1- scalability
Monday, 24 May 2010
Feature #1- scalability“The internet trades latency for scalability”Dr Jim Webber
Monday, 24 May 2010
Feature #1- scalability“The internet trades latency for scalability”
“Push trades scalability for latency”
Dr Jim Webber
Monday, 24 May 2010
Feature #1- scalability“The internet trades latency for scalability”
“Push trades scalability for latency”
Dr Jim Webber
Me
Monday, 24 May 2010
This may suprise you but the web doesn’t look like thisMonday, 24 May 2010
Monday, 24 May 2010
Monday, 24 May 2010
Client cache
Monday, 24 May 2010
Client cache
Proxy cache
Monday, 24 May 2010
Client cache
Proxy cache CDN
Monday, 24 May 2010
Client cache
Proxy cache CDN Infrastructurecaches
Monday, 24 May 2010
Client cache
Proxy cache CDN Infrastructurecaches
Reverse proxycache
Monday, 24 May 2010
Monday, 24 May 2010
Monday, 24 May 2010
Monday, 24 May 2010
Monday, 24 May 2010
Monday, 24 May 2010
Monday, 24 May 2010
Monday, 24 May 2010
And Websockets?
Monday, 24 May 2010
Monday, 24 May 2010
Monday, 24 May 2010
Monday, 24 May 2010
Feature #2 - availability
Monday, 24 May 2010
Feature #2 - availability“The internet is not a five nines fabric”Urs Hölzle
Monday, 24 May 2010
Feature #2 - availability“The internet is not a five nines fabric”
“If you are going to build an internet scale application using push, you’d better not count on it’s availability”
Urs Hölzle
Monday, 24 May 2010
Feature #2 - availability“The internet is not a five nines fabric”
“If you are going to build an internet scale application using push, you’d better not count on it’s availability”
Urs Hölzle
Me
Monday, 24 May 2010
Monday, 24 May 2010
Pakistan suffers a near complete Internet outage as a submarine cable becomes defective (Jun)
2005
Monday, 24 May 2010
The Middle East, India, and other parts of Africa and Asia see a major degradation in Internet service, including outages, after several undersea cables carrying Internet traffic to the region are cut within 1 week (Jan-Feb)
2008
YouTube becomes unreacheable for a couple of hours after Pakistan Telecom starts an unauthorized announcement of YouTube's subnet prefix (24 Feb)
Source: Hobbes' Internet Timeline, www.zakon.org/robert/internet/timeline/
Pakistan suffers a near complete Internet outage as a submarine cable becomes defective (Jun)
2005
Monday, 24 May 2010
Corus steel works, the Netherlands - ANP
Monday, 24 May 2010
Other stuff you will need to think about
Monday, 24 May 2010
Other stuff you will need to think about
Testing
Monday, 24 May 2010
Other stuff you will need to think about
Testing
Coupling
Monday, 24 May 2010
Other stuff you will need to think about
Testing
Coupling
Domain models
Monday, 24 May 2010
How do you normally test webapps?
...<div id=”algorithm”>
<span>var x = [crazy complex prime stuff]</span>
<form action=”/jobs/asd2b234c598/answer” method=”POST”><input type=”text” name=”answer” value=”” />
</form></div>...
Monday, 24 May 2010
How do you normally test webapps?
...<div id=”algorithm”>
<span>var x = [crazy complex prime stuff]</span>
<form action=”/jobs/asd2b234c598/answer” method=”POST”><input type=”text” name=”answer” value=”” />
</form></div>...
acceptance tests
integration tests
functional tests
unit tests
Monday, 24 May 2010
But now the logic is in both client and server
acceptance tests
integration tests
functional tests
unit tests
Monday, 24 May 2010
But now the logic is in both client and server
acceptance tests
integration tests
functional tests
unit tests
acceptance tests
integration tests
functional tests
unit tests
Monday, 24 May 2010
But now the logic is in both client and server
acceptance tests
integration tests
functional tests
unit tests
acceptance tests
integration tests
functional tests
unit tests
You don’t suck, so you are going to test both right?
Monday, 24 May 2010
And the asynchronous stuff? You’re pretty good at testing multi-threaded
code are you?
Monday, 24 May 2010
And the asynchronous stuff? You’re pretty good at testing multi-threaded
code are you?
Dan North and James’ first rule of concurrency
Monday, 24 May 2010
And the asynchronous stuff? You’re pretty good at testing multi-threaded
code are you?
Dan North and James’ first rule of concurrency
“Doug Lea does it better than you do...”
Monday, 24 May 2010
Recap
Monday, 24 May 2010
Websockets are really cool!
Recap
Monday, 24 May 2010
Websockets are really cool!And simple to use
Recap
Monday, 24 May 2010
Websockets are really cool!And simple to use
Recap
http://code.google.com/p/jquery-websocket/
http://jetty.codehaus.org/jetty/
http://www.google.com/chrome
Monday, 24 May 2010
Recap
Monday, 24 May 2010
You can implement some really exciting applications with them
Recap
Monday, 24 May 2010
You can implement some really exciting applications with them
They are particularly well-suited to low-latency stuff
Trading applications for example
Recap
Monday, 24 May 2010
Recap
Monday, 24 May 2010
Recap
But you won’t be able to take advantage of the stuff that makes the internet scale or interoperate
You will have to learn how to do that yourself
Monday, 24 May 2010
Ps we-run-any-code.com is coming...
Monday, 24 May 2010
Welcome back James
SKYNET is active
The current grid size is:
What code would you like to run?
22,107,123
...
>>
>>
>>
>>
Monday, 24 May 2010
Monday, 24 May 2010
A traditional implementation...
we-run-any-code.com
Monday, 24 May 2010
Traditional we-run-any-code.comInteractions on the World Wide Web
Monday, 24 May 2010
Traditional we-run-any-code.comInteractions on the World Wide Web
classic HTTP request-response
Monday, 24 May 2010
Traditional we-run-any-code.comInteractions on the World Wide Web
classic HTTP request-response
Monday, 24 May 2010
Traditional we-run-any-code.comInteractions on the World Wide Web
Monday, 24 May 2010
Traditional we-run-any-code.comInteractions on the World Wide Web
Monday, 24 May 2010
Traditional we-run-any-code.comInteractions on the World Wide Web
Monday, 24 May 2010
Traditional we-run-any-code.comInteractions on the World Wide Web
GET /index HTTP/1.1Host: we-run-any-code.com
Monday, 24 May 2010
Traditional we-run-any-code.comInteractions on the World Wide Web
GET /index HTTP/1.1Host: we-run-any-code.com
HTTP/1.1 200 OK
<html>...
<a rel=”nextjob” href=”/nextjob” />...
</html>
Monday, 24 May 2010
Traditional we-run-any-code.comInteractions on the World Wide Web
Monday, 24 May 2010
Traditional we-run-any-code.comInteractions on the World Wide Web
GET /nextjob HTTP/1.1Host: we-run-any-code.com
Monday, 24 May 2010
Traditional we-run-any-code.comInteractions on the World Wide Web
GET /nextjob HTTP/1.1Host: we-run-any-code.com HTTP/1.1 303 See Other
Location: /jobs/asd2b234c598
Monday, 24 May 2010
Traditional we-run-any-code.comInteractions on the World Wide Web
GET /nextjob HTTP/1.1Host: we-run-any-code.com HTTP/1.1 303 See Other
Location: /jobs/asd2b234c598
GET /jobs/asd2b234c598 HTTP/1.1Host: we-run-any-code.com
Monday, 24 May 2010
Traditional we-run-any-code.comInteractions on the World Wide Web
GET /nextjob HTTP/1.1Host: we-run-any-code.com HTTP/1.1 303 See Other
Location: /jobs/asd2b234c598
...<div id=”algorithm”>
<span>var x = [crazy complex prime stuff]</span>
<form action=”/jobs/asd2b234c598/answer” method=”POST”><input type=”text” name=”answer” value=”” />
</form></div>...
GET /jobs/asd2b234c598 HTTP/1.1Host: we-run-any-code.com
HTTP/1.1 200 OK
Monday, 24 May 2010
What did we just see?
HTTP verbs and status codes
Addressable resources
HATEOAS
This is how the internet has been able to grow to, umm, internet-scale...
Monday, 24 May 2010
Closed set of operations, well-understood semantics
GET <resource-name> HTTP/1.1
PUT <resource-name> HTTP/1.1
POST <resource-name> HTTP/1.1
DELETE <resource-name> HTTP/1.1
OPTIONS <resource-name> HTTP/1.1
HEAD <resource-name> HTTP/1.1
Monday, 24 May 2010
Enables you to go from this:
Monday, 24 May 2010
To this
Monday, 24 May 2010
Representations of resources
Addressable
self-contained
(there’s this thing with media types, but we won’t go into that)
Monday, 24 May 2010
Representations of resources
...<div id=”algorithm”>
<span>var x = [crazy complex prime stuff]</span>
<form action=”/jobs/asd2b234c598/answer” method=”POST”><input type=”text” name=”answer” value=”” />
</form></div>...
Addressable
self-contained
(there’s this thing with media types, but we won’t go into that)
Monday, 24 May 2010
Representations of resources
...<div id=”algorithm”>
<span>var x = [crazy complex prime stuff]</span>
<form action=”/jobs/asd2b234c598/answer” method=”POST”><input type=”text” name=”answer” value=”” />
</form></div>...
HTTP/1.1 303 See OtherLocation: /jobs/asd2b234c598 Addressable
self-contained
(there’s this thing with media types, but we won’t go into that)
Monday, 24 May 2010
Hypermedia As The Engine Of Application State
<html>...
<a rel=”nextjob” href=”/nextjob” />...
</html>
Monday, 24 May 2010
Hypermedia As The Engine Of Application State
<html>...
<a rel=”nextjob” href=”/nextjob” />...
</html>
Starting Grid
GET Finding job
Running jobSubmitting answer
GET
GET
POST
Monday, 24 May 2010