![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>
{/}](https://image.slidesharecdn.com/reactiveprogramming-140611112827-phpapp01/85/Reactive-programming-13-320.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>](https://image.slidesharecdn.com/reactiveprogramming-140611112827-phpapp01/85/Reactive-programming-15-320.jpg)
Reactive programming
- 2. WHAT IS “REACTIVE” Ryan Stout, June 2014 a buzzword
- 3. WHAT IS “REACTIVE” Ryan Stout, June 2014 data flows data bindings evented programming actor model stream processing fault tolerence
- 4. WHY YOUR WASTING YOUR LIFE Ryan Stout, June 2014
- 5. IS IT ME OR DOES WEB DEVELOPMENT STILL SUCK? Ryan Stout, June 2014
- 6. IF I HAVE TO WRITE ONE MORE REST API, I’M GOING TO END IT ALL Ryan Stout, June 2014
- 7. MANAGING STATE WITH REACTIVE PROGRAMMING Ryan Stout, June 2014
- 8. 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
- 9. WEB DEVELOPER: Someone who moves data from one place to another Ryan Stout, June 2014
- 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
- 17. VOLT Ryan Stout, June 2014
- 18. BAIT & SWITCH Ryan Stout, June 2014
- 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
- 20. DEMO Ryan Stout, June 2014
- 21. 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 Models
- 22. THANKS! Ryan Stout, June 2014 Volt: github.com/voltrb/volt React: facebook.github.io/react Ember: emberjs.com Angular: angularjs.org !