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

Slide 1

Slide 1 text

PEOPLE DON'T GIVE A F**K OF JAVASCRIPT Aurelio De Rosa London, United Kingdom - 21 July 2014

Slide 2

Slide 2 text

WEB & APP DEVELOPER CONTRIBUTE(D) TO ... jQuery CanIUse PureCSS WRITE FOR SitePoint.com Tuts+.com ModernWeb.com (formerly FlippinAwesome.com)

Slide 3

Slide 3 text

AUTHORED BOOKS JQUERY IN ACTION (3RD EDITION) INSTANT JQUERY SELECTORS (Shameless self-promotion!)

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

WHO ARE YOUR USERS?

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

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?

Slide 11

Slide 11 text

...BUT I'M A DEVELOPER!

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

TASK

Slide 14

Slide 14 text

EXPERIENCE

Slide 15

Slide 15 text

“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

Slide 16

Slide 16 text

“There are only two kinds of languages: the ones people complain about and the ones nobody uses” — Bjarne Stroustrup

Slide 17

Slide 17 text

“Pick one that feels right to you, and start building things. That's all that matters.” — Jeffrey Way

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

LET'S WRITE BETTER JAVASCRIPT

Slide 20

Slide 20 text

PATTERN OF THE NEXT PART What Use Cases Methods, Properties and Events Example Browsers Support (Desktop and Mobile) Use it today (Polyfills) Demo (live)

Slide 21

Slide 21 text

...Better for Developers

Slide 22

Slide 22 text

PERFORMANCE MATTERS!

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

LESSON: TEST AND IMPROVE YOUR WEBSITE'S PERFORMANCE

Slide 26

Slide 26 text

HOW WE USE TO TEST PERFORMANCE

Slide 27

Slide 27 text

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 ) ) ;

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

OK, I GOT IT. NOW WHAT?

Slide 30

Slide 30 text

HIGH RESOLUTION TIME API

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

USE CASES Work with animation at high FPS rate Ensure a perfect audio-video synchronization

Slide 33

Slide 33 text

METHODS The only method exposed is n o w ( ) .

Slide 34

Slide 34 text

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 ) ) ;

Slide 35

Slide 35 text

BROWSERS SUPPORT

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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 ( ) ; } ;

Slide 39

Slide 39 text

TOO MANY VARS!

Slide 40

Slide 40 text

USER TIMING API

Slide 41

Slide 41 text

WHAT IT DOES? Allows to accurately measure and store performance of a JavaScript code

Slide 42

Slide 42 text

USE CASES Performance testing

Slide 43

Slide 43 text

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 ( )

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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 ' ) ; }

Slide 46

Slide 46 text

BROWSERS SUPPORT

Slide 47

Slide 47 text

DESKTOP BROWSERS SUPPORT Explorer Chrome Safari Firefox Opera 10+ 25+ None None 15+ Data updated to 19th July 2014

Slide 48

Slide 48 text

MOBILE BROWSERS SUPPORT Explorer Android Chrome Safari Firefox Opera 10+ 4.4+ 25+ None None None Data updated to 19th July 2014

Slide 49

Slide 49 text

HOW TO USE IT NOW usertiming.js

Slide 50

Slide 50 text

...Better for Devices

Slide 51

Slide 51 text

PAGE VISIBILITY API

Slide 52

Slide 52 text

WHAT IT DOES? Provides information about the page visibility's status Fires events about changes of the page visibility's status

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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 )

Slide 55

Slide 55 text

EVENTS The only event exposed is v i s i b i l i t y c h a n g e .

Slide 56

Slide 56 text

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 ) ;

Slide 57

Slide 57 text

BROWSERS SUPPORT

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

HOW TO USE IT NOW visibly.js Visibility.js

Slide 61

Slide 61 text

BATTERY STATUS API

Slide 62

Slide 62 text

WHAT IT DOES? Provides information about the system's battery charge level Fires events about changes of the battery level or status

Slide 63

Slide 63 text

USE CASES Slow down a process Save changes more frequently to prevent data loss Deny to start a critical and time consuming process

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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 " ) ) ;

Slide 67

Slide 67 text

BROWSERS SUPPORT

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

HOW TO USE IT NOW NO POLYFILL AVAILABLE

Slide 71

Slide 71 text

...Better for Users

Slide 72

Slide 72 text

VIBRATION API

Slide 73

Slide 73 text

WHAT IT DOES? Provides tactile feedback

Slide 74

Slide 74 text

USE CASES

Slide 75

Slide 75 text

Vibrate on an explosion in a movie

Slide 76

Slide 76 text

Vibrate when someone punches you in a fighting game

Slide 77

Slide 77 text

Vibrate when in a racing game a car crashes

Slide 78

Slide 78 text

METHODS The only method exposed is v i b r a t e ( ) .

Slide 79

Slide 79 text

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 ) ;

Slide 80

Slide 80 text

BROWSERS SUPPORT

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

HOW TO USE IT NOW NO POLYFILL AVAILABLE

Slide 84

Slide 84 text

TO BE HONEST... mozVibrate-polyfill

Slide 85

Slide 85 text

GETUSERMEDIA API

Slide 86

Slide 86 text

WHAT IT DOES? Provides access to multimedia streams (video, audio, or both) from local devices

Slide 87

Slide 87 text

USE CASES

Slide 88

Slide 88 text

Real-time communication (chat)

Slide 89

Slide 89 text

Recording tutorial or lesson for online courses

Slide 90

Slide 90 text

Home or work surveillance

Slide 91

Slide 91 text

METHODS The only method exposed is g e t U s e r M e d i a ( ) .

Slide 92

Slide 92 text

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 >

Slide 93

Slide 93 text

BROWSERS SUPPORT

Slide 94

Slide 94 text

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

Slide 95

Slide 95 text

MOBILE BROWSERS SUPPORT Explorer Android Chrome Safari Firefox Opera None None 21+ (-webkit) None 24+ (-moz) None Data updated to 19th July 2014

Slide 96

Slide 96 text

HOW TO USE IT NOW getUserMedia.js

Slide 97

Slide 97 text

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 ...

Slide 98

Slide 98 text

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.

Slide 99

Slide 99 text

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

Slide 100

Slide 100 text

THANK YOU!

Slide 101

Slide 101 text

QUESTIONS?

Slide 102

Slide 102 text

CONTACTS Website: Email: Twitter: www.audero.it [email protected] @AurelioDeRosa