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

Taking over the web with Angular 2

Taking over the web with Angular 2

*Note* - Some slides were cropped and code snippets not shown as the code example slide are interactive and sadly I can only show one piece of code per slide rather than each line I was highlighting :)

Todd Motto

May 21, 2016
Tweet

More Decks by Todd Motto

Other Decks in Programming

Transcript

  1. TAKING OVER THE WEB
    WITH ANGULAR 2

    View Slide

  2. View Slide

  3. TALK OVERVIEW
    Component architecture
    Types of Components
    One-way dataflow
    Angular 2 implementation
    Web Component integration
    Bootstrapping, Components, Routing
    Server-side and Web Worker rendering

    View Slide

  4. WHAT IS ANGULAR 2?
    Successor to Angular 1.x
    Cutting edge and future focused
    Sits on top of the web platform
    Component-based architecture
    Web, mobile web
    Native mobile (NativeScript) and desktop

    View Slide

  5. THINK OF ANGULAR 2
    AS A PLATFORM
    NOT A FRAMEWORK

    View Slide

  6. ANGULAR 2 ANATOMY
    Angular core, modules (routing/http/etc)
    Components, one-way dataflow
    RxJS, TypeScript, CLI
    Template compiler
    Dependency Injection, Zones

    View Slide

  7. COMPONENT ARCHITECTURE

    View Slide

  8. View Slide

  9. View Slide

  10. View Slide

  11. View Slide

  12. View Slide

  13. View Slide

  14. View Slide

  15. View Slide

  16. View Slide

  17. View Slide

  18. View Slide

  19. View Slide

  20. View Slide

  21. View Slide

  22. View Slide

  23. TYPES OF COMPONENTS

    View Slide

  24. View Slide

  25. View Slide

  26. View Slide

  27. View Slide

  28. View Slide

  29. View Slide

  30. ONE-WAY DATA FLOW

    View Slide

  31. View Slide

  32. View Slide

  33. View Slide

  34. View Slide

  35. View Slide

  36. View Slide

  37. View Slide

  38. View Slide

  39. View Slide

  40. Data down, events up
    Components are APIs
    Well-defined Inputs/Outputs
    "What role does your Component play?"

    View Slide

  41. ANGULAR 2

    View Slide

  42. Component architecture
    Bootstrapping
    Components + Shadow DOM
    One-way dataflow
    Property and event binding
    Routing

    View Slide

  43. BOOTSTRAPPING

    View Slide

  44. 3
    5
    . <
    a
    p
    p
    >
    3
    6
    . L
    o
    a
    d
    i
    n
    g
    .
    .
    .
    3
    7
    . <
    /
    a
    p
    p
    >
    3
    8
    . <
    s
    c
    r
    i
    p
    t s
    r
    c
    =
    "
    b
    u
    n
    d
    l
    e
    .
    j
    s
    "
    >
    <
    /
    s
    c
    r
    i
    p
    t
    >
    2
    2
    . p
    a
    c
    k
    a
    g
    e
    s
    : {
    2
    3
    . a
    p
    p
    : {
    2
    4
    . m
    a
    i
    n
    : '
    .
    /
    m
    a
    i
    n
    .
    t
    s
    '
    ,
    2
    5
    . d
    e
    f
    a
    u
    l
    t
    E
    x
    t
    e
    n
    s
    i
    o
    n
    : '
    t
    s
    '
    2
    6
    . }
    2
    7
    . }
    2
    8
    . }
    )
    ;
    2
    9
    . S
    y
    s
    t
    e
    m
    3
    0
    . .
    i
    m
    p
    o
    r
    t
    (
    '
    a
    p
    p
    '
    )
    3
    1
    . .
    c
    a
    t
    c
    h
    (
    c
    o
    n
    s
    o
    l
    e
    .
    e
    r
    r
    o
    r
    .
    b
    i
    n
    d
    (
    c
    o
    n
    s
    o
    l
    e
    )
    )
    ;
    3
    2
    . <
    /
    s
    c
    r
    i
    p
    t
    >
    3
    3
    . <
    /
    h
    e
    a
    d
    >
    3
    4
    . <
    b
    o
    d
    y
    >
    3
    9
    . <
    /
    b
    o
    d
    y
    >
    4
    0
    . <
    /
    h
    t
    m
    l
    >

    View Slide

  45. 5
    . b
    o
    o
    t
    s
    t
    r
    a
    p
    (
    A
    p
    p
    C
    o
    m
    p
    o
    n
    e
    n
    t
    )
    ;
    1
    . /
    / m
    a
    i
    n
    .
    t
    s
    2
    . i
    m
    p
    o
    r
    t {
    b
    o
    o
    t
    s
    t
    r
    a
    p
    } f
    r
    o
    m '
    @
    a
    n
    g
    u
    l
    a
    r
    /
    p
    l
    a
    t
    f
    o
    r
    m
    -
    b
    r
    o
    w
    s
    e
    r
    -
    d
    y
    n
    a
    m
    i
    c
    '
    ;
    3
    . i
    m
    p
    o
    r
    t {
    A
    p
    p
    C
    o
    m
    p
    o
    n
    e
    n
    t
    } f
    r
    o
    m '
    .
    /
    a
    p
    p
    .
    c
    o
    m
    p
    o
    n
    e
    n
    t
    '
    ;
    4
    .

    View Slide

  46. 1
    4
    . t
    h
    i
    s
    .
    m
    e
    s
    s
    a
    g
    e = '
    H
    e
    l
    l
    o w
    o
    r
    l
    d
    '
    ;
    1
    . /
    / a
    p
    p
    .
    c
    o
    m
    p
    o
    n
    e
    n
    t
    .
    t
    s
    2
    . i
    m
    p
    o
    r
    t {
    C
    o
    m
    p
    o
    n
    e
    n
    t
    } f
    r
    o
    m '
    @
    a
    n
    g
    u
    l
    a
    r
    /
    c
    o
    r
    e
    '
    ;
    3
    .
    4
    . @
    C
    o
    m
    p
    o
    n
    e
    n
    t
    (
    {
    5
    . s
    e
    l
    e
    c
    t
    o
    r
    : '
    a
    p
    p
    '
    ,
    6
    . t
    e
    m
    p
    l
    a
    t
    e
    : `
    7
    . <
    d
    i
    v c
    l
    a
    s
    s
    =
    "
    a
    p
    p
    "
    >
    8
    . {
    { m
    e
    s
    s
    a
    g
    e }
    }
    9
    . <
    /
    d
    i
    v
    >
    1
    0
    . `
    1
    1
    . }
    )
    1
    2
    . e
    x
    p
    o
    r
    t c
    l
    a
    s
    s A
    p
    p
    C
    o
    m
    p
    o
    n
    e
    n
    t {
    1
    3
    . c
    o
    n
    s
    t
    r
    u
    c
    t
    o
    r
    (
    ) {
    1
    5
    . }
    1
    6
    . n
    g
    O
    n
    I
    n
    i
    t
    (
    ) {
    1
    7
    . c
    o
    n
    s
    o
    l
    e
    .
    l
    o
    g
    (
    '
    C
    o
    m
    p
    o
    n
    e
    n
    t i
    n
    i
    t
    i
    a
    l
    i
    s
    e
    d
    '
    )
    ;
    1
    8
    . }
    1
    9
    . }

    View Slide

  47. 1
    0
    . <
    d
    i
    v c
    l
    a
    s
    s
    =
    "
    a
    p
    p
    "
    >
    1
    1
    . <
    m
    a
    i
    n
    >
    1
    2
    . <
    c
    h
    a
    t
    >
    <
    /
    c
    h
    a
    t
    >
    1
    3
    . <
    /
    m
    a
    i
    n
    >
    1
    4
    . <
    /
    d
    i
    v
    >
    1
    . /
    / a
    p
    p
    .
    c
    o
    m
    p
    o
    n
    e
    n
    t
    .
    t
    s
    2
    . i
    m
    p
    o
    r
    t {
    C
    o
    m
    p
    o
    n
    e
    n
    t
    } f
    r
    o
    m '
    @
    a
    n
    g
    u
    l
    a
    r
    /
    c
    o
    r
    e
    '
    ;
    3
    . i
    m
    p
    o
    r
    t {
    4
    . C
    h
    a
    t
    C
    o
    m
    p
    o
    n
    e
    n
    t
    5
    . } f
    r
    o
    m '
    .
    /
    c
    o
    m
    p
    o
    n
    e
    n
    t
    s
    /
    c
    h
    a
    t
    .
    c
    o
    m
    p
    o
    n
    e
    n
    t
    '
    ;
    6
    .
    7
    . @
    C
    o
    m
    p
    o
    n
    e
    n
    t
    (
    {
    8
    . s
    e
    l
    e
    c
    t
    o
    r
    : '
    a
    p
    p
    '
    ,
    9
    . t
    e
    m
    p
    l
    a
    t
    e
    : `
    1
    5
    . `
    ,
    1
    6
    . d
    i
    r
    e
    c
    t
    i
    v
    e
    s
    : [
    1
    7
    . C
    h
    a
    t
    C
    o
    m
    p
    o
    n
    e
    n
    t
    1
    8
    . ]
    1
    9
    . }
    )
    2
    0
    . e
    x
    p
    o
    r
    t c
    l
    a
    s
    s A
    p
    p
    C
    o
    m
    p
    o
    n
    e
    n
    t {
    2
    1
    . c
    o
    n
    s
    t
    r
    u
    c
    t
    o
    r
    (
    ) {
    2
    2
    . t
    h
    i
    s
    .
    m
    e
    s
    s
    a
    g
    e = '
    H
    e
    l
    l
    o w
    o
    r
    l
    d
    '
    ;
    2
    3
    . }
    2
    4
    . n
    g
    O
    n
    I
    n
    i
    t
    (
    ) {
    2
    5
    . c
    o
    n
    s
    o
    l
    e
    .
    l
    o
    g
    (
    '
    C
    o
    m
    p
    o
    n
    e
    n
    t i
    n
    i
    t
    i
    a
    l
    i
    s
    e
    d
    '
    )
    ;
    2
    6
    . }
    2
    7
    . }

    View Slide

  48. STATEFUL AND STATELESS COMPONENTS

    View Slide

  49. 1
    8
    . e
    n
    c
    a
    p
    s
    u
    l
    a
    t
    i
    o
    n
    : V
    i
    e
    w
    E
    n
    c
    a
    p
    s
    u
    l
    a
    t
    i
    o
    n
    .
    N
    a
    t
    i
    v
    e
    ,
    4
    . V
    i
    e
    w
    E
    n
    c
    a
    p
    s
    u
    l
    a
    t
    i
    o
    n
    5
    . } f
    r
    o
    m '
    @
    a
    n
    g
    u
    l
    a
    r
    /
    c
    o
    r
    e
    '
    ;
    6
    . i
    m
    p
    o
    r
    t {
    7
    . C
    h
    a
    t
    P
    r
    o
    f
    i
    l
    e
    C
    o
    m
    p
    o
    n
    e
    n
    t
    8
    . } f
    r
    o
    m '
    .
    /
    c
    o
    m
    p
    o
    n
    e
    n
    t
    s
    /
    c
    h
    a
    t
    -
    p
    r
    o
    f
    i
    l
    e
    .
    c
    o
    m
    p
    o
    n
    e
    n
    t
    '
    ;
    9
    . i
    m
    p
    o
    r
    t {
    1
    0
    . C
    h
    a
    t
    S
    e
    a
    r
    c
    h
    C
    o
    m
    p
    o
    n
    e
    n
    t
    1
    1
    . } f
    r
    o
    m '
    .
    /
    c
    o
    m
    p
    o
    n
    e
    n
    t
    s
    /
    c
    h
    a
    t
    -
    s
    e
    a
    r
    c
    h
    .
    c
    o
    m
    p
    o
    n
    e
    n
    t
    '
    ;
    1
    2
    . i
    m
    p
    o
    r
    t {
    1
    3
    . C
    h
    a
    t
    L
    i
    s
    t
    C
    o
    m
    p
    o
    n
    e
    n
    t
    1
    4
    . } f
    r
    o
    m '
    .
    /
    c
    o
    m
    p
    o
    n
    e
    n
    t
    s
    /
    c
    h
    a
    t
    -
    l
    i
    s
    t
    .
    c
    o
    m
    p
    o
    n
    e
    n
    t
    '
    ;
    1
    5
    .
    1
    6
    . @
    C
    o
    m
    p
    o
    n
    e
    n
    t
    (
    {
    1
    7
    . s
    e
    l
    e
    c
    t
    o
    r
    : '
    c
    h
    a
    t
    '
    ,
    1
    9
    . s
    t
    y
    l
    e
    s
    : [
    `
    2
    0
    . .
    c
    h
    a
    t {
    2
    1
    . b
    a
    c
    k
    g
    r
    o
    u
    n
    d
    : b
    l
    u
    e
    ; p
    a
    d
    d
    i
    n
    g
    : 1
    5
    p
    x
    ;
    2
    2
    . }
    2
    3
    . `
    ]
    ,
    2
    4
    . t
    e
    m
    p
    l
    a
    t
    e
    : `
    2
    5
    . <
    d
    i
    v c
    l
    a
    s
    s
    =
    "
    c
    h
    a
    t
    "
    >
    2
    6
    . <
    c
    h
    a
    t
    -
    p
    r
    o
    f
    i
    l
    e
    >
    <
    /
    c
    h
    a
    t
    -
    p
    r
    o
    f
    i
    l
    e
    >
    2
    7
    . <
    c
    h
    a
    t
    -
    s
    e
    a
    r
    c
    h
    >
    <
    /
    c
    h
    a
    t
    -
    s
    e
    a
    r
    c
    h
    >
    2
    8
    . <
    c
    h
    a
    t
    -
    l
    i
    s
    t
    >
    <
    /
    c
    h
    a
    t
    -
    l
    i
    s
    t
    >
    2
    9
    . <
    /
    d
    i
    v
    >
    3
    0
    . `
    ,
    3
    1
    . d
    i
    r
    e
    c
    t
    i
    v
    e
    s
    : [
    3
    2
    . C
    h
    a
    t
    P
    r
    o
    f
    i
    l
    e
    C
    o
    m
    p
    o
    n
    e
    n
    t
    ,
    3
    3
    . C
    h
    a
    t
    S
    e
    a
    r
    c
    h
    C
    o
    m
    p
    o
    n
    e
    n
    t
    ,
    3
    4
    . C
    h
    a
    t
    L
    i
    s
    t
    C
    o
    m
    p
    o
    n
    e
    n
    t

    View Slide

  50. ONE-WAY DATA FLOW

    View Slide

  51. 3
    2
    . <
    c
    h
    a
    t
    -
    l
    i
    s
    t
    3
    3
    . [
    f
    r
    i
    e
    n
    d
    s
    ]
    =
    "
    c
    h
    a
    t
    F
    r
    i
    e
    n
    d
    s
    "
    >
    3
    4
    . <
    /
    c
    h
    a
    t
    -
    l
    i
    s
    t
    >
    3
    5
    . <
    /
    d
    i
    v
    >
    1
    9
    . s
    t
    y
    l
    e
    s
    : [
    `
    2
    0
    . .
    c
    h
    a
    t {
    2
    1
    . b
    a
    c
    k
    g
    r
    o
    u
    n
    d
    : b
    l
    u
    e
    ; p
    a
    d
    d
    i
    n
    g
    : 1
    5
    p
    x
    ;
    2
    2
    . }
    2
    3
    . `
    ]
    ,
    2
    4
    . t
    e
    m
    p
    l
    a
    t
    e
    : `
    2
    5
    . <
    d
    i
    v c
    l
    a
    s
    s
    =
    "
    c
    h
    a
    t
    "
    >
    2
    6
    . <
    c
    h
    a
    t
    -
    p
    r
    o
    f
    i
    l
    e
    2
    7
    . [
    u
    s
    e
    r
    ]
    =
    "
    c
    h
    a
    t
    U
    s
    e
    r
    "
    >
    2
    8
    . <
    /
    c
    h
    a
    t
    -
    p
    r
    o
    f
    i
    l
    e
    >
    2
    9
    . <
    c
    h
    a
    t
    -
    s
    e
    a
    r
    c
    h
    3
    0
    . [
    t
    e
    r
    m
    ]
    =
    "
    c
    h
    a
    t
    T
    e
    r
    m
    "
    >
    3
    1
    . <
    /
    c
    h
    a
    t
    -
    s
    e
    a
    r
    c
    h
    >
    3
    6
    . `
    ,
    3
    7
    . d
    i
    r
    e
    c
    t
    i
    v
    e
    s
    : [
    3
    8
    . C
    h
    a
    t
    P
    r
    o
    f
    i
    l
    e
    C
    o
    m
    p
    o
    n
    e
    n
    t
    ,
    3
    9
    . C
    h
    a
    t
    S
    e
    a
    r
    c
    h
    C
    o
    m
    p
    o
    n
    e
    n
    t
    ,
    4
    0
    . C
    h
    a
    t
    L
    i
    s
    t
    C
    o
    m
    p
    o
    n
    e
    n
    t
    4
    1
    . ]
    4
    2
    . }
    )
    4
    3
    . e
    x
    p
    o
    r
    t c
    l
    a
    s
    s C
    h
    a
    t
    C
    o
    m
    p
    o
    n
    e
    n
    t {
    4
    4
    . c
    o
    n
    s
    t
    r
    u
    c
    t
    o
    r
    (
    ) {
    4
    5
    . t
    h
    i
    s
    .
    c
    h
    a
    t
    U
    s
    e
    r = {
    4
    6
    . n
    a
    m
    e
    : '
    T
    o
    d
    d M
    o
    t
    t
    o
    '
    ,
    4
    7
    . o
    n
    l
    i
    n
    e
    : t
    r
    u
    e
    4
    8
    . }
    ;
    4
    9
    . t
    h
    i
    s
    .
    c
    h
    a
    t
    T
    e
    r
    m = '
    '
    ;

    View Slide

  52. 2
    6
    . <
    c
    h
    a
    t
    -
    p
    r
    o
    f
    i
    l
    e
    2
    7
    . [
    u
    s
    e
    r
    ]
    =
    "
    c
    h
    a
    t
    U
    s
    e
    r
    "
    2
    8
    . (
    s
    t
    a
    t
    u
    s
    C
    h
    a
    n
    g
    e
    )
    =
    "
    o
    n
    S
    t
    a
    t
    u
    s
    C
    h
    a
    n
    g
    e
    (
    $
    e
    v
    e
    n
    t
    )
    "
    >
    2
    9
    . <
    /
    c
    h
    a
    t
    -
    p
    r
    o
    f
    i
    l
    e
    >
    1
    3
    . C
    h
    a
    t
    L
    i
    s
    t
    C
    o
    m
    p
    o
    n
    e
    n
    t
    1
    4
    . } f
    r
    o
    m '
    .
    /
    c
    o
    m
    p
    o
    n
    e
    n
    t
    s
    /
    c
    h
    a
    t
    -
    l
    i
    s
    t
    .
    c
    o
    m
    p
    o
    n
    e
    n
    t
    '
    ;
    1
    5
    .
    1
    6
    . @
    C
    o
    m
    p
    o
    n
    e
    n
    t
    (
    {
    1
    7
    . s
    e
    l
    e
    c
    t
    o
    r
    : '
    c
    h
    a
    t
    '
    ,
    1
    8
    . e
    n
    c
    a
    p
    s
    u
    l
    a
    t
    i
    o
    n
    : V
    i
    e
    w
    E
    n
    c
    a
    p
    s
    u
    l
    a
    t
    i
    o
    n
    .
    N
    a
    t
    i
    v
    e
    ,
    1
    9
    . s
    t
    y
    l
    e
    s
    : [
    `
    2
    0
    . .
    c
    h
    a
    t {
    2
    1
    . b
    a
    c
    k
    g
    r
    o
    u
    n
    d
    : b
    l
    u
    e
    ; p
    a
    d
    d
    i
    n
    g
    : 1
    5
    p
    x
    ;
    2
    2
    . }
    2
    3
    . `
    ]
    ,
    2
    4
    . t
    e
    m
    p
    l
    a
    t
    e
    : `
    2
    5
    . <
    d
    i
    v c
    l
    a
    s
    s
    =
    "
    c
    h
    a
    t
    "
    >
    3
    0
    . <
    c
    h
    a
    t
    -
    s
    e
    a
    r
    c
    h
    3
    1
    . [
    t
    e
    r
    m
    ]
    =
    "
    c
    h
    a
    t
    T
    e
    r
    m
    "
    3
    2
    . (
    s
    e
    a
    r
    c
    h
    C
    h
    a
    n
    g
    e
    )
    =
    "
    o
    n
    S
    e
    a
    r
    c
    h
    C
    h
    a
    n
    g
    e
    (
    $
    e
    v
    e
    n
    t
    )
    "
    >
    3
    3
    . <
    /
    c
    h
    a
    t
    -
    s
    e
    a
    r
    c
    h
    >
    3
    4
    . <
    c
    h
    a
    t
    -
    l
    i
    s
    t
    3
    5
    . [
    f
    r
    i
    e
    n
    d
    s
    ]
    =
    "
    c
    h
    a
    t
    F
    r
    i
    e
    n
    d
    s
    "
    3
    6
    . (
    c
    o
    n
    t
    a
    c
    t
    S
    e
    l
    e
    c
    t
    )
    =
    "
    o
    n
    C
    o
    n
    t
    a
    c
    t
    S
    e
    l
    e
    c
    t
    (
    $
    e
    v
    e
    n
    t
    )
    "
    >
    3
    7
    . <
    /
    c
    h
    a
    t
    -
    l
    i
    s
    t
    >
    3
    8
    . <
    /
    d
    i
    v
    >
    3
    9
    . `
    ,
    4
    0
    . d
    i
    r
    e
    c
    t
    i
    v
    e
    s
    : [
    4
    1
    . C
    h
    a
    t
    P
    r
    o
    f
    i
    l
    e
    C
    o
    m
    p
    o
    n
    e
    n
    t
    ,
    4
    2
    . C
    h
    a
    t
    S
    e
    a
    r
    c
    h
    C
    o
    m
    p
    o
    n
    e
    n
    t
    ,
    4
    3
    . C
    h
    a
    t
    L
    i
    s
    t
    C
    o
    m
    p
    o
    n
    e
    n
    t

    View Slide

  53. [ ] are property bindings
    Think myObject['property'] in JavaScript
    ( ) are event bindings
    Think myFunction() in JavaScript
    TEMPLATING SYNTAXES

    View Slide

  54. View Slide

  55. 1
    0
    . <
    i
    n
    p
    u
    t [
    (
    n
    g
    M
    o
    d
    e
    l
    )
    ]
    =
    "
    t
    o
    d
    o
    .
    t
    e
    x
    t
    "
    >
    1
    . /
    / v
    i
    c
    t
    o
    r
    s
    a
    v
    k
    i
    n
    .
    c
    o
    m
    /
    p
    o
    s
    t
    /
    1
    1
    9
    9
    4
    3
    1
    2
    7
    1
    5
    1
    /
    a
    n
    g
    u
    l
    a
    r
    -
    2
    -
    t
    e
    m
    p
    l
    a
    t
    e
    -
    s
    y
    n
    t
    a
    x
    2
    . <
    d
    i
    v *
    n
    g
    F
    o
    r
    =
    "
    l
    e
    t i
    t
    e
    m i
    n i
    t
    e
    m
    s
    ; v
    a
    r i
    n
    d
    e
    x = i
    n
    d
    e
    x
    "
    >
    3
    . {
    { i
    n
    d
    e
    x }
    }
    4
    . <
    /
    d
    i
    v
    >
    5
    .
    6
    . <
    i
    n
    p
    u
    t
    7
    . [
    n
    g
    M
    o
    d
    e
    l
    ]
    =
    "
    t
    o
    d
    o
    .
    t
    e
    x
    t
    "
    8
    . (
    n
    g
    M
    o
    d
    e
    l
    C
    h
    a
    n
    g
    e
    )
    =
    "
    t
    o
    d
    o
    .
    t
    e
    x
    t
    =
    $
    e
    v
    e
    n
    t
    "
    >
    9
    .

    View Slide

  56. 1
    3
    . <
    t
    e
    m
    p
    l
    a
    t
    e
    1
    4
    . n
    g
    F
    o
    r
    1
    5
    . [
    n
    g
    F
    o
    r
    O
    f
    ]
    =
    "
    t
    o
    d
    o
    s
    "
    1
    6
    . l
    e
    t
    -
    t
    =
    "
    $
    i
    m
    p
    l
    i
    c
    i
    t
    "
    1
    7
    . l
    e
    t
    -
    i
    =
    "
    i
    n
    d
    e
    x
    "
    >
    1
    8
    . <
    t
    o
    d
    o
    -
    c
    m
    p
    1
    9
    . [
    m
    o
    d
    e
    l
    ]
    =
    "
    t
    "
    2
    0
    . [
    i
    n
    d
    e
    x
    ]
    =
    "
    i
    "
    >
    2
    1
    . <
    /
    t
    o
    d
    o
    -
    c
    m
    p
    >
    2
    2
    . <
    /
    t
    e
    m
    p
    l
    a
    t
    e
    >
    1
    . <
    t
    o
    d
    o
    -
    c
    m
    p
    2
    . *
    n
    g
    F
    o
    r
    =
    "
    l
    e
    t t o
    f t
    o
    d
    o
    s
    ; l
    e
    t i
    =
    i
    n
    d
    e
    x
    "
    3
    . [
    m
    o
    d
    e
    l
    ]
    =
    "
    t
    "
    4
    . [
    i
    n
    d
    e
    x
    ]
    =
    "
    t
    "
    >
    5
    . <
    /
    t
    o
    d
    o
    -
    c
    m
    p
    >
    6
    .
    7
    . <
    t
    o
    d
    o
    -
    c
    m
    p
    8
    . t
    e
    m
    p
    l
    a
    t
    e
    =
    "
    n
    g
    F
    o
    r
    : l
    e
    t t o
    f t
    o
    d
    o
    s
    ; l
    e
    t i
    =
    i
    n
    d
    e
    x
    "
    9
    . [
    m
    o
    d
    e
    l
    ]
    =
    "
    t
    "
    1
    0
    . [
    i
    n
    d
    e
    x
    ]
    =
    "
    i
    "
    >
    1
    1
    . <
    /
    t
    o
    d
    o
    -
    c
    m
    p
    >
    1
    2
    .

    View Slide

  57. WHY?
    Bind to any native element (Web
    Components included)
    No Angular 2 component wrappers
    Consistent syntax across all code
    Explicit syntax

    View Slide

  58. 3
    3
    . t
    o
    g
    g
    l
    e
    S
    t
    a
    t
    u
    s
    (
    ) {
    3
    4
    . l
    e
    t n
    e
    w
    S
    t
    a
    t
    u
    s = !
    t
    h
    i
    s
    .
    u
    s
    e
    r
    .
    o
    n
    l
    i
    n
    e
    ;
    3
    5
    . l
    e
    t u
    s
    e
    r = {
    3
    6
    . n
    a
    m
    e
    : t
    h
    i
    s
    .
    u
    s
    e
    r
    .
    n
    a
    m
    e
    ,
    3
    7
    . o
    n
    l
    i
    n
    e
    : n
    e
    w
    S
    t
    a
    t
    u
    s
    3
    8
    . }
    ;
    3
    9
    . t
    h
    i
    s
    .
    u
    s
    e
    r
    S
    t
    a
    t
    u
    s = (
    4
    0
    . n
    e
    w
    S
    t
    a
    t
    u
    s ? '
    O
    n
    l
    i
    n
    e
    ' : '
    O
    f
    f
    l
    i
    n
    e
    '
    4
    1
    . )
    ;
    4
    2
    . t
    h
    i
    s
    .
    s
    t
    a
    t
    u
    s
    C
    h
    a
    n
    g
    e
    .
    e
    m
    i
    t
    (
    { u
    s
    e
    r }
    )
    ;
    4
    3
    . }
    4
    4
    . }
    1
    8
    . W
    e
    l
    c
    o
    m
    e
    , {
    { u
    s
    e
    r
    .
    n
    a
    m
    e }
    } - {
    { u
    s
    e
    r
    S
    t
    a
    t
    u
    s }
    }
    1
    9
    . <
    a h
    r
    e
    f
    =
    "
    " (
    c
    l
    i
    c
    k
    )
    =
    "
    t
    o
    g
    g
    l
    e
    S
    t
    a
    t
    u
    s
    (
    )
    "
    >
    2
    0
    . C
    h
    a
    n
    g
    e s
    t
    a
    t
    u
    s
    2
    1
    . <
    /
    a
    >
    2
    2
    . <
    /
    d
    i
    v
    >
    2
    3
    . `
    2
    4
    . }
    )
    2
    5
    . e
    x
    p
    o
    r
    t c
    l
    a
    s
    s C
    h
    a
    t
    P
    r
    o
    f
    i
    l
    e
    C
    o
    m
    p
    o
    n
    e
    n
    t {
    2
    6
    . @
    I
    n
    p
    u
    t
    (
    ) u
    s
    e
    r
    ;
    2
    7
    . @
    O
    u
    t
    p
    u
    t
    (
    ) s
    t
    a
    t
    u
    s
    C
    h
    a
    n
    g
    e = n
    e
    w E
    v
    e
    n
    t
    E
    m
    i
    t
    t
    e
    r
    (
    )
    ;
    2
    8
    . c
    o
    n
    s
    t
    r
    u
    c
    t
    o
    r
    (
    ) {
    2
    9
    . t
    h
    i
    s
    .
    u
    s
    e
    r
    S
    t
    a
    t
    u
    s = (
    3
    0
    . t
    h
    i
    s
    .
    u
    s
    e
    r
    .
    o
    n
    l
    i
    n
    e ? '
    O
    n
    l
    i
    n
    e
    ' : '
    O
    f
    f
    l
    i
    n
    e
    '
    3
    1
    . )
    ;
    3
    2
    . }

    View Slide

  59. ROUTING + ROUTED COMPONENTS

    View Slide

  60. 2
    7
    . <
    m
    a
    i
    n
    >
    2
    8
    . <
    r
    o
    u
    t
    e
    r
    -
    o
    u
    t
    l
    e
    t
    >
    <
    /
    r
    o
    u
    t
    e
    r
    -
    o
    u
    t
    l
    e
    t
    >
    2
    9
    . <
    /
    m
    a
    i
    n
    >
    3
    0
    . <
    a
    s
    i
    d
    e
    >
    3
    1
    . <
    c
    h
    a
    t
    >
    <
    /
    c
    h
    a
    t
    >
    3
    2
    . <
    /
    a
    s
    i
    d
    e
    >
    1
    5
    . i
    m
    p
    o
    r
    t {
    1
    6
    . D
    a
    s
    h
    b
    o
    a
    r
    d
    C
    o
    m
    p
    o
    n
    e
    n
    t
    1
    7
    . } f
    r
    o
    m '
    .
    /
    c
    o
    m
    p
    o
    n
    e
    n
    t
    s
    /
    d
    a
    s
    h
    b
    o
    a
    r
    d
    .
    c
    o
    m
    p
    o
    n
    e
    n
    t
    '
    ;
    1
    8
    .
    1
    9
    . @
    C
    o
    m
    p
    o
    n
    e
    n
    t
    (
    {
    2
    0
    . s
    e
    l
    e
    c
    t
    o
    r
    : '
    a
    p
    p
    '
    ,
    2
    1
    . t
    e
    m
    p
    l
    a
    t
    e
    : `
    2
    2
    . <
    d
    i
    v c
    l
    a
    s
    s
    =
    "
    a
    p
    p
    "
    >
    2
    3
    . <
    n
    a
    v
    >
    2
    4
    . <
    a [
    r
    o
    u
    t
    e
    r
    L
    i
    n
    k
    ]
    =
    "
    [
    '
    /
    i
    n
    b
    o
    x
    '
    ]
    "
    >
    I
    n
    b
    o
    x
    <
    /
    a
    >
    2
    5
    . <
    a [
    r
    o
    u
    t
    e
    r
    L
    i
    n
    k
    ]
    =
    "
    [
    '
    /
    d
    a
    s
    h
    b
    o
    a
    r
    d
    '
    ]
    "
    >
    D
    a
    s
    h
    b
    o
    a
    r
    d
    <
    /
    a
    >
    2
    6
    . <
    /
    n
    a
    v
    >
    3
    3
    . <
    /
    d
    i
    v
    >
    3
    4
    . `
    ,
    3
    5
    . d
    i
    r
    e
    c
    t
    i
    v
    e
    s
    : [
    3
    6
    . R
    O
    U
    T
    E
    R
    _
    D
    I
    R
    E
    C
    T
    I
    V
    E
    S
    ,
    3
    7
    . C
    h
    a
    t
    C
    o
    m
    p
    o
    n
    e
    n
    t
    3
    8
    . ]
    3
    9
    . }
    )
    4
    0
    . @
    R
    o
    u
    t
    e
    s
    (
    [
    4
    1
    . { p
    a
    t
    h
    : '
    /
    i
    n
    b
    o
    x
    '
    , c
    o
    m
    p
    o
    n
    e
    n
    t
    : I
    n
    b
    o
    x
    C
    o
    m
    p
    o
    n
    e
    n
    t }
    ,
    4
    2
    . { p
    a
    t
    h
    : '
    /
    i
    n
    b
    o
    x
    /
    :
    i
    d
    '
    , c
    o
    m
    p
    o
    n
    e
    n
    t
    : I
    n
    b
    o
    x
    M
    e
    s
    s
    a
    g
    e
    C
    o
    m
    p
    o
    n
    e
    n
    t }
    ,
    4
    3
    . { p
    a
    t
    h
    : '
    /
    d
    a
    s
    h
    b
    o
    a
    r
    d
    '
    , c
    o
    m
    p
    o
    n
    e
    n
    t
    : D
    a
    s
    h
    b
    o
    a
    r
    d
    C
    o
    m
    p
    o
    n
    e
    n
    t }
    4
    4
    . ]
    )
    4
    5
    . e
    x
    p
    o
    r
    t c
    l
    a
    s
    s A
    p
    p
    C
    o
    m
    p
    o
    n
    e
    n
    t {
    4
    6
    . c
    o
    n
    s
    t
    r
    u
    c
    t
    o
    r
    (
    ) {
    }

    View Slide

  61. SERVER-SIDE + WEB WORKER RENDERING

    View Slide

  62. DOM abstracted, use abstraction methods
    Render on the server, Universal Angular
    Initial page pre-rendered superfast
    Rehydrates the DOM once rendered
    SERVER-SIDE RENDERING

    View Slide

  63. Runs in a background thread
    Frees up the UI thread
    Angular bootstraps in a Web Worker
    Superfast UI and data-processing (faster
    repaints)
    Angular communicates between UI + Web
    Worker
    WEB WORKER RENDERING

    View Slide

  64. SERVICE WORKERS

    View Slide

  65. Cache code and application data
    Works offline with last data renders
    Background synchronisation
    SERVICE WORKERS

    View Slide

  66. Sits on top of web components
    (template/content)
    Uses dependency injection
    Still has Directives (Angular 1.x)
    Well-defined Component lifecycles
    Easily testable (unit/e2e)
    FEW MORE FEATURES

    View Slide

  67. Component communication
    Observables (RxJS)
    Nested views and routes
    Data architecture (Redux/ngrx)
    And the rest... for another talk
    ... AND SOME MORE

    View Slide

  68. THANK YOU!

    View Slide

  69. View Slide