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 a (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.

Transcript

1. Build Functional Reactive Applications with Elm, Node.js and Infinispan Galder Zamarreño Arrizabalaga 25th April 2017
2. Moi • @ • Infinispan developer & co-founder • Polyglot programmer • Functional programming @galderz #infinispan
3. Learn How To Build Functional Reactive Apps
4. Functional reactive apps Apps constructed using Functional Reactive Programming (FRP) principles
5. Functional Reactive Programming is Abstract
6. defining FRP • What is FRP? • Definition • Why is FRP interesting? • Usefulness
7. what is FRP? Composable, declarative way of programming with values changing over time
8. functional input => combinators => output
9. Functional + Reactive event + state → transform → state and/or event
10. Why is FRP interesting? Composability: easier to reason Asynchronous by default Efficiency++
11. how to build frp apps? HTTP TCP/IP
12. Elm HTTP TCP/IP statically compiled
13. Elm HTTP TCP/IP statically compiled building web user interfaces
14. Elm HTTP TCP/IP statically compiled building web user interfaces promotes FRP
15. Elm HTTP TCP/IP statically compiled building web user interfaces promotes FRP compiles to fast Javascript
16. Elm HTTP TCP/IP statically compiled building web user interfaces promotes FRP compiles to fast Javascript most helpful compiler
17. Elm HTTP TCP/IP statically compiled building web user interfaces promotes FRP compiles to fast Javascript most helpful compiler no runtime exceptions
18. Node.js HTTP TCP/IP based on express.js
19. Node.js HTTP TCP/IP based on express.js FRP friendly (async, events)
20. Node.js HTTP TCP/IP based on express.js FRP friendly (async, events) stateless, listens on port 3000
21. Node.js HTTP TCP/IP based on express.js FRP friendly (async, events) stateless, listens on port 3000 talks binary to data grid
22. infinispan HTTP TCP/IP in- memory data grid
23. infinispan HTTP TCP/IP in- memory data grid open source (ASL2)
24. infinispan HTTP TCP/IP in- memory data grid open source (ASL2) 3 server node domain
25. infinispan HTTP TCP/IP in- memory data grid open source (ASL2) 3 server node domain 2 copies redundant
26. infinispan HTTP TCP/IP in- memory data grid open source (ASL2) 3 server node domain 2 copies redundant Java, Node.js, C/C++... clients
27. infinispan 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
28. 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 …
29. Demo: Fetch Talks (1) GET /events
30. Demo: fetch Talks (2) GET /events iterate event 1 event 2 …
31. Demo: fetch Talks (3) GET /events iterate event 1 event 2 … JSON event[]
32. Demo: Fetch Talks
33. Demo: insert Talk (1) POST /events
34. demo: insert Talk (2) POST /events putIfAbsent
35. demo: insert Talk (3) POST /events putIfAbsent true/false created event
36. demo: insert Talk (4) POST /events putIfAbsent true/false created event JSON true/false WS: JSON event WS: JSON event
37. demo: insert Talk
38. Elm limitations • typeclasses → +boiler plate code • dictionary type • Less FRPy version 0.17+ • Interacting with complex Javascript libraries • Alternative: Purescript (+complex)
39. Learn How To Build Functional Reactive Apps what is FRP
40. Learn How To Build Functional Reactive Apps what is FRP why FRP is useful
41. Learn How To Build Functional Reactive Apps what is FRP why FRP is useful how to build an FR app
42. 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
43. 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
44. demo link github.com/galderz/ infinispan-events/tree/early17
45. Thanks • elm-lang.org • infinispan.org • redhat.com/en/technologies/ jboss-middleware/data-grid