Functional Reactive Programmingwith Ractive.js
Functional Reactive Programmingwith Ractive.js
Why Ractive?o Created at theguardian.como Mustache templateso POJO data binding, event proxieso Animations, transitions, SVG, Promise/A+o Partials, components, pluginso Interactive tutorials
Architectureagnostic
Functional Reactive Programmingwith Ractive.js
What is Functional Reactive Programming?
1. FRP is programming with async data streams
2. Everything is a stream
Functional Reactive Programmingwith Ractive.js
Two kinds of asynchronism? o Defective async: I/O
o Natural async: Events
Network lags, etc...
Users are free to choos
e
when to click a button
Functional Reactive Programmingwith Ractive.js
When we embrace async programming, events are the same as other async
streams.
We can merge async streams from different sources: events, promises...
Reactive Extensions:
Observable interface
Functional Reactive Programmingwith Ractive.js
Functional Reactive Programmingwith Ractive.js
Example Implement a Twitter-like “Who to follow”
suggestion box for GitHub usersAdapted from André Staltzintroduction to FRP
Template
Pass index to event handlers
Declare event proxy sources
in HTML code
Ractive-RxJS bridge & utility
There are also Ractive adaptorsfor RxJS and Bacon.js
Initialize RactiveElement container
Template
Data
Refresh event streamEs6 arrow functionsfor simplicity
flatMap === map to another
stream/Observable
Think sequantially!
Close event streamWe don’t carewhere this is coming from
(declared in HTML)
The Ractive event
contains the index
value
And that’s all!
Thanks for your attention!I hope this gives you some inspiration
Functional Reactive Programmingwith Ractive.js
References Source codeVideo of talk (Spanish)Original example sourceAndré Staltz intro to RsJXRactive.js homepageReactive Extensions: RxJS
Functional Reactive Programmingwith Ractive.js
I’m a collaborator of the FunScript project(F# to JS compiler), if you’re interested in
functional programming you may want to check it funscript.info/github.com/alfonsogarciacaromeetup.com/madrid-fsharp/
@alfonsogcnunez
tiny
Recommended
