Reasoning about Code with React

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

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>)
}

submit() {
…
}
render() {
return <button onClick={this.submit}>
Click me
</button>
}

<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

Message
Server
Chat
MessageList

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

[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

move to

automatic DOM mutation
stateless DOM
UI as a function of state
unidirectional dataflow
purity
immutability
etc, etc…
takeaway

isomorphism
hot reloading
fn reactive programming
time traveling

http://worrydream.com/#!/LearnableProgramming

Reasoning about Code with React

Recommandé

Recommandé

Contenu connexe

Similaire à Reasoning about Code with React

Similaire à Reasoning about Code with React (20)

Plus de Juan Maiz

Plus de Juan Maiz (10)

Reasoning about Code with React