SlideShare a Scribd company logo
React.js
or why DOM finally makes sense
JSX ⊙_⊙
/**	
  @jsx	
  React.DOM	
  */	
  
var	
  name	
  =	
  "Foo",	
  commentText	
  =	
  "Bar",	
  avatarUrl="Baz";	
  
	
  	
  
var	
  avatar	
  =	
  <img	
  src	
  =	
  {avatarUrl}/>;	
  
	
  	
  
var	
  comment	
  =	
  <div	
  className="comment">	
  
	
  	
  {avatar}	
  @{name}:	
  {commentText}	
  
</div>
JSX is nice!
⊙⌣⊙
!
var	
  name	
  =	
  "Foo",	
  commentText	
  =	
  "Bar",	
  avatarUrl="Baz";	
  
	
  	
  
var	
  avatar	
  =	
  React.DOM.img(	
  {src:	
  	
  avatarUrl});	
  
	
  	
  
var	
  comment	
  =	
  React.DOM.div(	
  {className:"comment"},	
  	
  
	
  	
  avatar,	
  "	
  @",name,":	
  ",	
  commentText	
  
)
/**	
  @jsx	
  React.DOM	
  */	
  
var	
  name	
  =	
  "Foo",	
  commentText	
  =	
  "Bar",	
  avatarUrl="Baz";	
  
	
  	
  
var	
  avatar	
  =	
  <img	
  src	
  =	
  {avatarUrl}/>;	
  
	
  	
  
var	
  comment	
  =	
  <div	
  className="comment">	
  
	
  	
  {avatar}	
  @{name}:	
  {commentText}	
  
</div>
JSX rocks!
⊙⌣⊙
• tags are functions
• you can use closures
• scope is straightforward
• normalized DOM
the rules!
• do not mix logic and presentation
• do not write inline javascript
FUCK!
the rules!
• do not mix logic and presentation
• do not write inline javascript
components

components
components
/**	
  @jsx	
  React.DOM	
  */	
  
var	
  User	
  =	
  React.createClass({	
  
	
  	
  render:	
  function()	
  {	
  
	
  	
  	
  	
  return	
  (<div>	
  
	
  	
  	
  	
  	
  	
  	
  	
  <img	
  src={this.props.avatar}/>:	
  
	
  	
  	
  	
  	
  	
  	
  	
  @{this.props.username}	
  
	
  	
  	
  	
  	
  	
  </div>);	
  
	
  	
  }	
  
});	
  
!
React.renderComponent(	
  
	
  	
  <User	
  username="Eldar"	
  avatar="http://img.src/edjafarov"/>,	
  
	
  	
  document.getElementById('example')	
  
);
components

components
components
/**	
  @jsx	
  React.DOM	
  */	
  
var	
  Avatar	
  =	
  React.createClass({	
  
	
  	
  render:	
  function()	
  {	
  
	
  	
  	
  	
  return	
  <img	
  src={this.props.uri}/>;	
  
	
  	
  }	
  
});	
  
var	
  User	
  =	
  React.createClass({	
  
	
  	
  render:	
  function()	
  {	
  
	
  	
  	
  	
  return	
  (<div>	
  
	
  	
  	
  	
  	
  	
  	
  	
  <Avatar	
  uri={this.props.avatar}/>:	
  
	
  	
  	
  	
  	
  	
  	
  	
  @{this.props.username}	
  
	
  	
  	
  	
  	
  	
  </div>);	
  
	
  	
  }	
  
});
components

components
components
Props & State
var	
  User	
  =	
  React.createClass({	
  
	
  	
  getInitialState:	
  function(){	
  
	
   	
  	
  return	
  {	
  
	
   	
   	
  	
  name:this.props.user.name,	
  
	
   	
   	
  	
  uri:	
  this.props.user.uri	
  
	
   	
  	
  }	
  
	
  	
  },	
  	
  	
   	
  
	
  	
  render:	
  function()	
  {	
  
	
  	
  	
  	
  return	
  (<div>	
  
	
  	
  	
  	
  	
  	
  	
  	
  <Avatar	
  uri={this.props.avatar}/>:	
  
	
  	
  	
  	
  	
  	
  	
  	
  @{this.state.name}	
  
	
  	
  	
  	
  	
  	
  </div>);	
  
	
  	
  }	
  
});
Props & State
routing
doesn’t matter
http://visionmedia.github.io/page.js/
var	
  User	
  =	
  require('./User');	
  
	
  	
  
page('/user/:user',	
  user.load,	
  function(ctx){	
  
	
  	
  React.renderComponent(	
  
	
  	
  	
  	
  <User	
  user={ctx.user}/>,	
  
	
  	
  	
  	
  document.getElementById('root')	
  
	
  	
  );	
  
})
2 way binding/**	
  @jsx	
  React.DOM	
  */	
  
var	
  WithLink	
  =	
  React.createClass({	
  
	
  	
  mixins:	
  [React.addons.LinkedStateMixin],	
  
	
  	
  getInitialState:	
  function()	
  {	
  
	
  	
  	
  	
  return	
  {value:	
  'Hello!'};	
  
	
  	
  },	
  
	
  	
  render:	
  function()	
  {	
  
	
  	
  	
  	
  return	
  <input	
  type="text"	
  valueLink={this.linkState('value')}	
  />;	
  
	
  	
  }	
  
});
var	
  Hello	
  =	
  React.createClass({	
  
	
  	
  mixins:[ModelMixin,	
  BindMixin],	
  
	
  	
  getBackboneModels:	
  function(){	
  
	
  	
  	
  	
  return	
  [this.props.instance]	
  
	
  	
  },	
  
	
  	
  render:	
  function()	
  {	
  
	
  	
  	
  	
  var	
  model	
  =	
  this.props.instance;	
  
	
  	
  	
  	
  return	
  <div>	
  
	
  	
  	
  	
  	
  	
  	
  	
  <div>Hello	
  {model.get(‘initial')}</div>	
  
	
  	
  	
  	
  	
  	
  	
  	
  <input	
  type="text"	
  valueLink={this.bindTo(model,	
  'initial')}/>	
  
	
  	
  	
  	
  	
  	
  </div>	
  
	
  	
  }	
  
});
models
or
emitters?
What if models and collections are not enough?
https://github.com/component/emitter
var	
  Emitter	
  =	
  require('emitter');	
  
var	
  UserModel	
  =	
  new	
  Emitter({}	
  
	
  	
  data:	
  {},	
  
	
  	
  update:	
  function(){	
  
	
  	
  	
  	
  //some	
  async	
  update	
  
	
  	
  	
  	
  this.data	
  =	
  newData;	
  
	
  	
  	
  	
  this.emit('change');	
  
	
  	
  	
  	
  //-­‐-­‐-­‐	
  
	
  	
  }	
  
);	
  
UserModel.on('change',	
  /*update	
  component*/);	
  	
  
//You	
  can	
  use	
  mixin	
  to	
  do	
  that	
  automatically
be Lazy with
factory
• get bunch of id’s
• get empty model’s from factory by these id’s
• pass them to component
• PROFIT!
Q&A
@edjafarov
eldar.djafarov.com
just visit
reactjs.com
✌

More Related Content

What's hot

React & Redux
React & ReduxReact & Redux
React & Redux
Federico Bond
 
Redux training
Redux trainingRedux training
Redux training
dasersoft
 
Academy PRO: React JS. Redux & Tooling
Academy PRO: React JS. Redux & ToolingAcademy PRO: React JS. Redux & Tooling
Academy PRO: React JS. Redux & Tooling
Binary Studio
 
React for Dummies
React for DummiesReact for Dummies
React for Dummies
Mitch Chen
 
Switch to React.js from AngularJS developer
Switch to React.js from AngularJS developerSwitch to React.js from AngularJS developer
Switch to React.js from AngularJS developer
Eugene Zharkov
 
ReactJs presentation
ReactJs presentationReactJs presentation
ReactJs presentation
nishasowdri
 
Redux vs Alt
Redux vs AltRedux vs Alt
Redux vs Alt
Uldis Sturms
 
Let's Redux!
Let's Redux!Let's Redux!
Let's Redux!
Joseph Chiang
 
REACT.JS : Rethinking UI Development Using JavaScript
REACT.JS : Rethinking UI Development Using JavaScriptREACT.JS : Rethinking UI Development Using JavaScript
REACT.JS : Rethinking UI Development Using JavaScript
Deepu S Nath
 
React redux
React reduxReact redux
React redux
Michel Perez
 
React Native: JS MVC Meetup #15
React Native: JS MVC Meetup #15React Native: JS MVC Meetup #15
React Native: JS MVC Meetup #15
Rob Gietema
 
React + Redux. Best practices
React + Redux.  Best practicesReact + Redux.  Best practices
React + Redux. Best practices
Clickky
 
Workshop 20: ReactJS Part II Flux Pattern & Redux
Workshop 20: ReactJS Part II Flux Pattern & ReduxWorkshop 20: ReactJS Part II Flux Pattern & Redux
Workshop 20: ReactJS Part II Flux Pattern & Redux
Visual Engineering
 
React JS and why it's awesome
React JS and why it's awesomeReact JS and why it's awesome
React JS and why it's awesome
Andrew Hull
 
React on es6+
React on es6+React on es6+
React on es6+
Nikolaus Graf
 
ReactJS
ReactJSReactJS
ReactJS
Kamlesh Singh
 
Mobile Day - React Native
Mobile Day - React NativeMobile Day - React Native
Mobile Day - React Native
Software Guru
 
Introduction to React & Redux
Introduction to React & ReduxIntroduction to React & Redux
Introduction to React & Redux
Boris Dinkevich
 
Workshop 19: ReactJS Introduction
Workshop 19: ReactJS IntroductionWorkshop 19: ReactJS Introduction
Workshop 19: ReactJS Introduction
Visual Engineering
 
Intro to Redux | DreamLab Academy #3
Intro to Redux | DreamLab Academy #3 Intro to Redux | DreamLab Academy #3
Intro to Redux | DreamLab Academy #3
DreamLab
 

What's hot (20)

React & Redux
React & ReduxReact & Redux
React & Redux
 
Redux training
Redux trainingRedux training
Redux training
 
Academy PRO: React JS. Redux & Tooling
Academy PRO: React JS. Redux & ToolingAcademy PRO: React JS. Redux & Tooling
Academy PRO: React JS. Redux & Tooling
 
React for Dummies
React for DummiesReact for Dummies
React for Dummies
 
Switch to React.js from AngularJS developer
Switch to React.js from AngularJS developerSwitch to React.js from AngularJS developer
Switch to React.js from AngularJS developer
 
ReactJs presentation
ReactJs presentationReactJs presentation
ReactJs presentation
 
Redux vs Alt
Redux vs AltRedux vs Alt
Redux vs Alt
 
Let's Redux!
Let's Redux!Let's Redux!
Let's Redux!
 
REACT.JS : Rethinking UI Development Using JavaScript
REACT.JS : Rethinking UI Development Using JavaScriptREACT.JS : Rethinking UI Development Using JavaScript
REACT.JS : Rethinking UI Development Using JavaScript
 
React redux
React reduxReact redux
React redux
 
React Native: JS MVC Meetup #15
React Native: JS MVC Meetup #15React Native: JS MVC Meetup #15
React Native: JS MVC Meetup #15
 
React + Redux. Best practices
React + Redux.  Best practicesReact + Redux.  Best practices
React + Redux. Best practices
 
Workshop 20: ReactJS Part II Flux Pattern & Redux
Workshop 20: ReactJS Part II Flux Pattern & ReduxWorkshop 20: ReactJS Part II Flux Pattern & Redux
Workshop 20: ReactJS Part II Flux Pattern & Redux
 
React JS and why it's awesome
React JS and why it's awesomeReact JS and why it's awesome
React JS and why it's awesome
 
React on es6+
React on es6+React on es6+
React on es6+
 
ReactJS
ReactJSReactJS
ReactJS
 
Mobile Day - React Native
Mobile Day - React NativeMobile Day - React Native
Mobile Day - React Native
 
Introduction to React & Redux
Introduction to React & ReduxIntroduction to React & Redux
Introduction to React & Redux
 
Workshop 19: ReactJS Introduction
Workshop 19: ReactJS IntroductionWorkshop 19: ReactJS Introduction
Workshop 19: ReactJS Introduction
 
Intro to Redux | DreamLab Academy #3
Intro to Redux | DreamLab Academy #3 Intro to Redux | DreamLab Academy #3
Intro to Redux | DreamLab Academy #3
 

Similar to React.js or why DOM finally makes sense

Introduction to backbone presentation
Introduction to backbone presentationIntroduction to backbone presentation
Introduction to backbone presentation
Brian Hogg
 
jQuery and Rails: Best Friends Forever
jQuery and Rails: Best Friends ForeverjQuery and Rails: Best Friends Forever
jQuery and Rails: Best Friends Forever
stephskardal
 
JSLab. Алексей Волков. "React на практике"
JSLab. Алексей Волков. "React на практике"JSLab. Алексей Волков. "React на практике"
JSLab. Алексей Волков. "React на практике"
GeeksLab Odessa
 
React & Redux for noobs
React & Redux for noobsReact & Redux for noobs
React & Redux for noobs
[T]echdencias
 
Styling components with JavaScript
Styling components with JavaScriptStyling components with JavaScript
Styling components with JavaScript
bensmithett
 
React lecture
React lectureReact lecture
React lecture
Christoffer Noring
 
WordPress as the Backbone(.js)
WordPress as the Backbone(.js)WordPress as the Backbone(.js)
WordPress as the Backbone(.js)
Beau Lebens
 
Clean Javascript
Clean JavascriptClean Javascript
Clean Javascript
Ryunosuke SATO
 
SilverStripe CMS JavaScript Refactoring
SilverStripe CMS JavaScript RefactoringSilverStripe CMS JavaScript Refactoring
SilverStripe CMS JavaScript Refactoring
Ingo Schommer
 
React js
React jsReact js
Crossing platforms with JavaScript & React
Crossing platforms with JavaScript & React Crossing platforms with JavaScript & React
Crossing platforms with JavaScript & React
Robert DeLuca
 
ReactJS
ReactJSReactJS
React 101
React 101React 101
React 101
Casear Chu
 
Frontin like-a-backer
Frontin like-a-backerFrontin like-a-backer
Frontin like-a-backer
Frank de Jonge
 
[Final] ReactJS presentation
[Final] ReactJS presentation[Final] ReactJS presentation
[Final] ReactJS presentation
洪 鹏发
 
React
React React
React
중운 박
 
Building complex User Interfaces with Sitecore and React
Building complex User Interfaces with Sitecore and ReactBuilding complex User Interfaces with Sitecore and React
Building complex User Interfaces with Sitecore and React
Jonne Kats
 
Beyond DOMReady: Ultra High-Performance Javascript
Beyond DOMReady: Ultra High-Performance JavascriptBeyond DOMReady: Ultra High-Performance Javascript
Beyond DOMReady: Ultra High-Performance Javascript
aglemann
 
How to React Native
How to React NativeHow to React Native
How to React Native
Dmitry Ulyanov
 
Understanding backbonejs
Understanding backbonejsUnderstanding backbonejs
Understanding backbonejs
Nick Lee
 

Similar to React.js or why DOM finally makes sense (20)

Introduction to backbone presentation
Introduction to backbone presentationIntroduction to backbone presentation
Introduction to backbone presentation
 
jQuery and Rails: Best Friends Forever
jQuery and Rails: Best Friends ForeverjQuery and Rails: Best Friends Forever
jQuery and Rails: Best Friends Forever
 
JSLab. Алексей Волков. "React на практике"
JSLab. Алексей Волков. "React на практике"JSLab. Алексей Волков. "React на практике"
JSLab. Алексей Волков. "React на практике"
 
React & Redux for noobs
React & Redux for noobsReact & Redux for noobs
React & Redux for noobs
 
Styling components with JavaScript
Styling components with JavaScriptStyling components with JavaScript
Styling components with JavaScript
 
React lecture
React lectureReact lecture
React lecture
 
WordPress as the Backbone(.js)
WordPress as the Backbone(.js)WordPress as the Backbone(.js)
WordPress as the Backbone(.js)
 
Clean Javascript
Clean JavascriptClean Javascript
Clean Javascript
 
SilverStripe CMS JavaScript Refactoring
SilverStripe CMS JavaScript RefactoringSilverStripe CMS JavaScript Refactoring
SilverStripe CMS JavaScript Refactoring
 
React js
React jsReact js
React js
 
Crossing platforms with JavaScript & React
Crossing platforms with JavaScript & React Crossing platforms with JavaScript & React
Crossing platforms with JavaScript & React
 
ReactJS
ReactJSReactJS
ReactJS
 
React 101
React 101React 101
React 101
 
Frontin like-a-backer
Frontin like-a-backerFrontin like-a-backer
Frontin like-a-backer
 
[Final] ReactJS presentation
[Final] ReactJS presentation[Final] ReactJS presentation
[Final] ReactJS presentation
 
React
React React
React
 
Building complex User Interfaces with Sitecore and React
Building complex User Interfaces with Sitecore and ReactBuilding complex User Interfaces with Sitecore and React
Building complex User Interfaces with Sitecore and React
 
Beyond DOMReady: Ultra High-Performance Javascript
Beyond DOMReady: Ultra High-Performance JavascriptBeyond DOMReady: Ultra High-Performance Javascript
Beyond DOMReady: Ultra High-Performance Javascript
 
How to React Native
How to React NativeHow to React Native
How to React Native
 
Understanding backbonejs
Understanding backbonejsUnderstanding backbonejs
Understanding backbonejs
 

More from Eldar Djafarov

PromisePipe inception
PromisePipe inceptionPromisePipe inception
PromisePipe inception
Eldar Djafarov
 
The Grail: React based Isomorph apps framework
The Grail: React based Isomorph apps frameworkThe Grail: React based Isomorph apps framework
The Grail: React based Isomorph apps framework
Eldar Djafarov
 
Frontend - экосистема и будущее: iforum 2015
Frontend - экосистема и будущее: iforum 2015Frontend - экосистема и будущее: iforum 2015
Frontend - экосистема и будущее: iforum 2015
Eldar Djafarov
 
node.js practical guide to serverside javascript
node.js practical guide to serverside javascriptnode.js practical guide to serverside javascript
node.js practical guide to serverside javascript
Eldar Djafarov
 
Your project tested #nodejs
Your project tested #nodejsYour project tested #nodejs
Your project tested #nodejsEldar Djafarov
 

More from Eldar Djafarov (6)

PromisePipe inception
PromisePipe inceptionPromisePipe inception
PromisePipe inception
 
The Grail: React based Isomorph apps framework
The Grail: React based Isomorph apps frameworkThe Grail: React based Isomorph apps framework
The Grail: React based Isomorph apps framework
 
Frontend - экосистема и будущее: iforum 2015
Frontend - экосистема и будущее: iforum 2015Frontend - экосистема и будущее: iforum 2015
Frontend - экосистема и будущее: iforum 2015
 
node.js practical guide to serverside javascript
node.js practical guide to serverside javascriptnode.js practical guide to serverside javascript
node.js practical guide to serverside javascript
 
Compy slides
Compy slidesCompy slides
Compy slides
 
Your project tested #nodejs
Your project tested #nodejsYour project tested #nodejs
Your project tested #nodejs
 

Recently uploaded

“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
Edge AI and Vision Alliance
 
What is an RPA CoE? Session 1 – CoE Vision
What is an RPA CoE?  Session 1 – CoE VisionWhat is an RPA CoE?  Session 1 – CoE Vision
What is an RPA CoE? Session 1 – CoE Vision
DianaGray10
 
QA or the Highway - Component Testing: Bridging the gap between frontend appl...
QA or the Highway - Component Testing: Bridging the gap between frontend appl...QA or the Highway - Component Testing: Bridging the gap between frontend appl...
QA or the Highway - Component Testing: Bridging the gap between frontend appl...
zjhamm304
 
Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
Hiroshi SHIBATA
 
Apps Break Data
Apps Break DataApps Break Data
Apps Break Data
Ivo Velitchkov
 
JavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green MasterplanJavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green Masterplan
Miro Wengner
 
High performance Serverless Java on AWS- GoTo Amsterdam 2024
High performance Serverless Java on AWS- GoTo Amsterdam 2024High performance Serverless Java on AWS- GoTo Amsterdam 2024
High performance Serverless Java on AWS- GoTo Amsterdam 2024
Vadym Kazulkin
 
PRODUCT LISTING OPTIMIZATION PRESENTATION.pptx
PRODUCT LISTING OPTIMIZATION PRESENTATION.pptxPRODUCT LISTING OPTIMIZATION PRESENTATION.pptx
PRODUCT LISTING OPTIMIZATION PRESENTATION.pptx
christinelarrosa
 
Poznań ACE event - 19.06.2024 Team 24 Wrapup slidedeck
Poznań ACE event - 19.06.2024 Team 24 Wrapup slidedeckPoznań ACE event - 19.06.2024 Team 24 Wrapup slidedeck
Poznań ACE event - 19.06.2024 Team 24 Wrapup slidedeck
FilipTomaszewski5
 
What is an RPA CoE? Session 2 – CoE Roles
What is an RPA CoE?  Session 2 – CoE RolesWhat is an RPA CoE?  Session 2 – CoE Roles
What is an RPA CoE? Session 2 – CoE Roles
DianaGray10
 
Christine's Supplier Sourcing Presentaion.pptx
Christine's Supplier Sourcing Presentaion.pptxChristine's Supplier Sourcing Presentaion.pptx
Christine's Supplier Sourcing Presentaion.pptx
christinelarrosa
 
"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota
Fwdays
 
Dandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity serverDandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity server
Antonios Katsarakis
 
From Natural Language to Structured Solr Queries using LLMs
From Natural Language to Structured Solr Queries using LLMsFrom Natural Language to Structured Solr Queries using LLMs
From Natural Language to Structured Solr Queries using LLMs
Sease
 
"Scaling RAG Applications to serve millions of users", Kevin Goedecke
"Scaling RAG Applications to serve millions of users",  Kevin Goedecke"Scaling RAG Applications to serve millions of users",  Kevin Goedecke
"Scaling RAG Applications to serve millions of users", Kevin Goedecke
Fwdays
 
Harnessing the Power of NLP and Knowledge Graphs for Opioid Research
Harnessing the Power of NLP and Knowledge Graphs for Opioid ResearchHarnessing the Power of NLP and Knowledge Graphs for Opioid Research
Harnessing the Power of NLP and Knowledge Graphs for Opioid Research
Neo4j
 
A Deep Dive into ScyllaDB's Architecture
A Deep Dive into ScyllaDB's ArchitectureA Deep Dive into ScyllaDB's Architecture
A Deep Dive into ScyllaDB's Architecture
ScyllaDB
 
The Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptxThe Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptx
operationspcvita
 
ScyllaDB Tablets: Rethinking Replication
ScyllaDB Tablets: Rethinking ReplicationScyllaDB Tablets: Rethinking Replication
ScyllaDB Tablets: Rethinking Replication
ScyllaDB
 
Y-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PPY-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PP
c5vrf27qcz
 

Recently uploaded (20)

“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
 
What is an RPA CoE? Session 1 – CoE Vision
What is an RPA CoE?  Session 1 – CoE VisionWhat is an RPA CoE?  Session 1 – CoE Vision
What is an RPA CoE? Session 1 – CoE Vision
 
QA or the Highway - Component Testing: Bridging the gap between frontend appl...
QA or the Highway - Component Testing: Bridging the gap between frontend appl...QA or the Highway - Component Testing: Bridging the gap between frontend appl...
QA or the Highway - Component Testing: Bridging the gap between frontend appl...
 
Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
 
Apps Break Data
Apps Break DataApps Break Data
Apps Break Data
 
JavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green MasterplanJavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green Masterplan
 
High performance Serverless Java on AWS- GoTo Amsterdam 2024
High performance Serverless Java on AWS- GoTo Amsterdam 2024High performance Serverless Java on AWS- GoTo Amsterdam 2024
High performance Serverless Java on AWS- GoTo Amsterdam 2024
 
PRODUCT LISTING OPTIMIZATION PRESENTATION.pptx
PRODUCT LISTING OPTIMIZATION PRESENTATION.pptxPRODUCT LISTING OPTIMIZATION PRESENTATION.pptx
PRODUCT LISTING OPTIMIZATION PRESENTATION.pptx
 
Poznań ACE event - 19.06.2024 Team 24 Wrapup slidedeck
Poznań ACE event - 19.06.2024 Team 24 Wrapup slidedeckPoznań ACE event - 19.06.2024 Team 24 Wrapup slidedeck
Poznań ACE event - 19.06.2024 Team 24 Wrapup slidedeck
 
What is an RPA CoE? Session 2 – CoE Roles
What is an RPA CoE?  Session 2 – CoE RolesWhat is an RPA CoE?  Session 2 – CoE Roles
What is an RPA CoE? Session 2 – CoE Roles
 
Christine's Supplier Sourcing Presentaion.pptx
Christine's Supplier Sourcing Presentaion.pptxChristine's Supplier Sourcing Presentaion.pptx
Christine's Supplier Sourcing Presentaion.pptx
 
"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota
 
Dandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity serverDandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity server
 
From Natural Language to Structured Solr Queries using LLMs
From Natural Language to Structured Solr Queries using LLMsFrom Natural Language to Structured Solr Queries using LLMs
From Natural Language to Structured Solr Queries using LLMs
 
"Scaling RAG Applications to serve millions of users", Kevin Goedecke
"Scaling RAG Applications to serve millions of users",  Kevin Goedecke"Scaling RAG Applications to serve millions of users",  Kevin Goedecke
"Scaling RAG Applications to serve millions of users", Kevin Goedecke
 
Harnessing the Power of NLP and Knowledge Graphs for Opioid Research
Harnessing the Power of NLP and Knowledge Graphs for Opioid ResearchHarnessing the Power of NLP and Knowledge Graphs for Opioid Research
Harnessing the Power of NLP and Knowledge Graphs for Opioid Research
 
A Deep Dive into ScyllaDB's Architecture
A Deep Dive into ScyllaDB's ArchitectureA Deep Dive into ScyllaDB's Architecture
A Deep Dive into ScyllaDB's Architecture
 
The Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptxThe Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptx
 
ScyllaDB Tablets: Rethinking Replication
ScyllaDB Tablets: Rethinking ReplicationScyllaDB Tablets: Rethinking Replication
ScyllaDB Tablets: Rethinking Replication
 
Y-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PPY-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PP
 

React.js or why DOM finally makes sense

  • 1. React.js or why DOM finally makes sense
  • 2. JSX ⊙_⊙ /**  @jsx  React.DOM  */   var  name  =  "Foo",  commentText  =  "Bar",  avatarUrl="Baz";       var  avatar  =  <img  src  =  {avatarUrl}/>;       var  comment  =  <div  className="comment">      {avatar}  @{name}:  {commentText}   </div>
  • 3. JSX is nice! ⊙⌣⊙ ! var  name  =  "Foo",  commentText  =  "Bar",  avatarUrl="Baz";       var  avatar  =  React.DOM.img(  {src:    avatarUrl});       var  comment  =  React.DOM.div(  {className:"comment"},        avatar,  "  @",name,":  ",  commentText   ) /**  @jsx  React.DOM  */   var  name  =  "Foo",  commentText  =  "Bar",  avatarUrl="Baz";       var  avatar  =  <img  src  =  {avatarUrl}/>;       var  comment  =  <div  className="comment">      {avatar}  @{name}:  {commentText}   </div>
  • 4. JSX rocks! ⊙⌣⊙ • tags are functions • you can use closures • scope is straightforward • normalized DOM
  • 5. the rules! • do not mix logic and presentation • do not write inline javascript
  • 6. FUCK! the rules! • do not mix logic and presentation • do not write inline javascript
  • 7. components
 components components /**  @jsx  React.DOM  */   var  User  =  React.createClass({      render:  function()  {          return  (<div>                  <img  src={this.props.avatar}/>:                  @{this.props.username}              </div>);      }   });   ! React.renderComponent(      <User  username="Eldar"  avatar="http://img.src/edjafarov"/>,      document.getElementById('example')   );
  • 8. components
 components components /**  @jsx  React.DOM  */   var  Avatar  =  React.createClass({      render:  function()  {          return  <img  src={this.props.uri}/>;      }   });   var  User  =  React.createClass({      render:  function()  {          return  (<div>                  <Avatar  uri={this.props.avatar}/>:                  @{this.props.username}              </div>);      }   });
  • 10. Props & State var  User  =  React.createClass({      getInitialState:  function(){        return  {          name:this.props.user.name,          uri:  this.props.user.uri        }      },            render:  function()  {          return  (<div>                  <Avatar  uri={this.props.avatar}/>:                  @{this.state.name}              </div>);      }   });
  • 12. routing doesn’t matter http://visionmedia.github.io/page.js/ var  User  =  require('./User');       page('/user/:user',  user.load,  function(ctx){      React.renderComponent(          <User  user={ctx.user}/>,          document.getElementById('root')      );   })
  • 13. 2 way binding/**  @jsx  React.DOM  */   var  WithLink  =  React.createClass({      mixins:  [React.addons.LinkedStateMixin],      getInitialState:  function()  {          return  {value:  'Hello!'};      },      render:  function()  {          return  <input  type="text"  valueLink={this.linkState('value')}  />;      }   }); var  Hello  =  React.createClass({      mixins:[ModelMixin,  BindMixin],      getBackboneModels:  function(){          return  [this.props.instance]      },      render:  function()  {          var  model  =  this.props.instance;          return  <div>                  <div>Hello  {model.get(‘initial')}</div>                  <input  type="text"  valueLink={this.bindTo(model,  'initial')}/>              </div>      }   });
  • 14. models or emitters? What if models and collections are not enough? https://github.com/component/emitter var  Emitter  =  require('emitter');   var  UserModel  =  new  Emitter({}      data:  {},      update:  function(){          //some  async  update          this.data  =  newData;          this.emit('change');          //-­‐-­‐-­‐      }   );   UserModel.on('change',  /*update  component*/);     //You  can  use  mixin  to  do  that  automatically
  • 15. be Lazy with factory • get bunch of id’s • get empty model’s from factory by these id’s • pass them to component • PROFIT!