The current state of web on mobile - Have smartphone browsers gotten smarter?

A keynote slides for Powered by JavaScript (http://www.manning.com/poweredbyjavascript/)

Transcript

1. State of Mobile Web Have smartphone browsers gotten smarter? Tomomi Imura @girlie_mac Public domain photo from NASA, modifed with https://flic.kr/p/Ea32T by Andrew b
2. https://flick.kr/p/3fzVnW by Danny Sullivan b
4. Mobile Browser Releases 2013 -
5. Chrome Android Constant Releases
6. Chrome: WebKit -> Blink
7. Opera: Presto -> WebKit -> Blink
8. IndexedDB
9. SPDY
10. CSS Flexbox (New Spec)
11. ES: Promises, Object.observe()
12. Flat Icons
13. Mobile Browser Usage Stats StatCounter Global Stats - Browser Market Share
14. Disrupt App Store https://flic.kr/p/5r6RYe by Cristiano Betta b
15. Distributing outside of app stores flappybird.io • 2048
16. Forking (in Doge style) Flappy Doge • Doge2048
17. and Flappy 2048 Flappy 2048
18. Hardware Access https://flic.kr/p/54oAAr by James Cridland b
19. HW Access with Device APIs •  GPS •  Camera, Video, & Microphone •  Audio HW •  Vibration HW •  Battery •  NFC
20. Sensors •  Accelerometer •  Magnetometer •  Gyrometer •  Light •  Proximity •  Barometer (Pressure)
21. Watch the demo video at: https://vimeo.com/92208773 Demo: http://girliemac.github.com/sushi-compass
22. Last Year "Coremob Camera"
23. Project Goals 1.  Showcase the capabilities of the Web platform 2.  Educate Web developers 3.  Help improve browsers
24. Watch the demo video at: http://sdrv.ms/UF55gM 1:18
25. HTML5 APIs 1.  Take a picture via HTML Media Capture 2.  Use FileReader() to return the picture as a object 3.  drawImage() to draw the image object in canvas 4.  getImageData() to get an ImageData object containing a copy of the pixel data, then alter the pixels 5.  Store the blob locally with IndexedDB 6.  Upload the final photo with XHR2/CORS
26. HTML Media Capture Taking a photo with using a native camera < i n p u t t y p e = " f i l e " a c c e p t = " i m a g e / * " > 18 15bl 3 10 6 10 11 10
27. File API Camera returns the photo as a f i l e object v a r i n p u t = d o c u m e n t . q u e r y S e l e c t o r ( ' i n p u t [ t y p e = f i l e ] ' ) ; i n p u t . a d d E v e n t L i s t e n e r ( ' c h a n g e ' , f u n c t i o n ( ) { v a r l o c a l F i l e = i n p u t . f i l e s [ 0 ] ; v a r r e a d e r = n e w F i l e R e a d e r ( ) ; r e a d e r . r e a d A s D a t a U R L ( l o c a l F i l e ) ; r e a d e r . o n l o a d = f u n c t i o n ( e ) { p r e v i e w . s r c = e . t a r g e t . r e s u l t ; } } , f a l s e ) ;
28. Canvas Applying filters to the photo v a r c = d o c u m e n t . c r e a t e E l e m e n t ( ' c a n v a s ' ) ; v a r c t x = t h i s . c . g e t C o n t e x t ( ' 2 d ' ) ; c t x . d r a w I m a g e ( i m g O b j , 0 , 0 ) ; v a r i m g D a t a = c t x . g e t I m a g e D a t a ( x , y , w , h ) ; / / . . . P i x e l m a n i p u l a t i o n . . . c t x . p u t I m a g e D a t a ( i m g D a t a , 0 , 0 ) ;
29. IndexedDB Storing the photos locally i f ( w i n d o w . i n d e x e d D B ) { v a r r e q = i n d e x e d D B . o p e n ( ' c o r e m o b C a m e r a ' ) ; r e q . o n s u c c e s s = f u n c t i o n ( e ) { / / a s y n c } }
30. IndexedDB Support New in 2014: •  Android stock browser support •  Apple announced support for Safari 8 18* 25 15bl 10* 16 10 4.4 8
31. Inspect IndexedDB in Chrome
32. ...and now in Aurora too! https://developer.mozilla.org/en-US/docs/Tools/Storage_Inspector
33. XMLHttpRequest Level 2 Sending a photo v a r f o r m D a t a = n e w F o r m D a t a ( ) ; f o r m D a t a . a p p e n d ( ' p h o t o ' , b l o b ) ; 3 5 10 12 15bl
34. Touch Events v.1 Photo Gallery Carousel e l . a d d E v e n t L i s t e n e r ( ' t o u c h s t a r t ' , s t a r t H a n d l e r , f a l s e ) ; e l . a d d E v e n t L i s t e n e r ( ' t o u c h m o v e ' . . . ) ; e l . a d d E v e n t L i s t e n e r ( ' t o u c h e n d ' . . . ) ; You probably want to include mouse events too ( m o u s e d o w n, m o u s e m o v e, and m o u s e u p).
35. Pointer Events For any input devices: touch, mouse, pen... i f ( t y p e o f w i n d o w . P o i n t e r E v e n t ! = ' u n d e f i n e d ' ) { e l . a d d E v e n t L i s t e n e r ( ' p o i n t e r d o w n ' , s t a r t H a n d l e r , f a l s e ) ; e l . a d d E v e n t L i s t e n e r ( ' p o i n t e r m o v e ' , . . . ) ; e l . a d d E v e n t L i s t e n e r ( ' p o i n t e r u p ' , . . . ) ; }
36. Touch vs. Pointer Events Touch Pointer Chrome 37 Yes will implement -> No, they changed mind Opera 22 Yes No Firefox 26 Yes No IE 10 No Yes IE 11.next Yes Yes Safari 7 Yes No Android 4.4 Yes No caniuse.com • groups.google.com/a/chromium.org
40. To-do list for the camera app •  Offline support •  Before - AppCache was Douchebag™ •  Now - Service Workers •  Web Components •  Custom Elements •  Shadow DOM •  HTML Templates •  Imports
41. Keep up to date https://flic.kr/p/8tuc1u by randomliteraturecouncil b
42. Chromium Dashboard
43. IE Platform Status
44. Thank you <3 Tomomi Imura •  girliemac.com •  twitter.com/girlie_mac •  github.com/girliemac