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

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