Upgrade to Pro — share decks privately, control downloads, hide ads and more …

JavaScript in the next generation

8ec1383b240b5ba15ffb9743fceb3c0e?s=47 Phil Nash
October 05, 2012

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/

8ec1383b240b5ba15ffb9743fceb3c0e?s=128

Phil Nash

October 05, 2012
Tweet

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