People don't give a f**k of JavaScript - Dutch Mobile Conference 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

Transcript

1. PEOPLE DON'T GIVE A F**K OF JAVASCRIPT Aurelio De Rosa Amsterdam, Netherlands - 27 June 2014
2. ABOUT ME (THE MOST BORING PART OF THE TALK!)
3. WEB & APP DEVELOPER Previously employed at the University of Salerno, I'm now self-employed.
4. THE LANGUAGES I USE
5. WRITE ARTICLES FOR
6. AUTHORED BOOKS JQUERY IN ACTION (3RD EDITION) INSTANT JQUERY SELECTORS (Shameless self-promotion!)
8. WHO ARE YOUR USERS?
13. 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?
14. ...BUT I'M A DEVELOPER!
16. TASK
17. EXPERIENCE
18. “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
19. “There are only two kinds of languages: the ones people complain about and the ones nobody uses” — Bjarne Stroustrup
20. “Pick one that feels right to you, and start building things. That's all that matters.” — Jeffrey Way
22. LET'S WRITE BETTER JAVASCRIPT
23. PATTERN OF THE NEXT PART What Use Cases Methods, Properties and Events Example Browsers' Support (Desktop and Mobile) Use it today (Polyfills) Demo (live)
24. ...Better for Developers
25. PERFORMANCE MATTERS!
26. Reference: http://torbit.com/blog/2012/09/19/some-interesting-performance-statistics/
27. Reference: http://torbit.com/blog/2012/09/19/some-interesting-performance-statistics/
28. LESSON: TEST AND IMPROVE YOUR WEBSITE'S PERFORMANCE
29. HOW WE USE TO TEST PERFORMANCE
30. 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 ) ) ;
31. 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
32. OK, I GOT IT. NOW WHAT?
33. HIGH RESOLUTION TIME API
34. 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
35. USE CASES Work with animation at high FPS rate Ensure a perfect audio-video synchronization
36. METHODS The only method exposed is n o w ( ) .
37. 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 ) ) ;
38. BROWSERS' SUPPORT
39. DESKTOP BROWSERS' SUPPORT Explorer Chrome* Safari Firefox Opera 10+ 20+ (-webkit) 24+ None 15+ 15+ Data updated to 21st June 2014 * As for now, p e r f o r m a n c e . n o w ( ) in Chrome on Windows returns a time almost always near the very start or the very end of a second ( ). issue #158234
40. MOBILE BROWSERS' SUPPORT Explorer Android Chrome Safari Firefox Opera* 10+ 4.4+ 24+ None 15+ None Data updated to 21st June 2014 * Opera in the Mobile Browsers' support tables stand for Opera Mini
41. 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 ( ) ; } ;
42. TOO MANY VARS!
43. USER TIMING API
44. WHAT IT DOES? Allows to accurately measure and store performance of a JavaScript code
45. USE CASES Performance testing
46. 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 ( )
47. 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
48. 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 ' ) ; }
49. BROWSERS' SUPPORT
50. DESKTOP BROWSERS' SUPPORT Explorer Chrome Safari Firefox Opera 10+ 25+ None None 15+ Data updated to 21st June 2014
51. MOBILE BROWSERS' SUPPORT Explorer Android Chrome Safari Firefox Opera 10+ 4.4+ 25+ None None None Data updated to 21st June 2014
52. HOW TO USE IT NOW usertiming.js
53. ...Better for Devices
54. PAGE VISIBILITY API
55. WHAT IT DOES? Provides information about the page visibility's status Fires events about changes of the page visibility's status
56. 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
57. 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 )
58. EVENTS The only event exposed is v i s i b i l i t y c h a n g e .
59. 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 ) ;
60. BROWSERS' SUPPORT
61. 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 21st June 2014
62. MOBILE BROWSERS' SUPPORT Explorer Android Chrome Safari Firefox Opera 10+ 4.4+ 13+ (-webkit) 33+ 7.0+ 10+ (-moz) 18+ None Data updated to 21st June 2014
63. HOW TO USE IT NOW visibly.js Visibility.js
64. BATTERY STATUS API
65. WHAT IT DOES? Provides information about the system's battery charge level Fires events about changes of the battery level or status
66. USE CASES Slow down a process Save changes more frequently to prevent data loss Deny to start a critical and time consuming process
67. 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
68. 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
69. 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 " ) ) ;
70. BROWSERS' SUPPORT
71. DESKTOP BROWSERS' SUPPORT Explorer Chrome Safari Firefox Opera None None None 10+ (-moz) 16+ None Data updated to 21st June 2014
72. MOBILE BROWSERS' SUPPORT Explorer Android Chrome Safari Firefox Opera None None None None 10+ (-moz) 16+ None Data updated to 21st June 2014
73. HOW TO USE IT NOW NO POLYFILL AVAILABLE
74. ...Better for Users
75. VIBRATION API
76. WHAT IT DOES? Provides tactile feedback
77. USE CASES
78. Vibrate on an explosion in a movie
79. Vibrate when someone punches you in a fighting game
80. Vibrate when in a racing game a car crashes
81. METHODS The only method exposed is v i b r a t e ( ) .
82. 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 ) ;
83. BROWSERS' SUPPORT
84. DESKTOP BROWSERS' SUPPORT Explorer Chrome Safari Firefox Opera None 30+* 32+ None 11+ (-moz) 16+ 17+* 19+ Data updated to 21st June 2014 * You have to activate the flag Experimental Web Platform features
85. MOBILE BROWSERS' SUPPORT Explorer Android Chrome Safari Firefox Opera None 4.4+ 30+* 32+ None 11+ (-moz) 16+ None Data updated to 21st June 2014 * You have to activate the flag Experimental Web Platform features
86. HOW TO USE IT NOW NO POLYFILL AVAILABLE
87. TO BE HONEST... mozVibrate-polyfill
88. GETUSERMEDIA API
89. WHAT IT DOES? Provides access to multimedia streams (video, audio, or both) from local devices
90. USE CASES
91. Real-time communication (chat)
92. Recording tutorial or lesson for online courses
93. Home or work surveillance
94. METHODS The only method exposed is g e t U s e r M e d i a ( ) .
95. 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 >
96. BROWSERS' SUPPORT
97. DESKTOP BROWSERS' SUPPORT Explorer Chrome Safari Firefox Opera None 21+ (-webkit) None 17+ (-moz) 12+ 15+ (None) 18+ (-webkit) Data updated to 21st June 2014
98. MOBILE BROWSERS' SUPPORT Explorer Android Chrome Safari Firefox Opera None None 21+ (-webkit) None 24+ (-moz) None Data updated to 21st June 2014
99. HOW TO USE IT NOW getUserMedia.js
100. 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.
101. 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
102. THANK YOU!
103. QUESTIONS?
104. CONTACTS Website: Email: Twitter: www.audero.it a.derosa@audero.it @AurelioDeRosa