Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
reasoning about
code
but… why investing on React
if next year there will be something else?
“
Patterns
over

Frameworks
https://www.youtube.com/watch?v=4anAwXYqLG8
Concepts
over

Implementations
Skills
over

Tools
DOM mutation
1
•
var list = document.getElementById("message_list");
var newItem = document.createElement("li");
newItem.innerText = "New c...
var html = '<li class="message">New message</li>';
$("#message_list").append(html);
Mustache.render(template, {liked: false});
{{^liked}}
Like
{{#liked}}
Unlike
{{/liked}}
Mustache.render(template, {messages: [
"New message", "Another message"
]});
<ul>
{{#messages}}
<li>{{.}}</li>
{{/messages...
<input type="search" ng-model="q" />
<ul>
<li ng-repeat="todo in todos | filter:q as results">
<input type="checkbox" ng-m...
class HomeController
def index
@user = …
end
end
<% if @user %>
<div>Hey <%= @user.name %>!</div>
<% else %>
<a href="/sig...
class UserBox extends React.Component {
constructor(props) {
this.props = props;
}
render() {
if(this.props.user)
return <...
renderTodos() {
return this.props.todos.map(todo =>
<li>{todo.text}</li>)
}
<ul>
<li [ng-repeat|todo]="todos" (^click)="select(todo)">
<input type="checkbox" [checked]="todo.done">
${todo.text}
</li...
submit() {
…
}
render() {
return <button onClick={this.submit}>
Click me
</button>
}
UI = f(state)
2
•
<div id="toggled">See me?</div>
<button id="toggler">Toggle</button>
<script>
$("#toggler").click(function(){
$("#toggled"...
<div id="toggled">See me?</div>
<button id="toggler">Toggle</button>
<script>
var visible = true;
var toggled = $("#toggle...
<body ng-app="ngApp">
<div ng-controller="ToggleCtrl">
<div ng-show="visible">See me?</div>
<button ng-click="visible=!vis...
toggle() {
this.setState({visible: !this.state.visible});
}
render() {
<section>
{ this.state.visible && <div>See me?</div...
let data = { … }
let app = renderIntoDocument(<App data={data} />)
expect(app).to(…)
→
→
→
→
→
→
→
→
→
→
→
→
→
→
→
→
→
→
→
→
→
→
→
→
→
→
→
→
Unidirectional

data flow
3
Comment
Server
Wall
Post
Message
Server
Chat
MessageList
UI = pf(state)
4
•
def and(x, y)
x && y
end
def and(x, y)
all_possible_results = {
[true, true ] => true,
[true, false] => false,
[false, tru...
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 n...
mixin: [PureRenderMixin]
https://github.com/andreypopp/memoize-decorator
immutability
5
•
[1] == [1]
=> false
[0 == null, 0 > null, 0 >= null]
=> [false, false, true]
var data = {a:1, b:2, c:3};
var map1 = Immutable.Map(data);
var map2 = map1.set('b', 2);
map1 === map2;
=> true
var data = {a:1, b:2, c:3};
var map1 = new Map(data);
var map2 = map1.set('b', 2);
map1 === map2;
=> true
Do not
move to React
takeaway
move to

automatic DOM mutation
stateless DOM
UI as a function of state
unidirectional dataflow
purity
immutability
etc, e...
beyond
react
isomorphism
hot reloading
fn reactive programming
time traveling
http://worrydream.com/#!/LearnableProgramming
Q A
•••
•••
&
Upcoming SlideShare
Loading in …5
×

Reasoning about Code with React

498 views

Published on

  • Be the first to comment

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

×