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

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

8b01a8b4d7a0a9079a4e97b1ddedbe56?s=128

Aurelio De Rosa

October 19, 2013
Tweet

Transcript

  1. 1.
  2. 3.

    WEB & APP DEVELOPER Previously employed at the University of

    Salerno, I decided to go freelance about 1 year ago.
  3. 10.
  4. 11.
  5. 12.
  6. 13.
  7. 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?
  8. 16.
  9. 17.
  10. 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
  11. 20.
  12. 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)
  13. 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 ) ) ;
  14. 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
  15. 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
  16. 34.

    USE CASES Work with animation at high FPS rate Ensure

    a perfect audio-video synchronization
  17. 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 ) ) ;
  18. 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
  19. 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
  20. 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 ( ) ; } ;
  21. 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 " ) ; }
  22. 49.

    DESKTOP BROWSERS' SUPPORT Explorer Chrome Safari Firefox Opera 10+ 25+

    None None 15+ Data updated to 1st October 2013
  23. 50.

    MOBILE BROWSERS' SUPPORT Explorer Android Chrome Safari Firefox Opera 10+

    None 25+ None None None Data updated to 1st October 2013
  24. 54.

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

    Fires events about changes of the page visibility's status
  25. 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
  26. 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 )
  27. 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 ) ;
  28. 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
  29. 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
  30. 64.

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

    level Fires events about changes of the battery level or status
  31. 65.

    USE CASES Slow down a process Save changes more frequently

    to prevent data loss Deny to start a critical and time consuming process
  32. 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 " ) ) ;
  33. 70.

    DESKTOP BROWSERS' SUPPORT Explorer Chrome Safari Firefox Opera None None

    None 10+ (-moz) 16+ None Data updated to 1st October 2013
  34. 71.

    MOBILE BROWSERS' SUPPORT Explorer Android Chrome Safari Firefox Opera None

    None None None 10+ (-moz) 16+ None Data updated to 1st October 2013
  35. 76.
  36. 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 ) ;
  37. 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
  38. 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
  39. 88.
  40. 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 >
  41. 95.

    DESKTOP BROWSERS' SUPPORT Explorer Chrome Safari Firefox Opera None 21+

    (-webkit) None 17+ (-moz) 12+ 15+ (None) Data updated to 1st October 2013
  42. 96.

    MOBILE BROWSERS' SUPPORT Explorer Android Chrome Safari Firefox Opera None

    None 21+ (-webkit) None None 12+ Data updated to 1st October 2013
  43. 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
  44. 100.