• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Yahoo! Hack India: Hyderabad 2013 | Bleeding Edge Webdev
 

Yahoo! Hack India: Hyderabad 2013 | Bleeding Edge Webdev

on

  • 1,416 views

Niranjan Prithiviraj sharing about Bleeding Edge Webdev

Niranjan Prithiviraj sharing about Bleeding Edge Webdev

Statistics

Views

Total Views
1,416
Views on SlideShare
1,416
Embed Views
0

Actions

Likes
0
Downloads
2
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Yahoo! Hack India: Hyderabad 2013 | Bleeding Edge Webdev Yahoo! Hack India: Hyderabad 2013 | Bleeding Edge Webdev Presentation Transcript

    • HACK INDIA 2013 | HYDERABAD BLEEDING EDGE TECHNOLOGY USE SPARINGLY Niranjan B Prithviraj |niranjanprithviraj.com @nbprithv bit.ly/hack2013-bet github.com/nbprithv/openhack2013-decks
    • 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.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);
    • WHEN DO YOU USE THIS? Worker scripts do not block UI scripts Expensive tasks go to workers Mimick concurrency Safari, Chrome, Firefox, Opera
    • WEBRTC Flash? That's so 2003.
    • 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);
    • 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) { // 0 is PERMISSION_ALLOWED var notification = window.webkitNotifications.createNotification( 'http://localhost:3000/notifications', 'Chrome notification!', 'Ola!' ); notification.show(); } else { window.webkitNotifications.requestPermission(); } }
    • 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.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();
    • 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_res'); socket.on('news', function (data) { console.log(data); socket.emit('my other event', { my: 'data' }); }); </script>
    • 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 Brought to you by reveal.js