JavaScript in the next generation

JavaScript, once a "toy" language is now driving the interfaces of the most popular sites on the web. We've come a long way from snowflakes drifting over a site around Christmas time, now creating powerful client side applications. But JavaScript can do more for us than taking the heat off the server. There is a new generation of interfaces emerging in our browsers that will allow us to do even more interesting stuff in the client side of our apps. This talk will cover some of the interesting integrations between browser and device that are becoming available to us through JavaScript. From existing APIs, such as Geolocation, to bleeding edge stuff like the Battery API (woo!) or getting input from cameras or microphones with getUserMedia, we'll discover how browsers in the near future will shape users' interactions with our apps.

Links to demos:
Device Orientation: http://philnash.github.com/rainbow/
getUserMedia: http://philnash.github.com/getUserMedia/
WebRTC: https://apprtc.appspot.com/

Transcript

1. JAVASCRIPT IN THE JAVASCRIPT IN THE NEXT GENERATION NEXT GENERATION
2. HELLO! HELLO! PHIL NASH PHIL NASH MINT MINTDIGITAL DIGITAL
3. http://stickygram.com http://stickygram.com
4. http://foldable.me http://foldable.me
5. WARNING WARNING
6. JAVASCRIPT IN THE JAVASCRIPT IN THE NEXT GENERATION NEXT GENERATION
7. JARRRRVASCRIPT JARRRRVASCRIPT
8. R R
9. (ARRR)R (ARRR)R
10. JAVASCRIPT KEEPS JAVASCRIPT KEEPS GETTING BETTER GETTING BETTER
11. BROWSERS KEEP BROWSERS KEEP GETTING BETTER GETTING BETTER
12. DEVICE APIS DEVICE APIS
13. WEB VS NATIVE WEB VS NATIVE
14. DEVICE APIS DEVICE APIS GEOLOCATION GEOLOCATION DEVICEORIENTATION AND DEVICEMOTION DEVICEORIENTATION AND DEVICEMOTION BATTERY API BATTERY API VIBRATION VIBRATION CAMERAS AND MICROPHONES CAMERAS AND MICROPHONES MORE! MORE! ☠ ☠ ☠ ☠ ☠ ☠ ☠ ☠ ☠ ☠ ☠ ☠
15. GEOLOCATION GEOLOCATION
16. GEOLOCATION if (navigator.geolocation){ navigator.geolocation.getCurrentPosition(function(p){ console.log(p.coords.latitude); console.log(p.coords.longitude); }); } 01. 02. 03. 04. 05. 06.
17. USES FOR GEOLOCATION USES FOR GEOLOCATION TREASURE MAPS AND DIRECTIONS TREASURE MAPS AND DIRECTIONS REPLACEMENT FOR APPLE MAPS REPLACEMENT FOR APPLE MAPS ☠ ☠ ☠ ☠
18. DEVICEORIENTATION DEVICEORIENTATION AND DEVICEMOTION AND DEVICEMOTION
19. DEVICEORIENTATION DEVICEORIENTATION
20. DEVICEORIENTATION if ('ondeviceorientation' in window){ window.addEventListener('deviceorientation', function(e){ console.log("Alpha: " + e.alpha); console.log("Beta: " + e.beta); console.log("Gamma: " + e.gamma); }, false); } 01. 02. 03. 04. 05. 06. 07.
21. DEVICEMOTION DEVICEMOTION
22. DEVICEMOTION if ('ondevicemotion' in window){ window.addEventListener('devicemotion', function(e){ console.log(e.acceleration.x); console.log(e.acceleration.y); console.log(e.acceleration.z); }, false); } 01. 02. 03. 04. 05. 06. 07.
23. DEMO DEMO
24. USES FOR DEVICEORIENTATION USES FOR DEVICEORIENTATION AND DEVICEMOTION AND DEVICEMOTION SHIP'S COMPASS AND SPEEDOMETER SHIP'S COMPASS AND SPEEDOMETER GAMES - WII CONTROLLER STYLE CONTROL GAMES - WII CONTROLLER STYLE CONTROL ☠ ☠ ☠ ☠
25. BATTERY API BATTERY API
26. BROWSER OS BROWSER OS
27. BATTERY API battery = navigator.battery battery.addEventListener("chargingchange", function(e) { console.log("Battery charging?: ", battery.charging); }, false); 01. 02. 03. 04.
28. USES FOR THE BATTERY API USES FOR THE BATTERY API RESTRICTING FEATURES AND PROCESSOR USAGE WHEN RESTRICTING FEATURES AND PROCESSOR USAGE WHEN BATTERY LEVELS ARE LOW. BATTERY LEVELS ARE LOW. ☠ ☠
29. VIBRATION API VIBRATION API
30. Our temporary implementation Our temporary implementation name was Vibrator API, but since it name was Vibrator API, but since it gave the wrong impression, we now gave the wrong impression, we now call it Vibration API call it Vibration API “ “
31. VIBRATION API navigator.mozVibrate(1000); navigator.mozVibrate([200, 100, 200, 100]); 01. 02.
32. CAMERAS AND CAMERAS AND MICROPHONES MICROPHONES
33. CAMERAS AND MICROPHONES if(navigator.getUserMedia){ navigator.getUserMedia( {video: true}, function(stream){ // do something... }, function(){ alert("Error"); } ) } 01. 02. 03. 04. 05. 06. 07. 08. 09.
34. CAMERAS AND MICROPHONES function streamSuccess(stream){ var video = document.getElementsByTagName('video')[0]; source = window.URL.createObjectURL(stream); video.src = stream; } 01. 02. 03. 04. 05.
35. WEBRTC WEBRTC
36. MORE DEMOS MORE DEMOS
37. MORE! MORE!
38. THE FUTURE THE FUTURE
39. THANKS THANKS PHIL NASH PHIL NASH @PHILNASH @PHILNASH