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

Building Web Apps of the future. Tomorrow, today and yesterday.

Paul Kinlan
November 12, 2012

Building Web Apps of the future. Tomorrow, today and yesterday.

"I skate to where the puck is going to be, not where it has been." - Wayne Gretzky. Building apps using AppCache and IndexedDb. Pfft! That is so 2011. The browser is an amazing runtime that can already deliver amazing apps. Let's dive into the technologies that will help you deliver amazing web apps that blow your users socks off now and in the future.

Paul Kinlan

November 12, 2012
Tweet

More Decks by Paul Kinlan

Other Decks in Programming

Transcript

  1. ME
    DEVELOPER ADVOCATE AT GOOGLE
    @Paul Kinlan

    View Slide

  2. BUILDING WEB APPS OF
    THE FUTURE TODAY,
    TOMORROW AND
    YESTERDAY
    By @Paul Kinlan

    View Slide

  3. @AEROTWIST IS RUNNING A SWEEP-STAKE
    ON MY "NERVOUS" WORD.
    Tweet him.

    View Slide

  4. 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 Slide

  5. BUILDING
    APPS FOR
    YESTERDAY

    View Slide

  6. STOP IT

    View Slide

  7. BUILDING
    APPS FOR
    TODAY

    View Slide

  8. IT'S HARD
    IT IS ALSO BROKEN
    DateDiff anyone?

    View Slide

  9. WE CAN STILL DO SOME
    AMAZING
    AMAZING
    AMAZING
    AMAZING
    AMAZING
    AMAZING
    AMAZING
    AMAZING
    AMAZING
    AMAZING
    AMAZING
    AMAZING
    AMAZING
    AMAZING
    AMAZING
    AMAZING
    AMAZING
    AMAZING
    AMAZING
    AMAZING
    AMAZING
    AMAZING STUFF

    View Slide

  10. E.G WEB LAB

    View Slide

  11. chromeweblab.com

    View Slide

  12. AND JAM WITH CHROME
    LAUNCHED YESTERDAY!

    View Slide

  13. jamwithchrome.com

    View Slide

  14. WHAT I WANT FROM AN APP
    1. Availability
    With added
    2. Interoperability
    3. Experience

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  18. View Slide

  19. SAME EXPERIMENT WITH OFFLINE WEB
    APPS

    View Slide

  20. MOST APPS

    View Slide

  21. THE EXCEPTION

    View Slide

  22. 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 Slide

  23. 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 Slide

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

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

    View Slide

  26. View Slide

  27. APPCACHE HINTS
    Listen to Andrew Betts + Jake Archibald
    Prefer client side templating
    Avoid HTML5 history, prefer onhashchange
    Put webfonts in to the app cache
    NETWORK: * for using analytics

    View Slide

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

  29. INTEROPERABILITY
    “No App is an island. — Paul Kinlan”

    View Slide

  30. WEB INTENTS
    AW SNAP.

    View Slide

  31. Photo by Shawn Hoke

    View Slide

  32. I HAD WEB INTENTS FOR 25 MINUTES
    I suppose I have this time free now for questions?

    View Slide

  33. REGISTER PROTOCOL HANDLER
    Use well known schemes
    Create new schemes
    Warning: Does not work well offline.
    n
    a
    v
    i
    g
    a
    t
    o
    r
    .
    r
    e
    g
    i
    s
    t
    e
    r
    P
    r
    o
    t
    o
    c
    o
    l
    H
    a
    n
    d
    l
    e
    r
    (
    "
    m
    a
    i
    l
    t
    o
    "
    , "
    h
    t
    t
    p
    :
    /
    /
    p
    a
    u
    l
    .
    k
    i
    n
    l
    a
    n
    .
    m
    e
    /
    ?
    %
    s
    "
    )
    n
    a
    v
    i
    g
    a
    t
    o
    r
    .
    r
    e
    g
    i
    s
    t
    e
    r
    P
    r
    o
    t
    o
    c
    o
    l
    H
    a
    n
    d
    l
    e
    r
    (
    "
    w
    e
    b
    +
    I
    m
    O
    n
    a
    H
    o
    r
    s
    e
    "
    , "
    h
    t
    t
    p
    :
    /
    /
    p
    a
    u
    l
    .
    k
    i
    n
    l
    a
    n
    .
    m
    e
    /
    ?
    %
    s
    "
    )

    View Slide

  34. REGISTER CONTENT HANDLER
    Warning: Does not work well offline.
    n
    a
    v
    i
    g
    a
    t
    o
    r
    .
    r
    e
    g
    i
    s
    t
    e
    r
    C
    o
    n
    t
    e
    n
    t
    H
    a
    n
    d
    l
    e
    r
    (
    "
    t
    e
    x
    t
    /
    p
    l
    a
    i
    n
    "
    , "
    h
    t
    t
    p
    :
    /
    /
    p
    a
    u
    l
    .
    k
    i
    n
    l
    a
    n
    .
    m
    e
    /
    ?
    %
    s
    "
    )

    View Slide

  35. API'S ARE ONLY HALF THE PROBLEM
    Eco-systems need to be built around API's.
    You have to provide value to the developer.

    View Slide

  36. EXPERIENCE
    “Do what the user expects — Paul Kinlan”

    View Slide

  37. DOWNLOAD
    Navigating cool.
    /to something isn't
    N
    a
    v
    i
    g
    a
    t
    i
    n
    g <
    a h
    r
    e
    f
    =
    "
    i
    m
    a
    g
    e
    s
    /
    m
    e
    .
    p
    n
    g
    " d
    o
    w
    n
    l
    o
    a
    d
    =
    "
    a
    w
    e
    s
    o
    m
    e
    .
    p
    n
    g
    "
    >
    /
    t
    o s
    o
    m
    e
    t
    h
    i
    n
    g i
    s
    n
    '
    t <
    /
    a
    > c
    o
    o
    l
    .

    View Slide

  38. CREATEOBJECTURL
    This is a story all about how...
    MyFile.txt Create file
    w
    i
    n
    d
    o
    w
    .
    U
    R
    L
    .
    c
    r
    e
    a
    t
    e
    O
    b
    j
    e
    c
    t
    U
    R
    L
    (
    b
    )
    ;
    v
    a
    r d
    o
    w
    n
    l
    o
    a
    d
    F
    i
    l
    e = f
    u
    n
    c
    t
    i
    o
    n
    (
    ) {
    w
    i
    n
    d
    o
    w
    .
    U
    R
    L = w
    i
    n
    d
    o
    w
    .
    w
    e
    b
    k
    i
    t
    U
    R
    L |
    | w
    i
    n
    d
    o
    w
    .
    U
    R
    L
    ;
    v
    a
    r t
    y
    p
    e
    r = d
    o
    c
    u
    m
    e
    n
    t
    .
    g
    e
    t
    E
    l
    e
    m
    e
    n
    t
    B
    y
    I
    d
    (
    "
    t
    y
    p
    e
    r
    "
    )
    ;
    v
    a
    r b = n
    e
    w B
    l
    o
    b
    (
    [
    t
    y
    p
    e
    r
    .
    t
    e
    x
    t
    C
    o
    n
    t
    e
    n
    t
    ]
    , {
    t
    y
    p
    e
    : "
    t
    e
    x
    t
    /
    p
    l
    a
    i
    n
    "
    }
    )
    v
    a
    r a = d
    o
    c
    u
    m
    e
    n
    t
    .
    c
    r
    e
    a
    t
    e
    E
    l
    e
    m
    e
    n
    t
    (
    '
    a
    '
    )
    ;
    a
    .
    d
    o
    w
    n
    l
    o
    a
    d = c
    o
    n
    t
    a
    i
    n
    e
    r
    .
    q
    u
    e
    r
    y
    S
    e
    l
    e
    c
    t
    o
    r
    (
    '
    i
    n
    p
    u
    t
    [
    t
    y
    p
    e
    =
    "
    t
    e
    x
    t
    "
    ]
    '
    )
    .
    v
    a
    l
    u
    e
    ;
    a
    .
    h
    r
    e
    f = w
    i
    n
    d
    o
    w
    .
    U
    R
    L
    .
    c
    r
    e
    a
    t
    e
    O
    b
    j
    e
    c
    t
    U
    R
    L
    (
    b
    )
    ;
    a
    .
    t
    e
    x
    t
    C
    o
    n
    t
    e
    n
    t = '
    D
    o
    w
    n
    l
    o
    a
    d r
    e
    a
    d
    y
    '
    ;
    a
    .
    d
    a
    t
    a
    s
    e
    t
    .
    d
    o
    w
    n
    l
    o
    a
    d
    u
    r
    l = [
    "
    t
    e
    x
    t
    /
    p
    l
    a
    i
    n
    "
    , a
    .
    d
    o
    w
    n
    l
    o
    a
    d
    , a
    .
    h
    r
    e
    f
    ]
    .
    j
    o
    i
    n
    (
    '
    :
    '
    )
    ;
    o
    u
    t
    p
    u
    t
    .
    a
    p
    p
    e
    n
    d
    C
    h
    i
    l
    d
    (
    a
    )
    ;
    }
    ;

    View Slide

  39. No file chosen
    Choose File
    ACCESSING FILES
    <
    i
    n
    p
    u
    t t
    y
    p
    e
    =
    f
    i
    l
    e [
    w
    e
    b
    k
    i
    t
    D
    i
    r
    e
    c
    t
    o
    r
    y
    ]
    >
    i
    n
    p
    u
    t
    .
    o
    n
    c
    h
    a
    n
    g
    e = f
    u
    n
    c
    t
    i
    o
    n
    (
    e
    ) {
    v
    a
    r f
    i
    l
    e
    s = e
    .
    s
    r
    c
    E
    l
    e
    m
    e
    n
    t
    .
    f
    i
    l
    e
    s
    ;
    f
    o
    r
    (
    v
    a
    r f i
    n f
    i
    l
    e
    s
    ) {
    v
    a
    r f
    i
    l
    e = f
    i
    l
    e
    s
    [
    f
    ]
    ;
    v
    a
    r l
    i = d
    o
    c
    u
    m
    e
    n
    t
    .
    c
    r
    e
    a
    t
    e
    E
    l
    e
    m
    e
    n
    t
    (
    "
    l
    i
    "
    )
    ;
    l
    i
    .
    t
    e
    x
    t
    C
    o
    n
    t
    e
    n
    t = f
    i
    l
    e
    .
    n
    a
    m
    e
    ;
    f
    i
    l
    e
    l
    i
    s
    t
    .
    a
    p
    p
    e
    n
    d
    C
    h
    i
    l
    d
    (
    l
    i
    )
    ;
    }
    }
    ;

    View Slide

  40. ACCESSING DRAGGED FILES
    t
    a
    r
    g
    e
    t
    .
    o
    n
    d
    r
    o
    p = f
    u
    n
    c
    t
    i
    o
    n
    (
    e
    ) {
    e
    .
    p
    r
    e
    v
    e
    n
    t
    D
    e
    f
    a
    u
    l
    t
    (
    )
    ;
    v
    a
    r f
    i
    l
    e
    s = e
    .
    d
    a
    t
    a
    T
    r
    a
    n
    s
    f
    e
    r
    .
    f
    i
    l
    e
    s
    ;
    f
    o
    r
    (
    v
    a
    r f = 0
    ; f < f
    i
    l
    e
    s
    .
    l
    e
    n
    g
    t
    h
    ; f
    +
    +
    ) {
    v
    a
    r f
    i
    l
    e = f
    i
    l
    e
    s
    [
    f
    ]
    ;
    v
    a
    r l
    i = d
    o
    c
    u
    m
    e
    n
    t
    .
    c
    r
    e
    a
    t
    e
    E
    l
    e
    m
    e
    n
    t
    (
    "
    l
    i
    "
    )
    ;
    l
    i
    .
    t
    e
    x
    t
    C
    o
    n
    t
    e
    n
    t = f
    i
    l
    e
    .
    n
    a
    m
    e
    ;
    f
    i
    l
    e
    l
    i
    s
    t
    .
    a
    p
    p
    e
    n
    d
    C
    h
    i
    l
    d
    (
    l
    i
    )
    ;
    }
    }
    ;

    View Slide

  41. ACTUALLY READING THE FILE
    v
    a
    r f
    i
    l
    e = /
    / R
    e
    s
    u
    l
    t o
    f o
    p
    e
    r
    a
    t
    i
    o
    n
    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
    .
    o
    n
    l
    o
    a
    d = f
    u
    n
    c
    t
    i
    o
    n
    (
    e
    ) {
    /
    / R
    E
    A
    D f
    i
    r
    s
    t 1
    0 b
    y
    t
    e
    s
    v
    a
    r b
    y
    t
    e
    s = n
    e
    w U
    i
    n
    t
    8
    A
    r
    r
    a
    y
    (
    e
    .
    t
    a
    r
    g
    e
    t
    .
    r
    e
    s
    u
    l
    t
    .
    s
    l
    i
    c
    e
    (
    0
    ,
    1
    0
    )
    )
    ;
    f
    o
    r
    (
    v
    a
    r b = 0
    ; b < b
    y
    t
    e
    s
    .
    l
    e
    n
    g
    t
    h
    ; b
    +
    + ) {
    d
    r
    o
    p
    2
    .
    i
    n
    n
    e
    r
    T
    e
    x
    t +
    = "
    0
    x
    " + b
    y
    t
    e
    s
    [
    b
    ]
    .
    t
    o
    S
    t
    r
    i
    n
    g
    (
    1
    6
    )
    ;
    }
    }
    ;
    /
    / R
    e
    a
    d t
    h
    e d
    a
    t
    a i
    n
    r
    e
    a
    d
    e
    r
    .
    r
    e
    a
    d
    A
    s
    A
    r
    r
    a
    y
    B
    u
    f
    f
    e
    r
    (
    f
    i
    l
    e
    )
    ;

    View Slide

  42. I CAN HAZ FILE SYSTEM
    w
    i
    n
    d
    o
    w
    .
    r
    e
    q
    u
    e
    s
    t
    F
    i
    l
    e
    S
    y
    s
    t
    e
    m
    (
    T
    E
    M
    P
    O
    R
    A
    R
    Y
    , /
    / p
    e
    r
    s
    i
    s
    t
    e
    n
    t v
    s
    . t
    e
    m
    p
    o
    r
    a
    r
    y s
    t
    o
    r
    a
    g
    e
    1
    0
    2
    4 * 1
    0
    2
    4
    , /
    / s
    i
    z
    e (
    b
    y
    t
    e
    s
    ) o
    f n
    e
    e
    d
    e
    d s
    p
    a
    c
    e
    i
    n
    i
    t
    F
    s
    , /
    / s
    u
    c
    c
    e
    s
    s c
    a
    l
    l
    b
    a
    c
    k
    o
    p
    t
    _
    e
    r
    r
    o
    r
    H
    a
    n
    d
    l
    e
    r /
    / o
    p
    t
    . e
    r
    r
    o
    r c
    a
    l
    l
    b
    a
    c
    k
    , d
    e
    n
    i
    a
    l o
    f a
    c
    c
    e
    s
    s
    )
    ;

    View Slide

  43. CACHING FILES
    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
    (
    '
    G
    E
    T
    '
    , '
    /
    p
    a
    t
    h
    /
    t
    o
    /
    i
    m
    a
    g
    e
    .
    p
    n
    g
    '
    , t
    r
    u
    e
    )
    ;
    x
    h
    r
    .
    r
    e
    s
    p
    o
    n
    s
    e
    T
    y
    p
    e = '
    a
    r
    r
    a
    y
    b
    u
    f
    f
    e
    r
    '
    ;
    x
    h
    r
    .
    o
    n
    l
    o
    a
    d = f
    u
    n
    c
    t
    i
    o
    n
    (
    e
    ) {
    w
    i
    n
    d
    o
    w
    .
    r
    e
    q
    u
    e
    s
    t
    F
    i
    l
    e
    S
    y
    s
    t
    e
    m
    (
    T
    E
    M
    P
    O
    R
    A
    R
    Y
    , 1
    0
    2
    4 * 1
    0
    2
    4
    , f
    u
    n
    c
    t
    i
    o
    n
    (
    f
    s
    ) {
    f
    s
    .
    r
    o
    o
    t
    .
    g
    e
    t
    F
    i
    l
    e
    (
    '
    i
    m
    a
    g
    e
    .
    p
    n
    g
    '
    , {
    c
    r
    e
    a
    t
    e
    : t
    r
    u
    e
    }
    , f
    u
    n
    c
    t
    i
    o
    n
    (
    f
    i
    l
    e
    E
    n
    t
    r
    y
    ) {
    f
    i
    l
    e
    E
    n
    t
    r
    y
    .
    c
    r
    e
    a
    t
    e
    W
    r
    i
    t
    e
    r
    (
    f
    u
    n
    c
    t
    i
    o
    n
    (
    w
    r
    i
    t
    e
    r
    ) {
    w
    r
    i
    t
    e
    r
    .
    o
    n
    w
    r
    i
    t
    e
    e
    n
    d = f
    u
    n
    c
    t
    i
    o
    n
    (
    e
    ) { .
    .
    . }
    ;
    w
    r
    i
    t
    e
    r
    .
    o
    n
    e
    r
    r
    o
    r = f
    u
    n
    c
    t
    i
    o
    n
    (
    e
    ) { .
    .
    . }
    ;
    w
    r
    i
    t
    e
    r
    .
    w
    r
    i
    t
    e
    (
    n
    e
    w B
    l
    o
    b
    (
    [
    x
    h
    r
    .
    r
    e
    s
    p
    o
    n
    s
    e
    ]
    , {
    t
    y
    p
    e
    : '
    i
    m
    a
    g
    e
    /
    p
    n
    g
    '
    }
    )
    )
    ;
    }
    , o
    n
    E
    r
    r
    o
    r
    )
    ;
    }
    , o
    n
    E
    r
    r
    o
    r
    )
    ;
    }
    , o
    n
    E
    r
    r
    o
    r
    )
    ;
    }
    ;
    x
    h
    r
    .
    s
    e
    n
    d
    (
    )
    ;

    View Slide

  44. FILER.JS MAKES IT EASY
    github.com/ebidel/filer.js
    v
    a
    r f
    i
    l
    e
    r = n
    e
    w F
    i
    l
    e
    r
    (
    )
    ;
    f
    i
    l
    e
    r
    .
    i
    n
    i
    t
    (
    {
    p
    e
    r
    s
    i
    s
    t
    e
    n
    t
    : f
    a
    l
    s
    e
    , s
    i
    z
    e
    : 1
    0
    2
    4 * 1
    0
    2
    4
    }
    , f
    u
    n
    c
    t
    i
    o
    n
    (
    f
    s
    ) {
    .
    .
    .
    }
    , o
    n
    E
    r
    r
    o
    r
    )
    ;
    f
    i
    l
    e
    r
    .
    l
    s
    (
    '
    p
    a
    t
    h
    /
    t
    o
    /
    s
    o
    m
    e
    /
    d
    i
    r
    /
    '
    , f
    u
    n
    c
    t
    i
    o
    n
    (
    e
    n
    t
    r
    i
    e
    s
    ) { .
    .
    . }
    , o
    n
    E
    r
    r
    o
    r
    )
    ;
    f
    i
    l
    e
    r
    .
    c
    p
    (
    '
    f
    i
    l
    e
    .
    t
    x
    t
    '
    , '
    /
    p
    a
    t
    h
    /
    t
    o
    /
    f
    o
    l
    d
    e
    r
    '
    , '
    n
    e
    w
    n
    a
    m
    e
    .
    t
    x
    t
    '
    , f
    u
    n
    c
    t
    i
    o
    n
    (
    e
    n
    t
    r
    y
    ) {
    /
    / e
    n
    t
    r
    y
    .
    f
    u
    l
    l
    P
    a
    t
    h =
    = '
    /
    p
    a
    t
    h
    /
    t
    o
    /
    f
    o
    l
    d
    e
    r
    /
    n
    e
    w
    n
    a
    m
    e
    .
    t
    x
    t
    '
    }
    , o
    n
    E
    r
    r
    o
    r
    )
    ;
    v
    a
    r b = n
    e
    w B
    l
    o
    b
    (
    [
    '
    b
    o
    d
    y { c
    o
    l
    o
    r
    : r
    e
    d
    ; }
    '
    ]
    , {
    t
    y
    p
    e
    : '
    t
    e
    x
    t
    /
    c
    s
    s
    '
    }
    )
    ;
    f
    i
    l
    e
    r
    .
    w
    r
    i
    t
    e
    (
    '
    s
    t
    y
    l
    e
    s
    .
    c
    s
    s
    '
    , {
    d
    a
    t
    a
    : b
    , t
    y
    p
    e
    : b
    .
    t
    y
    p
    e
    }
    , f
    u
    n
    c
    t
    i
    o
    n
    (
    e
    n
    t
    r
    y
    , w
    r
    i
    t
    e
    r
    ) {
    .
    .
    .
    }
    , o
    n
    E
    r
    r
    o
    r
    )
    ;

    View Slide

  45. MAKE THE FILE SYSTEM API CROSS
    BROWSER
    and a
    (http://goo.gl/WSRy0)
    https://github.com/ebidel/idb.filesystem.js Demo
    I
    t
    '
    s j
    u
    s
    t t
    h
    e s
    a
    m
    e
    . F
    T
    W
    .

    View Slide

  46. BUILDING
    APPS FOR
    TOMORROW...

    View Slide

  47. CAMERA INPUT
    v
    a
    r o
    p
    t
    i
    o
    n
    s = {
    v
    i
    d
    e
    o
    : t
    r
    u
    e
    , a
    u
    d
    i
    o
    : f
    a
    l
    s
    e
    }
    ;
    v
    a
    r v = d
    o
    c
    u
    m
    e
    n
    t
    .
    q
    u
    e
    r
    y
    S
    e
    l
    e
    c
    t
    o
    r
    (
    '
    #
    c
    a
    m
    e
    r
    a
    '
    )
    ;
    v
    a
    r c
    a
    l
    l
    b
    a
    c
    k = f
    u
    n
    c
    t
    i
    o
    n
    (
    s
    )
    {
    v
    .
    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
    )
    ;
    }
    n
    a
    v
    i
    g
    a
    t
    o
    r
    .
    g
    e
    t
    U
    s
    e
    r
    M
    e
    d
    i
    a
    (
    o
    p
    t
    i
    o
    n
    s
    , c
    a
    l
    l
    b
    a
    c
    k
    )
    ;

    View Slide

  48. AUDIO INPUT
    0:13
    /
    / s
    u
    c
    c
    e
    s
    s c
    a
    l
    l
    b
    a
    c
    k w
    h
    e
    n r
    e
    q
    u
    e
    s
    t
    i
    n
    g a
    u
    d
    i
    o i
    n
    p
    u
    t s
    t
    r
    e
    a
    m
    f
    u
    n
    c
    t
    i
    o
    n g
    o
    t
    S
    t
    r
    e
    a
    m
    (
    s
    t
    r
    e
    a
    m
    ) {
    v
    a
    r a
    u
    d
    i
    o
    C
    o
    n
    t
    e
    x
    t = n
    e
    w w
    e
    b
    k
    i
    t
    A
    u
    d
    i
    o
    C
    o
    n
    t
    e
    x
    t
    (
    )
    ;
    /
    / C
    r
    e
    a
    t
    e a
    n A
    u
    d
    i
    o
    N
    o
    d
    e f
    r
    o
    m t
    h
    e s
    t
    r
    e
    a
    m
    .
    v
    a
    r m
    S
    t
    r
    e
    a
    m
    S
    o
    u
    r
    c
    e = a
    u
    d
    i
    o
    C
    o
    n
    t
    e
    x
    t
    .
    c
    r
    e
    a
    t
    e
    M
    e
    d
    i
    a
    S
    t
    r
    e
    a
    m
    S
    o
    u
    r
    c
    e
    (
    s
    t
    r
    e
    a
    m
    )
    ;
    /
    / C
    o
    n
    n
    e
    c
    t i
    t t
    o t
    h
    e d
    e
    s
    t
    i
    n
    a
    t
    i
    o
    n t
    o h
    e
    a
    r y
    o
    u
    r
    s
    e
    l
    f (
    o
    r a
    n
    y o
    t
    h
    e
    r n
    o
    d
    e f
    o
    r p
    r
    o
    c
    e
    s
    s
    i
    n
    g
    !
    )
    m
    S
    t
    r
    e
    a
    m
    S
    o
    u
    r
    c
    e
    .
    c
    o
    n
    n
    e
    c
    t
    ( a
    u
    d
    i
    o
    C
    o
    n
    t
    e
    x
    t
    .
    d
    e
    s
    t
    i
    n
    a
    t
    i
    o
    n )
    ;
    }
    n
    a
    v
    i
    g
    a
    t
    o
    r
    .
    w
    e
    b
    k
    i
    t
    G
    e
    t
    U
    s
    e
    r
    M
    e
    d
    i
    a
    ( {
    a
    u
    d
    i
    o
    :
    t
    r
    u
    e
    }
    , g
    o
    t
    S
    t
    r
    e
    a
    m )
    ;

    View Slide

  49. APPLY CSS FILTERS
    v
    i
    d
    e
    o
    .
    c
    s
    s
    f
    i
    l
    t
    e
    r {
    -
    w
    e
    b
    k
    i
    t
    -
    a
    n
    i
    m
    a
    t
    i
    o
    n
    : f
    i
    l
    t
    e
    r
    s
    -
    a
    n
    i
    m 2
    s i
    n
    f
    i
    n
    i
    t
    e a
    l
    t
    e
    r
    n
    a
    t
    e
    ;
    }
    @
    -
    w
    e
    b
    k
    i
    t
    -
    k
    e
    y
    f
    r
    a
    m
    e
    s f
    i
    l
    t
    e
    r
    s
    -
    a
    n
    i
    m {
    0
    % {
    -
    w
    e
    b
    k
    i
    t
    -
    f
    i
    l
    t
    e
    r
    : b
    l
    u
    r
    (
    0
    p
    x
    ) g
    r
    a
    y
    s
    c
    a
    l
    e
    (
    0
    )
    ;
    }
    5
    0
    % {
    -
    w
    e
    b
    k
    i
    t
    -
    f
    i
    l
    t
    e
    r
    : b
    l
    u
    r
    (
    3
    p
    x
    ) g
    r
    a
    y
    s
    c
    a
    l
    e
    (
    0
    .
    5
    )
    ;
    }
    1
    0
    0
    % {
    -
    w
    e
    b
    k
    i
    t
    -
    f
    i
    l
    t
    e
    r
    : b
    l
    u
    r
    (
    6
    p
    x
    ) g
    r
    a
    y
    s
    c
    a
    l
    e
    (
    1
    )
    ;
    }
    }

    View Slide

  50. CSS SHADERS
    .
    d
    e
    m
    o
    -
    5 .
    t
    a
    r
    g
    e
    t {
    t
    r
    a
    n
    s
    i
    t
    i
    o
    n
    : a
    l
    l 2
    0
    0
    0
    m
    s
    ;
    -
    w
    e
    b
    k
    i
    t
    -
    f
    i
    l
    t
    e
    r
    : c
    u
    s
    t
    o
    m
    (
    u
    r
    l
    (
    s
    h
    a
    d
    e
    r
    s
    /
    d
    e
    m
    o
    5
    .
    v
    e
    r
    t
    ) m
    i
    x
    (
    u
    r
    l
    (
    s
    h
    a
    d
    e
    r
    s
    /
    d
    e
    m
    o
    5
    .
    f
    r
    a
    g
    ) n
    o
    r
    m
    a
    l s
    o
    u
    r
    c
    e
    -
    a
    t
    o
    p
    )
    ,
    4
    0 4
    0
    ,
    t
    i
    m
    e 0
    ,
    t
    r
    a
    n
    s
    f
    o
    r
    m p
    e
    r
    s
    p
    e
    c
    t
    i
    v
    e
    (
    6
    0
    0
    )
    )
    ;
    }
    .
    d
    e
    m
    o
    -
    5 .
    t
    a
    r
    g
    e
    t
    :
    h
    o
    v
    e
    r {
    -
    w
    e
    b
    k
    i
    t
    -
    f
    i
    l
    t
    e
    r
    : c
    u
    s
    t
    o
    m
    (
    u
    r
    l
    (
    s
    h
    a
    d
    e
    r
    s
    /
    d
    e
    m
    o
    5
    .
    v
    e
    r
    t
    ) m
    i
    x
    (
    u
    r
    l
    (
    s
    h
    a
    d
    e
    r
    s
    /
    d
    e
    m
    o
    5
    .
    f
    r
    a
    g
    ) n
    o
    r
    m
    a
    l s
    o
    u
    r
    c
    e
    -
    a
    t
    o
    p
    )
    ,
    4
    0 4
    0
    ,
    t
    i
    m
    e 2
    ,
    t
    r
    a
    n
    s
    f
    o
    r
    m p
    e
    r
    s
    p
    e
    c
    t
    i
    v
    e
    (
    6
    0
    0
    ) r
    o
    t
    a
    t
    e
    X
    (
    3
    5
    d
    e
    g
    ) s
    c
    a
    l
    e
    (
    0
    .
    8
    )
    )
    ;
    }

    View Slide

  51. WEB RTC
    Start Call Hang Up

    View Slide

  52. NOW FOR SOMETHING
    MORE AWESOME.
    A NEW PLATFORM

    View Slide

  53. WHY?!?!

    View Slide

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

    View Slide

  55. APPS SHOULD LOOK AND FEEL NATIVE

    View Slide

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

    View Slide

  57. 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 Slide

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

    View Slide

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

    View Slide

  60. 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 Slide

  61. 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 Slide

  62. CAN WE USE AN
    EXISTING ECO-SYSTEM?

    View Slide

  63. LIKE NODE?

    View Slide

  64. 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 Slide

  65. 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 Slide

  66. CLOSING
    THOUGHTS

    View Slide

  67. DO AWESOME

    View Slide

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

    View Slide

  69. 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 Slide

  70. View Slide