Functional & Reactive UIs with JavaScript · Functional & Reactive UIs with JavaScript Lambda Days...
75
Functional & Reactive UIs with JavaScript Lambda Days 2016
Transcript of Functional & Reactive UIs with JavaScript · Functional & Reactive UIs with JavaScript Lambda Days...
Functional & Reactive UIs with JavaScript
Lambda Days 2016
Survey
2
OOP: Alan KeyObjects communicate by asynchronous message passing
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
Q? / Thank you
75
