SlideShare a Scribd company logo
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 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
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, etc…
takeaway
beyond
react
isomorphism
hot reloading
fn reactive programming
time traveling
http://worrydream.com/#!/LearnableProgramming
Q A
•••
•••
&

More Related Content

Similar to Reasoning about Code with React

JakartaData-JCon.pptx
JakartaData-JCon.pptxJakartaData-JCon.pptx
JakartaData-JCon.pptx
EmilyJiang23
 
Automating Tactically vs Strategically SauceCon 2020
Automating Tactically vs Strategically SauceCon 2020Automating Tactically vs Strategically SauceCon 2020
Automating Tactically vs Strategically SauceCon 2020
Alan Richardson
 
Telosys project booster Paris Open Source Summit 2019
Telosys project booster Paris Open Source Summit 2019Telosys project booster Paris Open Source Summit 2019
Telosys project booster Paris Open Source Summit 2019
Laurent Guérin
 
Powershell Training
Powershell TrainingPowershell Training
Powershell Training
Fahad Noaman
 
#SPSEMEA SharePoint & jQuery - What I wish I would have known a year ago..
#SPSEMEA SharePoint & jQuery - What I wish I would have known a year ago..#SPSEMEA SharePoint & jQuery - What I wish I would have known a year ago..
#SPSEMEA SharePoint & jQuery - What I wish I would have known a year ago..
Mark Rackley
 
POLITEKNIK MALAYSIA
POLITEKNIK MALAYSIAPOLITEKNIK MALAYSIA
POLITEKNIK MALAYSIA
Aiman Hud
 
Javascript first-class citizenery
Javascript first-class citizeneryJavascript first-class citizenery
Javascript first-class citizenery
toddbr
 
one|content : joomla on steroids
one|content : joomla on steroidsone|content : joomla on steroids
one|content : joomla on steroids
Paul Delbar
 
Advancing JavaScript with Libraries (Yahoo Tech Talk)
Advancing JavaScript with Libraries (Yahoo Tech Talk)Advancing JavaScript with Libraries (Yahoo Tech Talk)
Advancing JavaScript with Libraries (Yahoo Tech Talk)
jeresig
 
NoSQL Endgame DevoxxUA Conference 2020
NoSQL Endgame DevoxxUA Conference 2020NoSQL Endgame DevoxxUA Conference 2020
NoSQL Endgame DevoxxUA Conference 2020
Thodoris Bais
 
2018 03 20_biological_databases_part3
2018 03 20_biological_databases_part32018 03 20_biological_databases_part3
2018 03 20_biological_databases_part3
Prof. Wim Van Criekinge
 
Introduction of javascript
Introduction of javascriptIntroduction of javascript
Introduction of javascript
syeda zoya mehdi
 
Codebits 2012 - Fast relational web site construction.
Codebits 2012 - Fast relational web site construction.Codebits 2012 - Fast relational web site construction.
Codebits 2012 - Fast relational web site construction.
Nelson Gomes
 
Expanding your impact with programmability in the data center
Expanding your impact with programmability in the data centerExpanding your impact with programmability in the data center
Expanding your impact with programmability in the data center
Cisco Canada
 
Core Web Standards and Competencies - WritersUA East 2015, Scott DeLoach, Cli...
Core Web Standards and Competencies - WritersUA East 2015, Scott DeLoach, Cli...Core Web Standards and Competencies - WritersUA East 2015, Scott DeLoach, Cli...
Core Web Standards and Competencies - WritersUA East 2015, Scott DeLoach, Cli...
Scott DeLoach
 
Value Objects
Value ObjectsValue Objects
Value Objects
barryosull
 
Why you shouldn’t edit silver stripe core files (and how to do it anyway)
Why you shouldn’t edit silver stripe core files (and how to do it anyway)Why you shouldn’t edit silver stripe core files (and how to do it anyway)
Why you shouldn’t edit silver stripe core files (and how to do it anyway)
Loz Calver
 
HTML literals, the JSX of the platform
HTML literals, the JSX of the platformHTML literals, the JSX of the platform
HTML literals, the JSX of the platform
Kenneth Rohde Christiansen
 
Fnt Software Solutions Pvt Ltd Placement Papers - PHP Technology
Fnt Software Solutions Pvt Ltd Placement Papers - PHP TechnologyFnt Software Solutions Pvt Ltd Placement Papers - PHP Technology
Fnt Software Solutions Pvt Ltd Placement Papers - PHP Technology
fntsofttech
 
Programming as a writing genre
Programming as a writing genreProgramming as a writing genre
Programming as a writing genre
Stephen Frezza
 

Similar to Reasoning about Code with React (20)

JakartaData-JCon.pptx
JakartaData-JCon.pptxJakartaData-JCon.pptx
JakartaData-JCon.pptx
 
Automating Tactically vs Strategically SauceCon 2020
Automating Tactically vs Strategically SauceCon 2020Automating Tactically vs Strategically SauceCon 2020
Automating Tactically vs Strategically SauceCon 2020
 
Telosys project booster Paris Open Source Summit 2019
Telosys project booster Paris Open Source Summit 2019Telosys project booster Paris Open Source Summit 2019
Telosys project booster Paris Open Source Summit 2019
 
Powershell Training
Powershell TrainingPowershell Training
Powershell Training
 
#SPSEMEA SharePoint & jQuery - What I wish I would have known a year ago..
#SPSEMEA SharePoint & jQuery - What I wish I would have known a year ago..#SPSEMEA SharePoint & jQuery - What I wish I would have known a year ago..
#SPSEMEA SharePoint & jQuery - What I wish I would have known a year ago..
 
POLITEKNIK MALAYSIA
POLITEKNIK MALAYSIAPOLITEKNIK MALAYSIA
POLITEKNIK MALAYSIA
 
Javascript first-class citizenery
Javascript first-class citizeneryJavascript first-class citizenery
Javascript first-class citizenery
 
one|content : joomla on steroids
one|content : joomla on steroidsone|content : joomla on steroids
one|content : joomla on steroids
 
Advancing JavaScript with Libraries (Yahoo Tech Talk)
Advancing JavaScript with Libraries (Yahoo Tech Talk)Advancing JavaScript with Libraries (Yahoo Tech Talk)
Advancing JavaScript with Libraries (Yahoo Tech Talk)
 
NoSQL Endgame DevoxxUA Conference 2020
NoSQL Endgame DevoxxUA Conference 2020NoSQL Endgame DevoxxUA Conference 2020
NoSQL Endgame DevoxxUA Conference 2020
 
2018 03 20_biological_databases_part3
2018 03 20_biological_databases_part32018 03 20_biological_databases_part3
2018 03 20_biological_databases_part3
 
Introduction of javascript
Introduction of javascriptIntroduction of javascript
Introduction of javascript
 
Codebits 2012 - Fast relational web site construction.
Codebits 2012 - Fast relational web site construction.Codebits 2012 - Fast relational web site construction.
Codebits 2012 - Fast relational web site construction.
 
Expanding your impact with programmability in the data center
Expanding your impact with programmability in the data centerExpanding your impact with programmability in the data center
Expanding your impact with programmability in the data center
 
Core Web Standards and Competencies - WritersUA East 2015, Scott DeLoach, Cli...
Core Web Standards and Competencies - WritersUA East 2015, Scott DeLoach, Cli...Core Web Standards and Competencies - WritersUA East 2015, Scott DeLoach, Cli...
Core Web Standards and Competencies - WritersUA East 2015, Scott DeLoach, Cli...
 
Value Objects
Value ObjectsValue Objects
Value Objects
 
Why you shouldn’t edit silver stripe core files (and how to do it anyway)
Why you shouldn’t edit silver stripe core files (and how to do it anyway)Why you shouldn’t edit silver stripe core files (and how to do it anyway)
Why you shouldn’t edit silver stripe core files (and how to do it anyway)
 
HTML literals, the JSX of the platform
HTML literals, the JSX of the platformHTML literals, the JSX of the platform
HTML literals, the JSX of the platform
 
Fnt Software Solutions Pvt Ltd Placement Papers - PHP Technology
Fnt Software Solutions Pvt Ltd Placement Papers - PHP TechnologyFnt Software Solutions Pvt Ltd Placement Papers - PHP Technology
Fnt Software Solutions Pvt Ltd Placement Papers - PHP Technology
 
Programming as a writing genre
Programming as a writing genreProgramming as a writing genre
Programming as a writing genre
 

More from Juan Maiz

Code reviews
Code reviewsCode reviews
Code reviews
Juan Maiz
 
Ruby para-programadores-php
Ruby para-programadores-phpRuby para-programadores-php
Ruby para-programadores-php
Juan Maiz
 
Ruby para-programadores-php
Ruby para-programadores-phpRuby para-programadores-php
Ruby para-programadores-php
Juan Maiz
 
Ruby para programadores PHP
Ruby para programadores PHPRuby para programadores PHP
Ruby para programadores PHP
Juan Maiz
 
SaaS - RubyMastersConf.com.br
SaaS - RubyMastersConf.com.brSaaS - RubyMastersConf.com.br
SaaS - RubyMastersConf.com.br
Juan Maiz
 
Saas
SaasSaas
Saas
Juan Maiz
 
Tree top
Tree topTree top
Tree top
Juan Maiz
 
Background Jobs - Com BackgrounDRb
Background Jobs - Com BackgrounDRbBackground Jobs - Com BackgrounDRb
Background Jobs - Com BackgrounDRb
Juan Maiz
 
Introdução ao Ruby on Rails
Introdução ao Ruby on RailsIntrodução ao Ruby on Rails
Introdução ao Ruby on Rails
Juan Maiz
 
rails_and_agile
rails_and_agilerails_and_agile
rails_and_agile
Juan Maiz
 

More from Juan Maiz (10)

Code reviews
Code reviewsCode reviews
Code reviews
 
Ruby para-programadores-php
Ruby para-programadores-phpRuby para-programadores-php
Ruby para-programadores-php
 
Ruby para-programadores-php
Ruby para-programadores-phpRuby para-programadores-php
Ruby para-programadores-php
 
Ruby para programadores PHP
Ruby para programadores PHPRuby para programadores PHP
Ruby para programadores PHP
 
SaaS - RubyMastersConf.com.br
SaaS - RubyMastersConf.com.brSaaS - RubyMastersConf.com.br
SaaS - RubyMastersConf.com.br
 
Saas
SaasSaas
Saas
 
Tree top
Tree topTree top
Tree top
 
Background Jobs - Com BackgrounDRb
Background Jobs - Com BackgrounDRbBackground Jobs - Com BackgrounDRb
Background Jobs - Com BackgrounDRb
 
Introdução ao Ruby on Rails
Introdução ao Ruby on RailsIntrodução ao Ruby on Rails
Introdução ao Ruby on Rails
 
rails_and_agile
rails_and_agilerails_and_agile
rails_and_agile
 

Reasoning about Code with React