SlideShare a Scribd company logo
Isomorphic js? Shared js
with react.js
Bondarenko Oleksander (aka Snig)
Application architecture
Code and
component
re-use
Rapid
Development
&
Handling
large code-
bases
Drupal and React.js
Drupal
hook_menu
controller
Browser
JS
HTML
Drupal
hook_menu
controller
Browser
JS
HTML
AJAX
Drupal
hook_menu
controller
Browser
JS
Isomorphic js  shared js with react.js
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.
loadbalancer
webserver
mySQL memcached Node.js services
webserver
PHP templates
Duplication and only
some Code reuse
Small components
over big controllers
Isomorphic js  shared js with react.js
Isomorphic js  shared js with react.js
Isomorphic js  shared js with react.js
Isomorphic js  shared js with react.js
Self contained
Can be used
everywhere
Can be addressed
and rendered
separately
JS is part of the
component
CSS can be part of
the component
Share code between
server and client
Share code between
server and client
React.js
JavaScript UI Library
Virtual DOM
Many small, self
contained, reusable
components
Isomorphic js  shared js with react.js
Isomorphic js  shared js with react.js
Getting the data in there
Drupal
Backend
React
Frontend
Drupal
Backend
React
Frontend
Drupal
Backend
React
Frontend
Drupal
Backend
React
Frontend
Problematic
Remember
Self-contained
Reusable
Drupal
Backend
React
Frontend
React
Frontend
Drupal
Backend
Drupal
Backend
React
Frontend
Drupal
Backend
React
Frontend
Overfetching
Under Fetching
Solutions
Flux Datastores
Drupal
Backend
React
Frontend
GraphQL
“I even wonder if GraphQL could
be the basis for a future version
of Views.”
Server side rendering
SEO
Better user experience
Several approaches
V8js
Isomorphic js  shared js with react.js
NodeJS proxy
Isomorphic js  shared js with react.js
NodeJS service
Isomorphic js  shared js with react.js
Bundling
Isomorphic js  shared js with react.js
Isomorphic js  shared js with react.js
Conclusion?
Enables developers to only
focus on their components
Rapid prototyping
Easier Refactoring
Easy re-using of
components
Error Handling
Load components
asynchronously
Frontend and backend are
part of the same
application
Ok, it’s all about
Isomorphic js
Isomorphic js  shared js with react.js
Questions?
Ad

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 (20)

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
 
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
 
Cloud App Develop
Cloud App Develop
Fin Chen
 
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
 
Rapid Application Development with MEAN Stack
Rapid Application Development with MEAN Stack
Avinash Kaza
 
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
 
Mongodb open data day 2014
Mongodb open data day 2014
David Green
 

Similar to Isomorphic js shared js with react.js (20)

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
 
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
 
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
 
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
 
Ad

Recently uploaded (20)

Open Source Software Development Methods
Open Source Software Development Methods
VICTOR MAESTRE RAMIREZ
 
Building Geospatial Data Warehouse for GIS by GIS with FME
Building Geospatial Data Warehouse for GIS by GIS with FME
Safe Software
 
Application Modernization with Choreo - The AI-Native Internal Developer Plat...
Application Modernization with Choreo - The AI-Native Internal Developer Plat...
WSO2
 
Test Case Design Techniques – Practical Examples & Best Practices in Software...
Test Case Design Techniques – Practical Examples & Best Practices in Software...
Muhammad Fahad Bashir
 
Simplify Task, Team, and Project Management with Orangescrum Work
Simplify Task, Team, and Project Management with Orangescrum Work
Orangescrum
 
A Guide to Telemedicine Software Development.pdf
A Guide to Telemedicine Software Development.pdf
Olivero Bozzelli
 
Azure AI Foundry: The AI app and agent factory
Azure AI Foundry: The AI app and agent factory
Maxim Salnikov
 
Automated Migration of ESRI Geodatabases Using XML Control Files and FME
Automated Migration of ESRI Geodatabases Using XML Control Files and FME
Safe Software
 
IDM Crack with Internet Download Manager 6.42 Build 41 [Latest 2025]
IDM Crack with Internet Download Manager 6.42 Build 41 [Latest 2025]
pcprocore
 
arctitecture application system design os dsa
arctitecture application system design os dsa
za241967
 
Advance Doctor Appointment Booking App With Online Payment
Advance Doctor Appointment Booking App With Online Payment
AxisTechnolabs
 
Key Challenges in Troubleshooting Customer On-Premise Applications
Key Challenges in Troubleshooting Customer On-Premise Applications
Tier1 app
 
MOVIE RECOMMENDATION SYSTEM, UDUMULA GOPI REDDY, Y24MC13085.pptx
MOVIE RECOMMENDATION SYSTEM, UDUMULA GOPI REDDY, Y24MC13085.pptx
Maharshi Mallela
 
OpenChain Webinar - AboutCode - Practical Compliance in One Stack – Licensing...
OpenChain Webinar - AboutCode - Practical Compliance in One Stack – Licensing...
Shane Coughlan
 
Y - Recursion The Hard Way GopherCon EU 2025
Y - Recursion The Hard Way GopherCon EU 2025
Eleanor McHugh
 
SAP PM Module Level-IV Training Complete.ppt
SAP PM Module Level-IV Training Complete.ppt
MuhammadShaheryar36
 
Complete WordPress Programming Guidance Book
Complete WordPress Programming Guidance Book
Shabista Imam
 
Emvigo Capability Deck 2025: Accelerating Innovation Through Intelligent Soft...
Emvigo Capability Deck 2025: Accelerating Innovation Through Intelligent Soft...
Emvigo Technologies
 
Milwaukee Marketo User Group June 2025 - Optimize and Enhance Efficiency - Sm...
Milwaukee Marketo User Group June 2025 - Optimize and Enhance Efficiency - Sm...
BradBedford3
 
ERP Systems in the UAE: Driving Business Transformation with Smart Solutions
ERP Systems in the UAE: Driving Business Transformation with Smart Solutions
dheeodoo
 
Open Source Software Development Methods
Open Source Software Development Methods
VICTOR MAESTRE RAMIREZ
 
Building Geospatial Data Warehouse for GIS by GIS with FME
Building Geospatial Data Warehouse for GIS by GIS with FME
Safe Software
 
Application Modernization with Choreo - The AI-Native Internal Developer Plat...
Application Modernization with Choreo - The AI-Native Internal Developer Plat...
WSO2
 
Test Case Design Techniques – Practical Examples & Best Practices in Software...
Test Case Design Techniques – Practical Examples & Best Practices in Software...
Muhammad Fahad Bashir
 
Simplify Task, Team, and Project Management with Orangescrum Work
Simplify Task, Team, and Project Management with Orangescrum Work
Orangescrum
 
A Guide to Telemedicine Software Development.pdf
A Guide to Telemedicine Software Development.pdf
Olivero Bozzelli
 
Azure AI Foundry: The AI app and agent factory
Azure AI Foundry: The AI app and agent factory
Maxim Salnikov
 
Automated Migration of ESRI Geodatabases Using XML Control Files and FME
Automated Migration of ESRI Geodatabases Using XML Control Files and FME
Safe Software
 
IDM Crack with Internet Download Manager 6.42 Build 41 [Latest 2025]
IDM Crack with Internet Download Manager 6.42 Build 41 [Latest 2025]
pcprocore
 
arctitecture application system design os dsa
arctitecture application system design os dsa
za241967
 
Advance Doctor Appointment Booking App With Online Payment
Advance Doctor Appointment Booking App With Online Payment
AxisTechnolabs
 
Key Challenges in Troubleshooting Customer On-Premise Applications
Key Challenges in Troubleshooting Customer On-Premise Applications
Tier1 app
 
MOVIE RECOMMENDATION SYSTEM, UDUMULA GOPI REDDY, Y24MC13085.pptx
MOVIE RECOMMENDATION SYSTEM, UDUMULA GOPI REDDY, Y24MC13085.pptx
Maharshi Mallela
 
OpenChain Webinar - AboutCode - Practical Compliance in One Stack – Licensing...
OpenChain Webinar - AboutCode - Practical Compliance in One Stack – Licensing...
Shane Coughlan
 
Y - Recursion The Hard Way GopherCon EU 2025
Y - Recursion The Hard Way GopherCon EU 2025
Eleanor McHugh
 
SAP PM Module Level-IV Training Complete.ppt
SAP PM Module Level-IV Training Complete.ppt
MuhammadShaheryar36
 
Complete WordPress Programming Guidance Book
Complete WordPress Programming Guidance Book
Shabista Imam
 
Emvigo Capability Deck 2025: Accelerating Innovation Through Intelligent Soft...
Emvigo Capability Deck 2025: Accelerating Innovation Through Intelligent Soft...
Emvigo Technologies
 
Milwaukee Marketo User Group June 2025 - Optimize and Enhance Efficiency - Sm...
Milwaukee Marketo User Group June 2025 - Optimize and Enhance Efficiency - Sm...
BradBedford3
 
ERP Systems in the UAE: Driving Business Transformation with Smart Solutions
ERP Systems in the UAE: Driving Business Transformation with Smart Solutions
dheeodoo
 
Ad

Isomorphic js shared js with react.js