The document discusses bleeding edge web technologies including Web Workers, WebRTC, Webkit Desktop Notifications, CreateJS, and Web Sockets. It provides code examples and use cases for each technology. The presentation aims to familiarize developers with these technologies that can be used to improve performance and build rich applications by leveraging things like parallel processing, real-time communication, desktop notifications, animation, and persistent connections.

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