Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
PEOPLE DON'T GIVE A
F**K OF JAVASCRIPT
Aurelio De Rosa
Warsaw, Poland - 20 April 2015
WEB & APP DEVELOPER
CONTRIBUTE(D) TO
...
jQuery
CanIUse
PureCSS
WRITE(D) FOR
...
SitePoint
Tuts+
.NET megazine
php [archit...
AUTHORED BOOKS
JQUERY IN ACTION (3RD EDITION) INSTANT JQUERY SELECTORS
(Shameless self-promotion!)
WHO ARE YOUR USERS?
3 QUESTIONS FOR YOU
1. Do you think they understand programming languages?
2. Do you think they know what JavaScript is?
3...
...BUT I'M A DEVELOPER!
TASK
EXPERIENCE
“I'm a Java developer and I don't think I would
trust a PHP developer enough to teach me
something about the web”
— Anonym...
“There are only two kinds of languages: the ones
people complain about and the ones nobody
uses”
— Bjarne Stroustrup
“Pick one that feels right to you, and start
building things. That's all that matters.”
— Jeffrey Way
LET'S WRITE BETTER
JAVASCRIPT
PATTERN OF THE NEXT PART
What
Use Cases
Methods, Properties and Events
Example
Browsers Support (Desktop and Mobile)
Use i...
...Better for Developers
PERFORMANCE
MATTERS!
Reference:http://torbit.com/blog/2012/09/19/some-interesting-performance-statistics/
Reference:http://torbit.com/blog/2012/09/19/some-interesting-performance-statistics/
“A Bing study found that a 10ms increase in page
load time costs the site $250K in revenue
annually.”
— Rob Trace, David W...
LESSON:
TEST AND IMPROVE YOUR WEBSITE'S
PERFORMANCE
HOW WE USE TO TEST PERFORMANCE
DON'T BELIEVE ME? LOOK AT THIS SNIPPET
var startTime = Date.now();
// A time consuming function
foo();
var test1 = Date.no...
WHAT'S WRONG WITH DATE.NOW()?
1. It is not monotonically increasing
2. Milliseconds precision
3. Precision of this timesta...
OK, I GOT IT. NOW WHAT?
HIGH RESOLUTION TIME
API
WHAT IT DOES?
Allows to accurately retrieve the number of milliseconds from
the navigationStart attribute (belongs to the
...
USE CASES
Work with animation at high FPS rate
Ensure a perfect audio-video synchronization
METHODS
The only method exposed is now().
EXAMPLE
var startTime = performance.now();
// A time consuming function
foo();
var test1 = performance.now();
// Another t...
BROWSERS SUPPORT
DESKTOP BROWSERS SUPPORT
Explorer Chrome Safari Firefox Opera
10+ 20+(-webkit)
24+
8+ 15+ 15+
Dataupdatedto18thApril2015
MOBILE BROWSERS SUPPORT
Explorer Android Chrome Safari Firefox Opera*
10+ 4.4+ 24+ 8
8.1+(None)
15+ None
Dataupdatedto18th...
HOW TO USE IT NOW
window.performance = window.performance || {};
performance.now = performance.now ||
                  fu...
DEMO
Test 1: Count until 100000
Test 2: Count until 1000000
Run demo
Alldemoscanbefoundatandarepartofmy .HTML5APIdemosrepo...
TOO MANY VARS!
USER TIMING API
WHAT IT DOES?
Allows to accurately measure and store performance of a
JavaScript code
USE CASES
Performance testing
PROPERTIES
name
entryType
startTime
duration
METHODS
mark()
clearMarks()
measure()
clearMeasures()
getEntriesByType()
getEntriesByName()
EXAMPLE 1/2
// store the start and the end time of foo()
performance.mark('startTime1');
foo();
performance.mark('endTime1...
EXAMPLE 2/2
perfMeasures = performance.getEntriesByType('measure');
// Prints the measures calculated
for (var i = 0; i < ...
BROWSERS SUPPORT
DESKTOP BROWSERS SUPPORT
Explorer Chrome Safari Firefox Opera
10+ 25+ None None 15+
Dataupdatedto18thApril2015
MOBILE BROWSERS SUPPORT
Explorer Android Chrome Safari Firefox Opera
10+ 4.4+ 25+ None None None
Dataupdatedto18thApril2015
HOW TO USE IT NOW
usertiming.js
DEMO
Test 1: Count until 100000
Test 2: Count until 1000000
Run demo
Alldemoscanbefoundatandarepartofmy .HTML5APIdemosrepo...
IS IT ONLY THAT?
Navigation Timing API
Resource Timing API
Frame Timing
and much more Editor's Drafts
DEMO NAVIGATION TIMING API
TIMING INFO
navigationStart: 1432396846180
unloadEventStart: 1432396846189
unloadEventEnd: 1432...
DEMO RESOURCE TIMING API
initiatorType: img
redirectStart: 0
redirectEnd: 0
fetchStart: 83.92900001490489
domainLookupStar...
...Better for Devices
PAGE VISIBILITY API
WHAT IT DOES?
Provides information about the page visibility's status
Fires events about changes of the page visibility's ...
USE CASES
Stop sending requests to the server for updates
Pause a video or a song
Stop the time counter of an intermediate...
PROPERTIES
hidden
visibilityState (hidden, visible, prerender, unloaded)
EVENTS
The only event exposed is visibilitychange.
EXAMPLE
var views = 0;
function countViews() {
   if (!document.hidden) {
      views++;
      console.log('Visit ' + view...
BROWSERS SUPPORT
DESKTOP BROWSERS SUPPORT
Explorer Chrome* Safari Firefox Opera*
10+ 14+(-webkit)
33+
6.1+ 10+(-moz)
18+
12.10+
15+(-webkit...
MOBILE BROWSERS SUPPORT
Explorer Android Chrome Safari Firefox Opera
10+ 4.4+(-webkit) 13+(-webkit)
33+
7.0+ 10+(-moz)
18+...
HOW TO USE IT NOW
visibly.js
Visibility.js
DEMO
Run demo
Alldemoscanbefoundatandarepartofmy .HTML5APIdemosrepository
BATTERY STATUS API
WHAT IT DOES?
Provides information about the system's battery charge level
Fires events about changes of the battery level...
USE CASES
Slow down a process
Save changes more frequently to prevent data loss
Deny to start a critical and time consumin...
METHODS
The only method exposed is getBattery().
PROPERTIES
charging
chargingTime
dischargingTime
level
EVENTS
chargingchange
chargingtimechange
dischargingtimechange
levelchange
EXAMPLE
navigator.getBattery().then(function(battery) {
   // Print if battery is charging or not
   console.log("The devi...
BROWSERS SUPPORT
DESKTOP BROWSERS SUPPORT
Explorer Chrome Safari Firefox Opera
None 37*
38+
None 10+**(-moz)
16+**
25+
Dataupdatedto18thApr...
MOBILE BROWSERS SUPPORT
Explorer Android Chrome Safari Firefox Opera
None 40+ 37*
38+
None 10+**(-moz)
16+**
None
Dataupda...
HOW TO USE IT NOW
NO POLYFILL AVAILABLE
DEMO
Run demo
Alldemoscanbefoundatandarepartofmy .HTML5APIdemosrepository
...Better for Users
VIBRATION API
WHAT IT DOES?
Provides tactile feedback
USE CASES
Vibrate on an explosion in a movie
Vibrate when someone punches you in a fighting game
Vibrate when in a racing game a car crashes
METHODS
The only method exposed is vibrate().
EXAMPLE
// Vibrate once for 1 second
navigator.vibrate(1000);
// Vibrate twice. One time for 1 second,
// then a pause of ...
BROWSERS SUPPORT
DESKTOP BROWSERS SUPPORT
Explorer Chrome Safari Firefox Opera
None 30+*
32+
None 11+(-moz)
16+
17+*
19+
Dataupdatedto18thA...
MOBILE BROWSERS SUPPORT
Explorer Android Chrome Safari Firefox Opera
None 4.4+ 30+*
32+
None 11+(-moz)
16+
None
Dataupdate...
HOW TO USE IT NOW
NO POLYFILL AVAILABLE
TO BE HONEST...
mozVibrate-polyfill
DEMO
Vibrate Once Vibrate Thrice Stop
Alldemoscanbefoundatandarepartofmy .HTML5APIdemosrepository
GETUSERMEDIA API
WHAT IT DOES?
Provides access to multimedia streams (video, audio, or both)
from local devices
USE CASES
Real-time communication (chat)
Recording tutorial or lesson for online courses
Home or work surveillance
METHODS
The only method exposed is getUserMedia().
EXAMPLE
<video id="video" autoplay="autoplay" controls></video>
var video = document.getElementById("video");
navigator.ge...
BROWSERS SUPPORT
DESKTOP BROWSERS SUPPORT
Explorer Chrome Safari Firefox Opera
None 21+(-webkit) None 17+(-moz) 12+
15+(None)
18+(-webkit)
...
MOBILE BROWSERS SUPPORT
Explorer Android Chrome Safari Firefox Opera
None 40+ 21+(-webkit) None 24+(-moz) None
Dataupdated...
HOW TO USE IT NOW
getUserMedia.js
DEMO
0:00
Play demo Stop demo
Alldemoscanbefoundatandarepartofmy .HTML5APIdemosrepository
MORE EXAMPLES?
AMBIENT LIGHT API
Provides information about the ambient light level in terms of lux
units, as measured by a light sensor ...
EXAMPLE
ImagescourtesyofPatrickCatanzariti( )@thatpatrickguy
PROXIMITY API
Events that provide information about the distance between a
device and an object, as measured by a proximit...
USE CASE
You're driving while listening to music using a web service. You
can stop the music with a gesture.
EXAMPLE
SO...
DO YOU LIKE APIS? OF COURSE YOU DO!
Device Orientation API
Geolocation API
Network Information API
Speech Synthesis API
Wa...
TO LEARN MORE...
ABOUT THESE AND OTHER APIS
HTML5 API DEMOS
https://github.com/AurelioDeRosa/HTML5-API-demos
A repository ...
CONCLUSIONS
Future of web development is bright
...but some browsers aren't prepared yet
Focus on goals, not technologies
...
THANK YOU!
QUESTIONS?
CONTACTS
Website:
Email:
Twitter:
www.audero.it
a.derosa@audero.it
@AurelioDeRosa
4Developers 2015: People don't give a f**k of JavaScript - Aurelio De Rosa
4Developers 2015: People don't give a f**k of JavaScript - Aurelio De Rosa
4Developers 2015: People don't give a f**k of JavaScript - Aurelio De Rosa
4Developers 2015: People don't give a f**k of JavaScript - Aurelio De Rosa
4Developers 2015: People don't give a f**k of JavaScript - Aurelio De Rosa
4Developers 2015: People don't give a f**k of JavaScript - Aurelio De Rosa
4Developers 2015: People don't give a f**k of JavaScript - Aurelio De Rosa
Upcoming SlideShare
Loading in …5
×

4Developers 2015: People don't give a f**k of JavaScript - Aurelio De Rosa

186 views

Published on

Speaker: Aurelio De Rosa

Language: English

People don't give a f**k of JavaScript. You shouldn't either. We are here to do stuff, whether you call them websites, web applications, web services or hybrid apps. People want to perform tasks, not listen to you talking about your favorite programming language. So, use the one you're more comfortable with and just release the next big thing. But, if your favorite language is JavaScript, let's write better code. What does better mean? Better for developers, better for devices, better for users.

In this talk, I'll describe some of the latest JavaScript APIs that can help you to develop great code. In a bunch of minutes, you'll see how to use:
- The High Resolution Time and the User Timing APIs to help yourself testing your code performances;
- The Page Visibility and the Battery Status APIs to take care of devices' resources;
- The Vibration and the getUserMedia APIs to create better User Experiences.

4Developers: http://4developers.org.pl/pl/

Published in: Software
  • Be the first to comment

  • Be the first to like this

4Developers 2015: People don't give a f**k of JavaScript - Aurelio De Rosa

  1. 1. PEOPLE DON'T GIVE A F**K OF JAVASCRIPT Aurelio De Rosa Warsaw, Poland - 20 April 2015
  2. 2. WEB & APP DEVELOPER CONTRIBUTE(D) TO ... jQuery CanIUse PureCSS WRITE(D) FOR ... SitePoint Tuts+ .NET megazine php [architect] megazine Telerik Web & PHP magazine
  3. 3. AUTHORED BOOKS JQUERY IN ACTION (3RD EDITION) INSTANT JQUERY SELECTORS (Shameless self-promotion!)
  4. 4. WHO ARE YOUR USERS?
  5. 5. 3 QUESTIONS FOR YOU 1. Do you think they understand programming languages? 2. Do you think they know what JavaScript is? 3. Do you think they care about JavaScript?
  6. 6. ...BUT I'M A DEVELOPER!
  7. 7. TASK
  8. 8. EXPERIENCE
  9. 9. “I'm a Java developer and I don't think I would trust a PHP developer enough to teach me something about the web” — Anonymous
  10. 10. “There are only two kinds of languages: the ones people complain about and the ones nobody uses” — Bjarne Stroustrup
  11. 11. “Pick one that feels right to you, and start building things. That's all that matters.” — Jeffrey Way
  12. 12. LET'S WRITE BETTER JAVASCRIPT
  13. 13. PATTERN OF THE NEXT PART What Use Cases Methods, Properties and Events Example Browsers Support (Desktop and Mobile) Use it today (Polyfills) Demo
  14. 14. ...Better for Developers
  15. 15. PERFORMANCE MATTERS!
  16. 16. Reference:http://torbit.com/blog/2012/09/19/some-interesting-performance-statistics/
  17. 17. Reference:http://torbit.com/blog/2012/09/19/some-interesting-performance-statistics/
  18. 18. “A Bing study found that a 10ms increase in page load time costs the site $250K in revenue annually.” — Rob Trace, David Walp Reference:http://blogs.msdn.com/b/ie/archive/2014/10/08/http-2-the-long-awaited-sequel.aspx
  19. 19. LESSON: TEST AND IMPROVE YOUR WEBSITE'S PERFORMANCE
  20. 20. HOW WE USE TO TEST PERFORMANCE
  21. 21. DON'T BELIEVE ME? LOOK AT THIS SNIPPET var startTime = Date.now(); // A time consuming function foo(); var test1 = Date.now(); // Another time consuming function bar(); var test2 = Date.now(); // Prints the results console.log("Test1: " + (test1 ‐ startTime)); console.log("Test2: " + (test2 ‐ test1));
  22. 22. WHAT'S WRONG WITH DATE.NOW()? 1. It is not monotonically increasing 2. Milliseconds precision 3. Precision of this timestamp varies between user agents 4. Different scope
  23. 23. OK, I GOT IT. NOW WHAT?
  24. 24. HIGH RESOLUTION TIME API
  25. 25. WHAT IT DOES? Allows to accurately retrieve the number of milliseconds from the navigationStart attribute (belongs to the ). Navigation Timing API
  26. 26. USE CASES Work with animation at high FPS rate Ensure a perfect audio-video synchronization
  27. 27. METHODS The only method exposed is now().
  28. 28. EXAMPLE var startTime = performance.now(); // A time consuming function foo(); var test1 = performance.now(); // Another time consuming function bar(); var test2 = performance.now(); // Print results console.log("Test1: " + (test1 ‐ startTime)); console.log("Test2: " + (test2 ‐ test1));
  29. 29. BROWSERS SUPPORT
  30. 30. DESKTOP BROWSERS SUPPORT Explorer Chrome Safari Firefox Opera 10+ 20+(-webkit) 24+ 8+ 15+ 15+ Dataupdatedto18thApril2015
  31. 31. MOBILE BROWSERS SUPPORT Explorer Android Chrome Safari Firefox Opera* 10+ 4.4+ 24+ 8 8.1+(None) 15+ None Dataupdatedto18thApril2015 *InthiscaseOperastandsforOperaMini
  32. 32. HOW TO USE IT NOW window.performance = window.performance || {}; performance.now = performance.now ||                   function() { return Date.now(); };
  33. 33. DEMO Test 1: Count until 100000 Test 2: Count until 1000000 Run demo Alldemoscanbefoundatandarepartofmy .HTML5APIdemosrepository
  34. 34. TOO MANY VARS!
  35. 35. USER TIMING API
  36. 36. WHAT IT DOES? Allows to accurately measure and store performance of a JavaScript code
  37. 37. USE CASES Performance testing
  38. 38. PROPERTIES name entryType startTime duration
  39. 39. METHODS mark() clearMarks() measure() clearMeasures() getEntriesByType() getEntriesByName()
  40. 40. EXAMPLE 1/2 // store the start and the end time of foo() performance.mark('startTime1'); foo(); performance.mark('endTime1') // store the start and the end time of bar() performance.mark('startTime2'); bar(); performance.mark('endTime2'); // store the differences of the timings performance.measure('durationTime1', 'startTime1', 'endTime1'); performance.measure('durationTime2', 'startTime2', 'endTime2');
  41. 41. EXAMPLE 2/2 perfMeasures = performance.getEntriesByType('measure'); // Prints the measures calculated for (var i = 0; i < perfMeasures.length; i++) {    console.log(       'Name: ' + perfMeasures[i].name + ' ‐ ' +       'Duration: ' + perfMeasures[i].duration    ); }
  42. 42. BROWSERS SUPPORT
  43. 43. DESKTOP BROWSERS SUPPORT Explorer Chrome Safari Firefox Opera 10+ 25+ None None 15+ Dataupdatedto18thApril2015
  44. 44. MOBILE BROWSERS SUPPORT Explorer Android Chrome Safari Firefox Opera 10+ 4.4+ 25+ None None None Dataupdatedto18thApril2015
  45. 45. HOW TO USE IT NOW usertiming.js
  46. 46. DEMO Test 1: Count until 100000 Test 2: Count until 1000000 Run demo Alldemoscanbefoundatandarepartofmy .HTML5APIdemosrepository
  47. 47. IS IT ONLY THAT? Navigation Timing API Resource Timing API Frame Timing and much more Editor's Drafts
  48. 48. DEMO NAVIGATION TIMING API TIMING INFO navigationStart: 1432396846180 unloadEventStart: 1432396846189 unloadEventEnd: 1432396846189 redirectStart: 0 redirectEnd: 0 fetchStart: 1432396846181 domainLookupStart: 1432396846181 domainLookupEnd: 1432396846181 connectStart: 1432396846181 connectEnd: 1432396846181 secureConnectionStart: 0
  49. 49. DEMO RESOURCE TIMING API initiatorType: img redirectStart: 0 redirectEnd: 0 fetchStart: 83.92900001490489 domainLookupStart: 83.92900001490489 domainLookupEnd: 83.92900001490489 connectStart: 83.92900001490489 connectEnd: 83.92900001490489 secureConnectionStart: 0 requestStart: 140.37000003736466 responseStart: 144.170000043232 responseEnd: 151.20600000955164 name: http://localhost/people-dont-give-a-fuck-of-
  50. 50. ...Better for Devices
  51. 51. PAGE VISIBILITY API
  52. 52. WHAT IT DOES? Provides information about the page visibility's status Fires events about changes of the page visibility's status
  53. 53. USE CASES Stop sending requests to the server for updates Pause a video or a song Stop the time counter of an intermediate ads page
  54. 54. PROPERTIES hidden visibilityState (hidden, visible, prerender, unloaded)
  55. 55. EVENTS The only event exposed is visibilitychange.
  56. 56. EXAMPLE var views = 0; function countViews() {    if (!document.hidden) {       views++;       console.log('Visit ' + views);    } } // Runs the function the first time countViews(); // Listens for visibilitychange document.addEventListener('visibilitychange', countViews);
  57. 57. BROWSERS SUPPORT
  58. 58. DESKTOP BROWSERS SUPPORT Explorer Chrome* Safari Firefox Opera* 10+ 14+(-webkit) 33+ 6.1+ 10+(-moz) 18+ 12.10+ 15+(-webkit) 20+ Dataupdatedto18thApril2015
  59. 59. MOBILE BROWSERS SUPPORT Explorer Android Chrome Safari Firefox Opera 10+ 4.4+(-webkit) 13+(-webkit) 33+ 7.0+ 10+(-moz) 18+ None Dataupdatedto18thApril2015
  60. 60. HOW TO USE IT NOW visibly.js Visibility.js
  61. 61. DEMO Run demo Alldemoscanbefoundatandarepartofmy .HTML5APIdemosrepository
  62. 62. BATTERY STATUS API
  63. 63. WHAT IT DOES? Provides information about the system's battery charge level Fires events about changes of the battery level or status
  64. 64. USE CASES Slow down a process Save changes more frequently to prevent data loss Deny to start a critical and time consuming process
  65. 65. METHODS The only method exposed is getBattery().
  66. 66. PROPERTIES charging chargingTime dischargingTime level
  67. 67. EVENTS chargingchange chargingtimechange dischargingtimechange levelchange
  68. 68. EXAMPLE navigator.getBattery().then(function(battery) {    // Print if battery is charging or not    console.log("The device's battery is " +       (battery.charging ? "" : "not") + " charging");    // Print the current battery level    console.log("The level of the battery is " +       (battery.level * 100) + "%"); });
  69. 69. BROWSERS SUPPORT
  70. 70. DESKTOP BROWSERS SUPPORT Explorer Chrome Safari Firefox Opera None 37* 38+ None 10+**(-moz) 16+** 25+ Dataupdatedto18thApril2015 *YouhavetoactivatetheflagExperimentalWebPlatformfeatures **Implementsanoldversionofthespecificationsthatdidn'tusepromisesbutexposedtheinformationthrough window.navigator.battery.
  71. 71. MOBILE BROWSERS SUPPORT Explorer Android Chrome Safari Firefox Opera None 40+ 37* 38+ None 10+**(-moz) 16+** None Dataupdatedto18thApril2015 *YouhavetoactivatetheflagExperimentalWebPlatformfeatures **Implementsanoldversionofthespecificationsthatdidn'tusepromisesbutexposedtheinformationthrough window.navigator.battery.
  72. 72. HOW TO USE IT NOW NO POLYFILL AVAILABLE
  73. 73. DEMO Run demo Alldemoscanbefoundatandarepartofmy .HTML5APIdemosrepository
  74. 74. ...Better for Users
  75. 75. VIBRATION API
  76. 76. WHAT IT DOES? Provides tactile feedback
  77. 77. USE CASES
  78. 78. Vibrate on an explosion in a movie
  79. 79. Vibrate when someone punches you in a fighting game
  80. 80. Vibrate when in a racing game a car crashes
  81. 81. METHODS The only method exposed is vibrate().
  82. 82. EXAMPLE // Vibrate once for 1 second navigator.vibrate(1000); // Vibrate twice. One time for 1 second, // then a pause of half a second, // and then vibrate for 2 seconds navigator.vibrate([1000, 500, 2000]); // Cancelling Vibrations navigator.vibrate(0); // Alternatively navigator.vibrate([]);
  83. 83. BROWSERS SUPPORT
  84. 84. DESKTOP BROWSERS SUPPORT Explorer Chrome Safari Firefox Opera None 30+* 32+ None 11+(-moz) 16+ 17+* 19+ Dataupdatedto18thApril2015 *YouhavetoactivatetheflagExperimentalWebPlatformfeatures
  85. 85. MOBILE BROWSERS SUPPORT Explorer Android Chrome Safari Firefox Opera None 4.4+ 30+* 32+ None 11+(-moz) 16+ None Dataupdatedto18thApril2015 *YouhavetoactivatetheflagExperimentalWebPlatformfeatures
  86. 86. HOW TO USE IT NOW NO POLYFILL AVAILABLE
  87. 87. TO BE HONEST... mozVibrate-polyfill
  88. 88. DEMO Vibrate Once Vibrate Thrice Stop Alldemoscanbefoundatandarepartofmy .HTML5APIdemosrepository
  89. 89. GETUSERMEDIA API
  90. 90. WHAT IT DOES? Provides access to multimedia streams (video, audio, or both) from local devices
  91. 91. USE CASES
  92. 92. Real-time communication (chat)
  93. 93. Recording tutorial or lesson for online courses
  94. 94. Home or work surveillance
  95. 95. METHODS The only method exposed is getUserMedia().
  96. 96. EXAMPLE <video id="video" autoplay="autoplay" controls></video> var video = document.getElementById("video"); navigator.getUserMedia(    {       video: true,       audio: true    },    function(stream) {       video.src = stream;       video.play();    },    function(error) {       console.log("Error: " + error.code);    } );
  97. 97. BROWSERS SUPPORT
  98. 98. DESKTOP BROWSERS SUPPORT Explorer Chrome Safari Firefox Opera None 21+(-webkit) None 17+(-moz) 12+ 15+(None) 18+(-webkit) Dataupdatedto18thApril2015
  99. 99. MOBILE BROWSERS SUPPORT Explorer Android Chrome Safari Firefox Opera None 40+ 21+(-webkit) None 24+(-moz) None Dataupdatedto18thApril2015
  100. 100. HOW TO USE IT NOW getUserMedia.js
  101. 101. DEMO 0:00 Play demo Stop demo Alldemoscanbefoundatandarepartofmy .HTML5APIdemosrepository
  102. 102. MORE EXAMPLES?
  103. 103. AMBIENT LIGHT API Provides information about the ambient light level in terms of lux units, as measured by a light sensor of a device. 0 ≤ value < 50: Dark environment, use light colors on a dark background 50 ≤ value < 10000: Normal environment value ≥ 10000: Very bright environment, use dark colors on a light background
  104. 104. EXAMPLE ImagescourtesyofPatrickCatanzariti( )@thatpatrickguy
  105. 105. PROXIMITY API Events that provide information about the distance between a device and an object, as measured by a proximity sensor.
  106. 106. USE CASE You're driving while listening to music using a web service. You can stop the music with a gesture. EXAMPLE
  107. 107. SO...
  108. 108. DO YOU LIKE APIS? OF COURSE YOU DO! Device Orientation API Geolocation API Network Information API Speech Synthesis API Wake Lock API Web Alarms API Web Notification API Web Speech API ...
  109. 109. TO LEARN MORE... ABOUT THESE AND OTHER APIS HTML5 API DEMOS https://github.com/AurelioDeRosa/HTML5-API-demos A repository I created and maintain where you can find information about many JavaScript and HTML5 APIs.
  110. 110. CONCLUSIONS Future of web development is bright ...but some browsers aren't prepared yet Focus on goals, not technologies Take care of performances Take care of devices' resources Take care of your users' experience
  111. 111. THANK YOU!
  112. 112. QUESTIONS?
  113. 113. CONTACTS Website: Email: Twitter: www.audero.it a.derosa@audero.it @AurelioDeRosa

×