Submit Search
Upload
Isomorphic js shared js with react.js
•
1 like
•
433 views
Sasha Snig
Follow
Isomorphic js? shared js with react.js and Drupal.
Read less
Read more
Software
Report
Share
Report
Share
1 of 75
Download now
Download to read offline
Recommended
Angular js introduction
Angular js introduction
Praveen Gubbala
Introduction to mean stack
Introduction to mean stack
Praveen Gubbala
Mean PPT
Mean PPT
Harendra Singh Bisht
Mean full stack development
Mean full stack development
Scott Lee
FULL stack -> MEAN stack
FULL stack -> MEAN stack
Ashok Raj
Introduction to MERN Stack
Introduction to MERN Stack
Surya937648
Css,javascript,php,mysql
Css,javascript,php,mysql
vurimi prasad
Introduction to JavaScript Full Stack
Introduction to JavaScript Full Stack
Mindfire Solutions
Recommended
Angular js introduction
Angular js introduction
Praveen Gubbala
Introduction to mean stack
Introduction to mean stack
Praveen Gubbala
Mean PPT
Mean PPT
Harendra Singh Bisht
Mean full stack development
Mean full stack development
Scott Lee
FULL stack -> MEAN stack
FULL stack -> MEAN stack
Ashok Raj
Introduction to MERN Stack
Introduction to MERN Stack
Surya937648
Css,javascript,php,mysql
Css,javascript,php,mysql
vurimi prasad
Introduction to JavaScript Full Stack
Introduction to JavaScript Full Stack
Mindfire Solutions
Full stack JavaScript - the folly of choice
Full stack JavaScript - the folly of choice
FDConf
AngularJS + NancyFx + MongoDB = The best trio for ultimate SPA by Bojan Velja...
AngularJS + NancyFx + MongoDB = The best trio for ultimate SPA by Bojan Velja...
Bojan Veljanovski
Mean Stack - An Overview
Mean Stack - An Overview
Naveen Pete
Introduction to the MEAN stack
Introduction to the MEAN stack
Yoann Gotthilf
Modern web application devlopment workflow
Modern web application devlopment workflow
Hamdi Hmidi
Get MEAN! Node.js and the MEAN stack
Get MEAN! Node.js and the MEAN stack
Nicholas McClay
Angular 2 vs React
Angular 2 vs React
Iran Reyes Fleitas
Cloud App Develop
Cloud App Develop
Fin Chen
One ASP.NET
One ASP.NET
Lohith Goudagere Nagaraj
Keystone.js 101
Keystone.js 101
Alexander Roche
Next.js in production by Jasdeep Lalli
Next.js in production by Jasdeep Lalli
React London 2017
Decoupled (Headless) Drupal
Decoupled (Headless) Drupal
Daniel Stout
MEAN Stack
MEAN Stack
RoshanTak1
MEAN stack
MEAN stack
Iryney Baran
Rapid Application Development with MEAN Stack
Rapid Application Development with MEAN Stack
Avinash Kaza
Mean Stack
Mean Stack
Shravan Vishwakarma
Future development stack ~ MeteorJS
Future development stack ~ MeteorJS
Victor Stan
Host, deploy & scale Blazor Server Apps
Host, deploy & scale Blazor Server Apps
Jose Javier Columbie
MEAN Stack
MEAN Stack
Krishnaprasad k
Mongodb open data day 2014
Mongodb open data day 2014
David Green
7 Redux challenges
7 Redux challenges
reactima
react js for web development.pdf
react js for web development.pdf
Mars Devs
More Related Content
What's hot
Full stack JavaScript - the folly of choice
Full stack JavaScript - the folly of choice
FDConf
AngularJS + NancyFx + MongoDB = The best trio for ultimate SPA by Bojan Velja...
AngularJS + NancyFx + MongoDB = The best trio for ultimate SPA by Bojan Velja...
Bojan Veljanovski
Mean Stack - An Overview
Mean Stack - An Overview
Naveen Pete
Introduction to the MEAN stack
Introduction to the MEAN stack
Yoann Gotthilf
Modern web application devlopment workflow
Modern web application devlopment workflow
Hamdi Hmidi
Get MEAN! Node.js and the MEAN stack
Get MEAN! Node.js and the MEAN stack
Nicholas McClay
Angular 2 vs React
Angular 2 vs React
Iran Reyes Fleitas
Cloud App Develop
Cloud App Develop
Fin Chen
One ASP.NET
One ASP.NET
Lohith Goudagere Nagaraj
Keystone.js 101
Keystone.js 101
Alexander Roche
Next.js in production by Jasdeep Lalli
Next.js in production by Jasdeep Lalli
React London 2017
Decoupled (Headless) Drupal
Decoupled (Headless) Drupal
Daniel Stout
MEAN Stack
MEAN Stack
RoshanTak1
MEAN stack
MEAN stack
Iryney Baran
Rapid Application Development with MEAN Stack
Rapid Application Development with MEAN Stack
Avinash Kaza
Mean Stack
Mean Stack
Shravan Vishwakarma
Future development stack ~ MeteorJS
Future development stack ~ MeteorJS
Victor Stan
Host, deploy & scale Blazor Server Apps
Host, deploy & scale Blazor Server Apps
Jose Javier Columbie
MEAN Stack
MEAN Stack
Krishnaprasad k
Mongodb open data day 2014
Mongodb open data day 2014
David Green
What's hot
(20)
Full stack JavaScript - the folly of choice
Full stack JavaScript - the folly of choice
AngularJS + NancyFx + MongoDB = The best trio for ultimate SPA by Bojan Velja...
AngularJS + NancyFx + MongoDB = The best trio for ultimate SPA by Bojan Velja...
Mean Stack - An Overview
Mean Stack - An Overview
Introduction to the MEAN stack
Introduction to the MEAN stack
Modern web application devlopment workflow
Modern web application devlopment workflow
Get MEAN! Node.js and the MEAN stack
Get MEAN! Node.js and the MEAN stack
Angular 2 vs React
Angular 2 vs React
Cloud App Develop
Cloud App Develop
One ASP.NET
One ASP.NET
Keystone.js 101
Keystone.js 101
Next.js in production by Jasdeep Lalli
Next.js in production by Jasdeep Lalli
Decoupled (Headless) Drupal
Decoupled (Headless) Drupal
MEAN Stack
MEAN Stack
MEAN stack
MEAN stack
Rapid Application Development with MEAN Stack
Rapid Application Development with MEAN Stack
Mean Stack
Mean Stack
Future development stack ~ MeteorJS
Future development stack ~ MeteorJS
Host, deploy & scale Blazor Server Apps
Host, deploy & scale Blazor Server Apps
MEAN Stack
MEAN Stack
Mongodb open data day 2014
Mongodb open data day 2014
Similar to Isomorphic js shared js with react.js
7 Redux challenges
7 Redux challenges
reactima
react js for web development.pdf
react js for web development.pdf
Mars Devs
Backend Development Bootcamp - Node [Online & Offline] In Bangla
Backend Development Bootcamp - Node [Online & Offline] In Bangla
Stack Learner
What is mean stack?
What is mean stack?
Rishabh Saxena
Reactjs Basics
Reactjs Basics
Hamid Ghorbani
Oleg Bogut - Decoupled Drupal: how to build stable solution with JSON:API, Re...
Oleg Bogut - Decoupled Drupal: how to build stable solution with JSON:API, Re...
DrupalCamp Kyiv
Frontend Development Bootcamp - React [Online & Offline] In Bangla
Frontend Development Bootcamp - React [Online & Offline] In Bangla
Stack Learner
Js frameworks
Js frameworks
ParagKhalas
Isomorphic JavaScript: #DevBeat Master Class
Isomorphic JavaScript: #DevBeat Master Class
Spike Brehm
React Js vs Node Js_ Which Framework to Choose for Your Next Web Application
React Js vs Node Js_ Which Framework to Choose for Your Next Web Application
adityakumar2080
Node Js, AngularJs and Express Js Tutorial
Node Js, AngularJs and Express Js Tutorial
PHP Support
Integrating React.js Into a PHP Application: Dutch PHP 2019
Integrating React.js Into a PHP Application: Dutch PHP 2019
Andrew Rota
Beginning MEAN Stack
Beginning MEAN Stack
Rob Davarnia
Combining react with node js to develop successful full stack web applications
Combining react with node js to develop successful full stack web applications
Katy Slemon
9 Best JavaScript Frameworks To Choose
9 Best JavaScript Frameworks To Choose
Albiorix Technology
AngularJS vs NodeJS vs ReactJS Which One Would You Choose.pdf
AngularJS vs NodeJS vs ReactJS Which One Would You Choose.pdf
SatawareTechnologies2
Explore the Benefits of Node.js and React Together in Full-Stack Web Development
Explore the Benefits of Node.js and React Together in Full-Stack Web Development
Inexture Solutions
React.js alternatives modern web frameworks and lightweight java script libr...
React.js alternatives modern web frameworks and lightweight java script libr...
Katy Slemon
AngularJS vs NodeJS vs ReactJS Which One Would You Choose.pdf
AngularJS vs NodeJS vs ReactJS Which One Would You Choose.pdf
iDataScientists
Node.js Web Development .pdf
Node.js Web Development .pdf
Abanti Aazmin
Similar to Isomorphic js shared js with react.js
(20)
7 Redux challenges
7 Redux challenges
react js for web development.pdf
react js for web development.pdf
Backend Development Bootcamp - Node [Online & Offline] In Bangla
Backend Development Bootcamp - Node [Online & Offline] In Bangla
What is mean stack?
What is mean stack?
Reactjs Basics
Reactjs Basics
Oleg Bogut - Decoupled Drupal: how to build stable solution with JSON:API, Re...
Oleg Bogut - Decoupled Drupal: how to build stable solution with JSON:API, Re...
Frontend Development Bootcamp - React [Online & Offline] In Bangla
Frontend Development Bootcamp - React [Online & Offline] In Bangla
Js frameworks
Js frameworks
Isomorphic JavaScript: #DevBeat Master Class
Isomorphic JavaScript: #DevBeat Master Class
React Js vs Node Js_ Which Framework to Choose for Your Next Web Application
React Js vs Node Js_ Which Framework to Choose for Your Next Web Application
Node Js, AngularJs and Express Js Tutorial
Node Js, AngularJs and Express Js Tutorial
Integrating React.js Into a PHP Application: Dutch PHP 2019
Integrating React.js Into a PHP Application: Dutch PHP 2019
Beginning MEAN Stack
Beginning MEAN Stack
Combining react with node js to develop successful full stack web applications
Combining react with node js to develop successful full stack web applications
9 Best JavaScript Frameworks To Choose
9 Best JavaScript Frameworks To Choose
AngularJS vs NodeJS vs ReactJS Which One Would You Choose.pdf
AngularJS vs NodeJS vs ReactJS Which One Would You Choose.pdf
Explore the Benefits of Node.js and React Together in Full-Stack Web Development
Explore the Benefits of Node.js and React Together in Full-Stack Web Development
React.js alternatives modern web frameworks and lightweight java script libr...
React.js alternatives modern web frameworks and lightweight java script libr...
AngularJS vs NodeJS vs ReactJS Which One Would You Choose.pdf
AngularJS vs NodeJS vs ReactJS Which One Would You Choose.pdf
Node.js Web Development .pdf
Node.js Web Development .pdf
Recently uploaded
Salesforce Certified Field Service Consultant
Salesforce Certified Field Service Consultant
AxelRicardoTrocheRiq
Professional Resume Template for Software Developers
Professional Resume Template for Software Developers
Vinodh Ram
Alluxio Monthly Webinar | Cloud-Native Model Training on Distributed Data
Alluxio Monthly Webinar | Cloud-Native Model Training on Distributed Data
Alluxio, Inc.
英国UN学位证,北安普顿大学毕业证书1:1制作
英国UN学位证,北安普顿大学毕业证书1:1制作
qr0udbr0
Recruitment Management Software Benefits (Infographic)
Recruitment Management Software Benefits (Infographic)
Hr365.us smith
Cloud Data Center Network Construction - IEEE
Cloud Data Center Network Construction - IEEE
VICTOR MAESTRE RAMIREZ
Unveiling Design Patterns: A Visual Guide with UML Diagrams
Unveiling Design Patterns: A Visual Guide with UML Diagrams
Ahmed Mohamed
KnowAPIs-UnknownPerf-jaxMainz-2024 (1).pptx
KnowAPIs-UnknownPerf-jaxMainz-2024 (1).pptx
Tier1 app
Implementing Zero Trust strategy with Azure
Implementing Zero Trust strategy with Azure
Dinusha Kumarasiri
办理学位证(UQ文凭证书)昆士兰大学毕业证成绩单原版一模一样
办理学位证(UQ文凭证书)昆士兰大学毕业证成绩单原版一模一样
umasea
Software Project Health Check: Best Practices and Techniques for Your Product...
Software Project Health Check: Best Practices and Techniques for Your Product...
Velvetech LLC
Intelligent Home Wi-Fi Solutions | ThinkPalm
Intelligent Home Wi-Fi Solutions | ThinkPalm
Sujith Sukumaran
chapter--4-software-project-planning.ppt
chapter--4-software-project-planning.ppt
kotipi9215
The Evolution of Karaoke From Analog to App.pdf
The Evolution of Karaoke From Analog to App.pdf
Power Karaoke
Building a General PDE Solving Framework with Symbolic-Numeric Scientific Mac...
Building a General PDE Solving Framework with Symbolic-Numeric Scientific Mac...
stazi3110
Hot Sexy call girls in Patel Nagar🔝 9953056974 🔝 escort Service
Hot Sexy call girls in Patel Nagar🔝 9953056974 🔝 escort Service
9953056974 Low Rate Call Girls In Saket, Delhi NCR
SuccessFactors 1H 2024 Release - Sneak-Peek by Deloitte Germany
SuccessFactors 1H 2024 Release - Sneak-Peek by Deloitte Germany
Christoph Pohl
Russian Call Girls in Karol Bagh Aasnvi ➡️ 8264348440 💋📞 Independent Escort S...
Russian Call Girls in Karol Bagh Aasnvi ➡️ 8264348440 💋📞 Independent Escort S...
soniya singh
Adobe Marketo Engage Deep Dives: Using Webhooks to Transfer Data
Adobe Marketo Engage Deep Dives: Using Webhooks to Transfer Data
BradBedford3
Call Us🔝>༒+91-9711147426⇛Call In girls karol bagh (Delhi)
Call Us🔝>༒+91-9711147426⇛Call In girls karol bagh (Delhi)
jennyeacort
Recently uploaded
(20)
Salesforce Certified Field Service Consultant
Salesforce Certified Field Service Consultant
Professional Resume Template for Software Developers
Professional Resume Template for Software Developers
Alluxio Monthly Webinar | Cloud-Native Model Training on Distributed Data
Alluxio Monthly Webinar | Cloud-Native Model Training on Distributed Data
英国UN学位证,北安普顿大学毕业证书1:1制作
英国UN学位证,北安普顿大学毕业证书1:1制作
Recruitment Management Software Benefits (Infographic)
Recruitment Management Software Benefits (Infographic)
Cloud Data Center Network Construction - IEEE
Cloud Data Center Network Construction - IEEE
Unveiling Design Patterns: A Visual Guide with UML Diagrams
Unveiling Design Patterns: A Visual Guide with UML Diagrams
KnowAPIs-UnknownPerf-jaxMainz-2024 (1).pptx
KnowAPIs-UnknownPerf-jaxMainz-2024 (1).pptx
Implementing Zero Trust strategy with Azure
Implementing Zero Trust strategy with Azure
办理学位证(UQ文凭证书)昆士兰大学毕业证成绩单原版一模一样
办理学位证(UQ文凭证书)昆士兰大学毕业证成绩单原版一模一样
Software Project Health Check: Best Practices and Techniques for Your Product...
Software Project Health Check: Best Practices and Techniques for Your Product...
Intelligent Home Wi-Fi Solutions | ThinkPalm
Intelligent Home Wi-Fi Solutions | ThinkPalm
chapter--4-software-project-planning.ppt
chapter--4-software-project-planning.ppt
The Evolution of Karaoke From Analog to App.pdf
The Evolution of Karaoke From Analog to App.pdf
Building a General PDE Solving Framework with Symbolic-Numeric Scientific Mac...
Building a General PDE Solving Framework with Symbolic-Numeric Scientific Mac...
Hot Sexy call girls in Patel Nagar🔝 9953056974 🔝 escort Service
Hot Sexy call girls in Patel Nagar🔝 9953056974 🔝 escort Service
SuccessFactors 1H 2024 Release - Sneak-Peek by Deloitte Germany
SuccessFactors 1H 2024 Release - Sneak-Peek by Deloitte Germany
Russian Call Girls in Karol Bagh Aasnvi ➡️ 8264348440 💋📞 Independent Escort S...
Russian Call Girls in Karol Bagh Aasnvi ➡️ 8264348440 💋📞 Independent Escort S...
Adobe Marketo Engage Deep Dives: Using Webhooks to Transfer Data
Adobe Marketo Engage Deep Dives: Using Webhooks to Transfer Data
Call Us🔝>༒+91-9711147426⇛Call In girls karol bagh (Delhi)
Call Us🔝>༒+91-9711147426⇛Call In girls karol bagh (Delhi)
Isomorphic js shared js with react.js
1.
Isomorphic js? Shared
js with react.js Bondarenko Oleksander (aka Snig)
2.
Application architecture
3.
Code and component re-use
4.
Rapid Development & Handling large code- bases
5.
Drupal and React.js
6.
Drupal hook_menu controller Browser JS HTML
7.
Drupal hook_menu controller Browser JS HTML AJAX
8.
Drupal hook_menu controller Browser JS
9.
10.
About me Bondarenko Oleksandr
(aka SNIG): 5+ years exp on web development. 4+ years on drupal External consultant, Team lead (of one part drupal developers), front-end optimisation.
11.
loadbalancer webserver mySQL memcached Node.js
services
12.
webserver
13.
PHP templates
14.
Duplication and only some
Code reuse
15.
Small components over big
controllers
16.
17.
18.
19.
20.
Self contained
21.
Can be used everywhere
22.
Can be addressed and
rendered separately
23.
JS is part
of the component
24.
CSS can be
part of the component
25.
Share code between server
and client
26.
Share code between server
and client
27.
React.js
28.
JavaScript UI Library
29.
Virtual DOM
30.
Many small, self contained,
reusable components
31.
32.
33.
Getting the data
in there
34.
Drupal Backend React Frontend
35.
Drupal Backend React Frontend
36.
Drupal Backend React Frontend
37.
Drupal Backend React Frontend
38.
Problematic
39.
Remember
40.
Self-contained
41.
Reusable
42.
Drupal Backend React Frontend React Frontend Drupal Backend
43.
Drupal Backend React Frontend
44.
Drupal Backend React Frontend
45.
Overfetching
46.
Under Fetching
47.
Solutions
48.
Flux Datastores
49.
Drupal Backend React Frontend
50.
GraphQL
51.
“I even wonder
if GraphQL could be the basis for a future version of Views.”
52.
Server side rendering
53.
SEO
54.
Better user experience
55.
Several approaches
56.
V8js
57.
58.
NodeJS proxy
59.
60.
NodeJS service
61.
62.
Bundling
63.
64.
65.
Conclusion?
66.
Enables developers to
only focus on their components
67.
Rapid prototyping
68.
Easier Refactoring
69.
Easy re-using of components
70.
Error Handling
71.
Load components asynchronously
72.
Frontend and backend
are part of the same application
73.
Ok, it’s all
about Isomorphic js
74.
75.
Questions?
Download now