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

Learn how to build Functional Reactive Applications with Elm, Node.js and Infinispan

Learn how to build Functional Reactive Applications with Elm, Node.js and Infinispan

Developers aim to write responsive, scalable, fault tolerant, reactive applications to can handle the business needs of the modern web applications without hiccups. This talk shows you how to do just that! And to add a twist, we will do it in (pure) functional style.

Node.js is a very popular framework for developing asynchronous, event-driven, reactive applications. Infinispan, an in-memory distributed data grid designed for fast, scalable, elastic access to large volumes of data, has recently gained compatibility with the Node.js ecosystem enabling reactive applications to use it as persistence layer. When combined with Elm, a functional programming language for declaratively creating reactive web applications, these technologies offer a great platform for working with highly responsive, data-heavy applications seamlessly. In this live-coding talk, we will demonstrate how to use these technologies to build a reactive web application composed of an Elm frontend, a Node.js microservice layer and a scalable, fault tolerant Infinispan data grid for persistence.

Galder Zamarreño

November 03, 2016
Tweet

More Decks by Galder Zamarreño

Other Decks in Programming

Transcript

  1. Learn How To Build Functional Reactive
    Applications with Elm, Node.js & Infinispan
    Galder Zamarreño
    @galderz
    blog.infinispan.org
    galder.zamarreno.com
    #devoxxma

    View Slide

  2. Moi
    • @
    • Infinispan developer & co-founder
    • Polyglot programmer
    • Functional programming
    #devoxxma
    @galderz

    View Slide

  3. Objective
    Learn How To Build
    Functional Reactive Apps
    #devoxxma
    @galderz

    View Slide

  4. Functional Reactive Apps
    Apps constructed using
    Functional Reactive
    Programming (FRP)
    principles
    #devoxxma
    @galderz

    View Slide

  5. Defining FRP
    Functional Reactive
    Programming
    is
    Abstract
    #devoxxma
    @galderz

    View Slide

  6. Defining FRP
    • What is FRP?
    • Definition
    • Why is FRP interesting?
    • Usefulness
    #devoxxma
    @galderz

    View Slide

  7. What is FRP?
    Composable, declarative way of
    programming with
    values changing over time
    #devoxxma
    @galderz

    View Slide

  8. Functional
    input => combinators => output
    #devoxxma
    @galderz

    View Slide

  9. Functional + Reactive
    event + state
    => transform
    => state and/or event
    #devoxxma
    @galderz

    View Slide

  10. Why is FRP interesting?
    Composability: easier to reason
    Asynchronous by default
    Efficiency++
    #devoxxma
    @galderz

    View Slide

  11. How to build FRP apps?
    #devoxxma
    @galderz
    HTTP TCP/IP

    View Slide

  12. Elm
    #devoxxma
    @galderz
    HTTP
    TCP/IP
    statically
    compiled

    View Slide

  13. Elm
    #devoxxma
    @galderz
    HTTP
    TCP/IP
    statically
    compiled
    building
    web user
    interfaces

    View Slide

  14. Elm
    #devoxxma
    @galderz
    HTTP
    TCP/IP
    statically
    compiled
    building
    web user
    interfaces
    promotes
    FRP

    View Slide

  15. Elm
    #devoxxma
    @galderz
    HTTP
    TCP/IP
    statically
    compiled
    building
    web user
    interfaces
    promotes
    FRP
    compiles
    to fast
    javascript

    View Slide

  16. Elm
    #devoxxma
    @galderz
    HTTP
    TCP/IP
    statically
    compiled
    building
    web user
    interfaces
    promotes
    FRP
    compiles
    to fast
    javascript
    most
    helpful
    compiler

    View Slide

  17. Elm
    #devoxxma
    @galderz
    HTTP
    TCP/IP
    statically
    compiled
    building
    web user
    interfaces
    promotes
    FRP
    compiles
    to fast
    javascript
    most
    helpful
    compiler
    no
    runtime
    exceptions

    View Slide

  18. Node.js
    #devoxxma
    @galderz
    HTTP
    TCP/IP
    based on
    express.js

    View Slide

  19. Node.js
    #devoxxma
    @galderz
    HTTP
    TCP/IP
    based on
    express.js
    FRP
    friend
    (async,
    events)

    View Slide

  20. Node.js
    #devoxxma
    @galderz
    HTTP
    TCP/IP
    based on
    express.js
    FRP
    friend
    (async,
    events)
    stateless
    listens on
    port 3000

    View Slide

  21. Node.js
    #devoxxma
    @galderz
    HTTP
    TCP/IP
    based on
    express.js
    FRP
    friend
    (async,
    events)
    stateless
    listens on
    port 3000
    talks
    binary to
    data grid

    View Slide

  22. Infinispan
    #devoxxma
    @galderz
    HTTP
    TCP/IP
    in-
    memory
    data grid

    View Slide

  23. Infinispan
    #devoxxma
    @galderz
    HTTP
    TCP/IP
    in-
    memory
    data grid
    open
    source
    (ASL2)

    View Slide

  24. Infinispan
    #devoxxma
    @galderz
    HTTP
    TCP/IP
    in-
    memory
    data grid
    open
    source
    (ASL2)
    3 server
    node
    domain

    View Slide

  25. Infinispan
    #devoxxma
    @galderz
    HTTP
    TCP/IP
    in-
    memory
    data grid
    open
    source
    (ASL2)
    3 server
    node
    domain
    2 copies
    redundant

    View Slide

  26. Infinispan
    #devoxxma
    @galderz
    HTTP
    TCP/IP
    in-
    memory
    data grid
    open
    source
    (ASL2)
    3 server
    node
    domain
    2 copies
    redundant
    Java,
    Node.js,
    C/C++...
    clients

    View Slide

  27. Infinispan
    #devoxxma
    @galderz
    HTTP
    TCP/IP
    in-
    memory
    data grid
    open
    source
    (ASL2)
    3 server
    node
    domain
    2 copies
    redundant
    Java,
    Node.js,
    C/C++...
    clients
    remote
    event
    listeners

    View Slide

  28. Elm Architecture
    #devoxxma
    @galderz
    Elm Runtime
    Model
    Html + Msg (Click)
    update
    Msg (Click) + Model
    Cmd e.g. http call

    Msg (Http Resp) + Model
    Model updated
    Model
    view
    … button click …

    View Slide

  29. Demo: Fetch talks (1)
    #devoxxma
    @galderz
    GET /events

    View Slide

  30. Demo: Fetch talks (2)
    #devoxxma
    @galderz
    GET /events
    iterate
    event 1
    event 2

    View Slide

  31. Demo: Fetch talks (3)
    #devoxxma
    @galderz
    GET /events
    iterate
    event 1
    event 2

    JSON event[]

    View Slide

  32. Demo:
    Fetch
    Talks
    #devoxxma

    View Slide

  33. Demo: Insert talk (1)
    #devoxxma
    @galderz
    POST /events

    View Slide

  34. Demo: Insert talk (1)
    #devoxxma
    @galderz
    POST /events
    putIfAbsent

    View Slide

  35. Demo: Insert talk (1)
    #devoxxma
    @galderz
    POST /events
    putIfAbsent
    true/false
    created
    event

    View Slide

  36. Demo: Insert talk (1)
    #devoxxma
    @galderz
    POST /events
    putIfAbsent
    true/false
    created
    event
    JSON true/false
    WS: JSON event
    WS: JSON event

    View Slide

  37. Demo:
    Insert
    Talk
    #devoxxma

    View Slide

  38. Objective
    Learn How To Build
    Functional Reactive Apps
    #devoxxma
    @galderz
    what is
    FRP

    View Slide

  39. Objective
    Learn How To Build
    Functional Reactive Apps
    #devoxxma
    @galderz
    what is
    FRP
    why FRP
    is useful

    View Slide

  40. Objective
    Learn How To Build
    Functional Reactive Apps
    #devoxxma
    @galderz
    what is
    FRP
    why FRP
    is useful
    how to
    build an
    FRP app

    View Slide

  41. Objective
    Learn How To Build
    Functional Reactive Apps
    #devoxxma
    @galderz
    what is
    FRP
    why FRP
    is useful
    how to
    build an
    FRP app
    how to
    build an
    FRP app

    View Slide

  42. Credits
    #devoxxma
    @galderz
    Approve by Aha-Soft
    from the Noun Project
    Window by Oleg Frolov
    from the Noun Project
    Server Error by Montu Yadav
    from the Noun Project
    Databases by Oliviu Stoian
    from the Noun Project

    View Slide

  43. Demo Link
    github.com/galderz/
    infinispan-events/tree/late16
    #devoxxma
    @galderz

    View Slide

  44. Merci
    #devoxxma
    @galderz
    • elm-lang.org
    • infinispan.org
    • redhat.com/en/
    technologies/jboss-
    middleware/data-grid

    View Slide