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
210
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
160
Gitting like a pro - Take 2.pdf
pavlakis
0
49
4th Virtual GreeceJS - Tech News
pavlakis
0
16
3rd Virtual GreeceJS - Tech News
pavlakis
0
21
PWAs: the Application Shell & the well of surprises
pavlakis
1
190
Error Handling in Javascript
pavlakis
1
180
Gitting like a Pro
pavlakis
1
250
Async Patterns & Paradigms in Javascript
pavlakis
4
300
Going Mobile
pavlakis
2
180
Other Decks in Programming
See All in Programming
Cloudflare Workersで進めるリモートMCP活用
syumai
12
1.7k
AWS Summit Hong Kong 2025: Reinventing Programming - How AI Transforms Our Enterprise Coding Approach
dwchiang
0
150
Ruby で作る RISC-V CPU エミュレーター / RISC-V CPU emulator made with Ruby
hayaokimura
5
1.2k
Beyond_the_Prompt__Evaluating__Testing__and_Securing_LLM_Applications.pdf
meteatamel
0
120
AI時代のリアーキテクチャ戦略 / Re-architecture Strategy in the AI Era
dachi023
0
150
クラシルリワードにおける iOSアプリ開発の取り組み
funzin
1
210
AIコーディングエージェントを 「使いこなす」ための実践知と現在地 in ログラス / How to Use AI Coding Agent in Loglass
rkaga
4
1.5k
ソフトウェア品質特性、意識してますか?AIの真の力を引き出す活用事例 / ai-and-software-quality
minodriven
10
2.2k
データと事例で振り返るDevin導入の"リアル" / The Realities of Devin Reflected in Data and Case Studies
rkaga
3
2.8k
2025-04-25 GitHub Copilot Agent ライブデモ(スクリプト)
goataka
0
130
JAWS DAYS 2025 re_Cheers: WEB
komakichi
0
130
今話題のMCPサーバーをFastAPIでサッと作ってみた
yuukis
0
150
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
PRO
53
11k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.2k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.6k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
13
850
YesSQL, Process and Tooling at Scale
rocio
172
14k
Automating Front-end Workflow
addyosmani
1370
200k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
VelocityConf: Rendering Performance Case Studies
addyosmani
329
24k
Side Projects
sachag
453
42k
Code Reviewing Like a Champion
maltzj
523
40k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
105
19k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
810
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?