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

October 28, 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 and Infinispan
    Galder Zamarreño Arrizabalaga
    28th October 2016

    View Slide

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

    View Slide

  3. Learn How To Build
    Functional Reactive Apps

    View Slide

  4. Functional reactive apps
    Apps constructed using
    Functional Reactive
    Programming (FRP)
    principles

    View Slide

  5. Functional Reactive
    Programming
    is
    Abstract

    View Slide

  6. defining FRP
    • What is FRP?
    • Definition
    • Why is FRP interesting?
    • Usefulness

    View Slide

  7. what is FRP?
    Composable, declarative way of
    programming with
    values changing over time

    View Slide

  8. functional
    input => combinators => output

    View Slide

  9. Functional + Reactive
    event + state
    => transform
    => state and/or event

    View Slide

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

    View Slide

  11. how to build frp apps?
    HTTP TCP/IP

    View Slide

  12. Elm
    HTTP
    TCP/IP
    statically
    compiled

    View Slide

  13. Elm
    HTTP
    TCP/IP
    statically
    compiled
    building
    web user
    interfaces

    View Slide

  14. Elm
    HTTP
    TCP/IP
    statically
    compiled
    building
    web user
    interfaces
    promotes
    FRP

    View Slide

  15. Elm
    HTTP
    TCP/IP
    statically
    compiled
    building
    web user
    interfaces
    promotes
    FRP
    compiles
    to fast
    Javascript

    View Slide

  16. Elm
    HTTP
    TCP/IP
    statically
    compiled
    building
    web user
    interfaces
    promotes
    FRP
    compiles
    to fast
    Javascript
    most
    helpful
    compiler

    View Slide

  17. Elm
    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
    HTTP
    TCP/IP
    based on
    express.js

    View Slide

  19. Node.js
    HTTP
    TCP/IP
    based on
    express.js
    FRP
    friendly
    (async,
    events)

    View Slide

  20. Node.js
    HTTP
    TCP/IP
    based on
    express.js
    FRP
    friendly
    (async,
    events)
    stateless,
    listens on
    port 3000

    View Slide

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

    View Slide

  22. infinispan
    HTTP
    TCP/IP
    in-
    memory
    data grid

    View Slide

  23. infinispan
    HTTP
    TCP/IP
    in-
    memory
    data grid
    3 server
    node
    domain

    View Slide

  24. infinispan
    HTTP
    TCP/IP
    in-
    memory
    data grid
    3 server
    node
    domain
    2 copies
    redundant

    View Slide

  25. infinispan
    HTTP
    TCP/IP
    in-
    memory
    data grid
    3 server
    node
    domain
    2 copies
    redundant
    Java,
    Node.js,
    C/C++...
    clients

    View Slide

  26. infinispan
    HTTP
    TCP/IP
    in-
    memory
    data grid
    3 server
    node
    domain
    2 copies
    redundant
    Java,
    Node.js,
    C/C++...
    clients
    remote
    event
    listeners

    View Slide

  27. Elm Architecture
    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

  28. Demo: Fetch Talks (1)
    GET /events

    View Slide

  29. Demo: fetch Talks (2)
    GET /events
    iterate
    event 1
    event 2

    View Slide

  30. Demo: fetch Talks (3)
    GET /events
    iterate
    event 1
    event 2

    JSON event[]

    View Slide

  31. Demo: Fetch Talks

    View Slide

  32. Demo: insert Talk (1)
    POST /events

    View Slide

  33. demo: insert Talk (2)
    POST /events
    putIfAbsent

    View Slide

  34. demo: insert Talk (3)
    POST /events
    putIfAbsent
    true/false
    created
    event

    View Slide

  35. demo: insert Talk (4)
    POST /events
    putIfAbsent
    true/false
    created
    event
    JSON true/false
    WS: JSON event
    WS: JSON event

    View Slide

  36. demo: insert Talk

    View Slide

  37. demo: Search Talks (1)
    GET /search
    ?q=query

    View Slide

  38. demo: Search Talks (2)
    execute
    GET /search
    ?q=query

    View Slide

  39. demo: search Talks (3)
    execute
    results
    JSON results
    GET /search
    ?q=query

    View Slide

  40. demo: search Talks

    View Slide

  41. Learn How To Build
    Functional Reactive Apps
    what is
    FRP

    View Slide

  42. Learn How To Build
    Functional Reactive Apps
    what is
    FRP
    why FRP
    is useful

    View Slide

  43. Learn How To Build
    Functional Reactive Apps
    what is
    FRP
    why FRP
    is useful
    how to
    build an
    FR app

    View Slide

  44. Learn How To Build
    Functional Reactive Apps
    what is
    FRP
    why FRP
    is useful
    how to
    build an
    FR app
    live
    coding an
    FR app

    View Slide

  45. credits
    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

  46. demo link
    github.com/galderz/
    infinispan-events/tree/late16

    View Slide

  47. Thanks
    • elm-lang.org
    • infinispan.org
    • redhat.com/en/technologies/
    jboss-middleware/data-grid

    View Slide