People don't give a f**k of JavaScript - London Web Standards July 2014

People don't give a f**k of JavaScript - London Web Standards July 2014

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

In this talk, I'll describe some of the latest HTML5 APIs, many of which still experimental, that can help you 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 APIs to take care of devices' resources
- The Vibration and the GetUserMedia APIs to create better User Experiences

8b01a8b4d7a0a9079a4e97b1ddedbe56?s=128

Aurelio De Rosa

July 21, 2014
Tweet

Transcript

  1. PEOPLE DON'T GIVE A F**K OF JAVASCRIPT Aurelio De Rosa

    London, United Kingdom - 21 July 2014
  2. WEB & APP DEVELOPER CONTRIBUTE(D) TO ... jQuery CanIUse PureCSS

    WRITE FOR SitePoint.com Tuts+.com ModernWeb.com (formerly FlippinAwesome.com)
  3. AUTHORED BOOKS JQUERY IN ACTION (3RD EDITION) INSTANT JQUERY SELECTORS

    (Shameless self-promotion!)
  4. None
  5. WHO ARE YOUR USERS?

  6. None
  7. None
  8. None
  9. None
  10. 3 QUESTIONS FOR YOU 1. Do you think they understand

    programming languages? 2. Do you think they know what's JavaScript? 3. Do you think they care about JavaScript?
  11. ...BUT I'M A DEVELOPER!

  12. None
  13. TASK

  14. EXPERIENCE

  15. “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
  16. “There are only two kinds of languages: the ones people

    complain about and the ones nobody uses” — Bjarne Stroustrup
  17. “Pick one that feels right to you, and start building

    things. That's all that matters.” — Jeffrey Way
  18. None
  19. LET'S WRITE BETTER JAVASCRIPT

  20. PATTERN OF THE NEXT PART What Use Cases Methods, Properties

    and Events Example Browsers Support (Desktop and Mobile) Use it today (Polyfills) Demo (live)
  21. ...Better for Developers

  22. PERFORMANCE MATTERS!

  23. Reference: http://torbit.com/blog/2012/09/19/some-interesting-performance-statistics/

  24. Reference: http://torbit.com/blog/2012/09/19/some-interesting-performance-statistics/

  25. LESSON: TEST AND IMPROVE YOUR WEBSITE'S PERFORMANCE

  26. HOW WE USE TO TEST PERFORMANCE

  27. DON'T BELIEVE ME? LOOK AT THIS SNIPPET v a r

    s t a r t T i m e = D a t e . n o w ( ) ; / / A t i m e c o n s u m i n g f u n c t i o n f o o ( ) ; v a r t e s t 1 = D a t e . n o w ( ) ; / / A n o t h e r t i m e c o n s u m i n g f u n c t i o n b a r ( ) ; v a r t e s t 2 = D a t e . n o w ( ) ; / / P r i n t r e s u l t s c o n s o l e . d e b u g ( " T e s t 1 t i m e : " + ( t e s t 1 - s t a r t T i m e ) ) ; c o n s o l e . d e b u g ( " T e s t 2 t i m e : " + ( t e s t 2 - t e s t 1 ) ) ;
  28. 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
  29. OK, I GOT IT. NOW WHAT?

  30. HIGH RESOLUTION TIME API

  31. WHAT IT DOES? Allows to accurately retrieve the number of

    milliseconds from the n a v i g a t i o n S t a r t attribute (belongs to the ). Navigation Timing API
  32. USE CASES Work with animation at high FPS rate Ensure

    a perfect audio-video synchronization
  33. METHODS The only method exposed is n o w (

    ) .
  34. EXAMPLE v a r s t a r t T

    i m e = p e r f o r m a n c e . n o w ( ) ; / / A t i m e c o n s u m i n g f u n c t i o n f o o ( ) ; v a r t e s t 1 = p e r f o r m a n c e . n o w ( ) ; / / A n o t h e r t i m e c o n s u m i n g f u n c t i o n b a r ( ) ; v a r t e s t 2 = p e r f o r m a n c e . n o w ( ) ; / / P r i n t r e s u l t s c o n s o l e . d e b u g ( " T e s t 1 t i m e : " + ( t e s t 1 - s t a r t T i m e ) ) ; c o n s o l e . d e b u g ( " T e s t 2 t i m e : " + ( t e s t 2 - t e s t 1 ) ) ;
  35. BROWSERS SUPPORT

  36. DESKTOP BROWSERS SUPPORT Explorer Chrome* Safari Firefox Opera* 10+ 20+

    (-webkit) 24+ None 15+ 15+ Data updated to 19th July 2014 * As for now, p e r f o r m a n c e . n o w ( ) in Chrome and Opera on Windows returns a time almost always near the very start or the very end of a millisecond ( ). Chrome issue #158234
  37. MOBILE BROWSERS SUPPORT Explorer Android Chrome Safari Firefox Opera* 10+

    4.4+ 24+ None 15+ None Data updated to 19th July 2014 * Opera in the Mobile Browsers support tables stand for Opera Mini
  38. HOW TO USE IT NOW w i n d o

    w . p e r f o r m a n c e = w i n d o w . p e r f o r m a n c e | | { } ; p e r f o r m a n c e . n o w = p e r f o r m a n c e . n o w | | f u n c t i o n ( ) { r e t u r n D a t e . n o w ( ) ; } ;
  39. TOO MANY VARS!

  40. USER TIMING API

  41. WHAT IT DOES? Allows to accurately measure and store performance

    of a JavaScript code
  42. USE CASES Performance testing

  43. METHODS m a r k ( ) c l e

    a r M a r k s ( ) m e a s u r e ( ) c l e a r M e a s u r e s ( ) g e t E n t r i e s B y T y p e ( ) g e t E n t r i e s B y N a m e ( )
  44. PROPERTIES n a m e e n t r y

    T y p e s t a r t T i m e d u r a t i o n
  45. EXAMPLE p e r f o r m a n

    c e . m a r k ( ' s t a r t T i m e 1 ' ) ; f o o ( ) ; p e r f o r m a n c e . m a r k ( ' e n d T i m e 1 ' ) p e r f o r m a n c e . m a r k ( ' s t a r t T i m e 2 ' ) ; b a r ( ) ; p e r f o r m a n c e . m a r k ( ' e n d T i m e 2 ' ) ; p e r f o r m a n c e . m e a s u r e ( ' d u r a t i o n T i m e 1 ' , ' s t a r t T i m e 1 ' , ' e n d T i m e 1 ' ) ; p e r f o r m a n c e . m e a s u r e ( ' d u r a t i o n T i m e 2 ' , ' s t a r t T i m e 2 ' , ' e n d T i m e 2 ' ) ; p e r f M e a s u r e s = p e r f o r m a n c e . g e t E n t r i e s B y T y p e ( ' m e a s u r e ' ) ; f o r ( v a r i = 0 ; i < p e r f M e a s u r e s . l e n g t h ; i + + ) { c o n s o l e . l o g ( ' N a m e : ' + p e r f M e a s u r e s [ i ] . n a m e + ' - ' + ' D u r a t i o n : ' + p e r f M e a s u r e s [ i ] . d u r a t i o n + ' \ n ' ) ; }
  46. BROWSERS SUPPORT

  47. DESKTOP BROWSERS SUPPORT Explorer Chrome Safari Firefox Opera 10+ 25+

    None None 15+ Data updated to 19th July 2014
  48. MOBILE BROWSERS SUPPORT Explorer Android Chrome Safari Firefox Opera 10+

    4.4+ 25+ None None None Data updated to 19th July 2014
  49. HOW TO USE IT NOW usertiming.js

  50. ...Better for Devices

  51. PAGE VISIBILITY API

  52. WHAT IT DOES? Provides information about the page visibility's status

    Fires events about changes of the page visibility's status
  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. PROPERTIES h i d d e n v i s

    i b i l i t y S t a t e (h i d d e n , v i s i b l e , p r e r e n d e r , u n l o a d e d )
  55. EVENTS The only event exposed is v i s i

    b i l i t y c h a n g e .
  56. EXAMPLE v a r v i e w s =

    0 ; v a r c o u n t V i e w s = f u n c t i o n ( ) { i f ( d o c u m e n t . h i d d e n = = = f a l s e ) { v i e w s + + ; c o n s o l e . l o g ( " V i s i t " + v i e w s ) ; } } ; / / R u n t h e f u n c t i o n t h e f i r s t t i m e c o u n t V i e w s ( ) ; / / L i s t e n f o r v i s i b i l i t y c h a n g e d o c u m e n t . a d d E v e n t L i s t e n e r ( " v i s i b i l i t y c h a n g e " , c o u n t V i e w s , f a l s e ) ;
  57. BROWSERS SUPPORT

  58. DESKTOP BROWSERS SUPPORT Explorer Chrome Safari Firefox Opera 10+ 14+

    (-webkit) 33+ 6.1+ 10+ (-moz) 18+ 12.10+ 15+ (-webkit) 20+ Data updated to 19th July 2014
  59. MOBILE BROWSERS SUPPORT Explorer Android Chrome Safari Firefox Opera 10+

    4.4+ (-webkit) 13+ (-webkit) 33+ 7.0+ 10+ (-moz) 18+ None Data updated to 19th July 2014
  60. HOW TO USE IT NOW visibly.js Visibility.js

  61. BATTERY STATUS API

  62. WHAT IT DOES? Provides information about the system's battery charge

    level Fires events about changes of the battery level or status
  63. USE CASES Slow down a process Save changes more frequently

    to prevent data loss Deny to start a critical and time consuming process
  64. PROPERTIES c h a r g i n g c

    h a r g i n g T i m e d i s c h a r g i n g T i m e l e v e l
  65. EVENTS c h a r g i n g c

    h a n g e c h a r g i n g t i m e c h a n g e d i s c h a r g i n g t i m e c h a n g e l e v e l c h a n g e
  66. EXAMPLE / / P r i n t i f

    b a t t e r y i s c h a r g i n g o r n o t c o n s o l e . l o g ( " T h e d e v i c e ' s b a t t e r y i s " + ( n a v i g a t o r . b a t t e r y . c h a r g i n g ? " " : " n o t " ) + " c h a r g i n g " ) ; / / P r i n t t h e c u r r e n t b a t t e r y l e v e l c o n s o l e . l o g ( " T h e l e v e l o f t h e b a t t e r y i s " + ( n a v i g a t o r . b a t t e r y . l e v e l ? ( n a v i g a t o r . b a t t e r y . l e v e l * 1 0 0 ) + " % " : " U N K N O W N " ) ) ;
  67. BROWSERS SUPPORT

  68. DESKTOP BROWSERS SUPPORT Explorer Chrome Safari Firefox Opera None None

    None 10+ (-moz) 16+ None Data updated to 19th July 2014
  69. MOBILE BROWSERS SUPPORT Explorer Android Chrome Safari Firefox Opera None

    None None None 10+ (-moz) 16+ None Data updated to 19th July 2014
  70. HOW TO USE IT NOW NO POLYFILL AVAILABLE

  71. ...Better for Users

  72. VIBRATION API

  73. WHAT IT DOES? Provides tactile feedback

  74. USE CASES

  75. Vibrate on an explosion in a movie

  76. Vibrate when someone punches you in a fighting game

  77. Vibrate when in a racing game a car crashes

  78. METHODS The only method exposed is v i b r

    a t e ( ) .
  79. EXAMPLE / / V i b r a t e

    o n c e f o r 1 s e c o n d n a v i g a t o r . v i b r a t e ( 1 0 0 0 ) ; / / V i b r a t e t h r i c e . T w o t i m e s f o r 1 s e c o n d , w i t h a h a l f / / s e c o n d i n t e r v a l , a n d t h e n v i b r a t e f o r 2 s e c o n d s n a v i g a t o r . v i b r a t e ( [ 1 0 0 0 , 5 0 0 , 1 0 0 0 , 5 0 0 , 2 0 0 0 ] ) ; / / C a n c e l l i n g V i b r a t i o n s n a v i g a t o r . v i b r a t e ( 0 ) ;
  80. BROWSERS SUPPORT

  81. DESKTOP BROWSERS SUPPORT Explorer Chrome Safari Firefox Opera None 30+*

    32+ None 11+ (-moz) 16+ 17+* 19+ Data updated to 19th July 2014 * You have to activate the flag Experimental Web Platform features
  82. MOBILE BROWSERS SUPPORT Explorer Android Chrome Safari Firefox Opera None

    4.4+ 30+* 32+ None 11+ (-moz) 16+ None Data updated to 19th July 2014 * You have to activate the flag Experimental Web Platform features
  83. HOW TO USE IT NOW NO POLYFILL AVAILABLE

  84. TO BE HONEST... mozVibrate-polyfill

  85. GETUSERMEDIA API

  86. WHAT IT DOES? Provides access to multimedia streams (video, audio,

    or both) from local devices
  87. USE CASES

  88. Real-time communication (chat)

  89. Recording tutorial or lesson for online courses

  90. Home or work surveillance

  91. METHODS The only method exposed is g e t U

    s e r M e d i a ( ) .
  92. EXAMPLE < v i d e o i d =

    " v i d e o " a u t o p l a y = " a u t o p l a y " c o n t r o l s = " t r u e " > < / v i d e o > < s c r i p t > v a r v i d e o = d o c u m e n t . g e t E l e m e n t B y I d ( " v i d e o " ) ; n a v i g a t o r . g e t U s e r M e d i a ( { v i d e o : t r u e , a u d i o : t r u e } , f u n c t i o n ( s t r e a m ) { v i d e o . s r c = s t r e a m ; v i d e o . p l a y ( ) ; } , f u n c t i o n ( e r r o r ) { c o n s o l e . l o g ( ' V i d e o c a p t u r e e r r o r : ' + e r r o r . c o d e ) ; } ) ; < / s c r i p t >
  93. BROWSERS SUPPORT

  94. DESKTOP BROWSERS SUPPORT Explorer Chrome Safari Firefox Opera None 21+

    (-webkit) None 17+ (-moz) 12+ 15+ (None) 18+ (-webkit) Data updated to 19th July 2014
  95. MOBILE BROWSERS SUPPORT Explorer Android Chrome Safari Firefox Opera None

    None 21+ (-webkit) None 24+ (-moz) None Data updated to 19th July 2014
  96. HOW TO USE IT NOW getUserMedia.js

  97. DO YOU LIKE APIS? OF COURSE YOU DO! Ambient Light

    API Device Orientation API Geolocation API Network Information API Proximity API Speech Synthesis API Web Notification API Web Speech API ...
  98. TO LEARN MORE... ABOUT THESE AND OTHER APIS HTML5 API

    DEMOS https://github.com/AurelioDeRosa/HTML5-API-demos A repository I created and maintain. It contains a collection of demos that allows to play with some of the APIs introduced in HTML5.
  99. 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
  100. THANK YOU!

  101. QUESTIONS?

  102. CONTACTS Website: Email: Twitter: www.audero.it a.derosa@audero.it @AurelioDeRosa