Se ha denunciado esta presentación.

Reasoning about Code with React

3

Compartir

Próximo SlideShare
Files and JavaScript
Files and JavaScript
Cargando en…3
×
1 de 39
1 de 39

Más Contenido Relacionado

Reasoning about Code with React

  1. 1. reasoning about code
  2. 2. but… why investing on React if next year there will be something else? “
  3. 3. Patterns over Frameworks https://www.youtube.com/watch?v=4anAwXYqLG8
  4. 4. Concepts over Implementations
  5. 5. Skills over Tools
  6. 6. DOM mutation 1 •
  7. 7. var list = document.getElementById("message_list"); var newItem = document.createElement("li"); newItem.innerText = "New chat message"; newItem.className = "message is-new"; list.appendChild(newItem);
  8. 8. var html = '<li class="message">New message</li>'; $("#message_list").append(html);
  9. 9. Mustache.render(template, {liked: false}); {{^liked}} Like {{#liked}} Unlike {{/liked}}
  10. 10. Mustache.render(template, {messages: [ "New message", "Another message" ]}); <ul> {{#messages}} <li>{{.}}</li> {{/messages}} </ul>
  11. 11. <input type="search" ng-model="q" /> <ul> <li ng-repeat="todo in todos | filter:q as results"> <input type="checkbox" ng-model="todo.done"> {{todo.text}} </li> <li ng-if="results.length == 0"> No results found </li> </ul>
  12. 12. class HomeController def index @user = … end end <% if @user %> <div>Hey <%= @user.name %>!</div> <% else %> <a href="/sign_in">Sign in</a> <% end %>
  13. 13. class UserBox extends React.Component { constructor(props) { this.props = props; } render() { if(this.props.user) return <div>Hey { this.props.user.name }!</div> else return <a href="/sign_in">Sign in</a> } }
  14. 14. renderTodos() { return this.props.todos.map(todo => <li>{todo.text}</li>) }
  15. 15. <ul> <li [ng-repeat|todo]="todos" (^click)="select(todo)"> <input type="checkbox" [checked]="todo.done"> ${todo.text} </li> </ul>
  16. 16. submit() { … } render() { return <button onClick={this.submit}> Click me </button> }
  17. 17. UI = f(state) 2 •
  18. 18. <div id="toggled">See me?</div> <button id="toggler">Toggle</button> <script> $("#toggler").click(function(){ $("#toggled").toggle(); }); </script>
  19. 19. <div id="toggled">See me?</div> <button id="toggler">Toggle</button> <script> var visible = true; var toggled = $("#toggled"); $("#toggler").click(function(){ visible = !visible; visible ? toggled.show() : toggled.hide(); }); </script>
  20. 20. <body ng-app="ngApp"> <div ng-controller="ToggleCtrl"> <div ng-show="visible">See me?</div> <button ng-click="visible=!visible">Toggle</button> </div> </body> angular.module("ngApp", []) .controller("ToggleCtrl", ["$scope", function($scope){ $scope.visible = true; }]);
  21. 21. toggle() { this.setState({visible: !this.state.visible}); } render() { <section> { this.state.visible && <div>See me?</div> } <button onClick={this.toggle}>Toggle</button> </section> }
  22. 22. let data = { … } let app = renderIntoDocument(<App data={data} />) expect(app).to(…)
  23. 23. → → → → → → → → → → → → → → → → → → → → → → → → → → → → Unidirectional data flow 3
  24. 24. Comment Server Wall Post
  25. 25. Message Server Chat MessageList
  26. 26. UI = pf(state) 4 •
  27. 27. def and(x, y) x && y end def and(x, y) all_possible_results = { [true, true ] => true, [true, false] => false, [false, true ] => false, [false, false] => false } all_possible_results[[x, y]] end
  28. 28. def non_pure_sum(x, y) x + y + rand(10) end def tomorrow() Date.today + 1.day end def sum_user_input(x) x + ask("Gimme a number").to_i end
  29. 29. mixin: [PureRenderMixin] https://github.com/andreypopp/memoize-decorator
  30. 30. immutability 5 •
  31. 31. [1] == [1] => false [0 == null, 0 > null, 0 >= null] => [false, false, true]
  32. 32. var data = {a:1, b:2, c:3}; var map1 = Immutable.Map(data); var map2 = map1.set('b', 2); map1 === map2; => true
  33. 33. var data = {a:1, b:2, c:3}; var map1 = new Map(data); var map2 = map1.set('b', 2); map1 === map2; => true
  34. 34. Do not move to React takeaway
  35. 35. move to automatic DOM mutation stateless DOM UI as a function of state unidirectional dataflow purity immutability etc, etc… takeaway
  36. 36. beyond react
  37. 37. isomorphism hot reloading fn reactive programming time traveling
  38. 38. http://worrydream.com/#!/LearnableProgramming
  39. 39. Q A ••• ••• &

×