The Web of Tomorrow

The web is changing and new changes are coming.

How will the new RFCs will affect the web as we know it?
What technologies will raise again?
Is Ruby prepared for this changes?

I want to answer these questions and talk about new web technologies and how we need to change to adapt to this upcoming era.

From web sockets to WebRTC.
From distributed to decentralised.

The storm is coming… are you ready?

Transcript

2. @cuerbot elcuervo
8. The Past
9. Browsers
11. Communication
13. -AJAX
14. -AJAX -WebSockets
15. -AJAX -WebSockets -EventSource
16. and the camera?
20. Real Time Communication
22. MediaStreams
23. MediaStreams aka “let’s see that ugly face”
24. MediaStreams PeerConnection aka “let’s see that ugly face”
25. MediaStreams PeerConnection aka “let’s see that ugly face” aka “let them see that ugly face”
26. MediaStreams PeerConnection DataChannels aka “let’s see that ugly face” aka “let them see that ugly face”
27. MediaStreams PeerConnection DataChannels aka “let’s see that ugly face” aka “let them see that ugly face” aka “let’s share Game of Thrones”
29. What is it?
30. What is it? - Camera and/or mic access
31. What is it? - Camera and/or mic access - MediaStreams are synchronized between MediaStreamTracks
32. What is it? - Camera and/or mic access - MediaStreams are synchronized between MediaStreamTracks - Can be played in <audio> or <video> elements as objectURL
33. ... navigator.getUserMedia({ video: true, audio: true }, function(stream) { });
34. // Shim navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
35. ... navigator.getUserMedia({ video: true, audio: true }, function(stream) { });
36. ... function(stream) { window.URL = URL || webkitURL; var blob = URL.createObjectURL(stream); }
37. ... var video = document.createElement("video"); video.autoplay = true; video.src = blob; ...
38. DEMO TIME
39. DEMO TIME aka The power of 10:15 gin and tonic
41. Available out of the box in:
42. Open Source to the rescue!
43. https://github.com/addyosmani/getUserMedia.js/
44. Available out of the box in: all modern browsers and IE8+.
46. Everything based on LATEST implementation of WEBRTC from Google’s repo.
48. Available out of the box in:
49. What do we need?
50. -Signaling server XMPP, SIP, HTTP, etc What do we need?
51. -Signaling server XMPP, SIP, HTTP, etc -STUN server (optional) Find route to IP What do we need?
52. // Peer connection shim var PeerConnection = webkitRTCPeerConnection;
53. var out = new PeerConnection(null); out.addStream(stream);
54. client 1 app app client 2
55. client 1 app app HTTP HTTP client 2
56. client 1 app app HTTP Signaling (HTTP, SIP, XMPP, etc) HTTP Signaling (HTTP, SIP, XMPP, etc) client 2
57. client 1 app app HTTP Signaling (HTTP, SIP, XMPP, etc) HTTP Signaling (HTTP, SIP, XMPP, etc) P2P client 2
58. client 2 client 1 app
59. client 2 client 1 app
60. client 2 client 1 app
61. client 2 client 1 app websockets
62. client 2 client 1 app
63. client 2 client 1 navigator.getUserMedia({ video: true, audio: true }, function(stream) { }); app
64. client 2 client 1 out.addStream(stream); out.createOffer( function(session) { out.setLocalDescription( session ); sendOffer(); } ); app
65. client 2 client 1 O app
66. client 2 client 1 O app
67. client 2 client 1 app in.setRemoteDescription(offer); in.createAnswer( function(session) { in.setLocalDescription( session ); sendAnswer(); } );
68. client 2 client 1 A app
69. client 2 client 1 A app
70. client 2 client 1 C1 app
71. client 2 client 1 C1 app
72. client 2 client 1 Cn app
73. client 2 client 1 Cn app
74. client 2 client 1 app P2P
75. client 1 P2P app client 2
76. client 1 P2P app client 2 ✔
77. DEMO TIME
78. DEMO TIME aka The power of beer and friends
80. Recap
82. Local Session Description
83. Local Session Description what is the local configuration?
84. Local Session Description what is the local configuration? Remote Session Description
85. Local Session Description what is the local configuration? Remote Session Description what is the remote configuration?
86. Local Session Description what is the local configuration? Remote Session Description what is the remote configuration? Remote Transport Candidates
87. Local Session Description what is the local configuration? Remote Session Description what is the remote configuration? Remote Transport Candidates how to connect to the remote peer?
91. Low Latency
92. Low Latency aka Fast and Furious
93. Low Latency aka Fast and Furious High Throughput
94. Low Latency aka Fast and Furious High Throughput aka send ALL the messages
95. Low Latency aka Fast and Furious High Throughput aka send ALL the messages Unreliable send
96. Low Latency aka Fast and Furious High Throughput aka send ALL the messages Unreliable send aka possible loss (“Call me maybe”)
97. var channel = out.createDataChannel("chat"); channel.send({...});
98. var fn = function(event) { var message = event.data; ... } in.addEventListener("datachannel", fn);
99. Practical uses
101. How can it be done? app client 1 client 2
102. How can it be done? app client 1 client 2
103. How can it be done? app client 1 client 2 P2P + DataChannel
105. How can it be done? app client 3 client 4 client 1 client 2
106. How can it be done? app client 3 client 4 client 1 client 2
107. How can it be done? app client 3 client 4 client 1 client 2
109. How can it be done?
110. app How can it be done?
111. app How can it be done?
112. app 40ms How can it be done?
113. app 40ms How can it be done?
114. app 40ms 200ms How can it be done?
115. app 40ms 200ms 30ms How can it be done?
116. app 40ms 200ms 30ms How can it be done?
117. app 40ms 200ms 30ms How can it be done? 50ms
118. How about Ruby?
119. How about Ruby? - No WebRTC implementation available (yet)
120. How about Ruby? - No WebRTC implementation available (yet) - Native C++ API (libjingle)
121. How about Ruby? - No WebRTC implementation available (yet) - Native C++ API (libjingle) - Multiple signaling options (goliath, websocket-rack, rack-stream)
122. How about Ruby? - No WebRTC implementation available (yet) - Native C++ API (libjingle) - Multiple signaling options (goliath, websocket-rack, rack-stream) interested? ping me
123. One more thing
128. Not Free 28% Partially Free 43% Free 30% Woldwide Internet Freedom http://www.freedomhouse.org/sites/default/files/inline_images/FOTN%202012%20FINAL.pdf
129. How can it be done?
131. non-free
132. non-free
133. non-free
134. non-free
135. free non-free
136. free non-free ✔
137. free non-free ✔
138. free non-free non-free ✔
139. free non-free non-free non-free non-free non-free non-free ✔
141. You choose the future of the web
142. The storm is coming… are you ready?
143. Thank you
144. Questions?
145. @cuerbot elcuervo