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