Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Introduction to FRP
Search
Stratos Pavlakis
July 21, 2015
Programming
3
220
Introduction to FRP
An introduction to Functional Reactive Programming - presented at 9th GreeceJS meetup
Stratos Pavlakis
July 21, 2015
Tweet
Share
More Decks by Stratos Pavlakis
See All by Stratos Pavlakis
Intro to Remix
pavlakis
0
170
Gitting like a pro - Take 2.pdf
pavlakis
0
59
4th Virtual GreeceJS - Tech News
pavlakis
0
22
3rd Virtual GreeceJS - Tech News
pavlakis
0
25
PWAs: the Application Shell & the well of surprises
pavlakis
1
190
Error Handling in Javascript
pavlakis
1
190
Gitting like a Pro
pavlakis
1
260
Async Patterns & Paradigms in Javascript
pavlakis
4
310
Going Mobile
pavlakis
2
190
Other Decks in Programming
See All in Programming
基礎から学ぶ大画面対応(Learning Large-Screen Support from the Ground Up)
tomoya0x00
0
430
Putting The Genie in the Bottle - A Crash Course on running LLMs on Android
iurysza
0
140
アルテニア コンサル/ITエンジニア向け 採用ピッチ資料
altenir
0
100
rage against annotate_predecessor
junk0612
0
170
[FEConf 2025] 모노레포 절망편, 14개 레포로 부활하기까지 걸린 1년
mmmaxkim
0
1.6k
テストカバレッジ100%を10年続けて得られた学びと品質
mottyzzz
2
590
RDoc meets YARD
okuramasafumi
4
170
ぬるぬる動かせ! Riveでアニメーション実装🐾
kno3a87
1
210
速いWebフレームワークを作る
yusukebe
5
1.7k
もうちょっといいRubyプロファイラを作りたい (2025)
osyoyu
1
430
FindyにおけるTakumi活用と脆弱性管理のこれから
rvirus0817
0
500
JSONataを使ってみよう Step Functionsが楽しくなる実践テクニック #devio2025
dafujii
1
530
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
GraphQLの誤解/rethinking-graphql
sonatard
72
11k
Typedesign – Prime Four
hannesfritz
42
2.8k
Speed Design
sergeychernyshev
32
1.1k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
BBQ
matthewcrist
89
9.8k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.7k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
We Have a Design System, Now What?
morganepeng
53
7.8k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Transcript
Functional Reactive Programming in Javascript
whoami Stratos Pavlakis Workable UI Tech Lead
[email protected]
th3hunt FRP
newbie!
what’s FRP?
let’s begin with
http://www.reactivemanifesto.org/ Responsive Message Driven Resilient Elastic
sweet dreams
so better start with
reactive paradigm var b = 1, c = 1; var
a = b + c; // a == 2 b = 10; • // a == ? • // imperative paradigm => a == 2 • // reactive paradigm => a == 11
front end development is it synchronous or asynchronous?
• User Input • AJAX • Web Sockets / SSE
• Web Workers • Animations • Cross origin frame communication • Updating the DOM we deal with
• User Input • AJAX • Web Sockets / SSE
• Web Workers • Animations • Cross origin frame communication • Updating the DOM most are async!
tools we use
callbacks var el = document.getElementById("my-button"); el.addEventListener("click", function () { console.log(‘my
button was clicked’); });
promises $http(endpoint1) .get({q: ‘frp’}) .then(function (data) { console.log(‘We got data
back from ajax %s’, data); }) .then(function (data) { return $http(endpoint2).get({id: data.id}); })
generators in ES7 async(function main() { var result1 = await
request( "http://endpoint.1" ); var data = JSON.parse( result1 ); var result2 = await request( "http://endpoint.2?id=" + data.id ); var resp = JSON.parse( result2 ); console.log( "Value: " + resp.value ); })
problems • callback hell • try / catch (except for
generators) • memory leaks • reduced composability
event driven programming we react to events
is reason about event streams what we’re really trying to
do
any number of values Array over any amount of time
f(time) / async an event stream would be
first class citizen of FRP observable
Observer Iterator Gang of Four - Design Patterns ES6 EventEmitter
array VS event
array === collection
events === collection
collections are iterable
observable === collection + time
observable API var subscription = myObservable.subscribe(function (val) { console.log(‘Next: %s’,
val); });
from the EventEmitter? so… how is that different
we know when it’s done var subscription = myObservable.subscribe( onNext,
onError, onCompleted ); like promises
we got set operators • map • flatMap • reduce
• merge • concat • zip
more operators • debounce • buffer • skipUntil • flatMapLatest
• combineLatest • switch • retry
observables can model • mouse clicks • key presses •
scrolling • animations • AJAX Polling, Web Sockets • timers • even… constants
operators http://rxmarbles.com/
filter
debounce
distinctUntilChanged
takeUntil
example please!
mousedown.flatMap((md) => { var startX = md.offsetX, startY = md.offsetY;
return mousemove.map((mm) => { return { left: mm.clientX - startX, top: mm.clientY - startY }; }).takeUntil(mouseup); }).subscribe((pos) => { dragTarget.style.top = pos.top + 'px'; dragTarget.style.left = pos.left + 'px'; }); drag & drop
Autocomplete yes I know, the classic example
requirements • filter queries • throttle requests • retry (overcome
network glitches) • avoid duplicate requests • match results to latest query • abort no longer valid requests
keyup => results var keyPress = $('#search').keyupAsObservable(); .keyPress.map((ev) => {
return ev.target.value; }) .filter((text) => { return text.length > 3; }) .debounce(500) .distinctUntilChanged() .flatMapLatest(search.retry(3).takeUntil(keyPress)) .map((d) => { return d.response[1]; }) .subscribe(showResults, showError); throttling no duplicate requests filtering match/abort response/results
gets even better
things we can do • cancel (can’t do with Promises)
• be lazy until a subscriber subscribes (cold) • setup datasource on first subscription • teardown datasource on disposal
not convinced yet?
observable future • TC39 proposal to add to ES7 ◦
https://github.com/zenparsing/es-observable • Angular 2 first class support • ReactJS first class support
http://victorsavkin.com/post/108837493941/better-support-for-functional-programming-in
Rx in production
still... • steep learning curve • old habits die hard
• tricky to work with classic MV* • poor/difficult documentation (is getting better)
libraries
• Rx.js (port of Reactive Extensions to JS) • Bacon.js
• Kefir (faster bacon :)
origins
Microsoft Research • A Brief Introduction to ActiveVRML - Conan
Elliott • Functional Reactive Animations - Conan Elliott & Paul Hudak
resources • Fran Tutorial - http://conal.net/fran/tutorial.htm • Simply Reactive -
http://conal.net/papers/simply-reactive/ • Reactive Extensions - https://github.com/Reactive-Extensions/RxJS • BaconJS - https://baconjs.github.io/ • Async JavaScript with Reactive Extensions (Jafar Husain) ◦ https://www.youtube.com/watch?v=XRYN2xt11Ek • RxJS at Modern Web UI (Ben Lesh) ◦ https://www.youtube.com/watch?v=yk_6eU3Hcwo • http://www.slideshare.net/stefanmayer13/functional-reactive-programming-with-rxjs • https://gist.github.com/staltz/868e7e9bc2a7b8c1f754 • RxJSKoans - https://rxkoans.codeplex.com/ • RxMarbles - http://rxmarbles.com/ • Reactive programming and MVC (Aaron Stacy) ◦ http://aaronstacy.com/writings/reactive-programming-and-mvc/
None
Questions?