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