Reactive Programming in the Browser feat. Scala.js and Rx

Reactive Programming in the Browser
Feat. Scala.js and Rx

Overview
● How can we develop purely functional frontend
applications?
● What does Reactive Programming mean?
● What are the pros and cons to the reactive approach?
● Live Coding session!

How do we develop user interfaces
with pure functional programming?

This is pure!
val program = for {
button <- createElement("button")
span <- createElement("span")
_ <- button.addEventListener("click", clickListener)
} yield ()
def clickListener(e: Event) = for {
span <- querySelector("span")
content <- span.textContent
_ <- span.setTextContent(content + "Text")
} yield ()

Let’s try again...
def app(update: State => State, view: State => Html) = for {
oldState <- getCurrentState()
updated <- saveState(update(oldState))
_ <- view(updated).render()
} yield ()
def update(oldState: State) = oldState + "Text"
def view(state: State) = div(
button(click := app(update, view)),
span(state)
)
val program = app(update, view)

We can go even further
sealed trait Action
case class AppendText(text: String) extends Action
def reducer(action: Action, old: State) = action match {
case AppendText(text) => old + text
}
def app(action: Action) = for {
oldState <- getCurrentState()
updated <- saveState(reducer(action, oldState))
_ <- view(updated).render()
} yield ()

● State Monad?
● Mutable References?
● Free Monads?
● Streams?
But how do we query
or update the current
state?

OutWatch
A small library for easing frontend development
with reactive streams:
● Updating DOM efficiently without sacrificing
abstraction => Virtual DOM
● Handling subscriptions automatically
● Polyglot (Scala & PureScript)

Conclusions
● Reactive Programming is Functional Programming + Time
● We can use this to model different Architectures (e.g. Elm
Architecture)
● Applications can be modeled by using only pure functions
● Functional Programming patterns still apply
● We can work at an extra level of abstraction but maintain
flexibility

Thank you for listening!
You can find out more at http://outwatch.github.io. Or check out my twitter
@LukaJacobowitz and my Blog http://lukajcb.github.io/blog

Reactive Programming in the Browser feat. Scala.js and Rx

More Related Content

Similar to Reactive Programming in the Browser feat. Scala.js and Rx (20)

More from Luka Jacobowitz (13)

Recently uploaded (20)

Reactive Programming in the Browser feat. Scala.js and Rx