This document provides an introduction to reactive programming in the browser using Scala.js and PureScript. It discusses the similarities and differences between Scala.js and PureScript, including support for functional programming concepts like higher-kinded types, monadic comprehensions, and ADTs with pattern matching. It then introduces reactive programming as programming with asynchronous data streams and how this is useful for developing user interfaces with pure functional programming. Finally, it demonstrates an OutWatch library that aims to update the DOM efficiently, handle subscriptions automatically, and reduce the need for higher-order observables.

1. Reactive Programming in the Browser
Luka Jacobowitz

2. Agenda
1. Intro to Scala.js and PureScript
2. What exactly is Reactive Programming?
3. Why use Reactive Programming?
4. Live Coding session!

3. Scala.js
● First appeared in 2013
● Simple Scala to JavaScript compiler
● Can compile almost Scala code without any
changes to existing code

4. PureScript
● First appeared in 2013
● Strongly inspired by Haskell
● Purely Functional
● Built explicitly for the Browser/JavaScript
environment

5. Similarities - Function composition
Scala
List(1,2,3) map (_ + 1) filter (_ > 3)
val plus3: Int => Int = (_ + 3)
val plus3Times4 = plus3 >>> (_ * 4)
PureScript
[1,2,3] # map (_ + 1) # filter (_ > 3)
plus3 = (_ + 3)
plus3Times4 = plus3 >>> (_ * 4)

6. Similarities - ADTs and Pattern Matching
Scala
sealed trait Maybe[+T]
case class Just[T](t: T) extends
Maybe[T]
case object Nada extends
Maybe[Nothing]
x match {
case Just(a) => ...
case Nada => ...
}
PureScript
data Maybe a = Just a | Nada
case x of
(Just a) -> ...
Nada -> ...

7. Similarities - Monadic comprehensions
Scala
for {
z <- 1 to 20
y <- 1 to z
x <- 1 to y
if x * x + y * y == z * z
} yield (x, y, z)
PureScript
do
z <- 1 .. 20
y <- 1 .. z
x <- 1 .. y
guard $ x * x + y * y == z * z
pure [x, y, z]

8. Similarities - Higher Kinded Types
Scala
trait Functor[F[_]] {
def map[A, B](f: A => B)
(fa: F[A]): F[B]
}
PureScript
class Functor f where
map :: forall a b. (a -> b)
-> f a
-> f b

9. Differences
Scala
● Inheritance (can make working
with JS APIs easier)
● Allows partial application of any
parameter
● Needs a runtime environment
● Larger tool/library ecosystem
● Implicits
● String interpolation
● Supports Dynamic typing
PureScript
● Guarantees referential
transparency
● Functions are all curried by
default
● JS semantics
● Eff optimizes out calls to bind
● ST compiles to JS variable
● Hindley-Milner Inference
● Nested Record Updates
● Row Polymorphism

10. How do we develop user interfaces with pure
functional programming?

11. Reactive Programming
Reactive programming is programming with asynchronous data streams.

12. How is that useful?

13. How is that useful?

14. Let’s check out some code!

15. OutWatch
A small library with 3 design goals
● Updating DOM efficiently without
sacrificing abstraction => Virtual DOM
● Handling subscriptions automatically
● Removing or restricting the need for
Higher Order Observables

16. OutWatch
Scala
val logComponent: VNode = div(
h2("Input here"),
input(inputString → loggingSink)
)
PureScript
logComponent :: forall e.
VDom (console :: CONSOLE | e)
logComponent =
div
[ h2[ text "Input here" ]
, input[inputString ⇒ loggingSink]
]

17. More code!

18. 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