reactive programming - vrije universiteit brusselsoft.vub.ac.be/~svdewate/introtorp.pdfreactive...
TRANSCRIPT
![Page 2: Reactive Programming - Vrije Universiteit Brusselsoft.vub.ac.be/~svdewate/IntroToRP.pdfReactive Programming For the Web * Rx.JS a.k.a. Curing your asynchronous blues JavaScript 6 Syntax](https://reader030.vdocuments.site/reader030/viewer/2022040214/5ec60811df097e0643499b0c/html5/thumbnails/2.jpg)
Problem
![Page 3: Reactive Programming - Vrije Universiteit Brusselsoft.vub.ac.be/~svdewate/IntroToRP.pdfReactive Programming For the Web * Rx.JS a.k.a. Curing your asynchronous blues JavaScript 6 Syntax](https://reader030.vdocuments.site/reader030/viewer/2022040214/5ec60811df097e0643499b0c/html5/thumbnails/3.jpg)
Callback Hell
![Page 4: Reactive Programming - Vrije Universiteit Brusselsoft.vub.ac.be/~svdewate/IntroToRP.pdfReactive Programming For the Web * Rx.JS a.k.a. Curing your asynchronous blues JavaScript 6 Syntax](https://reader030.vdocuments.site/reader030/viewer/2022040214/5ec60811df097e0643499b0c/html5/thumbnails/4.jpg)
Spreadsheet Semantics
![Page 5: Reactive Programming - Vrije Universiteit Brusselsoft.vub.ac.be/~svdewate/IntroToRP.pdfReactive Programming For the Web * Rx.JS a.k.a. Curing your asynchronous blues JavaScript 6 Syntax](https://reader030.vdocuments.site/reader030/viewer/2022040214/5ec60811df097e0643499b0c/html5/thumbnails/5.jpg)
Functional Reactive Programming
A = B + C
![Page 6: Reactive Programming - Vrije Universiteit Brusselsoft.vub.ac.be/~svdewate/IntroToRP.pdfReactive Programming For the Web * Rx.JS a.k.a. Curing your asynchronous blues JavaScript 6 Syntax](https://reader030.vdocuments.site/reader030/viewer/2022040214/5ec60811df097e0643499b0c/html5/thumbnails/6.jpg)
Example
![Page 7: Reactive Programming - Vrije Universiteit Brusselsoft.vub.ac.be/~svdewate/IntroToRP.pdfReactive Programming For the Web * Rx.JS a.k.a. Curing your asynchronous blues JavaScript 6 Syntax](https://reader030.vdocuments.site/reader030/viewer/2022040214/5ec60811df097e0643499b0c/html5/thumbnails/7.jpg)
Easily Extended
updateGUI
wait(15)
beep Steer actuator
![Page 8: Reactive Programming - Vrije Universiteit Brusselsoft.vub.ac.be/~svdewate/IntroToRP.pdfReactive Programming For the Web * Rx.JS a.k.a. Curing your asynchronous blues JavaScript 6 Syntax](https://reader030.vdocuments.site/reader030/viewer/2022040214/5ec60811df097e0643499b0c/html5/thumbnails/8.jpg)
Reactive Programming For the Web
*
![Page 9: Reactive Programming - Vrije Universiteit Brusselsoft.vub.ac.be/~svdewate/IntroToRP.pdfReactive Programming For the Web * Rx.JS a.k.a. Curing your asynchronous blues JavaScript 6 Syntax](https://reader030.vdocuments.site/reader030/viewer/2022040214/5ec60811df097e0643499b0c/html5/thumbnails/9.jpg)
Rx.JS
a.k.a.
Curing your asynchronous blues
![Page 10: Reactive Programming - Vrije Universiteit Brusselsoft.vub.ac.be/~svdewate/IntroToRP.pdfReactive Programming For the Web * Rx.JS a.k.a. Curing your asynchronous blues JavaScript 6 Syntax](https://reader030.vdocuments.site/reader030/viewer/2022040214/5ec60811df097e0643499b0c/html5/thumbnails/10.jpg)
JavaScript 6 Syntax inside!
![Page 11: Reactive Programming - Vrije Universiteit Brusselsoft.vub.ac.be/~svdewate/IntroToRP.pdfReactive Programming For the Web * Rx.JS a.k.a. Curing your asynchronous blues JavaScript 6 Syntax](https://reader030.vdocuments.site/reader030/viewer/2022040214/5ec60811df097e0643499b0c/html5/thumbnails/11.jpg)
Array Operations in a Nutshell
![Page 12: Reactive Programming - Vrije Universiteit Brusselsoft.vub.ac.be/~svdewate/IntroToRP.pdfReactive Programming For the Web * Rx.JS a.k.a. Curing your asynchronous blues JavaScript 6 Syntax](https://reader030.vdocuments.site/reader030/viewer/2022040214/5ec60811df097e0643499b0c/html5/thumbnails/12.jpg)
forEach
![Page 13: Reactive Programming - Vrije Universiteit Brusselsoft.vub.ac.be/~svdewate/IntroToRP.pdfReactive Programming For the Web * Rx.JS a.k.a. Curing your asynchronous blues JavaScript 6 Syntax](https://reader030.vdocuments.site/reader030/viewer/2022040214/5ec60811df097e0643499b0c/html5/thumbnails/13.jpg)
map
![Page 14: Reactive Programming - Vrije Universiteit Brusselsoft.vub.ac.be/~svdewate/IntroToRP.pdfReactive Programming For the Web * Rx.JS a.k.a. Curing your asynchronous blues JavaScript 6 Syntax](https://reader030.vdocuments.site/reader030/viewer/2022040214/5ec60811df097e0643499b0c/html5/thumbnails/14.jpg)
filter
![Page 15: Reactive Programming - Vrije Universiteit Brusselsoft.vub.ac.be/~svdewate/IntroToRP.pdfReactive Programming For the Web * Rx.JS a.k.a. Curing your asynchronous blues JavaScript 6 Syntax](https://reader030.vdocuments.site/reader030/viewer/2022040214/5ec60811df097e0643499b0c/html5/thumbnails/15.jpg)
concatAll
![Page 16: Reactive Programming - Vrije Universiteit Brusselsoft.vub.ac.be/~svdewate/IntroToRP.pdfReactive Programming For the Web * Rx.JS a.k.a. Curing your asynchronous blues JavaScript 6 Syntax](https://reader030.vdocuments.site/reader030/viewer/2022040214/5ec60811df097e0643499b0c/html5/thumbnails/16.jpg)
Recap
![Page 17: Reactive Programming - Vrije Universiteit Brusselsoft.vub.ac.be/~svdewate/IntroToRP.pdfReactive Programming For the Web * Rx.JS a.k.a. Curing your asynchronous blues JavaScript 6 Syntax](https://reader030.vdocuments.site/reader030/viewer/2022040214/5ec60811df097e0643499b0c/html5/thumbnails/17.jpg)
Streams
updateGUI
wait(15)
beep Steer actuator
Stream
Stream
Stream
Stream
![Page 18: Reactive Programming - Vrije Universiteit Brusselsoft.vub.ac.be/~svdewate/IntroToRP.pdfReactive Programming For the Web * Rx.JS a.k.a. Curing your asynchronous blues JavaScript 6 Syntax](https://reader030.vdocuments.site/reader030/viewer/2022040214/5ec60811df097e0643499b0c/html5/thumbnails/18.jpg)
Streams
![Page 19: Reactive Programming - Vrije Universiteit Brusselsoft.vub.ac.be/~svdewate/IntroToRP.pdfReactive Programming For the Web * Rx.JS a.k.a. Curing your asynchronous blues JavaScript 6 Syntax](https://reader030.vdocuments.site/reader030/viewer/2022040214/5ec60811df097e0643499b0c/html5/thumbnails/19.jpg)
Example
![Page 20: Reactive Programming - Vrije Universiteit Brusselsoft.vub.ac.be/~svdewate/IntroToRP.pdfReactive Programming For the Web * Rx.JS a.k.a. Curing your asynchronous blues JavaScript 6 Syntax](https://reader030.vdocuments.site/reader030/viewer/2022040214/5ec60811df097e0643499b0c/html5/thumbnails/20.jpg)
Example
![Page 21: Reactive Programming - Vrije Universiteit Brusselsoft.vub.ac.be/~svdewate/IntroToRP.pdfReactive Programming For the Web * Rx.JS a.k.a. Curing your asynchronous blues JavaScript 6 Syntax](https://reader030.vdocuments.site/reader030/viewer/2022040214/5ec60811df097e0643499b0c/html5/thumbnails/21.jpg)
Example
![Page 22: Reactive Programming - Vrije Universiteit Brusselsoft.vub.ac.be/~svdewate/IntroToRP.pdfReactive Programming For the Web * Rx.JS a.k.a. Curing your asynchronous blues JavaScript 6 Syntax](https://reader030.vdocuments.site/reader030/viewer/2022040214/5ec60811df097e0643499b0c/html5/thumbnails/22.jpg)
Auto-complete box
![Page 23: Reactive Programming - Vrije Universiteit Brusselsoft.vub.ac.be/~svdewate/IntroToRP.pdfReactive Programming For the Web * Rx.JS a.k.a. Curing your asynchronous blues JavaScript 6 Syntax](https://reader030.vdocuments.site/reader030/viewer/2022040214/5ec60811df097e0643499b0c/html5/thumbnails/23.jpg)
Auto-complete box
_
![Page 24: Reactive Programming - Vrije Universiteit Brusselsoft.vub.ac.be/~svdewate/IntroToRP.pdfReactive Programming For the Web * Rx.JS a.k.a. Curing your asynchronous blues JavaScript 6 Syntax](https://reader030.vdocuments.site/reader030/viewer/2022040214/5ec60811df097e0643499b0c/html5/thumbnails/24.jpg)
Auto-complete box.js
![Page 25: Reactive Programming - Vrije Universiteit Brusselsoft.vub.ac.be/~svdewate/IntroToRP.pdfReactive Programming For the Web * Rx.JS a.k.a. Curing your asynchronous blues JavaScript 6 Syntax](https://reader030.vdocuments.site/reader030/viewer/2022040214/5ec60811df097e0643499b0c/html5/thumbnails/25.jpg)
Reactive Programming in Meteor with
Tracker
![Page 26: Reactive Programming - Vrije Universiteit Brusselsoft.vub.ac.be/~svdewate/IntroToRP.pdfReactive Programming For the Web * Rx.JS a.k.a. Curing your asynchronous blues JavaScript 6 Syntax](https://reader030.vdocuments.site/reader030/viewer/2022040214/5ec60811df097e0643499b0c/html5/thumbnails/26.jpg)
Session Variables
![Page 27: Reactive Programming - Vrije Universiteit Brusselsoft.vub.ac.be/~svdewate/IntroToRP.pdfReactive Programming For the Web * Rx.JS a.k.a. Curing your asynchronous blues JavaScript 6 Syntax](https://reader030.vdocuments.site/reader030/viewer/2022040214/5ec60811df097e0643499b0c/html5/thumbnails/27.jpg)
Sessions at work!
![Page 28: Reactive Programming - Vrije Universiteit Brusselsoft.vub.ac.be/~svdewate/IntroToRP.pdfReactive Programming For the Web * Rx.JS a.k.a. Curing your asynchronous blues JavaScript 6 Syntax](https://reader030.vdocuments.site/reader030/viewer/2022040214/5ec60811df097e0643499b0c/html5/thumbnails/28.jpg)
Create your own dependencies
![Page 29: Reactive Programming - Vrije Universiteit Brusselsoft.vub.ac.be/~svdewate/IntroToRP.pdfReactive Programming For the Web * Rx.JS a.k.a. Curing your asynchronous blues JavaScript 6 Syntax](https://reader030.vdocuments.site/reader030/viewer/2022040214/5ec60811df097e0643499b0c/html5/thumbnails/29.jpg)
Need more than one Dictionary? ReactiveDict!
![Page 30: Reactive Programming - Vrije Universiteit Brusselsoft.vub.ac.be/~svdewate/IntroToRP.pdfReactive Programming For the Web * Rx.JS a.k.a. Curing your asynchronous blues JavaScript 6 Syntax](https://reader030.vdocuments.site/reader030/viewer/2022040214/5ec60811df097e0643499b0c/html5/thumbnails/30.jpg)
![Page 31: Reactive Programming - Vrije Universiteit Brusselsoft.vub.ac.be/~svdewate/IntroToRP.pdfReactive Programming For the Web * Rx.JS a.k.a. Curing your asynchronous blues JavaScript 6 Syntax](https://reader030.vdocuments.site/reader030/viewer/2022040214/5ec60811df097e0643499b0c/html5/thumbnails/31.jpg)
What are we doing?
Large-scale Complex Event
Detection
Reactive Object-Oriented
Programming
Middleware for real-time web-apps
Distributed Reactive
Programming
![Page 32: Reactive Programming - Vrije Universiteit Brusselsoft.vub.ac.be/~svdewate/IntroToRP.pdfReactive Programming For the Web * Rx.JS a.k.a. Curing your asynchronous blues JavaScript 6 Syntax](https://reader030.vdocuments.site/reader030/viewer/2022040214/5ec60811df097e0643499b0c/html5/thumbnails/32.jpg)
Conclusion
• Get rid of callback hell
• Error handling made easy
• Different approaches to the same goal
• SOFTLab is making it even better!
![Page 33: Reactive Programming - Vrije Universiteit Brusselsoft.vub.ac.be/~svdewate/IntroToRP.pdfReactive Programming For the Web * Rx.JS a.k.a. Curing your asynchronous blues JavaScript 6 Syntax](https://reader030.vdocuments.site/reader030/viewer/2022040214/5ec60811df097e0643499b0c/html5/thumbnails/33.jpg)
![Page 34: Reactive Programming - Vrije Universiteit Brusselsoft.vub.ac.be/~svdewate/IntroToRP.pdfReactive Programming For the Web * Rx.JS a.k.a. Curing your asynchronous blues JavaScript 6 Syntax](https://reader030.vdocuments.site/reader030/viewer/2022040214/5ec60811df097e0643499b0c/html5/thumbnails/34.jpg)
Resources• Netflix JavaScript Talks - Async JS with Rx
• Meteor Manual: http://manual.meteor.com/#deps
• Embedding dynamic dataflow in a call-by-value language
• http://channel9.msdn.com/Events/TechEd/Europe/2012/DEV413
• https://gist.github.com/staltz/868e7e9bc2a7b8c1f754