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

!