application as data flow - lscc talks #5
DESCRIPTION
Introduction to treating applications as flows of pure data and how to implement this in practise with functional reactive programming.TRANSCRIPT
![Page 1: Application as data flow - LSCC Talks #5](https://reader033.vdocuments.net/reader033/viewer/2022052908/559639e61a28ab50668b45d8/html5/thumbnails/1.jpg)
Building watertight business logic
Application asdata flow
@tehmou
![Page 2: Application as data flow - LSCC Talks #5](https://reader033.vdocuments.net/reader033/viewer/2022052908/559639e61a28ab50668b45d8/html5/thumbnails/2.jpg)
Functional Reactive Programming» Also known as FRP or Rx
» Streams over variables
» Push over pull
» Pure functions over stateful objects
08/21/14
![Page 3: Application as data flow - LSCC Talks #5](https://reader033.vdocuments.net/reader033/viewer/2022052908/559639e61a28ab50668b45d8/html5/thumbnails/3.jpg)
Stream is a pub/subWith no events – just data
08/21/14
Observable Observer
![Page 4: Application as data flow - LSCC Talks #5](https://reader033.vdocuments.net/reader033/viewer/2022052908/559639e61a28ab50668b45d8/html5/thumbnails/4.jpg)
.. with some operations in between.. that can change the type of data
08/21/14
Observable 1
Observer
filter
combine latest
Observable 2
![Page 5: Application as data flow - LSCC Talks #5](https://reader033.vdocuments.net/reader033/viewer/2022052908/559639e61a28ab50668b45d8/html5/thumbnails/5.jpg)
Example:Github searchSearching repositories by name and minimum number of watchers08/21/14
![Page 6: Application as data flow - LSCC Talks #5](https://reader033.vdocuments.net/reader033/viewer/2022052908/559639e61a28ab50668b45d8/html5/thumbnails/6.jpg)
The API» https://api.github.com/search/repositories?q=xxx
» Open API with an aggressive rate limit
» Should not be hit too often
» JSON response with details about the repo
08/21/14
![Page 7: Application as data flow - LSCC Talks #5](https://reader033.vdocuments.net/reader033/viewer/2022052908/559639e61a28ab50668b45d8/html5/thumbnails/7.jpg)
Search input» Search only when more than two characters present
» Do not search until the text has been unchanged for 500ms
» Add ability to filter by a minimum watcher count
708/21/14 Futurice
![Page 8: Application as data flow - LSCC Talks #5](https://reader033.vdocuments.net/reader033/viewer/2022052908/559639e61a28ab50668b45d8/html5/thumbnails/8.jpg)
808/21/14 Futurice
Text input Data flowarchitecture
UI Events
![Page 9: Application as data flow - LSCC Talks #5](https://reader033.vdocuments.net/reader033/viewer/2022052908/559639e61a28ab50668b45d8/html5/thumbnails/9.jpg)
908/21/14 Futurice
Text input
convert eventsto strings
Data flowarchitecture
String
![Page 10: Application as data flow - LSCC Talks #5](https://reader033.vdocuments.net/reader033/viewer/2022052908/559639e61a28ab50668b45d8/html5/thumbnails/10.jpg)
1008/21/14 Futurice
Text input
filter/throttle
convert eventsto strings
Data flowarchitecture
String(some are discarded)
![Page 11: Application as data flow - LSCC Talks #5](https://reader033.vdocuments.net/reader033/viewer/2022052908/559639e61a28ab50668b45d8/html5/thumbnails/11.jpg)
1108/21/14 Futurice
Text input
filter/throttle
API APInetwork
convert eventsto strings
Data flowarchitecture
Array of JSON
![Page 12: Application as data flow - LSCC Talks #5](https://reader033.vdocuments.net/reader033/viewer/2022052908/559639e61a28ab50668b45d8/html5/thumbnails/12.jpg)
1208/21/14 Futurice
Text input
Minimum watchersfilter/throttle
API API
combine/filter
network
convert eventsto strings
Data flowarchitecture
Filtered Array of JSON
![Page 13: Application as data flow - LSCC Talks #5](https://reader033.vdocuments.net/reader033/viewer/2022052908/559639e61a28ab50668b45d8/html5/thumbnails/13.jpg)
1308/21/14 Futurice
Text input
Minimum watchersfilter/throttle
API API
combine/filter
render
network
convert eventsto strings
Data flowarchitecture
![Page 14: Application as data flow - LSCC Talks #5](https://reader033.vdocuments.net/reader033/viewer/2022052908/559639e61a28ab50668b45d8/html5/thumbnails/14.jpg)
Implementation in Bacon.js» http://jsfiddle.net/tehmou/2gxao3j4/5/
1408/21/14 Futurice
![Page 15: Application as data flow - LSCC Talks #5](https://reader033.vdocuments.net/reader033/viewer/2022052908/559639e61a28ab50668b45d8/html5/thumbnails/15.jpg)
Other input sources of an app» User navigates within the app
» Friends list is refreshed in the background
» Message delivery fails
» Application is suspended
» FarmVille request arrives
![Page 16: Application as data flow - LSCC Talks #5](https://reader033.vdocuments.net/reader033/viewer/2022052908/559639e61a28ab50668b45d8/html5/thumbnails/16.jpg)
Values/events can go into the system only from the designated entry points.
that’s a period
![Page 17: Application as data flow - LSCC Talks #5](https://reader033.vdocuments.net/reader033/viewer/2022052908/559639e61a28ab50668b45d8/html5/thumbnails/17.jpg)
More complexapplications
NetworkObservable
Disk store
parse cache
get additional information
Network again
View logic
View
![Page 18: Application as data flow - LSCC Talks #5](https://reader033.vdocuments.net/reader033/viewer/2022052908/559639e61a28ab50668b45d8/html5/thumbnails/18.jpg)
Why You Should do It?» Cleaner code
» Makes you understand how your application really works
» .. or how it is supposed to work, at least
» Bugs are easier to track
![Page 19: Application as data flow - LSCC Talks #5](https://reader033.vdocuments.net/reader033/viewer/2022052908/559639e61a28ab50668b45d8/html5/thumbnails/19.jpg)
Resources» My technical blog post for RxJava:
http://blog.futurice.com/top-7-tips-for-rxjava-on-android
» RxMarbles for understanding stream operations: http://rxmarbles.com/
» Original Rx: http://msdn.microsoft.com/en-gb/data/gg577609.aspx
» For JavaScript: http://baconjs.github.io/ or https://github.com/Reactive-Extensions/RxJS