Intro to Functional Reactive Programming for web apps with Ractive.js and Reactive Extensions (RxJS).

1. Functional Reactive Programming
with Ractive.js

2. Functional Reactive Programming
with Ractive.js
Architecture
agnostic
Why Ractive?
o Created at theguardian.com
o Mustache templates
o POJO data binding, event proxies
o Animations, transitions, SVG, Promise/A+
o Partials, components, plugins
o Interactive tutorials

3. Functional Reactive Programming
with Ractive.js
What is Functional Reactive Programming?
1. FRP is programming with async data streams
2. Everything is a stream

4. Functional Reactive Programming
with Ractive.js
Two kinds of asynchronism?
o Defective async: I/O
o Natural async: Events
Network lags, etc...
Users are free to choose
when to click a button

5. Functional Reactive Programming
with 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

6. Functional Reactive Programming
with Ractive.js

7. Functional Reactive Programming
with Ractive.js
Example
Implement a Twitter-like “Who to follow”
suggestion box for GitHub users
Adapted from André Staltz
introduction to FRP

8. Template
Pass index to event handlers
Declare event proxy sources
in HTML code

9. Ractive-RxJS bridge & utility
There are also Ractive adaptors
for RxJS and Bacon.js

10. Initialize Ractive
Element container
Template
Data

11. Refresh event stream
Es6 arrow functions
for simplicity
Think sequantially!
flatMap === map to another
stream/Observable

12. Close event stream
We don’t care
where this is coming from
(declared in HTML)
The Ractive event
contains the index value

13. And that’s all!
Thanks for your attention!
I hope this gives you some inspiration

14. Functional Reactive Programming
with Ractive.js
References
Source code
Video of talk (Spanish)
Original example source
André Staltz intro to RsJX
Ractive.js homepage
Reactive Extensions: RxJS

15. Functional Reactive Programming
with 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/alfonsogarciacaro
meetup.com/madrid-fsharp/
@alfonsogcnunez
tiny