Yahoo! Hack India: Hyderabad 2013 | Bleeding Edge Webdev

2,001 views

Published on

Niranjan Prithiviraj sharing about Bleeding Edge Webdev

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,001
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Yahoo! Hack India: Hyderabad 2013 | Bleeding Edge Webdev

  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

×