11. FRONT END STATE
Ryan Stout, June 2014
Browser (URL)
!
!
!
!
!
!
JS
!
!
!
!
!
DOM
!
!
!
12. REACTIVE BINDINGS
Ryan Stout, June 2014
Browser (URL)
!
!
!
!
!
!
JS
!
!
!
!
!
DOM
!
!
!
<script>
var user = {
name: 'Ryan'
};
// Change name
user.name = 'Bob';
// Print if changed
console.log(user.name);
</script>
<form>
<input type="text" value="{user.name}" />
</form>
13. 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>
{/}
14. 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>
15. 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>
16. 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
19. 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
