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

practical frontend with haskell and refex frp
SMART_READER_LITE
LIVE PREVIEW

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


slide-1
SLIDE 1

Practical Frontend with Haskell and Refex FRP

Sergey Bushnyak @sigrlami

slide-2
SLIDE 2

JavaScript

  • Default language of choice for web UIs
  • Widespread usage
slide-3
SLIDE 3

The JavaScript problem

  • Dynamic T

ypes

  • Mutability
  • Callback hell
slide-4
SLIDE 4

The JavaScript problem : Callback Hell

  • Observer : Unpredictable order
  • Observer : Inconsistent state
  • Observer : Leaking listeners
  • Observer : Forced Single Threading
slide-5
SLIDE 5

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

slide-6
SLIDE 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 + T

ypescript → good, but still inconistency in states

  • Bigger codebase → bigger complexity to handle
slide-7
SLIDE 7

Solutions Landscape

  • React + T

ypescript

  • Other languages

ClojureScript

Elm

Opa

  • Haskell based

PureScript

Haste

Refex/GHCJS

Many other attempts (Fay, Roy, Halogen, ..)

slide-8
SLIDE 8

FRP / Functional Reactive Programming

  • FRP to Rescue
  • Look from Haskell based view
slide-9
SLIDE 9

FRP / Functional Reactive Programming

  • 1997 – Conant Elliot / events handling
  • 2000 – Paul Hudak / orderdered timing
  • 2009 – Conan Elliot / push-pull
  • 2012 - Evan Czaplicki / elm
slide-10
SLIDE 10

FRP / Functional Reactive Programming

  • Event
  • Behavior
slide-11
SLIDE 11

FRP / Use Cases

  • UI (stream of user events)
  • Robotics (stream of sensors events)
  • Electronics (net tracing and wiring)
slide-12
SLIDE 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`

slide-13
SLIDE 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
slide-14
SLIDE 14

GHCJS

  • Means you can share functiionality
  • Means you can use Haskell idioms in JavaScript world
slide-15
SLIDE 15

Refex / bbstractions

  • Event
  • Behavior
  • Dynamic
slide-16
SLIDE 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
slide-17
SLIDE 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

slide-18
SLIDE 18

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
slide-19
SLIDE 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`

slide-20
SLIDE 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
slide-21
SLIDE 21

Shared code

slide-22
SLIDE 22

The End