SlideShare une entreprise Scribd logo
1  sur  34
Isomorphic React
In Real Life
Jonas Ohlsson
@pocketjoso
Who am I?
• Frond end developer at State
• Performance, tooling and open source geek
Isomorphic new site: http://alpha.state.com
Penthouse, Critical Path CSS Generator:
https://github.com/pocketjoso/penthouse
This talk
• Background: Isomorphism, React
• State’s isomorphic React render flow
- Data
- Bootstrap
- Stores
Isomorphic JavaScript
• Shared JS running both client and server
• Performance, graceful degradation, Accessibility, SEO
Flash of Client Side Rendering
Isomorphic React
• Easy - React.renderToString()
• What about data fetching, re-using render state, stores
React render flow (client)
URL Render
Fetch
data
Routing
table
React render flow (client)
Render
Fetch
data
Routing
table
URL
props = {
page: ExplorePage
};
React render flow (client)
Render
Fetch
data
Routing
table
URL
props = {
page: ExplorePage
};
React.render(
<App {…props} />,
containerElement
);
React render flow (client)
React Lifecycle method componentDidMount: http://facebook.github.io/react/docs/component-specs.html#mounting-componentdidmount
Render
Fetch
data
Routing
table
URL
props = {
page: ExplorePage
};
React.render(
<App {…props} />,
containerElement
);
componentDidMount
React render flow (client)
Render
Fetch
data
Routing
table
URL
props = {
page: ExplorePage
};
React.render(
<App {…props} />,
containerElement
);
componentDidMount
…
$.get().then(result){
this.setState({data:
result});
});
React render flow (client)
props = {
page: ExplorePage
};
can’t use on the server
Render
Fetch
data
Routing
table
URL
React.render(
<App {…props} />,
containerElement
);
componentDidMount
…
$.get().then(result){
this.setState({data:
result});
});
Isomorphic Render Flow
Isomorphic React render flow
Make requests
page asked for
React.
render/
renderToString(
<App {…props} />
);
Pre fetch
data
Render
Routing
table
URL
props = {
page: ExplorePage
};
Isomorphic React render flow
Make requests
page asked for
React.
render/
renderToString(
<App {…props} />
);
Pre fetch
data
Render
Routing
table
URL
props = {
page: ExplorePage
};
Pre data fetching
React Statics component property: http://facebook.github.io/react/docs/component-specs.html#statics
Isomorphic React render flow
data =
ExplorePage.
requestForProps();
Routing
table
URL Pre fetch
data
Render
React.
render/
renderToString(
<App {…props} />
);
props = {
page: ExplorePage
};
Isomorphic React render flow
data =
ExplorePage.
requestForProps();
props.data = data;
Routing
table
URL Pre fetch
data
Render
React.
render/
renderToString(
<App {…props} />
);
props = {
page: ExplorePage
};
Bootstrapping render context
React.render(
<App {…props}/>
);
Server Client
React.renderToString(
<App {…props}/>
);
Bootstrapping
Server Client
Bootstrapping render context
Flux
• Data changing over time (during a session)
• Cached data
Should I use Flux? https://medium.com/@dan_abramov/the-case-for-flux-379b7d1982c6
Flux
• Data changing over time (during a session)
• Cached data
Should I use Flux? https://medium.com/@dan_abramov/the-case-for-flux-379b7d1982c6
Isomorphic Flux Stores
Snapshot / restore
Add snapshots to render context JSON Restore on client
Store reset
• Stores are singletons
• Prevent data leaking
Stores listening for request data
Request
response
data
Distribute StoresNormalise
Stores listening for request data
Request
response
data
Distribute StoresNormalise
statement : {
creator : {
id : 12312,
name: Jonas
…
},
id: 199,
text: ‘This is …’
}
Stores listening for request data
Normalize data: https://github.com/gaearon/normalizr
Request
response
data
Distribute Stores
statement : {
creator : {
id : 12312,
name: Jonas
…
},
id: 199,
text: ‘This is …’
}
entities: {
users: {
12312: {
name: Jonas
}
},
statements: {
199: {
text: ‘This is …’
creator: 12312
}
}
}
Normalise
Stores listening for request data
Request
response
data
Distribute StoresNormalise
trigger(users)
trigger(statements)
statement : {
creator : {
id : 12312,
name: Jonas
…
},
id: 199,
text: ‘This is …’
}
entities: {
users: {
12312: {
name: Jonas
}
},
statements: {
199: {
text: ‘This is …’
creator: 12312
}
}
}
Stores listening for request data
UserStore = {
listenTo(
userProvider,
function(users){
// merge new users
// to store’s data
}
}
Request
response
data
Distribute Stores
statement : {
creator : {
id : 12312,
name: Jonas
…
},
id: 199,
text: ‘This is …’
}
Normalise
trigger(users)
trigger(statements)
entities: {
users: {
12312: {
name: Jonas
}
},
statements: {
199: {
text: ‘This is …’
creator: 12312
}
}
}
Full Render sequence: Server
• (Start stores when booting server)
• Execute requests via requestForProps for Page
• Distribute data to Stores (if not Automatic)
• React.RenderToString()
• Snapshot Stores, create render context JSON
• Send HTML to client
• Reset Stores
Full Render sequence: Client
• Parse render context JSON
• Start stores, and restore via snapshots
• React.render, with props from render context
Summary
• Fetch data before rendering React
• Statics to co-locate data requests with component logic
• Bootstrap server render context
• Snapshot, restore and reset Stores
• Optional: Auto distribute request data to Stores
Questions?
@pocketjoso
Blog post based on this talk
http://jonassebastianohlsson.com/blog/2015/03/24/isomorphic-react-in-real-life/

Contenu connexe

Tendances

MongoDB Aggregation Performance
MongoDB Aggregation PerformanceMongoDB Aggregation Performance
MongoDB Aggregation PerformanceMongoDB
 
MongoDB Launchpad 2016: What’s New in the 3.4 Server
MongoDB Launchpad 2016: What’s New in the 3.4 ServerMongoDB Launchpad 2016: What’s New in the 3.4 Server
MongoDB Launchpad 2016: What’s New in the 3.4 ServerMongoDB
 
Cross site calls with javascript - the right way with CORS
Cross site calls with javascript - the right way with CORSCross site calls with javascript - the right way with CORS
Cross site calls with javascript - the right way with CORSMichael Neale
 
Web Security - Cookies, Domains and CORS
Web Security - Cookies, Domains and CORSWeb Security - Cookies, Domains and CORS
Web Security - Cookies, Domains and CORSPerfectial, LLC
 
Cool bonsai cool - an introduction to ElasticSearch
Cool bonsai cool - an introduction to ElasticSearchCool bonsai cool - an introduction to ElasticSearch
Cool bonsai cool - an introduction to ElasticSearchclintongormley
 
Distributed percolator in elasticsearch
Distributed percolator in elasticsearchDistributed percolator in elasticsearch
Distributed percolator in elasticsearchmartijnvg
 
elasticsearch - advanced features in practice
elasticsearch - advanced features in practiceelasticsearch - advanced features in practice
elasticsearch - advanced features in practiceJano Suchal
 
Terms of endearment - the ElasticSearch Query DSL explained
Terms of endearment - the ElasticSearch Query DSL explainedTerms of endearment - the ElasticSearch Query DSL explained
Terms of endearment - the ElasticSearch Query DSL explainedclintongormley
 
Cross-domain requests with CORS
Cross-domain requests with CORSCross-domain requests with CORS
Cross-domain requests with CORSVladimir Dzhuvinov
 
RESTful Web Services with JAX-RS
RESTful Web Services with JAX-RSRESTful Web Services with JAX-RS
RESTful Web Services with JAX-RSCarol McDonald
 
Con fess 2013-sse-websockets-json-bhakti
Con fess 2013-sse-websockets-json-bhaktiCon fess 2013-sse-websockets-json-bhakti
Con fess 2013-sse-websockets-json-bhaktiBhakti Mehta
 
Easy rest service using PHP reflection api
Easy rest service using PHP reflection apiEasy rest service using PHP reflection api
Easy rest service using PHP reflection apiMatthieu Aubry
 
Леонід Кузьмін “Сам собі паблішер. Від сайту ігрової студії до універсального...
Леонід Кузьмін “Сам собі паблішер. Від сайту ігрової студії до універсального...Леонід Кузьмін “Сам собі паблішер. Від сайту ігрової студії до універсального...
Леонід Кузьмін “Сам собі паблішер. Від сайту ігрової студії до універсального...Lviv Startup Club
 
Query DSL In Elasticsearch
Query DSL In ElasticsearchQuery DSL In Elasticsearch
Query DSL In ElasticsearchKnoldus Inc.
 
REST API Recommendations
REST API RecommendationsREST API Recommendations
REST API RecommendationsJeelani Shaik
 
Things I wish web graduates knew
Things I wish web graduates knewThings I wish web graduates knew
Things I wish web graduates knewLorna Mitchell
 
RESTful services with JAXB and JPA
RESTful services with JAXB and JPARESTful services with JAXB and JPA
RESTful services with JAXB and JPAShaun Smith
 

Tendances (20)

MongoDB Aggregation Performance
MongoDB Aggregation PerformanceMongoDB Aggregation Performance
MongoDB Aggregation Performance
 
MongoDB Launchpad 2016: What’s New in the 3.4 Server
MongoDB Launchpad 2016: What’s New in the 3.4 ServerMongoDB Launchpad 2016: What’s New in the 3.4 Server
MongoDB Launchpad 2016: What’s New in the 3.4 Server
 
Cross site calls with javascript - the right way with CORS
Cross site calls with javascript - the right way with CORSCross site calls with javascript - the right way with CORS
Cross site calls with javascript - the right way with CORS
 
Web Security - Cookies, Domains and CORS
Web Security - Cookies, Domains and CORSWeb Security - Cookies, Domains and CORS
Web Security - Cookies, Domains and CORS
 
Cool bonsai cool - an introduction to ElasticSearch
Cool bonsai cool - an introduction to ElasticSearchCool bonsai cool - an introduction to ElasticSearch
Cool bonsai cool - an introduction to ElasticSearch
 
Distributed percolator in elasticsearch
Distributed percolator in elasticsearchDistributed percolator in elasticsearch
Distributed percolator in elasticsearch
 
Doing REST Right
Doing REST RightDoing REST Right
Doing REST Right
 
elasticsearch - advanced features in practice
elasticsearch - advanced features in practiceelasticsearch - advanced features in practice
elasticsearch - advanced features in practice
 
Terms of endearment - the ElasticSearch Query DSL explained
Terms of endearment - the ElasticSearch Query DSL explainedTerms of endearment - the ElasticSearch Query DSL explained
Terms of endearment - the ElasticSearch Query DSL explained
 
RESTful Web Services
RESTful Web ServicesRESTful Web Services
RESTful Web Services
 
Cross-domain requests with CORS
Cross-domain requests with CORSCross-domain requests with CORS
Cross-domain requests with CORS
 
RESTful Web Services with JAX-RS
RESTful Web Services with JAX-RSRESTful Web Services with JAX-RS
RESTful Web Services with JAX-RS
 
Con fess 2013-sse-websockets-json-bhakti
Con fess 2013-sse-websockets-json-bhaktiCon fess 2013-sse-websockets-json-bhakti
Con fess 2013-sse-websockets-json-bhakti
 
Easy rest service using PHP reflection api
Easy rest service using PHP reflection apiEasy rest service using PHP reflection api
Easy rest service using PHP reflection api
 
Леонід Кузьмін “Сам собі паблішер. Від сайту ігрової студії до універсального...
Леонід Кузьмін “Сам собі паблішер. Від сайту ігрової студії до універсального...Леонід Кузьмін “Сам собі паблішер. Від сайту ігрової студії до універсального...
Леонід Кузьмін “Сам собі паблішер. Від сайту ігрової студії до універсального...
 
Query DSL In Elasticsearch
Query DSL In ElasticsearchQuery DSL In Elasticsearch
Query DSL In Elasticsearch
 
REST API Recommendations
REST API RecommendationsREST API Recommendations
REST API Recommendations
 
Things I wish web graduates knew
Things I wish web graduates knewThings I wish web graduates knew
Things I wish web graduates knew
 
RESTful services with JAXB and JPA
RESTful services with JAXB and JPARESTful services with JAXB and JPA
RESTful services with JAXB and JPA
 
CORS and (in)security
CORS and (in)securityCORS and (in)security
CORS and (in)security
 

Similaire à Isomorphic react in real life

Hyperproductive JSF 2.0 @ JavaOne Brazil 2010
Hyperproductive JSF 2.0 @ JavaOne Brazil 2010Hyperproductive JSF 2.0 @ JavaOne Brazil 2010
Hyperproductive JSF 2.0 @ JavaOne Brazil 2010Arun Gupta
 
GraphConnect 2014 SF: From Zero to Graph in 120: Scale
GraphConnect 2014 SF: From Zero to Graph in 120: ScaleGraphConnect 2014 SF: From Zero to Graph in 120: Scale
GraphConnect 2014 SF: From Zero to Graph in 120: ScaleNeo4j
 
Java/Scala Lab: Борис Трофимов - Обжигающая Big Data.
Java/Scala Lab: Борис Трофимов - Обжигающая Big Data.Java/Scala Lab: Борис Трофимов - Обжигающая Big Data.
Java/Scala Lab: Борис Трофимов - Обжигающая Big Data.GeeksLab Odessa
 
Solr's Search Relevancy (Understand Solr's query debug)
Solr's Search Relevancy (Understand Solr's query debug)Solr's Search Relevancy (Understand Solr's query debug)
Solr's Search Relevancy (Understand Solr's query debug)Wongnai
 
Data models in Angular 1 & 2
Data models in Angular 1 & 2Data models in Angular 1 & 2
Data models in Angular 1 & 2Adam Klein
 
Phoenix + Reactで 社内システムを 密かに作ってる
Phoenix + Reactで 社内システムを 密かに作ってるPhoenix + Reactで 社内システムを 密かに作ってる
Phoenix + Reactで 社内システムを 密かに作ってるTakahiro Kobaru
 
Python & Django TTT
Python & Django TTTPython & Django TTT
Python & Django TTTkevinvw
 
Socket applications
Socket applicationsSocket applications
Socket applicationsJoão Moura
 
Spark IT 2011 - Simplified Web Development using Java Server Faces 2.0
Spark IT 2011 - Simplified Web Development using Java Server Faces 2.0Spark IT 2011 - Simplified Web Development using Java Server Faces 2.0
Spark IT 2011 - Simplified Web Development using Java Server Faces 2.0Arun Gupta
 
(SDD424) Simplifying Scalable Distributed Applications Using DynamoDB Streams...
(SDD424) Simplifying Scalable Distributed Applications Using DynamoDB Streams...(SDD424) Simplifying Scalable Distributed Applications Using DynamoDB Streams...
(SDD424) Simplifying Scalable Distributed Applications Using DynamoDB Streams...Amazon Web Services
 
Introducing DataWave
Introducing DataWaveIntroducing DataWave
Introducing DataWaveData Works MD
 
Using Apache Solr
Using Apache SolrUsing Apache Solr
Using Apache Solrpittaya
 
Embrace NoSQL and Eventual Consistency with Ripple
Embrace NoSQL and Eventual Consistency with RippleEmbrace NoSQL and Eventual Consistency with Ripple
Embrace NoSQL and Eventual Consistency with RippleSean Cribbs
 
How Rackspace Cloud Monitoring uses Cassandra
How Rackspace Cloud Monitoring uses CassandraHow Rackspace Cloud Monitoring uses Cassandra
How Rackspace Cloud Monitoring uses Cassandragdusbabek
 
An Introduction to Tornado
An Introduction to TornadoAn Introduction to Tornado
An Introduction to TornadoGavin Roy
 
MongoDB: Comparing WiredTiger In-Memory Engine to Redis
MongoDB: Comparing WiredTiger In-Memory Engine to RedisMongoDB: Comparing WiredTiger In-Memory Engine to Redis
MongoDB: Comparing WiredTiger In-Memory Engine to RedisJason Terpko
 
Intro to node and mongodb 1
Intro to node and mongodb   1Intro to node and mongodb   1
Intro to node and mongodb 1Mohammad Qureshi
 

Similaire à Isomorphic react in real life (20)

Hyperproductive JSF 2.0 @ JavaOne Brazil 2010
Hyperproductive JSF 2.0 @ JavaOne Brazil 2010Hyperproductive JSF 2.0 @ JavaOne Brazil 2010
Hyperproductive JSF 2.0 @ JavaOne Brazil 2010
 
GraphConnect 2014 SF: From Zero to Graph in 120: Scale
GraphConnect 2014 SF: From Zero to Graph in 120: ScaleGraphConnect 2014 SF: From Zero to Graph in 120: Scale
GraphConnect 2014 SF: From Zero to Graph in 120: Scale
 
Java/Scala Lab: Борис Трофимов - Обжигающая Big Data.
Java/Scala Lab: Борис Трофимов - Обжигающая Big Data.Java/Scala Lab: Борис Трофимов - Обжигающая Big Data.
Java/Scala Lab: Борис Трофимов - Обжигающая Big Data.
 
Solr's Search Relevancy (Understand Solr's query debug)
Solr's Search Relevancy (Understand Solr's query debug)Solr's Search Relevancy (Understand Solr's query debug)
Solr's Search Relevancy (Understand Solr's query debug)
 
Data models in Angular 1 & 2
Data models in Angular 1 & 2Data models in Angular 1 & 2
Data models in Angular 1 & 2
 
Phoenix + Reactで 社内システムを 密かに作ってる
Phoenix + Reactで 社内システムを 密かに作ってるPhoenix + Reactで 社内システムを 密かに作ってる
Phoenix + Reactで 社内システムを 密かに作ってる
 
Python & Django TTT
Python & Django TTTPython & Django TTT
Python & Django TTT
 
Socket applications
Socket applicationsSocket applications
Socket applications
 
Spark IT 2011 - Simplified Web Development using Java Server Faces 2.0
Spark IT 2011 - Simplified Web Development using Java Server Faces 2.0Spark IT 2011 - Simplified Web Development using Java Server Faces 2.0
Spark IT 2011 - Simplified Web Development using Java Server Faces 2.0
 
(SDD424) Simplifying Scalable Distributed Applications Using DynamoDB Streams...
(SDD424) Simplifying Scalable Distributed Applications Using DynamoDB Streams...(SDD424) Simplifying Scalable Distributed Applications Using DynamoDB Streams...
(SDD424) Simplifying Scalable Distributed Applications Using DynamoDB Streams...
 
Introducing DataWave
Introducing DataWaveIntroducing DataWave
Introducing DataWave
 
RxSwift to Combine
RxSwift to CombineRxSwift to Combine
RxSwift to Combine
 
Using Apache Solr
Using Apache SolrUsing Apache Solr
Using Apache Solr
 
Embrace NoSQL and Eventual Consistency with Ripple
Embrace NoSQL and Eventual Consistency with RippleEmbrace NoSQL and Eventual Consistency with Ripple
Embrace NoSQL and Eventual Consistency with Ripple
 
RxSwift to Combine
RxSwift to CombineRxSwift to Combine
RxSwift to Combine
 
08 ajax
08 ajax08 ajax
08 ajax
 
How Rackspace Cloud Monitoring uses Cassandra
How Rackspace Cloud Monitoring uses CassandraHow Rackspace Cloud Monitoring uses Cassandra
How Rackspace Cloud Monitoring uses Cassandra
 
An Introduction to Tornado
An Introduction to TornadoAn Introduction to Tornado
An Introduction to Tornado
 
MongoDB: Comparing WiredTiger In-Memory Engine to Redis
MongoDB: Comparing WiredTiger In-Memory Engine to RedisMongoDB: Comparing WiredTiger In-Memory Engine to Redis
MongoDB: Comparing WiredTiger In-Memory Engine to Redis
 
Intro to node and mongodb 1
Intro to node and mongodb   1Intro to node and mongodb   1
Intro to node and mongodb 1
 

Plus de React London Community

Meet Microplatforms. Stuart Harris, Red Badger
Meet Microplatforms. Stuart Harris, Red BadgerMeet Microplatforms. Stuart Harris, Red Badger
Meet Microplatforms. Stuart Harris, Red BadgerReact London Community
 
London React August - GraphQL at The Financial Times - Viktor Charypar
London React August - GraphQL at The Financial Times - Viktor CharyparLondon React August - GraphQL at The Financial Times - Viktor Charypar
London React August - GraphQL at The Financial Times - Viktor CharyparReact London Community
 
React London April- Fully functional: Central state is a great fit for React ...
React London April- Fully functional: Central state is a great fit for React ...React London April- Fully functional: Central state is a great fit for React ...
React London April- Fully functional: Central state is a great fit for React ...React London Community
 
London React April- r3t & a11y : This is for everyone , Shaun Dunne.
London React April-  r3t & a11y : This is for everyone , Shaun Dunne.London React April-  r3t & a11y : This is for everyone , Shaun Dunne.
London React April- r3t & a11y : This is for everyone , Shaun Dunne.React London Community
 
Building the worlds largest grocery shopping site with React
Building the worlds largest grocery shopping site with React Building the worlds largest grocery shopping site with React
Building the worlds largest grocery shopping site with React React London Community
 
Tools & tricks for testing React applications
Tools & tricks for testing React applications Tools & tricks for testing React applications
Tools & tricks for testing React applications React London Community
 

Plus de React London Community (7)

Meet Microplatforms. Stuart Harris, Red Badger
Meet Microplatforms. Stuart Harris, Red BadgerMeet Microplatforms. Stuart Harris, Red Badger
Meet Microplatforms. Stuart Harris, Red Badger
 
React for non techies
React for non techiesReact for non techies
React for non techies
 
London React August - GraphQL at The Financial Times - Viktor Charypar
London React August - GraphQL at The Financial Times - Viktor CharyparLondon React August - GraphQL at The Financial Times - Viktor Charypar
London React August - GraphQL at The Financial Times - Viktor Charypar
 
React London April- Fully functional: Central state is a great fit for React ...
React London April- Fully functional: Central state is a great fit for React ...React London April- Fully functional: Central state is a great fit for React ...
React London April- Fully functional: Central state is a great fit for React ...
 
London React April- r3t & a11y : This is for everyone , Shaun Dunne.
London React April-  r3t & a11y : This is for everyone , Shaun Dunne.London React April-  r3t & a11y : This is for everyone , Shaun Dunne.
London React April- r3t & a11y : This is for everyone , Shaun Dunne.
 
Building the worlds largest grocery shopping site with React
Building the worlds largest grocery shopping site with React Building the worlds largest grocery shopping site with React
Building the worlds largest grocery shopping site with React
 
Tools & tricks for testing React applications
Tools & tricks for testing React applications Tools & tricks for testing React applications
Tools & tricks for testing React applications
 

Dernier

WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure serviceWhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure servicePooja Nehwal
 
Maximizing Board Effectiveness 2024 Webinar.pptx
Maximizing Board Effectiveness 2024 Webinar.pptxMaximizing Board Effectiveness 2024 Webinar.pptx
Maximizing Board Effectiveness 2024 Webinar.pptxOnBoard
 
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountBreaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountPuma Security, LLC
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking MenDelhi Call girls
 
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024BookNet Canada
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking MenDelhi Call girls
 
SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024Scott Keck-Warren
 
Enhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for PartnersEnhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for PartnersThousandEyes
 
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024Results
 
Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101Paola De la Torre
 
Unblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesUnblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesSinan KOZAK
 
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | DelhiFULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhisoniya singh
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)Gabriella Davis
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreternaman860154
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024Rafal Los
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfEnterprise Knowledge
 
Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)Allon Mureinik
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdfhans926745
 
Understanding the Laravel MVC Architecture
Understanding the Laravel MVC ArchitectureUnderstanding the Laravel MVC Architecture
Understanding the Laravel MVC ArchitecturePixlogix Infotech
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationSafe Software
 

Dernier (20)

WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure serviceWhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
 
Maximizing Board Effectiveness 2024 Webinar.pptx
Maximizing Board Effectiveness 2024 Webinar.pptxMaximizing Board Effectiveness 2024 Webinar.pptx
Maximizing Board Effectiveness 2024 Webinar.pptx
 
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountBreaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path Mount
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
 
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
 
SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024
 
Enhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for PartnersEnhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for Partners
 
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024
 
Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101
 
Unblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesUnblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen Frames
 
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | DelhiFULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
 
Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
Understanding the Laravel MVC Architecture
Understanding the Laravel MVC ArchitectureUnderstanding the Laravel MVC Architecture
Understanding the Laravel MVC Architecture
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 

Isomorphic react in real life

  • 1. Isomorphic React In Real Life Jonas Ohlsson @pocketjoso
  • 2. Who am I? • Frond end developer at State • Performance, tooling and open source geek Isomorphic new site: http://alpha.state.com Penthouse, Critical Path CSS Generator: https://github.com/pocketjoso/penthouse
  • 3. This talk • Background: Isomorphism, React • State’s isomorphic React render flow - Data - Bootstrap - Stores
  • 4. Isomorphic JavaScript • Shared JS running both client and server • Performance, graceful degradation, Accessibility, SEO
  • 5. Flash of Client Side Rendering
  • 6. Isomorphic React • Easy - React.renderToString() • What about data fetching, re-using render state, stores
  • 7. React render flow (client) URL Render Fetch data Routing table
  • 8. React render flow (client) Render Fetch data Routing table URL props = { page: ExplorePage };
  • 9. React render flow (client) Render Fetch data Routing table URL props = { page: ExplorePage }; React.render( <App {…props} />, containerElement );
  • 10. React render flow (client) React Lifecycle method componentDidMount: http://facebook.github.io/react/docs/component-specs.html#mounting-componentdidmount Render Fetch data Routing table URL props = { page: ExplorePage }; React.render( <App {…props} />, containerElement ); componentDidMount
  • 11. React render flow (client) Render Fetch data Routing table URL props = { page: ExplorePage }; React.render( <App {…props} />, containerElement ); componentDidMount … $.get().then(result){ this.setState({data: result}); });
  • 12. React render flow (client) props = { page: ExplorePage }; can’t use on the server Render Fetch data Routing table URL React.render( <App {…props} />, containerElement ); componentDidMount … $.get().then(result){ this.setState({data: result}); });
  • 14. Isomorphic React render flow Make requests page asked for React. render/ renderToString( <App {…props} /> ); Pre fetch data Render Routing table URL props = { page: ExplorePage };
  • 15. Isomorphic React render flow Make requests page asked for React. render/ renderToString( <App {…props} /> ); Pre fetch data Render Routing table URL props = { page: ExplorePage };
  • 16. Pre data fetching React Statics component property: http://facebook.github.io/react/docs/component-specs.html#statics
  • 17. Isomorphic React render flow data = ExplorePage. requestForProps(); Routing table URL Pre fetch data Render React. render/ renderToString( <App {…props} /> ); props = { page: ExplorePage };
  • 18. Isomorphic React render flow data = ExplorePage. requestForProps(); props.data = data; Routing table URL Pre fetch data Render React. render/ renderToString( <App {…props} /> ); props = { page: ExplorePage };
  • 19. Bootstrapping render context React.render( <App {…props}/> ); Server Client React.renderToString( <App {…props}/> );
  • 21. Flux • Data changing over time (during a session) • Cached data Should I use Flux? https://medium.com/@dan_abramov/the-case-for-flux-379b7d1982c6
  • 22. Flux • Data changing over time (during a session) • Cached data Should I use Flux? https://medium.com/@dan_abramov/the-case-for-flux-379b7d1982c6
  • 24. Snapshot / restore Add snapshots to render context JSON Restore on client
  • 25. Store reset • Stores are singletons • Prevent data leaking
  • 26. Stores listening for request data Request response data Distribute StoresNormalise
  • 27. Stores listening for request data Request response data Distribute StoresNormalise statement : { creator : { id : 12312, name: Jonas … }, id: 199, text: ‘This is …’ }
  • 28. Stores listening for request data Normalize data: https://github.com/gaearon/normalizr Request response data Distribute Stores statement : { creator : { id : 12312, name: Jonas … }, id: 199, text: ‘This is …’ } entities: { users: { 12312: { name: Jonas } }, statements: { 199: { text: ‘This is …’ creator: 12312 } } } Normalise
  • 29. Stores listening for request data Request response data Distribute StoresNormalise trigger(users) trigger(statements) statement : { creator : { id : 12312, name: Jonas … }, id: 199, text: ‘This is …’ } entities: { users: { 12312: { name: Jonas } }, statements: { 199: { text: ‘This is …’ creator: 12312 } } }
  • 30. Stores listening for request data UserStore = { listenTo( userProvider, function(users){ // merge new users // to store’s data } } Request response data Distribute Stores statement : { creator : { id : 12312, name: Jonas … }, id: 199, text: ‘This is …’ } Normalise trigger(users) trigger(statements) entities: { users: { 12312: { name: Jonas } }, statements: { 199: { text: ‘This is …’ creator: 12312 } } }
  • 31. Full Render sequence: Server • (Start stores when booting server) • Execute requests via requestForProps for Page • Distribute data to Stores (if not Automatic) • React.RenderToString() • Snapshot Stores, create render context JSON • Send HTML to client • Reset Stores
  • 32. Full Render sequence: Client • Parse render context JSON • Start stores, and restore via snapshots • React.render, with props from render context
  • 33. Summary • Fetch data before rendering React • Statics to co-locate data requests with component logic • Bootstrap server render context • Snapshot, restore and reset Stores • Optional: Auto distribute request data to Stores
  • 34. Questions? @pocketjoso Blog post based on this talk http://jonassebastianohlsson.com/blog/2015/03/24/isomorphic-react-in-real-life/

Notes de l'éditeur

  1. PRELOAD NSFW (/explore and /u/timbl) Hello Awesome time. Jonas - ISO REACT Thank RedBadger, Facebook, React 0:30
  2. Penthouse
  3. Developer Evangelist - Web
  4. Easy! ASK: Raise of hands: How many of you use React isomorphically? We found it hard - this speech! 0:45 (4:00)
  5. (5:30)
  6. Router - same Render - same (<html> etc added) Data
  7. Data - co locate with component logic routing table - far way from component (6:30)
  8. provider - Abstraction of API - works both server and client Sync on server
  9. Plonk into Render - Full flow client/server EXCEPT 1:00 (8:30)
  10. Boot render client - listeners
  11. context -> Full ISO flow EXCEPT FOR
  12. Actions - Stores - Views (Pages) We wondered - Stores on the server etc? SOLUTION
  13. No raw data
  14. Because Singletons; booted at start of app Stores containing user specific data (client - auth)
  15. one Store per resource type Nesting - bad for Flux
  16. Split by Type Reference by ID
  17. This setup: requestForProps -> Stores AUTO
  18. Possible - not too complex. Add: Store/Page/Component/Route - write once - isomorphically.
  19. Possible - not too complex. Add: Store/Page/Component/Route - write once - isomorphically.
  20. Possible - not too complex. Add: Store/Page/Component/Route - write once - isomorphically.