Slide 1

Slide 1 text

ME DEVELOPER ADVOCATE AT GOOGLE @Paul Kinlan

Slide 2

Slide 2 text

NEXT EVOLUTION OF CHROME APPS DEVOXX 2012 By @Paul Kinlan

Slide 3

Slide 3 text

I HEARD THIS ON A TRAIN “Oh I don't use apps on the web, I just use it for news and wikipedia” — Some guy

Slide 4

Slide 4 text

AVAILABILITY “Availability - noun: The act of being awesome all the time.” — Kinsters Compendium of Wordage

Slide 5

Slide 5 text

WHY OFFLINE? 1. Mobile? 2. Responsiveness? Be there when your users need you.

Slide 6

Slide 6 text

EXPERIMENT WITH OFFLINE APPS Top 50(ish) apps on iOS and Android Downloaded App Pulled the plug Loaded app

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

SAME EXPERIMENT WITH OFFLINE WEB APPS

Slide 9

Slide 9 text

MOST APPS

Slide 10

Slide 10 text

THE EXCEPTION

Slide 11

Slide 11 text

SUMMARY Native Apps win hands down Lots works brilliantly offline, no online requirement. Many load and offer UI with cached content but needs web for more information. Many games loads and then download even more data. Minority of apps fail to load. The user is kept inside the app experience

Slide 12

Slide 12 text

WEB DEVELOPERS ARE FROM VENUS “I will add offline support into my app” — A Web Dev “I will add online support into my app” — An App Dev

Slide 13

Slide 13 text

WARNING OFFLINE APPS ARE A PARADIGM SHIFT FOR WEB DEVELOPERS THE WEB IS A HODGE-PODGE OF API'S THAT DON'T QUITE WORK TOGETHER

Slide 14

Slide 14 text

APPCACHE If you want to have any offline experience at all, you have to use it.

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

STORAGE? If you want to have any offline storage at all, you have to use both indexedDB and WebSQL. Note: The versioning API just changed :\

Slide 17

Slide 17 text

CHROME APPS A NEW PLATFORM

Slide 18

Slide 18 text

WHY?!?!

Slide 19

Slide 19 text

APPS SHOULD BE OFFLINE BY DEFAULT Apps should load regardless of connection.

Slide 20

Slide 20 text

APPS SHOULD LOOK AND FEEL NATIVE

Slide 21

Slide 21 text

APPS SHOULD BE ABLE ACCESS TO NATIVE API'S Network Sockets Serial Ports USB and Bluetooth File System Media Galleries

Slide 22

Slide 22 text

APPS SHOULD BE SECURE BY DEFAULT CSP FTW! # B l o c k e v e r y t h i n g , t h e n w h i t e l i s t f r o m t h e r e . d e f a u l t - s r c ' n o n e ' ; # A c c e p t C S S f r o m t h e e x t e n s i o n ' s p a c k a g e . s t y l e - s r c ' s e l f ' ; # A c c e p t J a v a S c r i p t f r o m t h e e x t e n s i o n ' s p a c k a g e . s c r i p t - s r c ' s e l f ' ; # A l l o w i m a g e s f r o m G o o g l e M a p s t o l o a d o v e r H T T P S . i m g - s r c h t t p s : / / m a p s . g o o g l e . c o m ; a l e r t ( e v a l ( " f o o . b a r . b a z " ) ) ; w i n d o w . s e t T i m e o u t ( " a l e r t ( ' h i ' ) " , 1 0 ) ; w i n d o w . s e t I n t e r a l ( " a l e r t ( ' h i ' ) " , 1 0 ) ; n e w F u n c t i o n ( " r e t u r n f o o . b a r . b a z " ) ;

Slide 23

Slide 23 text

FINALLY. APPS SHOULD BE BUILT USING TECHNOLOGY THAT WE KNOW AND LOVE HTML CSS JAVASCRIPT

Slide 24

Slide 24 text

ACCESS TO HARDWARE NETWORK SOCKETS WEB SERVER IN THE BROWSER

Slide 25

Slide 25 text

IT'S JUST A SOCKET v a r s o c k e t = c h r o m e . s o c k e t ; s o c k e t . c r e a t e ( " t c p " , { } , f u n c t i o n ( _ s o c k e t I n f o ) { s o c k e t I n f o = _ s o c k e t I n f o ; / / C a c h e g l o b a l l y [ e e k ] s o c k e t . l i s t e n ( s o c k e t I n f o . s o c k e t I d , " 1 2 7 . 0 . 0 . 1 " , 8 0 8 0 , 2 0 , f u n c t i o n ( r e s u l t ) { / / A c c e p t t h e f i r s t r e s p o n s e s o c k e t . a c c e p t ( s o c k e t I n f o . s o c k e t I d , o n A c c e p t ) ; } ) ; } ) ;

Slide 26

Slide 26 text

BUT THERE IS A LOT OF CODE v a r o n A c c e p t = f u n c t i o n ( a c c e p t I n f o ) { / / T h i s i s a r e q u e s t t h a t t h e s y s t e m i s p r o c e s s i n g . / / R e a d t h e d a t a . s o c k e t . r e a d ( a c c e p t I n f o . s o c k e t I d , f u n c t i o n ( r e a d I n f o ) { / / P a r s e t h e r e q u e s t . v a r d a t a = a r r a y B u f f e r T o S t r i n g ( r e a d I n f o . d a t a ) ; / / W e o n l y w a n t t o h a n d l e g e t r e q u e s t s i f ( d a t a . i n d e x O f ( " G E T " ) = = 0 ) { / / w e c a n o n l y d e a l w i t h G E T r e q u e s t s v a r u r i E n d = d a t a . i n d e x O f ( " " , 4 ) ; i f ( u r i E n d < 0 ) { / * t h r o w a w o b b l e r * / r e t u r n ; } v a r u r i = d a t a . s u b s t r i n g ( 4 , u r i E n d ) ; v a r f i l e = f i l e s M a p [ u r i ] ; / / p i c k o u t t h e f i l e w e w a n t t o s e r v e r i f ( ! ! f i l e = = f a l s e ) { / * F i l e d o e s n o t e x i s t * / r e t u r n ; } w r i t e 2 0 0 R e s p o n s e ( a c c e p t I n f o . s o c k e t I d , f i l e ) ; } e l s e { / / T h r o w a n e r r o r s o c k e t . d e s t r o y ( a c c e p t I n f o . s o c k e t I d ) ; / / W e n e e d t o s a y t h a t w e c a n a c c e p t a n o t h e r i n c o m i n g r e q u e s t . s o c k e t . a c c e p t ( s o c k e t I n f o . s o c k e t I d , o n A c c e p t ) ; } } ) ; } ;

Slide 27

Slide 27 text

CAN WE USE AN EXISTING ECO- SYSTEM?

Slide 28

Slide 28 text

LIKE NODE?

Slide 29

Slide 29 text

NODE API'S IN THE BROWSER MARKDOWN o n l o a d = f u n c t i o n ( ) { v a r m d E l = d o c u m e n t . g e t E l e m e n t B y I d ( " m a r k d o w n " ) ; v a r h t m l E l = d o c u m e n t . g e t E l e m e n t B y I d ( " h t m l " ) ; v a r m d = r e q u i r e ( " m a r k d o w n " ) . m a r k d o w n ; m d E l . o n k e y p r e s s = f u n c t i o n ( ) { v a r o u t p u t = m d . t o H T M L ( m d E l . v a l u e ) ; h t m l E l . i n n e r H T M L = o u t p u t ; } ; } ; $ b r o w s e r i f y - r m a r k d o w n - o b u n d l e . j s

Slide 30

Slide 30 text

NODE API'S IN THE BROWSER BROWSERIFY + CHROME MAPPING = WIN powered by https://github.com/iceddev/http-chromify Browserify Chrome v a r h t t p = r e q u i r e ( ' h t t p ' ) ; h t t p . c r e a t e S e r v e r ( f u n c t i o n ( r e q , r e s ) { r e s . w r i t e H e a d ( 2 0 0 , { ' C o n t e n t - T y p e ' : ' t e x t / p l a i n ' } ) ; r e s . e n d ( ' H e l l o W o r l d \ n ' ) ; } ) . l i s t e n ( 1 3 3 7 , ' 1 2 7 . 0 . 0 . 1 ' ) ; c o n s o l e . l o g ( ' S e r v e r r u n n i n g a t h t t p : / / 1 2 7 . 0 . 0 . 1 : 1 3 3 7 / ' ) ;

Slide 31

Slide 31 text

CLOSING THOUGHTS

Slide 32

Slide 32 text

DO AWESOME

Slide 33

Slide 33 text

AND BUILD DRONES youtube.com/watch?v=K7sG1dRSn4c

Slide 34

Slide 34 text

THANKS @Paul_Kinlan +Paul Kinlan http://paul.kinlan.me LINKS Browserify - Chromeify - net - http - github.com/substack/node-browserify github.com/GoogleChrome/browserify-chrome github.com/GoogleChrome/net-chromeify github.com/iceddev/http-chromify

Slide 35

Slide 35 text

No content