Introduction to Functional Reactive Programming
-
Upload
dang-thai-son -
Category
Technology
-
view
1.976 -
download
1
Transcript of Introduction to Functional Reactive Programming
![Page 1: Introduction to Functional Reactive Programming](https://reader034.fdocuments.net/reader034/viewer/2022052318/58729ef11a28ab07208b551b/html5/thumbnails/1.jpg)
Reactive Thinking
fb.me/dangthaison.91 | @dangthaison91
![Page 2: Introduction to Functional Reactive Programming](https://reader034.fdocuments.net/reader034/viewer/2022052318/58729ef11a28ab07208b551b/html5/thumbnails/2.jpg)
FunctionalReactive
Programming
![Page 3: Introduction to Functional Reactive Programming](https://reader034.fdocuments.net/reader034/viewer/2022052318/58729ef11a28ab07208b551b/html5/thumbnails/3.jpg)
1. What is FRP?
![Page 4: Introduction to Functional Reactive Programming](https://reader034.fdocuments.net/reader034/viewer/2022052318/58729ef11a28ab07208b551b/html5/thumbnails/4.jpg)
Functional+
Reactive
![Page 5: Introduction to Functional Reactive Programming](https://reader034.fdocuments.net/reader034/viewer/2022052318/58729ef11a28ab07208b551b/html5/thumbnails/5.jpg)
Microsoft Excel
![Page 6: Introduction to Functional Reactive Programming](https://reader034.fdocuments.net/reader034/viewer/2022052318/58729ef11a28ab07208b551b/html5/thumbnails/6.jpg)
a = b + c
![Page 7: Introduction to Functional Reactive Programming](https://reader034.fdocuments.net/reader034/viewer/2022052318/58729ef11a28ab07208b551b/html5/thumbnails/7.jpg)
FRP: Streams of values over time
![Page 8: Introduction to Functional Reactive Programming](https://reader034.fdocuments.net/reader034/viewer/2022052318/58729ef11a28ab07208b551b/html5/thumbnails/8.jpg)
![Page 9: Introduction to Functional Reactive Programming](https://reader034.fdocuments.net/reader034/viewer/2022052318/58729ef11a28ab07208b551b/html5/thumbnails/9.jpg)
Core of FRP is Signal
![Page 10: Introduction to Functional Reactive Programming](https://reader034.fdocuments.net/reader034/viewer/2022052318/58729ef11a28ab07208b551b/html5/thumbnails/10.jpg)
Signal emits value over the
time
![Page 11: Introduction to Functional Reactive Programming](https://reader034.fdocuments.net/reader034/viewer/2022052318/58729ef11a28ab07208b551b/html5/thumbnails/11.jpg)
FRPis
Declarative
![Page 12: Introduction to Functional Reactive Programming](https://reader034.fdocuments.net/reader034/viewer/2022052318/58729ef11a28ab07208b551b/html5/thumbnails/12.jpg)
Imperative
Write correct sequence of codes in the correct order. Step by step. (How)
Declarative
Write code to describes what you want to do.
![Page 13: Introduction to Functional Reactive Programming](https://reader034.fdocuments.net/reader034/viewer/2022052318/58729ef11a28ab07208b551b/html5/thumbnails/13.jpg)
2. Why is FRP?
![Page 14: Introduction to Functional Reactive Programming](https://reader034.fdocuments.net/reader034/viewer/2022052318/58729ef11a28ab07208b551b/html5/thumbnails/14.jpg)
Example 1
Search API as you type but:
- Don't spam API server every seconds- Only make request if keyword changed- Cancel previous requests
![Page 15: Introduction to Functional Reactive Programming](https://reader034.fdocuments.net/reader034/viewer/2022052318/58729ef11a28ab07208b551b/html5/thumbnails/15.jpg)
Imperative
![Page 16: Introduction to Functional Reactive Programming](https://reader034.fdocuments.net/reader034/viewer/2022052318/58729ef11a28ab07208b551b/html5/thumbnails/16.jpg)
Declarative
![Page 17: Introduction to Functional Reactive Programming](https://reader034.fdocuments.net/reader034/viewer/2022052318/58729ef11a28ab07208b551b/html5/thumbnails/17.jpg)
![Page 18: Introduction to Functional Reactive Programming](https://reader034.fdocuments.net/reader034/viewer/2022052318/58729ef11a28ab07208b551b/html5/thumbnails/18.jpg)
![Page 19: Introduction to Functional Reactive Programming](https://reader034.fdocuments.net/reader034/viewer/2022052318/58729ef11a28ab07208b551b/html5/thumbnails/19.jpg)
![Page 20: Introduction to Functional Reactive Programming](https://reader034.fdocuments.net/reader034/viewer/2022052318/58729ef11a28ab07208b551b/html5/thumbnails/20.jpg)
Example 2
When the user starts simultaneously panning and rotating an object, start a countdown from 3.
Stop the timer either when the countdown ends or when the user stops the gestures.
![Page 21: Introduction to Functional Reactive Programming](https://reader034.fdocuments.net/reader034/viewer/2022052318/58729ef11a28ab07208b551b/html5/thumbnails/21.jpg)
Imperative
![Page 22: Introduction to Functional Reactive Programming](https://reader034.fdocuments.net/reader034/viewer/2022052318/58729ef11a28ab07208b551b/html5/thumbnails/22.jpg)
Imperative
![Page 23: Introduction to Functional Reactive Programming](https://reader034.fdocuments.net/reader034/viewer/2022052318/58729ef11a28ab07208b551b/html5/thumbnails/23.jpg)
Imperative
- When the user touches the screen - Check if a user is panning an object, store that information - Check if both gestures are running simultaneously - start a timer, from 3, counting down. - Check if the user is rotating an object, store that information - Check if both gestures are running simultaneously - start a timer, from 3, counting down. - Check if the user stopped panning - Stop the timer if needed - Check if the user stopped rotating - Stop the timer if needed
- When the timer ticks, decrease the number of seconds left - If the number of seconds left is zero, stop the timer*
![Page 24: Introduction to Functional Reactive Programming](https://reader034.fdocuments.net/reader034/viewer/2022052318/58729ef11a28ab07208b551b/html5/thumbnails/24.jpg)
There is a Better Way!
![Page 25: Introduction to Functional Reactive Programming](https://reader034.fdocuments.net/reader034/viewer/2022052318/58729ef11a28ab07208b551b/html5/thumbnails/25.jpg)
Declarative
![Page 26: Introduction to Functional Reactive Programming](https://reader034.fdocuments.net/reader034/viewer/2022052318/58729ef11a28ab07208b551b/html5/thumbnails/26.jpg)
Declarative
![Page 27: Introduction to Functional Reactive Programming](https://reader034.fdocuments.net/reader034/viewer/2022052318/58729ef11a28ab07208b551b/html5/thumbnails/27.jpg)
Declarative
![Page 28: Introduction to Functional Reactive Programming](https://reader034.fdocuments.net/reader034/viewer/2022052318/58729ef11a28ab07208b551b/html5/thumbnails/28.jpg)
![Page 29: Introduction to Functional Reactive Programming](https://reader034.fdocuments.net/reader034/viewer/2022052318/58729ef11a28ab07208b551b/html5/thumbnails/29.jpg)
![Page 30: Introduction to Functional Reactive Programming](https://reader034.fdocuments.net/reader034/viewer/2022052318/58729ef11a28ab07208b551b/html5/thumbnails/30.jpg)
Declarative
![Page 31: Introduction to Functional Reactive Programming](https://reader034.fdocuments.net/reader034/viewer/2022052318/58729ef11a28ab07208b551b/html5/thumbnails/31.jpg)
Declarative
![Page 32: Introduction to Functional Reactive Programming](https://reader034.fdocuments.net/reader034/viewer/2022052318/58729ef11a28ab07208b551b/html5/thumbnails/32.jpg)
Declarative
Define condition “simultaneously `panning` and `rotating`”Define condition “start a countdown from `3`”Define condition “when the user stops the gestures”Define what a timer is
When the user starts simultaneously `panning` and `rotating` an object, start a countdown from `3`.Stop the timer either when the countdown ends or when the user stops the gestures.”
![Page 33: Introduction to Functional Reactive Programming](https://reader034.fdocuments.net/reader034/viewer/2022052318/58729ef11a28ab07208b551b/html5/thumbnails/33.jpg)
Advantages• Code more concise & clear, easy to
understand without context
• Readability, highly express
• Make Asynchronous easier
• UI Binding
• Maintainability, Extensibility...
![Page 34: Introduction to Functional Reactive Programming](https://reader034.fdocuments.net/reader034/viewer/2022052318/58729ef11a28ab07208b551b/html5/thumbnails/34.jpg)
Imperative
![Page 35: Introduction to Functional Reactive Programming](https://reader034.fdocuments.net/reader034/viewer/2022052318/58729ef11a28ab07208b551b/html5/thumbnails/35.jpg)
Declarative
![Page 36: Introduction to Functional Reactive Programming](https://reader034.fdocuments.net/reader034/viewer/2022052318/58729ef11a28ab07208b551b/html5/thumbnails/36.jpg)
What we can do• Observables
• Transformations
• Composition
• Combination
• Filter
• Buffer...
![Page 37: Introduction to Functional Reactive Programming](https://reader034.fdocuments.net/reader034/viewer/2022052318/58729ef11a28ab07208b551b/html5/thumbnails/37.jpg)
![Page 38: Introduction to Functional Reactive Programming](https://reader034.fdocuments.net/reader034/viewer/2022052318/58729ef11a28ab07208b551b/html5/thumbnails/38.jpg)
Denial• FRP is hard, imperative is more easier
• FRP just is trend!
• Just another Framework
• Unnecessarily complex
![Page 39: Introduction to Functional Reactive Programming](https://reader034.fdocuments.net/reader034/viewer/2022052318/58729ef11a28ab07208b551b/html5/thumbnails/39.jpg)
![Page 40: Introduction to Functional Reactive Programming](https://reader034.fdocuments.net/reader034/viewer/2022052318/58729ef11a28ab07208b551b/html5/thumbnails/40.jpg)
3. Thinking in Reactive
![Page 41: Introduction to Functional Reactive Programming](https://reader034.fdocuments.net/reader034/viewer/2022052318/58729ef11a28ab07208b551b/html5/thumbnails/41.jpg)
FRP is hard, but it is SIMPLE
![Page 42: Introduction to Functional Reactive Programming](https://reader034.fdocuments.net/reader034/viewer/2022052318/58729ef11a28ab07208b551b/html5/thumbnails/42.jpg)
Imperative is EASY
![Page 43: Introduction to Functional Reactive Programming](https://reader034.fdocuments.net/reader034/viewer/2022052318/58729ef11a28ab07208b551b/html5/thumbnails/43.jpg)
Simplevs
Easy
![Page 44: Introduction to Functional Reactive Programming](https://reader034.fdocuments.net/reader034/viewer/2022052318/58729ef11a28ab07208b551b/html5/thumbnails/44.jpg)
Complexity
![Page 45: Introduction to Functional Reactive Programming](https://reader034.fdocuments.net/reader034/viewer/2022052318/58729ef11a28ab07208b551b/html5/thumbnails/45.jpg)
Simple made Easy— Rick Hickey
![Page 46: Introduction to Functional Reactive Programming](https://reader034.fdocuments.net/reader034/viewer/2022052318/58729ef11a28ab07208b551b/html5/thumbnails/46.jpg)
FRP is good Trend
![Page 47: Introduction to Functional Reactive Programming](https://reader034.fdocuments.net/reader034/viewer/2022052318/58729ef11a28ab07208b551b/html5/thumbnails/47.jpg)
Functional Reactive will be
RADIOACTIVE
![Page 48: Introduction to Functional Reactive Programming](https://reader034.fdocuments.net/reader034/viewer/2022052318/58729ef11a28ab07208b551b/html5/thumbnails/48.jpg)
More: https://goo.gl/lfNWlJBlog: https://dangthaison91.wordpress.com
![Page 49: Introduction to Functional Reactive Programming](https://reader034.fdocuments.net/reader034/viewer/2022052318/58729ef11a28ab07208b551b/html5/thumbnails/49.jpg)
Thank you!
![Page 50: Introduction to Functional Reactive Programming](https://reader034.fdocuments.net/reader034/viewer/2022052318/58729ef11a28ab07208b551b/html5/thumbnails/50.jpg)