HACK INDIA 2013 | HYDERABAD
BLEEDING EDGE
TECHNOLOGY
USE SPARINGLY
Niranjan B Prithviraj
|niranjanprithviraj.com @nbprithv...
WHAT'S IN STORE TODAY?
1. Web Workers
2. WebRTC
3. Webkit Desktop Notifications
4. CREATEJS
5. Web Sockets
WEB WORKERS
Single threading bringing you down?
SOME CODE
"Main thread"
var worker = new Worker('/js/worker.js');
worker.addEventListener('message', function(e) {
console...
WHEN DO YOU USE THIS?
Worker scripts do not block UI scripts
Expensive tasks go to workers
Mimick concurrency
Safari, Chro...
WEBRTC
Flash? That's so 2003.
SOME CODE
<video style="width:600px;height:400px;"></video>
navigator.getUserMedia = navigator.getUserMedia ||
navigator.w...
WHEN DO YOU USE THIS?
Chrome
Firefox
tokbox.com/opentok/webrtc/demo/index.html
WEBKIT DESKTOP
NOTIFICATION
Pop-ups are cool again.
SOME CODE
function notify() {
var havePermission = window.webkitNotifications.checkPermission();
if (havePermission == 0) ...
WHEN DO YOU USE THIS?
Chrome
Safari
CREATEJS
Animation, Sound, Assets management
SOME CODE
<canvas id="myCanvas" width="500" height="500"></canvas>
<script src="http://code.createjs.com/createjs-2013.05....
WHEN DO YOU USE THIS?
Smooth animations
Assets loading
Games
WEB SOCKETS
Quit long polling.
SOME CODE
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io.connect('ws://localhost:3000/websocket_...
WHEN DO YOU USE THIS?
Safari
Chrome
Firefox
Browser-that-shall-not-be-named
THE END
NIRANJAN B PRITHVIRAJ
|niranjanprithviraj.com @nbprithv
bit.ly/hack2013-bet
github.com/nbprithv/openhack2013-decks...
Upcoming SlideShare
Loading in …5
×

Bleeding edge web stuff

1,740 views

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,740
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Bleeding edge web stuff

  1. 1. HACK INDIA 2013 | HYDERABAD BLEEDING EDGE TECHNOLOGY USE SPARINGLY Niranjan B Prithviraj |niranjanprithviraj.com @nbprithv bit.ly/hack2013-bet github.com/nbprithv/openhack2013-decks
  2. 2. WHAT'S IN STORE TODAY? 1. Web Workers 2. WebRTC 3. Webkit Desktop Notifications 4. CREATEJS 5. Web Sockets
  3. 3. WEB WORKERS Single threading bringing you down?
  4. 4. SOME CODE "Main thread" var worker = new Worker('/js/worker.js'); worker.addEventListener('message', function(e) { console.log(e.data); }, false); worker.postMessage({'cmd':'start'}); worker.postMessage({'cmd':'stop'}); worker.postMessage({'cmd':'get'}); "Worker thread" self.addEventListener('message', function(e) { self.postMessage({'msg':'WORKER STARTED'}); }, false);
  5. 5. WHEN DO YOU USE THIS? Worker scripts do not block UI scripts Expensive tasks go to workers Mimick concurrency Safari, Chrome, Firefox, Opera
  6. 6. WEBRTC Flash? That's so 2003.
  7. 7. SOME CODE <video style="width:600px;height:400px;"></video> navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia; var constraints = {audio: true, video: true}; var video = document.querySelector("video"); function successCallback(stream) { window.stream = stream; // stream available to console if (window.URL) { video.src = window.URL.createObjectURL(stream); } else { video.src = stream; } video.play(); } function errorCallback(error){ console.log("navigator.getUserMedia error: ", error); } navigator.getUserMedia(constraints, successCallback, errorCallback);
  8. 8. WHEN DO YOU USE THIS? Chrome Firefox tokbox.com/opentok/webrtc/demo/index.html
  9. 9. WEBKIT DESKTOP NOTIFICATION Pop-ups are cool again.
  10. 10. SOME CODE function notify() { var havePermission = window.webkitNotifications.checkPermission(); if (havePermission == 0) { // 0 is PERMISSION_ALLOWED var notification = window.webkitNotifications.createNotification( 'http://localhost:3000/notifications', 'Chrome notification!', 'Ola!' ); notification.show(); } else { window.webkitNotifications.requestPermission(); } }
  11. 11. WHEN DO YOU USE THIS? Chrome Safari
  12. 12. CREATEJS Animation, Sound, Assets management
  13. 13. SOME CODE <canvas id="myCanvas" width="500" height="500"></canvas> <script src="http://code.createjs.com/createjs-2013.05.14.min.js"></script> var stage = new createjs.Stage("myCanvas"); vck2013-2.pngar ball = new createjs.Shape(); ball.addEventListener("click", handleClick); ball.graphics.beginFill("#000").drawCircle(0, 0, 50); ball.x = 50; ball.y = 200; stage.addChild(ball); stage.update();
  14. 14. WHEN DO YOU USE THIS? Smooth animations Assets loading Games
  15. 15. WEB SOCKETS Quit long polling.
  16. 16. SOME CODE <script src="/socket.io/socket.io.js"></script> <script> var socket = io.connect('ws://localhost:3000/websocket_res'); socket.on('news', function (data) { console.log(data); socket.emit('my other event', { my: 'data' }); }); </script>
  17. 17. WHEN DO YOU USE THIS? Safari Chrome Firefox Browser-that-shall-not-be-named
  18. 18. THE END NIRANJAN B PRITHVIRAJ |niranjanprithviraj.com @nbprithv bit.ly/hack2013-bet github.com/nbprithv/openhack2013-decks Brought to you by reveal.js

×