reasoning about code with react
TRANSCRIPT
reasoning about
code
but… why investing on React if next year there will be something else?
“
Patterns over
Frameworkshttps://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 chat message"; newItem.className = "message is-new"; list.appendChild(newItem);
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}} </ul>
<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>
class HomeController def index @user = … end end
<% if @user %> <div>Hey <%= @user.name %>!</div> <% else %> <a href="/sign_in">Sign in</a> <% end %>
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> } }
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> </ul>
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").toggle(); }); </script>
<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>
<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; }]);
toggle() { this.setState({visible: !this.state.visible}); }
render() { <section> { this.state.visible && <div>See me?</div> } <button onClick={this.toggle}>Toggle</button> </section> }
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, true ] => false, [false, false] => false } all_possible_results[[x, y]]
end
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
mixin: [PureRenderMixin]
https://github.com/andreypopp/memoize-decorator
immutability5
•
[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, etc…
takeaway
beyond
react
isomorphism hot reloading
fn reactive programming time traveling
Q A
• • •
• • •
&