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
 

Dernier

Blepharitis inflammation of eyelid symptoms cause everything included along w...
Blepharitis inflammation of eyelid symptoms cause everything included along w...Blepharitis inflammation of eyelid symptoms cause everything included along w...
Blepharitis inflammation of eyelid symptoms cause everything included along w...Excelmac1
 
SCM Symposium PPT Format Customer loyalty is predi
SCM Symposium PPT Format Customer loyalty is prediSCM Symposium PPT Format Customer loyalty is predi
SCM Symposium PPT Format Customer loyalty is predieusebiomeyer
 
Intellectual property rightsand its types.pptx
Intellectual property rightsand its types.pptxIntellectual property rightsand its types.pptx
Intellectual property rightsand its types.pptxBipin Adhikari
 
Call Girls Near The Suryaa Hotel New Delhi 9873777170
Call Girls Near The Suryaa Hotel New Delhi 9873777170Call Girls Near The Suryaa Hotel New Delhi 9873777170
Call Girls Near The Suryaa Hotel New Delhi 9873777170Sonam Pathan
 
Git and Github workshop GDSC MLRITM
Git and Github  workshop GDSC MLRITMGit and Github  workshop GDSC MLRITM
Git and Github workshop GDSC MLRITMgdsc13
 
Top 10 Interactive Website Design Trends in 2024.pptx
Top 10 Interactive Website Design Trends in 2024.pptxTop 10 Interactive Website Design Trends in 2024.pptx
Top 10 Interactive Website Design Trends in 2024.pptxDyna Gilbert
 
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书rnrncn29
 
Magic exist by Marta Loveguard - presentation.pptx
Magic exist by Marta Loveguard - presentation.pptxMagic exist by Marta Loveguard - presentation.pptx
Magic exist by Marta Loveguard - presentation.pptxMartaLoveguard
 
Elevate Your Business with Our IT Expertise in New Orleans
Elevate Your Business with Our IT Expertise in New OrleansElevate Your Business with Our IT Expertise in New Orleans
Elevate Your Business with Our IT Expertise in New Orleanscorenetworkseo
 
Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作
Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作
Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作ys8omjxb
 
Call Girls South Delhi Delhi reach out to us at ☎ 9711199012
Call Girls South Delhi Delhi reach out to us at ☎ 9711199012Call Girls South Delhi Delhi reach out to us at ☎ 9711199012
Call Girls South Delhi Delhi reach out to us at ☎ 9711199012rehmti665
 
定制(Lincoln毕业证书)新西兰林肯大学毕业证成绩单原版一比一
定制(Lincoln毕业证书)新西兰林肯大学毕业证成绩单原版一比一定制(Lincoln毕业证书)新西兰林肯大学毕业证成绩单原版一比一
定制(Lincoln毕业证书)新西兰林肯大学毕业证成绩单原版一比一Fs
 
定制(Management毕业证书)新加坡管理大学毕业证成绩单原版一比一
定制(Management毕业证书)新加坡管理大学毕业证成绩单原版一比一定制(Management毕业证书)新加坡管理大学毕业证成绩单原版一比一
定制(Management毕业证书)新加坡管理大学毕业证成绩单原版一比一Fs
 
定制(AUT毕业证书)新西兰奥克兰理工大学毕业证成绩单原版一比一
定制(AUT毕业证书)新西兰奥克兰理工大学毕业证成绩单原版一比一定制(AUT毕业证书)新西兰奥克兰理工大学毕业证成绩单原版一比一
定制(AUT毕业证书)新西兰奥克兰理工大学毕业证成绩单原版一比一Fs
 
A Good Girl's Guide to Murder (A Good Girl's Guide to Murder, #1)
A Good Girl's Guide to Murder (A Good Girl's Guide to Murder, #1)A Good Girl's Guide to Murder (A Good Girl's Guide to Murder, #1)
A Good Girl's Guide to Murder (A Good Girl's Guide to Murder, #1)Christopher H Felton
 
Contact Rya Baby for Call Girls New Delhi
Contact Rya Baby for Call Girls New DelhiContact Rya Baby for Call Girls New Delhi
Contact Rya Baby for Call Girls New Delhimiss dipika
 
Q4-1-Illustrating-Hypothesis-Testing.pptx
Q4-1-Illustrating-Hypothesis-Testing.pptxQ4-1-Illustrating-Hypothesis-Testing.pptx
Q4-1-Illustrating-Hypothesis-Testing.pptxeditsforyah
 
Font Performance - NYC WebPerf Meetup April '24
Font Performance - NYC WebPerf Meetup April '24Font Performance - NYC WebPerf Meetup April '24
Font Performance - NYC WebPerf Meetup April '24Paul Calvano
 

Dernier (20)

young call girls in Uttam Nagar🔝 9953056974 🔝 Delhi escort Service
young call girls in Uttam Nagar🔝 9953056974 🔝 Delhi escort Serviceyoung call girls in Uttam Nagar🔝 9953056974 🔝 Delhi escort Service
young call girls in Uttam Nagar🔝 9953056974 🔝 Delhi escort Service
 
Blepharitis inflammation of eyelid symptoms cause everything included along w...
Blepharitis inflammation of eyelid symptoms cause everything included along w...Blepharitis inflammation of eyelid symptoms cause everything included along w...
Blepharitis inflammation of eyelid symptoms cause everything included along w...
 
SCM Symposium PPT Format Customer loyalty is predi
SCM Symposium PPT Format Customer loyalty is prediSCM Symposium PPT Format Customer loyalty is predi
SCM Symposium PPT Format Customer loyalty is predi
 
Model Call Girl in Jamuna Vihar Delhi reach out to us at 🔝9953056974🔝
Model Call Girl in  Jamuna Vihar Delhi reach out to us at 🔝9953056974🔝Model Call Girl in  Jamuna Vihar Delhi reach out to us at 🔝9953056974🔝
Model Call Girl in Jamuna Vihar Delhi reach out to us at 🔝9953056974🔝
 
Intellectual property rightsand its types.pptx
Intellectual property rightsand its types.pptxIntellectual property rightsand its types.pptx
Intellectual property rightsand its types.pptx
 
Call Girls Near The Suryaa Hotel New Delhi 9873777170
Call Girls Near The Suryaa Hotel New Delhi 9873777170Call Girls Near The Suryaa Hotel New Delhi 9873777170
Call Girls Near The Suryaa Hotel New Delhi 9873777170
 
Git and Github workshop GDSC MLRITM
Git and Github  workshop GDSC MLRITMGit and Github  workshop GDSC MLRITM
Git and Github workshop GDSC MLRITM
 
Top 10 Interactive Website Design Trends in 2024.pptx
Top 10 Interactive Website Design Trends in 2024.pptxTop 10 Interactive Website Design Trends in 2024.pptx
Top 10 Interactive Website Design Trends in 2024.pptx
 
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
 
Magic exist by Marta Loveguard - presentation.pptx
Magic exist by Marta Loveguard - presentation.pptxMagic exist by Marta Loveguard - presentation.pptx
Magic exist by Marta Loveguard - presentation.pptx
 
Elevate Your Business with Our IT Expertise in New Orleans
Elevate Your Business with Our IT Expertise in New OrleansElevate Your Business with Our IT Expertise in New Orleans
Elevate Your Business with Our IT Expertise in New Orleans
 
Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作
Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作
Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作
 
Call Girls South Delhi Delhi reach out to us at ☎ 9711199012
Call Girls South Delhi Delhi reach out to us at ☎ 9711199012Call Girls South Delhi Delhi reach out to us at ☎ 9711199012
Call Girls South Delhi Delhi reach out to us at ☎ 9711199012
 
定制(Lincoln毕业证书)新西兰林肯大学毕业证成绩单原版一比一
定制(Lincoln毕业证书)新西兰林肯大学毕业证成绩单原版一比一定制(Lincoln毕业证书)新西兰林肯大学毕业证成绩单原版一比一
定制(Lincoln毕业证书)新西兰林肯大学毕业证成绩单原版一比一
 
定制(Management毕业证书)新加坡管理大学毕业证成绩单原版一比一
定制(Management毕业证书)新加坡管理大学毕业证成绩单原版一比一定制(Management毕业证书)新加坡管理大学毕业证成绩单原版一比一
定制(Management毕业证书)新加坡管理大学毕业证成绩单原版一比一
 
定制(AUT毕业证书)新西兰奥克兰理工大学毕业证成绩单原版一比一
定制(AUT毕业证书)新西兰奥克兰理工大学毕业证成绩单原版一比一定制(AUT毕业证书)新西兰奥克兰理工大学毕业证成绩单原版一比一
定制(AUT毕业证书)新西兰奥克兰理工大学毕业证成绩单原版一比一
 
A Good Girl's Guide to Murder (A Good Girl's Guide to Murder, #1)
A Good Girl's Guide to Murder (A Good Girl's Guide to Murder, #1)A Good Girl's Guide to Murder (A Good Girl's Guide to Murder, #1)
A Good Girl's Guide to Murder (A Good Girl's Guide to Murder, #1)
 
Contact Rya Baby for Call Girls New Delhi
Contact Rya Baby for Call Girls New DelhiContact Rya Baby for Call Girls New Delhi
Contact Rya Baby for Call Girls New Delhi
 
Q4-1-Illustrating-Hypothesis-Testing.pptx
Q4-1-Illustrating-Hypothesis-Testing.pptxQ4-1-Illustrating-Hypothesis-Testing.pptx
Q4-1-Illustrating-Hypothesis-Testing.pptx
 
Font Performance - NYC WebPerf Meetup April '24
Font Performance - NYC WebPerf Meetup April '24Font Performance - NYC WebPerf Meetup April '24
Font Performance - NYC WebPerf Meetup April '24
 

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.