Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The Next Evolution of Chrome Apps - Devoxx 2012

Paul Kinlan
November 14, 2012

The Next Evolution of Chrome Apps - Devoxx 2012

A brief introduction to the new Chrome Apps platform and why we are doing it.

Paul Kinlan

November 14, 2012
Tweet

More Decks by Paul Kinlan

Other Decks in Programming

Transcript

  1. ME
    DEVELOPER ADVOCATE AT GOOGLE
    @Paul Kinlan

    View full-size slide

  2. NEXT EVOLUTION OF
    CHROME APPS
    DEVOXX 2012
    By @Paul Kinlan

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  7. SAME EXPERIMENT WITH OFFLINE WEB
    APPS

    View full-size slide

  8. THE EXCEPTION

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  13. 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 :\

    View full-size slide

  14. CHROME APPS
    A NEW PLATFORM

    View full-size slide

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

    View full-size slide

  16. APPS SHOULD LOOK AND FEEL NATIVE

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  20. ACCESS TO HARDWARE
    NETWORK SOCKETS
    WEB SERVER IN THE
    BROWSER

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  23. CAN WE USE AN
    EXISTING ECO-
    SYSTEM?

    View full-size slide

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

    View full-size slide

  25. 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
    /
    '
    )
    ;

    View full-size slide

  26. CLOSING
    THOUGHTS

    View full-size slide

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

    View full-size slide

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

    View full-size slide