The State of Mobile HTML5 (2013 -> 2014)

Slide 1

Slide 1 text

State of Mobile HTML5 Half full or half empty? Tomomi Imura (@girlie_mac) https://flic.kr/p/9WjAnE by slavik_V b

Slide 2

Slide 2 text

H E L L O M Y N A M E I S Tomomi @girlie_mac

Slide 3

Slide 3 text

Mobile Browser Releases 2013 -

Slide 4

Slide 4 text

https://flic.kr/p/7634a3 (modified) by Danny Choo ban

Slide 5

Slide 5 text

Mobile Browser Usage Stats StatCounter Global Stats - Browser Market Share

Slide 6

Slide 6 text

Feature Support Stats Can I Use...

Slide 7

Slide 7 text

Disrupt App Store https://flic.kr/p/5r6RYe by Cristiano Betta b

Slide 8

Slide 8 text

Distributing outside of app stores flappybird.io • 2048

Slide 9

Slide 9 text

Forking (in Doge style) Flappy Doge • Doge2048

Slide 10

Slide 10 text

and Flappy 2048 Flappy 2048

Slide 11

Slide 11 text

Last Year "Coremob Camera"

Slide 12

Slide 12 text

Project Goals 1. Showcase the capabilities of the Web platform 2. Educate Web developers 3. Help improve browsers

Slide 13

Slide 13 text

Watch the demo video at: http://sdrv.ms/UF55gM 1:18

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

< i n p u t t y p e = " f i l e " a c c e p t = " i m a g e / * " c a p t u r e > open camera!

Slide 17

Slide 17 text

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 ] ' ) ; c a m e r a . 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 ) ;

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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 } } 18* 25 15bl 10* 16 10 4.4

Slide 20

Slide 20 text

Polyfill or not? Indexed DB Web SQL Chrome 37 Yes Yes Opera 22 Yes Yes Blackberry 10 Yes Yes Firefox 26 Yes No IE 11 Yes No Android 4.4 Yes Yes Safari 7 No Yes ← caniuse.com

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

XMLHttpRequest Level 2 Sending a photo v a r x h r = n e w X M L H t t p R e q u e s t ( ) ; x h r . o p e n ( ' P O S T ' , ' / g a l l e r y ' ) ; x h r . u p l o a d . a d d E v e n t L i s t e n e r ( ' p r o g r e s s ' , h a n d l e P r o g r e s s , f a l s e ) ; x h r . a d d E v e n t L i s t e n e r ( ' l o a d ' , h a n d l e F i n i s h , f a l s e ) ; x h r . a d d E v e n t L i s t e n e r ( ' e r r o r ' , h a n d l e E r r o r , f a l s e ) ; x h r . a d d E v e n t L i s t e n e r ( ' a b o r t ' , h a n d l e A b o r t , f a l s e ) ; x h r . s e n d ( f o r m D a t a ) ;

Slide 23

Slide 23 text

XMLHttpRequest Level 2 Sending a photo f u n c t i o n h a n d l e P r o g r e s s ( e ) { i f ( e . l e n g t h C o m p u t a b l e ) { e l . t e x t C o n t e n t = ( e . l o a d e d / e . t o t a l * 1 0 0 ) > > > 0 + ' % ' ; } }

Slide 24

Slide 24 text

CORS: Cross Origin Resource Sharing A c c e s s - C o n t r o l - A l l o w - O r i g i n : h t t p : / / s o m e - d o m a i n . o r g / / A p a c h e . h t a c c e s s < I f M o d u l e m o d _ h e a d e r s . c > H e a d e r s e t A c c e s s - C o n t r o l - A l l o w - O r i g i n " * " < / I f M o d u l e > 12 15bl

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

Touch vs. Pointer Events Touch Pointer Chrome 37 Yes No (Will implement) Opera 22 Yes No (Will implement) Blackberry 10 Yes No Firefox 26 Yes No IE 10 No Yes Safari 7 Yes No Android 4.4 Yes No caniuse.com • groups.google.com/a/chromium.org

Slide 28

Slide 28 text

github.com/coremob/camera 

Slide 29

Slide 29 text

Hardware Access https://flic.kr/p/54oAAr by James Cridland b

Slide 30

Slide 30 text

Device APIs • GPS • Camera, Video, & Microphone • Audio HW • Vibration HW • Battery • NFC

Slide 31

Slide 31 text

Device APIs - Sensors • Accelerometer • Magnetometer • Gyrometer • Light • Proximity • Barometer (Pressure)

Slide 32

Slide 32 text

Geolocation i f ( n a v i g a t o r . g e o l o c a t i o n ) { n a v i g a t o r . g e o l o c a t i o n . g e t C u r r e n t P o s i t i o n ( s u c c e s s , f a i l ) ; } f u n c t i o n s u c c e s s ( p o s i t i o n ) { a l e r t ( ' L a t i t u d e : ' + p o s i t i o n . c o o r d s . l a t i t u d e + ' , L o n g i t u d e : ' + p o s i t i o n . c o o r d s . l o n g i t u d e ) ; }

Slide 33

Slide 33 text

Device Orientation Events Dev Opera (Diagram)

Slide 34

Slide 34 text

i f ( w i n d o w . D e v i c e O r i e n t a t i o n E v e n t ) { 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 o r i e n t a t i o n ' , f u n c t i o n ( e ) { c o m p a s s = e . a l p h a ; / / d e g r e e f r o n t B a c k = e . b e t a ; l e f t R i g h t = e . g a m m a ; . . . } , f a l s e ) ; } Partial support 4.2 3.0 18 10 14 12

Slide 35

Slide 35 text

User Cases Can we re-create this iOS app in HTML5? http://pizza-compass.com/

Slide 36

Slide 36 text

Watch the demo video at: https://vimeo.com/92208773 Demo: http://girliemac.github.com/sushi-compass

Slide 37

Slide 37 text

Battery Status API v a r b a t t e r y = n a v i g a t o r . b a t t e r y | | n a v i g a t o r . m o z B a t t e r y ; b a t t e r y . a d d E v e n t L i s t e n e r ( ' c h a r g i n g c h a n g e ' , u p d a t e S t a t u s ) ; b a t t e r y . a d d E v e n t L i s t e n e r ( ' l e v e l c h a n g e ' , u p d a t e S t a t u s ) ; f u n c t i o n u p d a t e S t a t u s ( ) { a l e r t ( ' B a t t e r y s t a t u s : ' + b a t t e r y . l e v e l * 1 0 0 + ' % ' ) ; i f ( b a t t e r y . c h a r g i n g ) { a l e r t ( ' B a t t e r y i s c h a r g i n g . . . ' ) ; } } 14* 16

Slide 38

Slide 38 text

Battery Status API http://goo.gl/V1n6h (Pictured: Firefox)

Slide 39

Slide 39 text

Vibration API v a r v i b r a t e = n a v i g a t o r . v i b r a t e | | n a v i g a t o r . m o z V i b r a t e ; / / v i b r a t e f o r 1 s e c v i b r a t e ( 1 0 0 0 ) ; / / v i b r a t e s f o r 1 s e c , s t i l l f o r 0 . 5 s e c o n d s , / / a n d v i b r a t e s a g a i n f o r 2 s e c v i b r a t e ( [ 1 0 0 0 , 5 0 0 , 2 0 0 0 ] ) ; 14* 16 30

Slide 40

Slide 40 text

Watch the demo video at: https://vimeo.com/86735842 Demo: http://goo.gl/SFzKaH

Slide 41

Slide 41 text

Ambient Light Events 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 ) { a l e r t ( e . v a l u e ) ; } ) ; Returned value (in lux) My Observations < 400 Indoor 400-1000 Office lighting. Outdoor (in foggy San Francisco) > 1000 Outdoor daylight (anywhere else in California) 15

Slide 42

Slide 42 text

Watch the demo video at: https://vimeo.com/79466285 Demo: http://codepen.io/girliemac/pen/pvmBs

Slide 43

Slide 43 text

Keep up to date https://flic.kr/p/8tuc1u by randomliteraturecouncil b

Slide 44

Slide 44 text

Chromium Dashboard

Slide 45

Slide 45 text

IE Platform Status

Slide 46

Slide 46 text

Köszönöm! Tomomi Imura • girliemac.com • twitter.com/girlie_mac • github.com/girliemac