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

Reactive Programming with RxJS and Cycle

Reactive Programming with RxJS and Cycle

Benedict Hobart

January 13, 2016
Tweet

Other Decks in Technology

Transcript

  1. REACTIVE PROGRAMMING
    WITH RXJS AND CYCLE
    /
    Benedict Hobart @superbenhobart

    View full-size slide

  2. ASYNC PROGRAMMING IS HARD
    Memory Leaks
    Race Conditions
    Callback Hell
    Complex State Machines
    Disjointed Error Handling

    View full-size slide

  3. l
    e
    t e
    r
    r
    o
    r
    C
    o
    u
    n
    t = 0
    ;
    f
    u
    n
    c
    t
    i
    o
    n i
    n
    c
    r
    e
    m
    e
    n
    t
    T
    a
    l
    k
    C
    o
    u
    n
    t
    (
    ) {
    g
    e
    t
    U
    s
    e
    r
    s
    (
    (
    u
    s
    e
    r
    s
    , e
    r
    r
    ) =
    > {
    i
    f
    (
    e
    r
    r
    ) {
    e
    r
    r
    o
    r
    C
    o
    u
    n
    t
    +
    +
    ;
    i
    f
    (
    e
    r
    r
    o
    r
    C
    o
    u
    n
    t < 3
    ) {
    i
    n
    c
    r
    e
    m
    e
    n
    t
    T
    a
    l
    k
    C
    o
    u
    n
    t
    (
    )
    ;
    r
    e
    t
    u
    r
    n
    ;
    }
    t
    h
    r
    o
    w n
    e
    w E
    r
    r
    o
    r
    (
    e
    r
    r
    )
    ;
    }
    f
    o
    r
    (
    l
    e
    t i = 0
    ; i < u
    s
    e
    r
    s
    .
    l
    e
    n
    g
    t
    h
    ; i
    +
    +
    ) {
    i
    f
    (
    u
    s
    e
    r
    s
    .
    n
    a
    m
    e =
    =
    = '
    B
    e
    n
    e
    d
    i
    c
    t H
    o
    b
    a
    r
    t
    '
    ) b
    r
    e
    a
    k
    ;
    }
    l
    e
    t b
    e
    n = u
    s
    e
    r
    s
    [
    i
    ]
    ;
    b
    e
    n
    .
    t
    a
    l
    k
    s
    +
    +
    ;
    b
    e
    n
    .
    s
    a
    v
    e
    (
    e
    r
    r =
    > {
    i
    f
    (
    e
    r
    r
    ) {

    View full-size slide

  4. WE'VE MADE PROGRESS

    View full-size slide

  5. f
    u
    n
    c
    t
    i
    o
    n i
    n
    c
    r
    e
    m
    e
    n
    t
    T
    a
    l
    k
    C
    o
    u
    n
    t
    (
    r
    e
    t
    r
    y
    =
    3
    ) {
    g
    e
    t
    U
    s
    e
    r
    s
    (
    )
    .
    t
    h
    e
    n
    (
    u
    s
    r =
    > u
    s
    r
    .
    f
    i
    n
    d
    (
    u
    s
    r =
    > u
    s
    r
    .
    n
    a
    m
    e =
    =
    = '
    B
    e
    n
    e
    d
    i
    c
    t H
    o
    b
    a
    r
    t
    '
    )
    )
    .
    t
    h
    e
    n
    (
    u
    s
    r =
    > O
    b
    j
    e
    c
    t
    .
    a
    s
    s
    i
    g
    n
    (
    b
    e
    n
    , {
    t
    a
    l
    k
    s
    : b
    e
    n
    .
    t
    a
    l
    k
    s + 1
    }
    )
    )
    .
    t
    h
    e
    n
    (
    u
    s
    r =
    > u
    s
    r
    .
    s
    a
    v
    e
    (
    )
    )
    .
    t
    h
    e
    n
    (
    (
    ) =
    > a
    l
    e
    r
    t
    (
    '
    T
    h
    a
    t w
    a
    s e
    a
    s
    y
    !
    '
    )
    )
    .
    c
    a
    t
    c
    h
    (
    e
    r
    r =
    > {
    i
    f
    (
    r
    e
    t
    r
    y
    <
    =
    0
    )
    {
    r
    e
    t
    u
    r
    n t
    h
    r
    o
    w n
    e
    w E
    r
    r
    o
    r
    (
    e
    r
    r
    )
    ;
    }
    i
    n
    c
    r
    e
    m
    e
    n
    t
    T
    a
    l
    k
    C
    o
    u
    n
    t
    (
    r
    e
    t
    r
    y - 1
    )
    ;
    }
    )
    ;
    }
    i
    n
    c
    r
    e
    m
    e
    n
    t
    T
    a
    l
    k
    C
    o
    u
    n
    t
    (
    )

    View full-size slide

  6. WHAT IS REACTIVE PRORAMMING
    Functional Reactive Programming, FRAN
    Reactive Paradigm
    Reactive Extensions
    http://conal.net/fran/
    http://www.reactivemanifesto.org
    http://reactivex.io/
    Let's just focus on Reactive Programming with Rx

    View full-size slide

  7. PATTERNS
    Iterator
    map
    filter
    reduce
    flatMap
    Observer
    events

    View full-size slide

  8. INSIGHT
    Iterators and Events are both collections
    Mouse Clicks
    Stock Ticks
    Database Transactions
    User Inputs/Actions
    Polling Network Requests

    View full-size slide

  9. THE FOUR FUNDAMENTAL EFFECTS
    Single Multiple
    Sync T Array[T]
    Async Promise[T] Observable[T]

    View full-size slide

  10. OBSERVABLE
    c
    l
    a
    s
    s O
    b
    s
    e
    r
    v
    a
    b
    l
    e
    <
    T
    > {
    s
    u
    b
    s
    c
    r
    i
    b
    e
    O
    n
    N
    e
    x
    t
    : O
    b
    s =
    > v
    o
    i
    d
    s
    u
    b
    s
    c
    r
    i
    b
    e
    O
    n
    C
    o
    m
    p
    l
    e
    t
    e
    d
    : O
    b
    s =
    > v
    o
    i
    d
    s
    u
    b
    s
    c
    r
    i
    b
    e
    O
    n
    E
    r
    r
    o
    r
    : O
    b
    s =
    > v
    o
    i
    d
    }
    c
    l
    a
    s
    s O
    b
    s
    e
    r
    v
    e
    r
    <
    T
    > {
    o
    n
    N
    e
    x
    t
    : T =
    > v
    o
    i
    d
    o
    n
    C
    o
    m
    p
    l
    e
    t
    e
    d
    : T =
    > v
    o
    i
    d
    o
    n
    E
    r
    r
    o
    r
    : E =
    > v
    o
    i
    d
    }

    View full-size slide

  11. Observables can be (almost) anything
    Mouse Events
    Inputs
    Network Requests
    Users

    View full-size slide

  12. CREATING OBSERVABLES
    c
    o
    n
    s
    t n
    u
    m
    b
    e
    r
    $ = R
    x
    .
    O
    b
    s
    e
    r
    v
    a
    b
    l
    e
    .
    r
    a
    n
    g
    e
    (
    1
    ,
    5
    )
    ;
    c
    o
    n
    s
    t t
    i
    c
    k
    $ = R
    x
    .
    O
    b
    s
    e
    r
    v
    a
    b
    l
    e
    .
    i
    n
    t
    e
    r
    v
    a
    l
    (
    1
    0
    0
    0
    )
    ;
    c
    o
    n
    s
    t i
    n
    p
    u
    t
    $ = R
    x
    .
    O
    b
    s
    e
    r
    v
    a
    b
    l
    e
    .
    f
    r
    o
    m
    E
    v
    e
    n
    t
    (
    m
    y
    I
    n
    p
    u
    t
    , '
    i
    n
    p
    u
    t
    '
    )
    ;
    c
    o
    n
    s
    t u
    s
    e
    r
    $ = R
    x
    .
    O
    b
    s
    e
    r
    v
    a
    b
    l
    e
    .
    f
    r
    o
    m
    P
    r
    o
    m
    i
    s
    e
    (
    f
    e
    t
    c
    h
    (
    '
    /
    a
    p
    i
    /
    u
    s
    e
    r
    '
    )
    )
    ;

    View full-size slide

  13. HTTP CONNECTION STREAM
    i
    m
    p
    o
    r
    t h
    t
    t
    p f
    r
    o
    m '
    h
    t
    t
    p
    '
    ;
    i
    m
    p
    o
    r
    t R
    x f
    r
    o
    m '
    r
    x
    '
    ;
    c
    o
    n
    s
    t h
    t
    t
    p
    C
    o
    n
    n
    e
    c
    t
    i
    o
    n
    $ = R
    x
    .
    O
    b
    s
    e
    r
    v
    a
    b
    l
    e
    .
    c
    r
    e
    a
    t
    e
    (
    o
    b
    s =
    > {
    c
    o
    n
    s
    t s
    e
    r
    v
    e
    r = 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
    ) {
    o
    b
    s
    .
    o
    n
    N
    e
    x
    t
    (
    { r
    e
    q
    , r
    e
    s }
    )
    ;
    }
    )
    ;
    s
    e
    r
    v
    e
    r
    .
    l
    i
    s
    t
    e
    n
    (
    3
    0
    0
    0
    , (
    ) =
    > c
    o
    n
    s
    o
    l
    e
    .
    l
    o
    g
    (
    '
    S
    e
    r
    v
    e
    r O
    p
    e
    n
    '
    )
    )
    ;
    r
    e
    t
    u
    r
    n (
    ) =
    > s
    e
    r
    v
    e
    r
    .
    c
    l
    o
    s
    e
    (
    (
    ) =
    > c
    o
    n
    s
    o
    l
    e
    .
    l
    o
    g
    (
    '
    S
    e
    r
    v
    e
    r C
    l
    o
    s
    e
    d
    '
    )
    ;
    }
    )
    ;
    h
    t
    t
    p
    C
    o
    n
    n
    e
    c
    t
    i
    o
    n
    $
    .
    s
    u
    b
    s
    c
    r
    i
    b
    e
    (
    {
    r
    e
    q
    , r
    e
    s
    } =
    > r
    e
    s
    .
    s
    e
    n
    d
    (
    '
    H
    e
    l
    l
    o W
    o
    r
    l
    d
    '
    )
    )
    ;

    View full-size slide

  14. OPERATORS
    Iterators
    map
    filter
    reduce
    Functional Programming
    flatMap
    zip
    takeWhile
    Plus many many more...

    View full-size slide

  15. l
    e
    t e
    r
    r
    o
    r
    C
    o
    u
    n
    t = 0
    ;
    f
    u
    n
    c
    t
    i
    o
    n i
    n
    c
    r
    e
    m
    e
    n
    t
    T
    a
    l
    k
    C
    o
    u
    n
    t
    (
    ) {
    g
    e
    t
    U
    s
    e
    r
    s
    (
    (
    u
    s
    e
    r
    s
    , e
    r
    r
    ) =
    > {
    i
    f
    (
    e
    r
    r
    ) {
    e
    r
    r
    o
    r
    C
    o
    u
    n
    t
    +
    +
    ;
    i
    f
    (
    e
    r
    r
    o
    r
    C
    o
    u
    n
    t < 3
    ) {
    i
    n
    c
    r
    e
    m
    e
    n
    t
    T
    a
    l
    k
    C
    o
    u
    n
    t
    (
    )
    ;
    r
    e
    t
    u
    r
    n
    ;
    }
    t
    h
    r
    o
    w n
    e
    w E
    r
    r
    o
    r
    (
    e
    r
    r
    )
    ;
    }
    l
    e
    t i
    ;
    f
    o
    r
    (
    i = 0
    ; i < u
    s
    e
    r
    s
    .
    l
    e
    n
    g
    t
    h
    ; i
    +
    +
    ) {
    i
    f
    (
    u
    s
    e
    r
    s
    .
    n
    a
    m
    e =
    =
    = '
    B
    e
    n
    e
    d
    i
    c
    t H
    o
    b
    a
    r
    t
    '
    ) b
    r
    e
    a
    k
    ;
    }
    l
    e
    t b
    e
    n = u
    s
    e
    r
    s
    [
    i
    ]
    ;
    b
    e
    n
    .
    t
    a
    l
    k
    s
    +
    +
    ;
    b
    e
    n
    .
    s
    a
    v
    e
    (
    e
    r
    r =
    > {

    View full-size slide

  16. c
    o
    n
    s
    t i
    n
    c
    r
    e
    m
    e
    n
    t
    T
    a
    l
    k
    $ = u
    s
    e
    r
    $
    .
    f
    i
    l
    t
    e
    r
    (
    u
    s
    r =
    > u
    s
    r
    .
    n
    a
    m
    e
    =
    =
    =
    '
    B
    e
    n
    e
    d
    i
    c
    t H
    o
    b
    a
    r
    t
    '
    )
    .
    m
    a
    p
    (
    b
    e
    n =
    > O
    b
    j
    e
    c
    t
    .
    a
    s
    s
    i
    g
    n
    (
    b
    e
    n
    , {
    t
    a
    l
    k
    s
    : b
    e
    n
    .
    t
    a
    l
    k
    s + 1
    }
    )
    .
    f
    l
    a
    t
    M
    a
    p
    (
    b
    e
    n =
    > b
    e
    n
    .
    s
    a
    v
    e
    (
    )
    ) /
    / b
    e
    n
    .
    s
    a
    v
    e
    (
    ) =
    > r
    e
    t
    u
    r
    n
    s a p
    r
    o
    m
    i
    s
    e
    .
    r
    e
    t
    r
    y
    (
    3
    )
    i
    n
    c
    r
    e
    m
    e
    n
    t
    T
    a
    l
    k
    $
    .
    s
    u
    b
    s
    c
    r
    i
    b
    e
    (
    (
    ) =
    > a
    l
    e
    r
    t
    (
    '
    t
    h
    a
    t w
    a
    s e
    a
    s
    y
    '
    )
    )
    ;

    View full-size slide

  17. Reactive Programming is programming with streams

    View full-size slide

  18. THE BENEFITS OF RXJS
    Stateless
    Treats sync and async data the same
    Cross-Platform Language
    Easy to read
    More maintainable

    View full-size slide

  19. THINGS I'VE LEFT OUT
    Hot vs Cold Observables
    Schedulers
    Backpressure
    Subjects
    See https://xgrommx.github.io/rx-book/

    View full-size slide

  20. CYCLEJS
    A functional and reactive JavaScript framework for cleaner
    code

    View full-size slide

  21. THE USER IS A FUNCTION
    input from the tv screen speakers
    output to the mouse microphone keyboard

    View full-size slide

  22. DOM SOURCE, DOM SINK
    Your sources are observable Side effects
    And your outputs are commands/updates to affect the
    external world

    View full-size slide

  23. Sources
    Sinks
    m
    a
    i
    n
    (
    )
    DOM side effects
    HTTP side effects
    Other side effects
    pure dataflow

    View full-size slide

  24. SIMPLE EXAMPLE
    i
    m
    p
    o
    r
    t R
    x f
    r
    o
    m '
    r
    x
    '
    ;
    i
    m
    p
    o
    r
    t C
    y
    c
    l
    e f
    r
    o
    m '
    @
    c
    y
    c
    l
    e
    /
    c
    o
    r
    e
    '
    ;
    i
    m
    p
    o
    r
    t {
    m
    a
    k
    e
    D
    O
    M
    D
    r
    i
    v
    e
    r
    , d
    i
    v
    , b
    u
    t
    t
    o
    n
    , p
    } f
    r
    o
    m '
    @
    c
    y
    c
    l
    e
    /
    d
    o
    m
    '
    ;
    f
    u
    n
    c
    t
    i
    o
    n m
    a
    i
    n
    (
    D
    O
    M
    ) {
    r
    e
    t
    u
    r
    n {
    D
    O
    M
    : D
    O
    M
    .
    s
    e
    l
    e
    c
    t
    (
    '
    b
    u
    t
    t
    o
    n
    '
    )
    .
    e
    v
    e
    n
    t
    s
    (
    '
    c
    l
    i
    c
    k
    '
    )
    .
    s
    c
    a
    n
    (
    (
    a
    c
    c
    ) =
    > a
    c
    c + 1
    , 0
    )
    .
    m
    a
    p
    (
    c
    o
    u
    n
    t =
    > d
    i
    v
    (
    [
    b
    u
    t
    t
    o
    n
    (
    [
    '
    I
    n
    c
    r
    e
    m
    e
    n
    t
    '
    ]
    )
    ,
    p
    (
    [
    `
    c
    o
    u
    n
    t
    : $
    {
    c
    o
    u
    n
    t
    }
    `
    ]
    )
    ]
    )
    )
    ;
    }
    ;
    }
    c
    o
    n
    s
    t d
    r
    i
    v
    e
    r
    s = {
    D
    O
    M
    : m
    a
    k
    e
    D
    O
    M
    D
    r
    i
    v
    e
    r
    (
    '
    #
    a
    p
    p
    '
    )

    View full-size slide

  25. MODEL VIEW INTENT
    c
    o
    n
    s
    t I
    n
    t
    e
    n
    t = D
    O
    M =
    > A
    c
    t
    i
    o
    n
    s
    c
    o
    n
    s
    t M
    o
    d
    e
    l = A
    c
    t
    i
    o
    n
    s =
    > S
    t
    a
    t
    e
    c
    o
    n
    s
    t V
    i
    e
    w = S
    t
    a
    t
    e =
    > D
    O
    M
    c
    o
    n
    s
    t D
    O
    M = V
    i
    e
    w
    (
    M
    o
    d
    e
    l
    (
    I
    n
    t
    e
    n
    t
    (
    D
    O
    M
    )
    )
    )
    c
    o
    n
    s
    t U
    s
    e
    r = D
    O
    M =
    > D
    O
    M
    S
    o
    u
    r
    c
    e

    View full-size slide

  26. SIMPLE EXAMPLE
    i
    m
    p
    o
    r
    t R
    x f
    r
    o
    m '
    r
    x
    '
    ;
    i
    m
    p
    o
    r
    t C
    y
    c
    l
    e f
    r
    o
    m '
    @
    c
    y
    c
    l
    e
    /
    c
    o
    r
    e
    '
    ;
    i
    m
    p
    o
    r
    t {
    m
    a
    k
    e
    D
    O
    M
    D
    r
    i
    v
    e
    r
    , d
    i
    v
    , b
    u
    t
    t
    o
    n
    , p
    } f
    r
    o
    m '
    @
    c
    y
    c
    l
    e
    /
    d
    o
    m
    '
    ;
    c
    o
    n
    s
    t i
    n
    t
    e
    n
    t = D
    O
    M =
    > D
    O
    M
    .
    s
    e
    l
    e
    c
    t
    (
    '
    b
    u
    t
    t
    o
    n
    '
    )
    .
    e
    v
    e
    n
    t
    s
    (
    '
    c
    l
    i
    c
    k
    '
    )
    ;
    c
    o
    n
    s
    t m
    o
    d
    e
    l = a
    c
    t
    i
    o
    n
    $ =
    > a
    c
    t
    i
    o
    n
    $
    .
    s
    c
    a
    n
    (
    (
    a
    c
    c
    ) =
    > a
    c
    c + 1
    , 0
    )
    ;
    c
    o
    n
    s
    t v
    i
    e
    w = d
    a
    t
    a
    $ =
    > d
    a
    t
    a
    $
    .
    m
    a
    p
    (
    c
    o
    u
    n
    t =
    > d
    i
    v
    (
    [
    b
    u
    t
    t
    o
    n
    (
    [
    '
    I
    n
    c
    r
    e
    m
    e
    n
    t
    '
    ]
    )
    ,
    p
    (
    [
    `
    c
    o
    u
    n
    t
    : $
    {
    c
    o
    u
    n
    t
    }
    `
    ]
    )
    ]
    )
    )
    ;
    f
    u
    n
    c
    t
    i
    o
    n m
    a
    i
    n
    (
    D
    O
    M
    ) {
    r
    e
    t
    u
    r
    n {
    D
    O
    M
    : v
    i
    e
    w
    (
    m
    o
    d
    e
    l
    (
    i
    n
    t
    e
    n
    t
    (
    D
    O
    M
    )
    )
    )
    }
    ;
    }

    View full-size slide

  27. THANK YALL
    Feel Free to ask questions

    View full-size slide