Practical Frontend with Haskell and Refex FRP Sergey Bushnyak - PowerPoint PPT Presentation

Practical Frontend with Haskell and Refex FRP Sergey Bushnyak @sigrlami

JavaScript Default language of choice for web UIs ● Widespread usage ●

The JavaScript problem Dynamic T ypes ● Mutability ● Callback hell ●

The JavaScript problem : Callback Hell Observer : Unpredictable order ● Observer : Inconsistent state ● Observer : Leaking listeners ● Observer : Forced Single Threading ●

The JavaScript problem : Dynamic T ypes Dynamic typing ● Nice for developers / easy to change things – Error prone / unexpected result while combining types – Require experience to create proper abstractions –

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 + T ypescript ● → good, but still inconistency in states Bigger codebase → bigger complexity to handle ●

Solutions Landscape React + T ypescript ● Other languages ● ClojureScript – Elm – Opa – Haskell based ● PureScript – Haste – Refex/GHCJS – Many other attempts (Fay, Roy, Halogen, ..) –

FRP / Functional Reactive Programming FRP to Rescue ● Look from Haskell based view ●

FRP / Functional Reactive Programming 1997 – Conant Elliot / events handling ● 2000 – Paul Hudak / orderdered timing ● 2009 – Conan Elliot / push-pull ● 2012 - Evan Czaplicki / elm ●

FRP / Functional Reactive Programming Event ● Behavior ●

FRP / Use Cases UI (stream of user events) ● Robotics (stream of sensors events) ● Electronics (net tracing and wiring) ●

GHCJS / Refex Refex is FRP specifcation and realisation ● Builds Up a platform `refex-platform` https://github.com/refex-frp ● `refex` – `refex-dom` – `refex-contrib` –

GHCJS GHCJS is GHC compiled to JavaScript ● Not a subset or implementation or partial functionality ● Everything non-C based (tcp networking) compiled as is ●

GHCJS Means you can share functiionality ● Means you can use Haskell idioms in JavaScript world ●

Refex / bbstractions Event ● Behavior ● Dynamic ●

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 ●

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 –

Refex Use Cases Soostone, Inc. ~ 15k loc webapp ● T akt, Inc. / Foundation.ai ~ 22k loc webapp ● Obsydian Systems, Inc. ~ 3k – 20k loc webapps ● Kelecorix, Inc. ~ 2-6k loc webapps ●

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` –

Refex / Current issues Building (Stack vs Nix); ● Better routing for complex applications ● bpp size (partually fxes with Closure compiler in a pipeline) ● GHCJS state ●

Shared code

The End