Taming the browsers of tomorrow - Side View 2013

Presentation from Side View 2013 : Taming the browsers of tomorrow.

The version with code can be found on github: http://flurin.github.io/taming-the-browsers-of-tomorrow-sideview-2013/

Transcript

1. TAMING THE BROWSERS OF TOMORROW @flurin
2. HI, I AM FLURIN @flurin
3. BIG THINGS ARE HAPPENING with browsers
4. THEY'RE SMARTER
5. MORE AWARE
6. NO Shadow DOM WebGL WebRTC
7. LET'S TALK ABOUT 6 PIECES OF SMALL MAGIC
9. PROMISES Natively
10. A promise represents the eventual result of an asynchronous operation. — http://promises-aplus.github.io/promises-spec/
11. AN EVERYDAY SCENARIO 1. Fetch a list of news items 2. Pre-fetch and cache the first item's details
12. THE OLDFASHIONED WAY g e t A j a x ( " l i s t . j s o n " , f u n c t i o n ( l i s t R e s u l t ) { i f ( l i s t R e s u l t ) { / / D o s t u f f } e l s e { / / H a n d l e f a i l u r e } } )
13. THE OLDFASHIONED WAY g e t A j a x ( " l i s t . j s o n " , f u n c t i o n ( l i s t R e s u l t ) { i f ( l i s t R e s u l t ) { g e t A j a x ( " d e t a i l . j s o n ? i d = " + l i s t R e s u l t [ 0 ] . i d , f u n c t i o n ( d e t a i l R e s u i f ( d e t a i l R e s u l t ) { c a c h e R e s u l t ( d e t a i l R e s u l t ) } e l s e { / / H a n d l e f a i l u r e } } ) ; } e l s e { / / H a n d l e f a i l u r e }
15. THE PROMISES WAY g e t A j a x ( " l i s t . j s o n " ) . t h e n ( f u n c t i o n ( r e s u l t ) { / / D o s t u f f } , f u n c t i o n ( f a i l ) { / / H a n d l e f a i l u r e } )
16. THE PROMISES WAY g e t A j a x ( " l i s t . j s o n " ) . t h e n ( f u n c t i o n ( r e s u l t ) { r e t u r n g e t A j a x ( " d e t a i l . j s o n ? i d = " + r e s u l t [ 0 ] . i d ) } , f u n c t i o n ( f a i l ) { / / H a n d l e f a i l u r e } ) . t h e n ( f u n c t i o n ( r e s u l t ) { c a c h e R e s u l t ( r e s u l t ) } , f u n c t i o n ( f a i l ) { / / H a n d l e f a i l u r e } ) ;
17. PROMISE.ALL() f u n c t i o n p r o m i s e T o S l e e p ( m s ) { r e t u r n n e w P r o m i s e ( f u n c t i o n ( r e s o l v e , r e j e c t ) { w i n d o w . s e t T i m e o u t ( f u n c t i o n ( ) { r e s o l v e ( m s ) } , m s ) } ) ; } P r o m i s e . a l l ( [ p r o m i s e T o S l e e p ( 5 0 0 0 ) , p r o m i s e T o S l e e p ( 2 0 0 0 ) ] ) . t h e n ( f u n c t i o n ( p r o m i s e s ) { c o n s o l e . l o g ( " A l l d o n e " , p r o m i s e s ) ; } , f u n c t i o n ( p r o m i s e s ) { c o n s o l e . l o g ( " F a i l e d " , p r o m i s e s ) ; } ) ;
18. THEY HAVE BEEN AROUND Q RSVP jQuery.defered https://github.com/promises-aplus/promises- spec/blob/master/implementations.md
20. CURRENTLY IN Firefox Safari Chrome 32+ COMING TO IE
21. AMBIENT LIGHT EVENTS
22. When a device's light sensor detects a change in the light level, it notifies the browser by firing the D e v i c e L i g h t E v e n t . Once the event is captured, the event object gives access to the light intensity expressed in lux.
23. DEMO! Start demo!
24. SHED SOME LIGHT ON THIS w i n d o w . a d d E v e n t L i s t e n e r ( " d e v i c e l i g h t " , f u n c t i o n ( e v e n t ) { / / e v e n t . v a l u e i s t h e v a l u e i n L U X } ) ;
25. SHED SOME LIGHT ON THIS w i n d o w . a d d E v e n t L i s t e n e r ( " d e v i c e l i g h t " , f u n c t i o n ( e v e n t ) { v a r h t m l = d o c u m e n t . g e t E l e m e n t s B y T a g N a m e ( ' h t m l ' ) [ 0 ] ; i f ( e v e n t . v a l u e < 5 0 ) { h t m l . c l a s s L i s t . a d d ( ' d a r k l i g h t ' ) ; h t m l . c l a s s L i s t . r e m o v e ( ' b r i g h t l i g h t ' ) ; } e l s e { h t m l . c l a s s L i s t . a d d ( ' b r i g h t l i g h t ' ) ; h t m l . c l a s s L i s t . r e m o v e ( ' d a r k l i g h t ' ) ; } } ) ;
26. CURRENTLY IN Firefox 22 (Mac, Firefox OS, Firefox for Android) https://dvcs.w3.org/hg/dap/raw- file/tip/light/Overview.html
27. VIBRATION API
28. EASY AS PIE / / V i b r a t e f o r 1 0 0 m s n a v i g a t o r . v i b r a t e ( 1 0 0 ) ; / / V i b r a t e i n a p a t t e r n o f : / / - 1 0 0 m s v i b r a t i o n , / / - 5 0 m s p a u s e , / / - 1 0 0 m s v i b r a t i o n n a v i g a t o r . v i b r a t i o n ( [ 1 0 0 , 5 0 , 1 0 0 ] ) ;
29. CURRENTLY IN Firefox (Android) Chrome 32+ (Android) http://www.w3.org/TR/vibration/
30. WEB SPEECH API
31. Click to talk!
32. AND THE CODE / / S e t u p u t t e r a n c e v a r u t t e r a n c e = n e w S p e e c h S y n t h e s i s U t t e r a n c e ( ' H e l l o S i d e V i e w A t t e n d e e s ! u t t e r a n c e . v o l u m e = 1 ; u t t e r a n c e . r a t e = 0 . 7 5 ; u t t e r a n c e . p i t c h = 1 ; u t t e r a n c e . l a n g = ' e n - G B ' ; / / S a y i t ! w i n d o w . s p e e c h S y n t h e s i s . s p e a k ( u t t e r a n c e ) ;
33. SPEECH RECOGNITION v a r r = n e w w i n d o w . w e b k i t S p e e c h R e c o g n i t i o n ( ) ; r . c o n t i n u o u s = t r u e ; r . l a n g = " e n " ; r . i n t e r i m R e s u l t s = t r u e ; r . o n r e s u l t = f u n c t i o n ( r e s u l t ) { / * r e s u l t * / } r . s t a r t ( ) ; / / A n d s o m e t i m e l a t e r o n . . . r . s t o p ( ) ;
34. CURRENTLY IN Chrome 25+ (input only, needs connection) Safari 6.1+ (desktop and on IOS7, speech synthesis only) COMING TO Firefox Chrome 33+
35. I LIED
36. GETUSERMEDIA() SCREENSHARING
37. Start!
38. ...AND THE CODE 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 : { m a n d a t o r y : { c h r o m e M e d i a S o u r c e : " s c r e e n " } } } , / / Y a y , g o t s t r e a m ! f u n c t i o n ( s t r e a m ) { v a r v i d e o = d o c u m e n t . c r e a t e E l e m e n t ( ' v i d e o ' ) ; v i d e o . s r c = w i n d o w . U R L . c r e a t e O b j e c t U R L ( s t r e a m ) ; v i d e o . a u t o p l a y = t r u e ; d o c u m e n t . b o d y . a p p e n d C h i l d ( v i d e o ) ; } , / / F a i l . . . f u n c t i o n ( e r r o r ) { } ) ;
39. CURRENTLY IN Chrome 26+
41. ServiceWorkers allow us to persistently cache resources and handle the requests to these resources — even when the network isn't available
42. SERVICEWORKERS PARTS: A shared worker/controller that lives across page loads A programmable HTTP cache
43. AN EXAMPLE REGISTERING THE WORKER n a v i g a t o r . r e g i s t e r S e r v i c e W o r k e r ( " / * " , " / a s s e t s / v 1 / c t r l . j s " ) . t h e n ( f u n c t i o n ( s e r v i c e W o r k e r ) { c o n s o l e . l o g ( " s u c c e s s ! " ) ; / / T o u s e t h e s e r v i c e W o r k e r i m m e d i a t e l y , y o u / / m i g h t c a l l w i n d o w . l o c a t i o n . r e l o a d ( ) } , f u n c t i o n ( w h y ) { c o n s o l e . e r r o r ( " I n s t a l l i n g t h e w o r k e r f a i l e d ! : " , w h y ) ; } ) ;
44. AN EXAMPLE THE WORKER / / h o s t e d a t : / a s s e t s / v 1 / c t r l . j s t h i s . v e r s i o n = 1 ; v a r b a s e = " h t t p : / / v i d e o s . e x a m p l e . c o m " ; v a r i n v e n t o r y = n e w U R L ( " / s e r v i c e s / i n v e n t o r y / d a t a . j s o n " , b a s e ) ; t h i s . a d d E v e n t L i s t e n e r ( " i n s t a l l " , f u n c t i o n ( e ) { / / T e l l t h e s y s t e m t h a t t h i s s e r v i c e w o r k e r c a n h a n d l e f e t c h e v e n t s . e . s e r v i c e s = [ " f e t c h " ] ; } ) ; t h i s . a d d E v e n t L i s t e n e r ( " f e t c h " , f u n c t i o n ( e ) { v a r u r l = e . r e q u e s t . u r l ; i f ( u r l . t o S t r i n g ( ) = = i n v e n t o r y . t o S t r i n g ( ) ) { e . r e s p o n d W i t h ( n e w S a m e O r i g i n R e s p o n s e ( { s t a t u s C o d e : 2 0 0 ,
45. CURRENTLY IN Nothing https://github.com/slightlyoff/ServiceWorker/
46. BUT...
47. THERE IS (MUCH) MORE! Midi API Battery Status API Web Crypto API URL
48. THANK YOU