People don't give a f**k of JavaScript - Codemotion Madrid 2013

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

2. ABOUT ME (THE MOST BORING PART OF THE TALK!)
3. WEB & APP DEVELOPER Previously employed at the University of Salerno, I decided to go freelance about 1 year ago.
4. THE LANGUAGES I USE
5. WRITE ARTICLES FOR
6. AUTHORED BOOKS INSTANT JQUERY SELECTORS JQUERY IN ACTION (3RD EDITION) (Shameless self-promotion!)
7. FOR THOSE WHO AREN'T ALREADY BORED...LET'S START!
8. PEOPLE DON'T GIVE A F**K OF JAVASCRIPT
9. WHO ARE YOUR USERS?
14. 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?
15. ...BUT I'M A DEVELOPER!
17. TASK
18. EXPERIENCE
19. 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
21. LET'S WRITE BETTER JAVASCRIPT
22. PATTERN OF THE NEXT PART What Use Cases Methods, Properties and Events Example Browsers' Support (Desktop and Mobile) Use it today (Polyfills) Demo (live)
23. ...Better for Developers
24. PERFORMANCE MATTERS!
25. Reference: http://torbit.com/blog/2012/09/19/some-interesting-performance-statistics/
26. Reference: http://torbit.com/blog/2012/09/19/some-interesting-performance-statistics/
27. LESSON: TEST AND IMPROVE YOUR WEBSITE'S PERFORMANCE
28. HOW WE USE TO TEST PERFORMANCE
29. 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 ) ) ;
30. 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
31. OK, I GOT IT. NOW WHAT?
32. HIGH RESOLUTION TIME API
33. WHAT IT DOES? Allow 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
34. USE CASES Work with animation at high FPS rate Ensure a perfect audio-video synchronization
35. METHODS The only method exposed is n o w ( ) .
36. 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 ) ) ;
37. BROWSERS' SUPPORT
38. DESKTOP BROWSERS' SUPPORT Explorer Chrome Safari Firefox Opera 10+ 20+ (-webkit) 24+* None 15+ 15+ Data updated to 1st October 2013 As for now, p e r f o r m a n c e . n o w ( ) in Chrome returns a time almost always near the very start or the very end of a second ( ). issue #158234
39. MOBILE BROWSERS' SUPPORT Explorer Android Chrome Safari Firefox Opera* 10+ None 24+ None 15+ None Data updated to 1st October 2013 * Opera Mobile stands for the classic version, not the one based on Blink like Opera for Android
40. 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 | | p e r f o r m a n c e . w e b k i t N o w | | f u n c t i o n ( ) { r e t u r n D a t e . n o w ( ) ; } ;
41. TOO MANY VARS!
42. USER TIMING API
43. WHAT IT DOES? Allow to accurately measure and store performance of a JavaScript code
44. USE CASES Performance testing
45. METHODS mark() clearMarks() measure() clearMeasures() getEntriesByType() getEntriesByName()
46. PROPERTIES name entryType startTime duration
47. 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 " ) ; }
48. BROWSERS' SUPPORT
49. DESKTOP BROWSERS' SUPPORT Explorer Chrome Safari Firefox Opera 10+ 25+ None None 15+ Data updated to 1st October 2013
50. MOBILE BROWSERS' SUPPORT Explorer Android Chrome Safari Firefox Opera 10+ None 25+ None None None Data updated to 1st October 2013
51. HOW TO USE IT NOW usertiming.js
52. ...Better for Devices
53. PAGE VISIBILITY API
54. WHAT IT DOES? Provides information about the page visibility's status Fires events about changes of the page visibility's status
55. 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
56. PROPERTIES hidden visibilityState (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 )
57. EVENTS The only event exposed is visibilitychange.
58. EXAMPLE / / W o r k s o n l y i n b r o w s e r s w i t h u n p r e f i x e d p r o p e r t i e s a n d m e t h o d s 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 ) ;
59. BROWSERS' SUPPORT
60. DESKTOP BROWSERS' SUPPORT Explorer Chrome Safari Firefox Opera 10+ 13+ (-webkit) None 10+ (-moz) 18+ 12.10+ 15+ (-webkit) Data updated to 1st October 2013
61. MOBILE BROWSERS' SUPPORT Explorer Android Chrome Safari Firefox Opera 10+ None 13+ (-webkit) None 10+ (-moz) 18+ 12.10+ Data updated to 1st October 2013
62. HOW TO USE IT NOW visibly.js Visibility.js
63. BATTERY STATUS API
64. WHAT IT DOES? Provides information about the system's battery charge level Fires events about changes of the battery level or status
65. USE CASES Slow down a process Save changes more frequently to prevent data loss Deny to start a critical and time consuming process
66. PROPERTIES charging chargingTime dischargingTime level
67. EVENTS chargingchange chargingtimechange dischargingtimechange levelchange
68. 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 " ) ) ;
69. BROWSERS' SUPPORT
70. DESKTOP BROWSERS' SUPPORT Explorer Chrome Safari Firefox Opera None None None 10+ (-moz) 16+ None Data updated to 1st October 2013
71. MOBILE BROWSERS' SUPPORT Explorer Android Chrome Safari Firefox Opera None None None None 10+ (-moz) 16+ None Data updated to 1st October 2013
72. HOW TO USE IT NOW NO POLYFILL AVAILABLE
73. ...Better for Users
74. VIBRATION API
75. WHAT IT DOES? Provide tactile feedback
76. USE CASES
77. Vibrate on an explosion in a movie
78. Vibrate when someone punches you in a fighting game
79. Vibrate when in a racing game a car crashes
80. METHODS The only method exposed is vibrate().
81. 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 ) ;
82. BROWSERS' SUPPORT
83. DESKTOP BROWSERS' SUPPORT Explorer Chrome Safari Firefox Opera None 30+* None 11+ (-moz) 16+ 17+* Data updated to 8th October 2013 * You have to activate the flag Experimental Web Platform features
84. MOBILE BROWSERS' SUPPORT Explorer Android Chrome Safari Firefox Opera None None 30+* None 11+ (-moz) 16+ None Data updated to 8th October 2013 * You have to activate the flag Experimental Web Platform features
85. HOW TO USE IT NOW NO POLYFILL AVAILABLE
86. GETUSERMEDIA API
87. WHAT IT DOES? Provides the access to multimedia streams (video, audio, or both) from local devices
88. USE CASES
89. Real-time communication (chat)
90. Recording tutorial or lesson for online courses
91. Home or work surveillance
92. METHODS The only method exposed is getUserMedia().
93. 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 >
94. BROWSERS' SUPPORT
95. DESKTOP BROWSERS' SUPPORT Explorer Chrome Safari Firefox Opera None 21+ (-webkit) None 17+ (-moz) 12+ 15+ (None) Data updated to 1st October 2013
96. MOBILE BROWSERS' SUPPORT Explorer Android Chrome Safari Firefox Opera None None 21+ (-webkit) None None 12+ Data updated to 1st October 2013
97. HOW TO USE IT NOW getUserMedia.js
98. 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
99. THANK YOU!
100. QUESTIONS?
101. CONTACTS Website: Email: Twitter: www.audero.it a.derosa@audero.it @AurelioDeRosa