Your SlideShare is downloading. ×
Yahoo! Hack India: Hyderabad 2013 | Bleeding Edge Webdev
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Yahoo! Hack India: Hyderabad 2013 | Bleeding Edge Webdev

1,586

Published on

Niranjan Prithiviraj sharing about Bleeding Edge Webdev

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
1,586
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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. WHAT'S IN STORE TODAY? 1. Web Workers 2. WebRTC 3. Webkit Desktop Notifications 4. CREATEJS 5. Web Sockets
  • 3. WEB WORKERS Single threading bringing you down?
  • 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. WHEN DO YOU USE THIS? Worker scripts do not block UI scripts Expensive tasks go to workers Mimick concurrency Safari, Chrome, Firefox, Opera
  • 6. WEBRTC Flash? That's so 2003.
  • 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. WHEN DO YOU USE THIS? Chrome Firefox tokbox.com/opentok/webrtc/demo/index.html
  • 9. WEBKIT DESKTOP NOTIFICATION Pop-ups are cool again.
  • 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. WHEN DO YOU USE THIS? Chrome Safari
  • 12. CREATEJS Animation, Sound, Assets management
  • 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. WHEN DO YOU USE THIS? Smooth animations Assets loading Games
  • 15. WEB SOCKETS Quit long polling.
  • 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. WHEN DO YOU USE THIS? Safari Chrome Firefox Browser-that-shall-not-be-named
  • 18. THE END NIRANJAN B PRITHVIRAJ |niranjanprithviraj.com @nbprithv bit.ly/hack2013-bet github.com/nbprithv/openhack2013-decks Brought to you by reveal.js

×