Reactive programming
-
Upload
ryanstout -
Category
Technology
-
view
103 -
download
1
description
Transcript of Reactive programming
![Page 1: Reactive programming](https://reader034.fdocuments.in/reader034/viewer/2022051322/544f99a7af7959cb398b46f0/html5/thumbnails/1.jpg)
REACTIVE PROGRAMMING
Ryan Stout, June 2014
![Page 2: Reactive programming](https://reader034.fdocuments.in/reader034/viewer/2022051322/544f99a7af7959cb398b46f0/html5/thumbnails/2.jpg)
WHAT IS “REACTIVE”
Ryan Stout, June 2014
a buzzword
![Page 3: Reactive programming](https://reader034.fdocuments.in/reader034/viewer/2022051322/544f99a7af7959cb398b46f0/html5/thumbnails/3.jpg)
WHAT IS “REACTIVE”
Ryan Stout, June 2014
data flows data bindings
evented programming actor model
stream processing fault tolerence
![Page 4: Reactive programming](https://reader034.fdocuments.in/reader034/viewer/2022051322/544f99a7af7959cb398b46f0/html5/thumbnails/4.jpg)
WHY YOUR WASTING YOUR LIFE
Ryan Stout, June 2014
![Page 5: Reactive programming](https://reader034.fdocuments.in/reader034/viewer/2022051322/544f99a7af7959cb398b46f0/html5/thumbnails/5.jpg)
IS IT ME OR DOES WEB DEVELOPMENT STILL
SUCK?
Ryan Stout, June 2014
![Page 6: Reactive programming](https://reader034.fdocuments.in/reader034/viewer/2022051322/544f99a7af7959cb398b46f0/html5/thumbnails/6.jpg)
IF I HAVE TO WRITE ONE MORE REST API, I’M GOING
TO END IT ALL
Ryan Stout, June 2014
![Page 7: Reactive programming](https://reader034.fdocuments.in/reader034/viewer/2022051322/544f99a7af7959cb398b46f0/html5/thumbnails/7.jpg)
MANAGING STATE WITH REACTIVE PROGRAMMING
Ryan Stout, June 2014
![Page 8: Reactive programming](https://reader034.fdocuments.in/reader034/viewer/2022051322/544f99a7af7959cb398b46f0/html5/thumbnails/8.jpg)
WHERE IS AN APP’S STATE?
Ryan Stout, June 2014
Browser (URL) !!!!!!
JS !!!!!
DOM !!!
Server !!!!!!
App !!!!!
Database !!!
Rows
Models
Fields/HTML
Models JSON
POST PARAMS
URL/Params
![Page 9: Reactive programming](https://reader034.fdocuments.in/reader034/viewer/2022051322/544f99a7af7959cb398b46f0/html5/thumbnails/9.jpg)
WEB DEVELOPER: Someone who moves data from one place to another
Ryan Stout, June 2014
![Page 10: Reactive programming](https://reader034.fdocuments.in/reader034/viewer/2022051322/544f99a7af7959cb398b46f0/html5/thumbnails/10.jpg)
![Page 11: Reactive programming](https://reader034.fdocuments.in/reader034/viewer/2022051322/544f99a7af7959cb398b46f0/html5/thumbnails/11.jpg)
FRONT END STATE
Ryan Stout, June 2014
Browser (URL) !!!!!!
JS !!!!!
DOM !!!
![Page 12: Reactive programming](https://reader034.fdocuments.in/reader034/viewer/2022051322/544f99a7af7959cb398b46f0/html5/thumbnails/12.jpg)
REACTIVE BINDINGS
Ryan Stout, June 2014
Browser (URL) !!!!!!
JS !!!!!
DOM !!!
<script> var user = { name: 'Ryan'}; // Change nameuser.name = 'Bob'; // Print if changedconsole.log(user.name);</script> <form> <input type="text" value="{user.name}" /></form>
![Page 13: Reactive programming](https://reader034.fdocuments.in/reader034/viewer/2022051322/544f99a7af7959cb398b46f0/html5/thumbnails/13.jpg)
ARRAY BINDINGS
Ryan Stout, June 2014
<script> var todos = [];todos.push({label: 'Get users'});todos.push({label: 'Don\'t bring in revenue'});todos.push({label: 'Sell for billions to Facebook'});</script> {#each todos as todo} <p>{todo.label}</p> {/}
![Page 14: Reactive programming](https://reader034.fdocuments.in/reader034/viewer/2022051322/544f99a7af7959cb398b46f0/html5/thumbnails/14.jpg)
COMPUTED PROPERTIES
Ryan Stout, June 2014
<script> var mealCost = 65; var numberOfPeople = 4; var personShare = mealCost / numberOfPeople;</script> <form> <p>Meal Cost: <input type="text" value="{mealCost}" /></p> <p>Number of People: <input type="text" value="{numberOfPeople}" /></p> <p>Share Per Person: {personShare}</p> </form>
![Page 15: Reactive programming](https://reader034.fdocuments.in/reader034/viewer/2022051322/544f99a7af7959cb398b46f0/html5/thumbnails/15.jpg)
COMPUTED PROPERTIES
Ryan Stout, June 2014
<script> var index = 0; var todos = [{label: 'Buy Milk'}, {label: 'Fix Car'}];var currentTodo = todos[index];</script> <p>Index: <input type="text" value="{index}" /></p> <h1>{currentTodo.label}</h1>
![Page 16: Reactive programming](https://reader034.fdocuments.in/reader034/viewer/2022051322/544f99a7af7959cb398b46f0/html5/thumbnails/16.jpg)
API STRATEGIES
Ryan Stout, June 2014
virtual dom !
dom diff checking
!one-way bindings
proxy objects !
explicit function dependencies
!computation dependency
graph
diff check scope object
!dependency
graph via dependency
injection
![Page 17: Reactive programming](https://reader034.fdocuments.in/reader034/viewer/2022051322/544f99a7af7959cb398b46f0/html5/thumbnails/17.jpg)
VOLT
Ryan Stout, June 2014
![Page 18: Reactive programming](https://reader034.fdocuments.in/reader034/viewer/2022051322/544f99a7af7959cb398b46f0/html5/thumbnails/18.jpg)
BAIT & SWITCH
Ryan Stout, June 2014
![Page 19: Reactive programming](https://reader034.fdocuments.in/reader034/viewer/2022051322/544f99a7af7959cb398b46f0/html5/thumbnails/19.jpg)
WHAT IS VOLT?
Ryan Stout, June 2014
web framework ruby on back-end
!
ruby on front-end (compiled to JS with Opal)
!
share code between front and back end reactive bindings
data synchronization
![Page 20: Reactive programming](https://reader034.fdocuments.in/reader034/viewer/2022051322/544f99a7af7959cb398b46f0/html5/thumbnails/20.jpg)
DEMO
Ryan Stout, June 2014
![Page 21: Reactive programming](https://reader034.fdocuments.in/reader034/viewer/2022051322/544f99a7af7959cb398b46f0/html5/thumbnails/21.jpg)
WHERE IS AN APP’S STATE?
Ryan Stout, June 2014
Browser (URL) !!!!!!
JS !!!!!
DOM !!!
Server !!!!!!
App !!!!!
Database !!!
Rows
Models
Fields/HTML
Models JSON
POST PARAMS
URL/ParamsModels
![Page 22: Reactive programming](https://reader034.fdocuments.in/reader034/viewer/2022051322/544f99a7af7959cb398b46f0/html5/thumbnails/22.jpg)
THANKS!
Ryan Stout, June 2014
Volt: github.com/voltrb/volt
React: facebook.github.io/react
Ember: emberjs.com
Angular: angularjs.org
!