Practical Frontend with Haskell and Reflex FRP

#kievfprog presenation about Haskell and Reflex https://github.com/reflex-frp

Transcript

1. Practical Frontend with Haskell and Refex FRP Sergey Bushnyak @sigrlami
2. JavaScript • Default language of choice for web UIs • Widespread usage
3. The JavaScript problem • Dynamic Types • Mutability • Callback hell
4. The JavaScript problem : Callback Hell • Observer : Unpredictable order • Observer : Inconsistent state • Observer : Leaking listeners • Observer : Forced Single Threading
5. 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
6. 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
7. Solutions Landscape • React + Typescript • Other languages – ClojureScript – Elm – Opa • Haskell based – PureScript – Haste – Refex/GHCJS – Many other attempts (Fay, Roy, Halogen, ..)
8. FRP / Functional Reactive Programming • FRP to Rescue • Look from Haskell based view
9. FRP / Functional Reactive Programming • 1997 – Conant Elliot / events handling • 2000 – Paul Hudak / orderdered timing • 2009 – Conan Elliot / push-pull • 2012 - Evan Czaplicki / elm
10. FRP / Functional Reactive Programming • Event • Behavior
11. FRP / Use Cases • UI (stream of user events) • Robotics (stream of sensors events) • Electronics (net tracing and wiring)
12. GHCJS / Refex • Refex is FRP specifcation and realisation • Builds Up a platform `refex-platform` https://github.com/refex-frp – `refex` – `refex-dom` – `refex-contrib`
13. GHCJS • GHCJS is GHC compiled to JavaScript • Not a subset or implementation or partial functionality • Everything non-C based (tcp networking) compiled as is
14. GHCJS • Means you can share functiionality • Means you can use Haskell idioms in JavaScript world
15. Refex / bbstractions • Event • Behavior • Dynamic
16. 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
17. 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
18. 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
19. 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`
20. Refex / Current issues • Building (Stack vs Nix); • Better routing for complex applications • bpp size (partually fxes with Closure compiler in a pipeline) • GHCJS state
21. Shared code
22. The End