Practical Frontend
with Haskell and Refex FRP
Sergey Bushnyak
@sigrlami
Slide 2
Slide 2 text
JavaScript
●
Default language of choice for web UIs
●
Widespread usage
Slide 3
Slide 3 text
The JavaScript problem
●
Dynamic Types
●
Mutability
●
Callback hell
Slide 4
Slide 4 text
The JavaScript problem : Callback Hell
●
Observer : Unpredictable order
●
Observer : Inconsistent state
●
Observer : Leaking listeners
●
Observer : Forced Single Threading
Slide 5
Slide 5 text
The JavaScript problem : Dynamic Types
●
Dynamic typing
– Nice for developers / easy to change things
– Error prone / unexpected result while combining types
– Require experience to create proper abstractions
Slide 6
Slide 6 text
The JavaScript problem
●
But there are Promise for that
→ also easy to end up in a Promise hell (especially for
complex application)
●
But there is React + Typescript
→ good, but still inconistency in states
●
Bigger codebase → bigger complexity to handle
Slide 7
Slide 7 text
Solutions Landscape
●
React + Typescript
●
Other languages
– ClojureScript
– Elm
– Opa
●
Haskell based
– PureScript
– Haste
– Refex/GHCJS
– Many other attempts (Fay, Roy, Halogen, ..)
Slide 8
Slide 8 text
FRP / Functional Reactive Programming
●
FRP to Rescue
●
Look from Haskell based view
FRP / Use Cases
●
UI (stream of user events)
●
Robotics (stream of sensors events)
●
Electronics (net tracing and wiring)
Slide 12
Slide 12 text
GHCJS / Refex
●
Refex is FRP specifcation and realisation
●
Builds Up a platform `refex-platform` https://github.com/refex-frp
– `refex`
– `refex-dom`
– `refex-contrib`
Slide 13
Slide 13 text
GHCJS
●
GHCJS is GHC compiled to JavaScript
●
Not a subset or implementation or partial functionality
●
Everything non-C based (tcp networking) compiled as is
Slide 14
Slide 14 text
GHCJS
●
Means you can share functiionality
●
Means you can use Haskell idioms in JavaScript world
Slide 15
Slide 15 text
Refex / bbstractions
●
Event
●
Behavior
●
Dynamic
Slide 16
Slide 16 text
Refex / Functions
●
never :: Event a
●
hold :: a → Event a → m (Behaviour a)
●
tag :: Behaviour a → Event b → Event a
●
attach :: Behaviour a → Event b → Event (a, b)
●
attachWith :: (a → b → c) → Behaviour a → Event b → Event c
●
switch :: Behaviour (Event a) → Event a
Slide 17
Slide 17 text
Refex / Functions
●
constDyn :: a → Dynamic a
– constructor
●
holdDyn :: a → Event a → m (Dynamic a)
– constructor
●
foldDyn :: (a → b → b) → b → Event a → m (Dynamic b)
– constructor
●
current :: Dynamic a → Behavior a
– accessor
●
updated :: Dynamic a → Event a
– accessor
Slide 18
Slide 18 text
Refex Use Cases
●
Soostone, Inc. ~ 15k loc webapp
●
Takt, Inc. / Foundation.ai ~ 22k loc webapp
●
Obsydian Systems, Inc. ~ 3k – 20k loc webapps
●
Kelecorix, Inc. ~ 2-6k loc webapps
Slide 19
Slide 19 text
Refex / Higher Order FRP
●
Nesting widgets
– widgetHold :: m a → Event (m a) → m (Dynamic a)
– dyn :: Dynamic (m a) → m (Event a)
●
Collapsing action
– Usually `join`
Slide 20
Slide 20 text
Refex / Current issues
●
Building (Stack vs Nix);
●
Better routing for complex applications
●
bpp size (partually fxes with Closure compiler in a pipeline)
●
GHCJS state