reactive programming
DESCRIPTION
TRANSCRIPT
REACTIVE PROGRAMMING
Ryan Stout, June 2014
WHAT IS “REACTIVE”
Ryan Stout, June 2014
a buzzword
WHAT IS “REACTIVE”
Ryan Stout, June 2014
data flows data bindings
evented programming actor model
stream processing fault tolerence
WHY YOUR WASTING YOUR LIFE
Ryan Stout, June 2014
IS IT ME OR DOES WEB DEVELOPMENT STILL
SUCK?
Ryan Stout, June 2014
IF I HAVE TO WRITE ONE MORE REST API, I’M GOING
TO END IT ALL
Ryan Stout, June 2014
MANAGING STATE WITH REACTIVE PROGRAMMING
Ryan Stout, June 2014
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
WEB DEVELOPER: Someone who moves data from one place to another
Ryan Stout, June 2014
FRONT END STATE
Ryan Stout, June 2014
Browser (URL) !!!!!!
JS !!!!!
DOM !!!
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>
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> {/}
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>
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>
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
VOLT
Ryan Stout, June 2014
BAIT & SWITCH
Ryan Stout, June 2014
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
DEMO
Ryan Stout, June 2014
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
THANKS!
Ryan Stout, June 2014
Volt: github.com/voltrb/volt
React: facebook.github.io/react
Ember: emberjs.com
Angular: angularjs.org
!