SlideShare a Scribd company logo
Building complex User Interfaces with Sitecore and React
• Developed by Facebook
• Used by AirBnb, Netflix, Twitter, etc.
• Only the V in MVC
var Menu = React.createClass({
getInitialState: function(){
return { focused: 0 };
},
clicked: function(index){
this.setState({focused: index});
},
render: function() {
return (
<div>
<ul>
{
this.props.items.map((m, index) => {
var style = this.state.focused == index ? 'focused' : '';
return <li className={style} onClick={() => this.clicked(index)}>{m}</li>;
})
}
</ul>
<p>Selected: {this.props.items[this.state.focused]}</p>
</div>
);
}
});
ReactDOM.render( <Menu items={ ['Home', 'Services', 'About', 'Contact us'] } />,
document.getElementById('container') );
Gawd. This is gnarly. We would you want more markup in your code?
For a split second I had to ask myself if it was april 1st.
html... in MY javascript?
no thanks
What is with Facebook and stuffing markup
into inappropriate places these days?
Ugh
What would you expect from a company founded
by PHP developers? :)
var Menu = React.createClass({
getInitialState: function(){
return { focused: 0 };
},
clicked: function(index){
this.setState({focused: index});
},
render: function() {
return (
<div>
<ul>
{
this.props.items.map((m, index) => {
var style = this.state.focused == index ? 'focused' : '';
return <li className={style} onClick={() => this.clicked(index)}>{m}</li>;
})
}
</ul>
<p>Selected: {this.props.items[this.state.focused]}</p>
</div>
);
}
});
ReactDOM.render( <Menu items={ ['Home', 'Services', 'About', 'Contact us'] } />,
document.getElementById('container') );
var HelloMessage = React.createClass({
render: function() {
return <div>Hello {this.props.name}</div>;
}
});
var HelloMessage = React.createClass({
displayName: "HelloMessage",
render: function render() {
return React.createElement( "div", null, "Hello ", this.props.name );
}
});
Compile to plain JavaScript
Filter.jsx
Facet.jsx
Productcluster.jsx
Product.jsx
Price.jsx
• Reusable
• Testable
• Simple?
function addItem(item) {
$http.post('/api/shoppingCart/', item).success(function(){
$('table').append('<tr><td> ' + item.description +
' </td><td> ' + item.price + ' </td></tr>');
});
}
$scope.addItem = function (item) {
$http.post('/api/shoppingCart/', item).success(function(){
refreshItems();
});
};
function refreshItems(){
$http.get('/api/shoppingCart/').success(function (data) {
$scope.items = data;
});
};
var HelloMessage = React.createClass({
render: function() {
return <div>Hello John</div>;
}
});
var HelloMessage = React.createClass({
render: function() {
return <div>Hello again John</div>;
}
});
Virtual DOM v1 Virtual DOM v2
Old New
div.innerHTML = ‘Hello again John’;
DIFF
Apply patch to real DOM
• No Flash Of Unstyled Content (FOUC)
• SEO friendly
Meaning it can also run on the server!!
Browser Server
Get page
Initial page with React
components
React component
Render
HTML
Interact
REST
HTML
• Renderings and components have same responsibility
• Both transform data into HTML
• Sitecore sites are usually front-facing
Building complex User Interfaces with Sitecore and React
• JavaScript op de server is moeilijk te debuggen
• Gebruikt meer CPU van de server (Dan alleen client-side)
• React heeft learning curve
• Experience editor niet uit oog verliezen
• React - https://facebook.github.io/react/
• ReactJS.NET - http://reactjs.net/
• React Fundamentals Pluralsight -
https://www.pluralsight.com/courses/react-fundamentals
Building complex User Interfaces with Sitecore and React

More Related Content

What's hot (20)

PPTX
PHPUnit with Mocking and Crawling
Trung x
 
KEY
Data::FormValidator Simplified
Fred Moyer
 
PDF
첫 리액트 경험기
석진 고
 
PDF
Jqeury ajax plugins
Inbal Geffen
 
PDF
Django Templates
Willy Liu
 
PDF
WordPress Capabilities Magic
mannieschumpert
 
DOC
Soa lab 3
goldenrajan
 
PDF
Django Bogotá. CBV
ctrl-alt-delete
 
PPT
Grails Views
NexThoughts Technologies
 
PDF
Ch9 .Best Practices for Class-Based Views
Willy Liu
 
PPTX
How to increase Performance of Web Application using JQuery
kolkatageeks
 
PDF
Django class based views for beginners
Spin Lai
 
PPTX
What's new for developers in Dynamics 365 v9: Client API enhancement
Kenichiro Nakamura
 
PPT
Mysocial databasequeries
Program in Interdisciplinary Computing
 
PPT
Mysocial databasequeries
Program in Interdisciplinary Computing
 
PDF
jQuery - Chapter 4 - DOM Handling
WebStackAcademy
 
PDF
Aug 3-2012 - StiltSoft - 10 features for JIRA admin
Teamlead
 
PDF
Stay with React.js in 2020
Jerry Liao
 
PDF
정오의 데이트 for iOS 코드 정리
태준 김
 
ODP
MobileCity:Core Data
Allan Davis
 
PHPUnit with Mocking and Crawling
Trung x
 
Data::FormValidator Simplified
Fred Moyer
 
첫 리액트 경험기
석진 고
 
Jqeury ajax plugins
Inbal Geffen
 
Django Templates
Willy Liu
 
WordPress Capabilities Magic
mannieschumpert
 
Soa lab 3
goldenrajan
 
Django Bogotá. CBV
ctrl-alt-delete
 
Ch9 .Best Practices for Class-Based Views
Willy Liu
 
How to increase Performance of Web Application using JQuery
kolkatageeks
 
Django class based views for beginners
Spin Lai
 
What's new for developers in Dynamics 365 v9: Client API enhancement
Kenichiro Nakamura
 
Mysocial databasequeries
Program in Interdisciplinary Computing
 
Mysocial databasequeries
Program in Interdisciplinary Computing
 
jQuery - Chapter 4 - DOM Handling
WebStackAcademy
 
Aug 3-2012 - StiltSoft - 10 features for JIRA admin
Teamlead
 
Stay with React.js in 2020
Jerry Liao
 
정오의 데이트 for iOS 코드 정리
태준 김
 
MobileCity:Core Data
Allan Davis
 

Similar to Building complex User Interfaces with Sitecore and React (20)

PDF
React lecture
Christoffer Noring
 
PDF
Clean Javascript
Ryunosuke SATO
 
PDF
JS Fest 2019. Glenn Reyes. With great power comes great React hooks!
JSFestUA
 
PDF
Redux vs Alt
Uldis Sturms
 
PPTX
React js
Oswald Campesato
 
PDF
Gutenberg sous le capot, modules réutilisables
Riad Benguella
 
PPTX
Getting the Most Out of jQuery Widgets
velveeta_512
 
PDF
JSLab. Алексей Волков. "React на практике"
GeeksLab Odessa
 
PDF
Learning React: Facebook's Javascript Library For Building User Interfaces
Ken Wheeler
 
PDF
Crossing platforms with JavaScript & React
Robert DeLuca
 
PDF
Understanding backbonejs
Nick Lee
 
PDF
Recompacting your react application
Greg Bergé
 
KEY
Scala on Your Phone
Michael Galpin
 
PDF
Building Large jQuery Applications
Rebecca Murphey
 
PPTX
Bacbkone js
Артём Курапов
 
PPTX
Big Data for each one of us
OSCON Byrum
 
PDF
Rails is not just Ruby
Marco Otte-Witte
 
PPTX
Taming that client side mess with Backbone.js
Jarod Ferguson
 
PDF
Introduction to backbone presentation
Brian Hogg
 
PDF
Aplicacoes dinamicas Rails com Backbone
Rafael Felix da Silva
 
React lecture
Christoffer Noring
 
Clean Javascript
Ryunosuke SATO
 
JS Fest 2019. Glenn Reyes. With great power comes great React hooks!
JSFestUA
 
Redux vs Alt
Uldis Sturms
 
Gutenberg sous le capot, modules réutilisables
Riad Benguella
 
Getting the Most Out of jQuery Widgets
velveeta_512
 
JSLab. Алексей Волков. "React на практике"
GeeksLab Odessa
 
Learning React: Facebook's Javascript Library For Building User Interfaces
Ken Wheeler
 
Crossing platforms with JavaScript & React
Robert DeLuca
 
Understanding backbonejs
Nick Lee
 
Recompacting your react application
Greg Bergé
 
Scala on Your Phone
Michael Galpin
 
Building Large jQuery Applications
Rebecca Murphey
 
Big Data for each one of us
OSCON Byrum
 
Rails is not just Ruby
Marco Otte-Witte
 
Taming that client side mess with Backbone.js
Jarod Ferguson
 
Introduction to backbone presentation
Brian Hogg
 
Aplicacoes dinamicas Rails com Backbone
Rafael Felix da Silva
 
Ad

Recently uploaded (20)

PDF
TheFutureIsDynamic-BoxLang witch Luis Majano.pdf
Ortus Solutions, Corp
 
PDF
Odoo CRM vs Zoho CRM: Honest Comparison 2025
Odiware Technologies Private Limited
 
PDF
Open Chain Q2 Steering Committee Meeting - 2025-06-25
Shane Coughlan
 
PDF
vMix Pro 28.0.0.42 Download vMix Registration key Bundle
kulindacore
 
PPTX
Finding Your License Details in IBM SPSS Statistics Version 31.pptx
Version 1 Analytics
 
PDF
Build It, Buy It, or Already Got It? Make Smarter Martech Decisions
bbedford2
 
PDF
Linux Certificate of Completion - LabEx Certificate
VICTOR MAESTRE RAMIREZ
 
PDF
Top Agile Project Management Tools for Teams in 2025
Orangescrum
 
PPTX
Help for Correlations in IBM SPSS Statistics.pptx
Version 1 Analytics
 
PDF
iTop VPN With Crack Lifetime Activation Key-CODE
utfefguu
 
PPTX
Tally software_Introduction_Presentation
AditiBansal54083
 
PDF
MiniTool Partition Wizard Free Crack + Full Free Download 2025
bashirkhan333g
 
PDF
Why Businesses Are Switching to Open Source Alternatives to Crystal Reports.pdf
Varsha Nayak
 
PDF
How to Hire AI Developers_ Step-by-Step Guide in 2025.pdf
DianApps Technologies
 
PPTX
Empowering Asian Contributions: The Rise of Regional User Groups in Open Sour...
Shane Coughlan
 
PPTX
ChiSquare Procedure in IBM SPSS Statistics Version 31.pptx
Version 1 Analytics
 
PDF
MiniTool Partition Wizard 12.8 Crack License Key LATEST
hashhshs786
 
PDF
SAP Firmaya İade ABAB Kodları - ABAB ile yazılmıl hazır kod örneği
Salih Küçük
 
PDF
Wondershare PDFelement Pro Crack for MacOS New Version Latest 2025
bashirkhan333g
 
PPTX
OpenChain @ OSS NA - In From the Cold: Open Source as Part of Mainstream Soft...
Shane Coughlan
 
TheFutureIsDynamic-BoxLang witch Luis Majano.pdf
Ortus Solutions, Corp
 
Odoo CRM vs Zoho CRM: Honest Comparison 2025
Odiware Technologies Private Limited
 
Open Chain Q2 Steering Committee Meeting - 2025-06-25
Shane Coughlan
 
vMix Pro 28.0.0.42 Download vMix Registration key Bundle
kulindacore
 
Finding Your License Details in IBM SPSS Statistics Version 31.pptx
Version 1 Analytics
 
Build It, Buy It, or Already Got It? Make Smarter Martech Decisions
bbedford2
 
Linux Certificate of Completion - LabEx Certificate
VICTOR MAESTRE RAMIREZ
 
Top Agile Project Management Tools for Teams in 2025
Orangescrum
 
Help for Correlations in IBM SPSS Statistics.pptx
Version 1 Analytics
 
iTop VPN With Crack Lifetime Activation Key-CODE
utfefguu
 
Tally software_Introduction_Presentation
AditiBansal54083
 
MiniTool Partition Wizard Free Crack + Full Free Download 2025
bashirkhan333g
 
Why Businesses Are Switching to Open Source Alternatives to Crystal Reports.pdf
Varsha Nayak
 
How to Hire AI Developers_ Step-by-Step Guide in 2025.pdf
DianApps Technologies
 
Empowering Asian Contributions: The Rise of Regional User Groups in Open Sour...
Shane Coughlan
 
ChiSquare Procedure in IBM SPSS Statistics Version 31.pptx
Version 1 Analytics
 
MiniTool Partition Wizard 12.8 Crack License Key LATEST
hashhshs786
 
SAP Firmaya İade ABAB Kodları - ABAB ile yazılmıl hazır kod örneği
Salih Küçük
 
Wondershare PDFelement Pro Crack for MacOS New Version Latest 2025
bashirkhan333g
 
OpenChain @ OSS NA - In From the Cold: Open Source as Part of Mainstream Soft...
Shane Coughlan
 
Ad

Building complex User Interfaces with Sitecore and React

  • 2. • Developed by Facebook • Used by AirBnb, Netflix, Twitter, etc. • Only the V in MVC
  • 3. var Menu = React.createClass({ getInitialState: function(){ return { focused: 0 }; }, clicked: function(index){ this.setState({focused: index}); }, render: function() { return ( <div> <ul> { this.props.items.map((m, index) => { var style = this.state.focused == index ? 'focused' : ''; return <li className={style} onClick={() => this.clicked(index)}>{m}</li>; }) } </ul> <p>Selected: {this.props.items[this.state.focused]}</p> </div> ); } }); ReactDOM.render( <Menu items={ ['Home', 'Services', 'About', 'Contact us'] } />, document.getElementById('container') ); Gawd. This is gnarly. We would you want more markup in your code? For a split second I had to ask myself if it was april 1st. html... in MY javascript? no thanks What is with Facebook and stuffing markup into inappropriate places these days? Ugh What would you expect from a company founded by PHP developers? :)
  • 4. var Menu = React.createClass({ getInitialState: function(){ return { focused: 0 }; }, clicked: function(index){ this.setState({focused: index}); }, render: function() { return ( <div> <ul> { this.props.items.map((m, index) => { var style = this.state.focused == index ? 'focused' : ''; return <li className={style} onClick={() => this.clicked(index)}>{m}</li>; }) } </ul> <p>Selected: {this.props.items[this.state.focused]}</p> </div> ); } }); ReactDOM.render( <Menu items={ ['Home', 'Services', 'About', 'Contact us'] } />, document.getElementById('container') );
  • 5. var HelloMessage = React.createClass({ render: function() { return <div>Hello {this.props.name}</div>; } }); var HelloMessage = React.createClass({ displayName: "HelloMessage", render: function render() { return React.createElement( "div", null, "Hello ", this.props.name ); } }); Compile to plain JavaScript
  • 8. function addItem(item) { $http.post('/api/shoppingCart/', item).success(function(){ $('table').append('<tr><td> ' + item.description + ' </td><td> ' + item.price + ' </td></tr>'); }); }
  • 9. $scope.addItem = function (item) { $http.post('/api/shoppingCart/', item).success(function(){ refreshItems(); }); }; function refreshItems(){ $http.get('/api/shoppingCart/').success(function (data) { $scope.items = data; }); };
  • 10. var HelloMessage = React.createClass({ render: function() { return <div>Hello John</div>; } }); var HelloMessage = React.createClass({ render: function() { return <div>Hello again John</div>; } }); Virtual DOM v1 Virtual DOM v2 Old New div.innerHTML = ‘Hello again John’; DIFF Apply patch to real DOM
  • 11. • No Flash Of Unstyled Content (FOUC) • SEO friendly Meaning it can also run on the server!!
  • 12. Browser Server Get page Initial page with React components React component Render HTML Interact REST HTML
  • 13. • Renderings and components have same responsibility • Both transform data into HTML • Sitecore sites are usually front-facing
  • 15. • JavaScript op de server is moeilijk te debuggen • Gebruikt meer CPU van de server (Dan alleen client-side) • React heeft learning curve • Experience editor niet uit oog verliezen
  • 16. • React - https://facebook.github.io/react/ • ReactJS.NET - http://reactjs.net/ • React Fundamentals Pluralsight - https://www.pluralsight.com/courses/react-fundamentals

Editor's Notes

  • #2: Hoe zijn we hier gekomen?
  • #3: Dus geen controllers, directives of andere concepten
  • #4: Ecmascript 6 Seperation of Concerns? Facebook philosophy is that behavior and html should be together. Geen beperking van de template taal, volledige kracht van javascript Render wordt opnieuw aangeroepen wanneer de state wijzigd
  • #5: Ecmascript 6 Seperation of Concerns? Facebook philosophy is that behavior and html should be together. Geen beperking van de template taal, volledige kracht van javascript Render wordt opnieuw aangeroepen wanneer de state wijzigd
  • #6: http://markup.su/highlighter/
  • #7: Gedrag en HTML bij elkaar, dus herbruikbaar Functionaliteit niet verspreid over controllers, model en view.
  • #9: Elke mutatie een aparte bewerking op de DOM State synchronisatie is evil
  • #10: DOM is traag
  • #11: Batched Heeft nog een voordeel Todo: Cart voorbeeld gebruiken met aantal
  • #13: Deze verduidelijken, query api bijv. weg
  • #14: Because front-facing Sitecore sites really benefit from Isomorphic JS. With MVC based framework there are quite some dependencies to setup in your views Page editor is een probleem met angular, uitleggen voordelen verschillende componenten met gedeelde store Routing moet gedaan worden Sitecore ipv bijv. Angular routing