Dabbling with Reflex FRP

(and ghcjs)

@emmanueltouzery

Reflex basics

Based on FRP concepts
Not tied only to the browser
Performance is a priority
In use in production today
Reflex-dom Leverages ghcjs

The alternatives

Elm
Purescript (Thermite/Halogen)
Fay/Haste
om/om.next
cycle.js (rxjs)
Haskell has a rich choice of FRP libraries

The app I've built (port from fay/knockout)

GHCJS

A big step up from Fay
Basically the full GHC
Including Template Haskell
Basically full hackage (lens, aeson...)
And threading...
REPL on its way!

FRP

Paul Hudak & Conal Elliott in 1997
Had performance issues at the beginning
Several schools: arrowized, first-order, higher-order...

Nice DSLs 1/2

using clay!

Nice DSLs 2/2

Events!

source

Constructs

Event

Behavior

Dynamic

thanks to rxmarbles.com!

Event operations

Event is a Functor -> fmap (const 5) clickEvt

leftmost :: … ⇒ [Event t a] → Event t a
mergeWith :: … ⇒ (a → a → a) → [Event t a] → Event t a

ffilter :: FunctorMaybe f => (a → Bool) → f a → f a

Dynamic operations

foldDyn … ⇒ (a → b → b) → b → Event t a → m (Dynamic t b)
Compare to: foldr :: (a → b → b) → b → [a] → b
foldr (+) 5 [1,2,3,4] -> 15

nubDyn :: … ⇒ Dynamic t a → Dynamic t a

Events -- again

source

The ELM basic pattern

Code walkthrough: the date picker

EventsView.hs

addDatePicker
displayPickerBlock

Prerequisites:
RecursiveDo
const :: a -> b -> a
const x _ = x
fmap (const 6) [1,2,3,4] -> [6,6,6,6]
fmap (\_ -> 6) [1,2,3,4] -> [6,6,6,6]

Some more APIs

domEvent
mapDyn :: … ⇒ (a → b) → Dynamic t a → m (Dynamic t b)
forDyn :: … ⇒ Dynamic t a → (a → b) → m (Dynamic t b)

Code walkthrough: password field

Config.hs

passwordEntry

Note we bypassed the input API, and it's self-contained.

Some more APIs

combineDyn :: … ⇒ (a → b → c) → Dynamic t a → Dynamic t b → m (Dynamic t c)

getPostBuild :: … ⇒ m (Event t ())
makeSimpleXhr/RemoteData (mine)
… ⇒ String → Event t b → m (Dynamic t (RemoteData a))

Code walkthrough: the settings model/XHR

Config.hs

configView
displaySectionItem
applyConfigChange

Taking advantage of combineDyn -- we don't need $q.all and things like that.
addEditButton: We filter the XHR response event for success to close the modal & refresh -- for error to display error messages.

Some more APIs

constDyn :: … ⇒ a → Dynamic t a
holdDyn :: … ⇒ a → Event t a → m (Dynamic t a)

Some difficulties... (1/2)

Setting up the environment (and also stack vs nix)
types can get hairy: Dynamic t (m (Event t Day)) and things like that are pretty common
The typeclass for the monad can make for confusing errors messages
recursive do: the error could be anywhere in the rec block...
Not really a problem: no DOM diffing: it's manual

Some difficulties... (2/2)

modals, render elsewhere in the DOM is not a solved problem
Got some event loops/cycles
ghcjs: shims -- builds then crashes at runtime! Had to patch the RTS.
ghcjs: Running on 0.1, ~0.3 is dev..
build time vs JS instant feedback (ghcjsi will help)
Height (-1000) is not greater than current height (0)

What worked for me

FRP
View generated through simple functions (no template language)
Types!

The ugly

My SPA GHCJS/Reflex app is 18MB (all in). That's a pretty hefty page load. (I wasn't successful with first run of closure-compiler either)
— Tim Dysinger (@dysinger) February 27, 2016

... and inline CSS...

Getting started

Ryan Trinkle's presentation (Part 1, Part 2, Slides)
reflex-todomvc
reflex-platform or try-stack-reflex
irc.freenode.net #reflex-frp
/r/reflexfrp
lots of Elm, cyclejs material