functional & reactive uis with javascript · functional & reactive uis with javascript...

Functional & Reactive UIs with JavaScript

Lambda Days 2016

Survey

2

OOP: Alan KeyObjects communicate by asynchronous message passing

Zaiste@zaiste

5

6

My story

7

2005

8

PythonResearch Internship at LIMSI in Paris

9

Functional programming

10

First-class functionsFunctions as datatype: passed around, returned, etc.

OCamlIntroduction to functional programming by Marc Pouzet

12

MLDeveloped in 1970 by Robin Milner

13

ML InfluenceHaskell, Elm, …

14

UIs

15

HCIHuman-Computer Interaction

H C

Model-View-ControllerTrygve Reenskaug in the 1970s

Smalltalk-76At XEROX PARC

MVCDigital model vs Mental model

View

Model

Controller

User

Callback-basedClassical approach

Functional UIs

22

ReactGreatly improved rendering engine

DeclarativeSimple and straightforward UI representation

UI is fn of stateFunctional foundation

f(D0) -> V0

f(D1) -> V1

diff(V0, V1) = changes

DOM

Data

Virtual DOM

View

Store

DispatcherActions

User Inputs

Callbacks

Action Creators

New ConceptsDifficult for newcomers

Reactive programming

32

A spreadsheetMost popular reactive programming tool

A B

34

PassiveB allows others to change its state

35

ReactiveB manages its state by reacting to external events

36

Separation of concernsA and B are responsible for themselves

37

EncapsulationB hides its internals

38

ReactiveIndependent, self-contained modules

39

Values over timeFirst class concept

ObservableSimple abstraction: Observer + Iterator

41

Marble Diagram

Lazy event stream0+ events, finite or infinite

43

AsynchronicityDoing more simpler

What, not howDeclarative approach to program logic

Simple compositionOutputs can be given as inputs

UnificationPromises, Callbacks, Web Workers, Web Sockets

RxJSJavaScript reactive programming library

const doubleClickObservable = clickObservable .buffer(() => clickObservable.debounce(250)) .map(arr => arr.length) .filter(x => x === 2);

49

Let’s combine

50

51

Cycle.jsFunctional and reactive UI framework in JavaScript

52

ConciseBoth the framework and applications built with it

Simple APICycle.run()

fn : input -> outputConstant dialogue

http://cycle.js.org/dialogue.html

computer()fn : inputDevices -> outputDevices

human()fn : senses -> actuators

UIs as « cycles »Natural way for interactions

main()Your application as a pure function

function computer(userEventsObservable) { return userEventsObservable .map(event => /* ... */) .filter(somePredicate) .flatMap(transformItToScreenPixels);}

Sourcesinputs: read effects from the external world

Sinksoutputs: write effects to apply to the external world

DriversPlugins that manage the side effects

Model-View-IntentParts of the main() function

IntentProcessing inputs from the external world

ModelIt represents the state

Viewit creates the output e.g. virtual dom

ComposableDataflow components

Demo

function main() { return { DOM: Rx.Observable.interval(1000) .map(i => CycleDOM.h1('' + i + ' seconds elapsed')) };}

function main(sources) { return { DOM: sources.DOM.select('.field').events('input') .map(ev => ev.target.value) .startWith('') .map(name => div([ input('.field', {attributes: {type: 'text'}}), h1('Hello ' + name), ]) ) };}

FunctionalApplications made of pure functions

72

ReactiveObservables simplify events, async & errors handling

73

Limitationshttp://lambda-the-ultimate.org/node/4900

Q? / Thank you

75