Ce diaporama a bien été signalé.
Le téléchargement de votre SlideShare est en cours. ×

Reasoning about Code with React

Prochain SlideShare
Files and JavaScript
Files and JavaScript
Chargement dans…3
×

Consultez-les par la suite

1 sur 39
1 sur 39

Plus De Contenu Connexe

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 ••• ••• &

×