SlideShare a Scribd company logo
Isomorphic goodness in
your web app
- shifa khan
Isomorphic goodness in
your web app
What ?
Isomorphic JS
Means you can run the same Javascript code
on the server as well as the client (aka the
web browser).
Once upon a time..
These guys competed to be
the beloved poster child of web apps
Ruby on Rails
PHP + ‘x’ framework
Python + Django
They had a distinct divide between the
backend and frontend
Ruby / PHP
/ Python
HTML, CSS
& JS
Node allowed Javascript code on both
backend and frontend
JS
HTML, CSS
& JS
Node JS
Next Logical step seems obvious..
backend and frontend
JS
Html,
css
js
Isomorphic JS
Why ?
Angular Stapes
Spine
Ember
Meteor
Flight
Riot
Can
Sammy
Backbone
Agility
Volt
Yay! Faster
Snappy Apps!
Drawbacks ?
➔ Slow Initial Load Times
➔ Difficult SEO
➔ Logic Duplication
How to?
backend and frontend
Isomorphic JS
backend and frontend
Isomorphic JS
Business/
Application Logic
backend and frontend
Isomorphic JS
Routing
backend and frontend
Isomorphic JS
Views
Isomorphic JS
Views
Business/
Application Logic
Routing
Problems:
Not a lot of Documentation/ guidelines... Yet.
Increased Complexity
What’s in it for me ?
backend and frontend
Isomorphic JS
Views
backend and frontend
Isomorphic JS
Views
React JS
React
➔ Isomorphic JS Library
➔ For Views/ UI components (V in MVC)
➔ Backed and used by Facebook, Instagram
➔ Virtual DOM concept
➔ Renders on both server and client
gem ‘react-rails’
➔ Helper methods for react components
➔ Integrates with turbolinks
➔ No need for templates (mustache, etc)
Sample app
Code - https://github.com/shifakhan/react_hello
What you’ll miss about rails views
➔ Helper methods - current_user, simple form
Thank You !

More Related Content

What's hot

Marriage vs live in
Marriage vs live inMarriage vs live in
Marriage vs live in
Ritu Kamthan
 
Backend Programming
Backend ProgrammingBackend Programming
Backend Programming
Ruwandi Madhunamali
 
How to organize the business layer in software
How to organize the business layer in softwareHow to organize the business layer in software
How to organize the business layer in software
Arnaud LEMAIRE
 
Isomorphic apps
Isomorphic appsIsomorphic apps
Isomorphic apps
Anders Olsen Sandvik
 
From website to mobile app - a journey
From website to mobile app - a journeyFrom website to mobile app - a journey
From website to mobile app - a journey
Martin Naumann
 
Rails Vs CakePHP
Rails Vs CakePHPRails Vs CakePHP
Rails Vs CakePHP
Gautam Rege
 
The Web on Windows
The Web on WindowsThe Web on Windows
The Web on Windows
Josh Lane
 
Comapring jsp and Sevlet
Comapring jsp and SevletComapring jsp and Sevlet
Comapring jsp and Sevlet
ShivangiTak1
 
Hybrid mobile apps
Hybrid mobile appsHybrid mobile apps
Hybrid mobile apps
Abraham Barrera
 
Web design services
Web design servicesWeb design services
Web design services
SoftProdigy - We know software!
 
ES6 - Make JavaScript Great for the First Time
ES6 - Make JavaScript Great for the First TimeES6 - Make JavaScript Great for the First Time
ES6 - Make JavaScript Great for the First Time
Leo Hernandez
 
Cordova 3.x
Cordova 3.xCordova 3.x
Cordova 3.x
George McKinney
 
Html for desktop applications
Html for desktop applicationsHtml for desktop applications
Html for desktop applications
Mike Feltman
 

What's hot (13)

Marriage vs live in
Marriage vs live inMarriage vs live in
Marriage vs live in
 
Backend Programming
Backend ProgrammingBackend Programming
Backend Programming
 
How to organize the business layer in software
How to organize the business layer in softwareHow to organize the business layer in software
How to organize the business layer in software
 
Isomorphic apps
Isomorphic appsIsomorphic apps
Isomorphic apps
 
From website to mobile app - a journey
From website to mobile app - a journeyFrom website to mobile app - a journey
From website to mobile app - a journey
 
Rails Vs CakePHP
Rails Vs CakePHPRails Vs CakePHP
Rails Vs CakePHP
 
The Web on Windows
The Web on WindowsThe Web on Windows
The Web on Windows
 
Comapring jsp and Sevlet
Comapring jsp and SevletComapring jsp and Sevlet
Comapring jsp and Sevlet
 
Hybrid mobile apps
Hybrid mobile appsHybrid mobile apps
Hybrid mobile apps
 
Web design services
Web design servicesWeb design services
Web design services
 
ES6 - Make JavaScript Great for the First Time
ES6 - Make JavaScript Great for the First TimeES6 - Make JavaScript Great for the First Time
ES6 - Make JavaScript Great for the First Time
 
Cordova 3.x
Cordova 3.xCordova 3.x
Cordova 3.x
 
Html for desktop applications
Html for desktop applicationsHtml for desktop applications
Html for desktop applications
 

Similar to Isomorphic js - React in Rails

In Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps
In Pursuit of the Holy Grail: Building Isomorphic JavaScript AppsIn Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps
In Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps
Spike Brehm
 
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code Camp
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code CampDoing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code Camp
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code Camp
Chris Love
 
Isomorphic javascript - Uppsala.js #8
Isomorphic javascript - Uppsala.js #8Isomorphic javascript - Uppsala.js #8
Isomorphic javascript - Uppsala.js #8
Alexander Aivars
 
Serverside Javascript - Hope and Opportunity (Introducing Starbucks JS Web Fr...
Serverside Javascript - Hope and Opportunity (Introducing Starbucks JS Web Fr...Serverside Javascript - Hope and Opportunity (Introducing Starbucks JS Web Fr...
Serverside Javascript - Hope and Opportunity (Introducing Starbucks JS Web Fr...
Mário Valente
 
Isomorphic JavaScript: #DevBeat Master Class
Isomorphic JavaScript: #DevBeat Master ClassIsomorphic JavaScript: #DevBeat Master Class
Isomorphic JavaScript: #DevBeat Master Class
Spike Brehm
 
Web Frameworks of the Future
Web Frameworks of the FutureWeb Frameworks of the Future
Web Frameworks of the Future
elliando dias
 
Isomorphic web application
Isomorphic web applicationIsomorphic web application
Isomorphic web application
Oliver N
 
Kann JavaScript elegant sein?
Kann JavaScript elegant sein?Kann JavaScript elegant sein?
Kann JavaScript elegant sein?
jbandi
 
Java EE 7 from an HTML5 Perspective, JavaLand 2015
Java EE 7 from an HTML5 Perspective, JavaLand 2015Java EE 7 from an HTML5 Perspective, JavaLand 2015
Java EE 7 from an HTML5 Perspective, JavaLand 2015
Edward Burns
 
Deep crawl the chaotic landscape of JavaScript
Deep crawl the chaotic landscape of JavaScript Deep crawl the chaotic landscape of JavaScript
Deep crawl the chaotic landscape of JavaScript
Onely
 
GTUG JS will save us all
GTUG JS will save us allGTUG JS will save us all
GTUG JS will save us all
Mário Valente
 
LAMP is so yesterday, MEAN is so tomorrow! :)
LAMP is so yesterday, MEAN is so tomorrow! :) LAMP is so yesterday, MEAN is so tomorrow! :)
LAMP is so yesterday, MEAN is so tomorrow! :)
Sascha Sambale
 
Building Rich Applications with Appcelerator
Building Rich Applications with AppceleratorBuilding Rich Applications with Appcelerator
Building Rich Applications with Appcelerator
Matt Raible
 
TBP程式新手懶人包
TBP程式新手懶人包TBP程式新手懶人包
TBP程式新手懶人包
Bao-Wen Chen
 
Modern Architectures with Spring and JavaScript
Modern Architectures with Spring and JavaScriptModern Architectures with Spring and JavaScript
Modern Architectures with Spring and JavaScript
martinlippert
 
Connect js nodejs_api_shubhra
Connect js nodejs_api_shubhraConnect js nodejs_api_shubhra
Connect js nodejs_api_shubhra
Shubhra Kar
 
December 4 SDForum Java Sig Presentation
December 4 SDForum Java Sig PresentationDecember 4 SDForum Java Sig Presentation
December 4 SDForum Java Sig Presentation
Jonathan Abrams
 
Krug Fat Client
Krug Fat ClientKrug Fat Client
Krug Fat Client
Paul Klipp
 
soa
soasoa
HTML5 - The Python Angle (PyCon Ireland 2010)
HTML5 - The Python Angle (PyCon Ireland 2010)HTML5 - The Python Angle (PyCon Ireland 2010)
HTML5 - The Python Angle (PyCon Ireland 2010)
Kevin Gill
 

Similar to Isomorphic js - React in Rails (20)

In Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps
In Pursuit of the Holy Grail: Building Isomorphic JavaScript AppsIn Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps
In Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps
 
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code Camp
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code CampDoing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code Camp
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code Camp
 
Isomorphic javascript - Uppsala.js #8
Isomorphic javascript - Uppsala.js #8Isomorphic javascript - Uppsala.js #8
Isomorphic javascript - Uppsala.js #8
 
Serverside Javascript - Hope and Opportunity (Introducing Starbucks JS Web Fr...
Serverside Javascript - Hope and Opportunity (Introducing Starbucks JS Web Fr...Serverside Javascript - Hope and Opportunity (Introducing Starbucks JS Web Fr...
Serverside Javascript - Hope and Opportunity (Introducing Starbucks JS Web Fr...
 
Isomorphic JavaScript: #DevBeat Master Class
Isomorphic JavaScript: #DevBeat Master ClassIsomorphic JavaScript: #DevBeat Master Class
Isomorphic JavaScript: #DevBeat Master Class
 
Web Frameworks of the Future
Web Frameworks of the FutureWeb Frameworks of the Future
Web Frameworks of the Future
 
Isomorphic web application
Isomorphic web applicationIsomorphic web application
Isomorphic web application
 
Kann JavaScript elegant sein?
Kann JavaScript elegant sein?Kann JavaScript elegant sein?
Kann JavaScript elegant sein?
 
Java EE 7 from an HTML5 Perspective, JavaLand 2015
Java EE 7 from an HTML5 Perspective, JavaLand 2015Java EE 7 from an HTML5 Perspective, JavaLand 2015
Java EE 7 from an HTML5 Perspective, JavaLand 2015
 
Deep crawl the chaotic landscape of JavaScript
Deep crawl the chaotic landscape of JavaScript Deep crawl the chaotic landscape of JavaScript
Deep crawl the chaotic landscape of JavaScript
 
GTUG JS will save us all
GTUG JS will save us allGTUG JS will save us all
GTUG JS will save us all
 
LAMP is so yesterday, MEAN is so tomorrow! :)
LAMP is so yesterday, MEAN is so tomorrow! :) LAMP is so yesterday, MEAN is so tomorrow! :)
LAMP is so yesterday, MEAN is so tomorrow! :)
 
Building Rich Applications with Appcelerator
Building Rich Applications with AppceleratorBuilding Rich Applications with Appcelerator
Building Rich Applications with Appcelerator
 
TBP程式新手懶人包
TBP程式新手懶人包TBP程式新手懶人包
TBP程式新手懶人包
 
Modern Architectures with Spring and JavaScript
Modern Architectures with Spring and JavaScriptModern Architectures with Spring and JavaScript
Modern Architectures with Spring and JavaScript
 
Connect js nodejs_api_shubhra
Connect js nodejs_api_shubhraConnect js nodejs_api_shubhra
Connect js nodejs_api_shubhra
 
December 4 SDForum Java Sig Presentation
December 4 SDForum Java Sig PresentationDecember 4 SDForum Java Sig Presentation
December 4 SDForum Java Sig Presentation
 
Krug Fat Client
Krug Fat ClientKrug Fat Client
Krug Fat Client
 
soa
soasoa
soa
 
HTML5 - The Python Angle (PyCon Ireland 2010)
HTML5 - The Python Angle (PyCon Ireland 2010)HTML5 - The Python Angle (PyCon Ireland 2010)
HTML5 - The Python Angle (PyCon Ireland 2010)
 

Recently uploaded

Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
akankshawande
 
Essentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FMEEssentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FME
Safe Software
 
Infrastructure Challenges in Scaling RAG with Custom AI models
Infrastructure Challenges in Scaling RAG with Custom AI modelsInfrastructure Challenges in Scaling RAG with Custom AI models
Infrastructure Challenges in Scaling RAG with Custom AI models
Zilliz
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
名前 です男
 
Fueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte WebinarFueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte Webinar
Zilliz
 
Things to Consider When Choosing a Website Developer for your Website | FODUU
Things to Consider When Choosing a Website Developer for your Website | FODUUThings to Consider When Choosing a Website Developer for your Website | FODUU
Things to Consider When Choosing a Website Developer for your Website | FODUU
FODUU
 
Mariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceXMariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceX
Mariano Tinti
 
20240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 202420240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 2024
Matthew Sinclair
 
Microsoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdfMicrosoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdf
Uni Systems S.M.S.A.
 
Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
ssuserfac0301
 
Programming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup SlidesProgramming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup Slides
Zilliz
 
AI-Powered Food Delivery Transforming App Development in Saudi Arabia.pdf
AI-Powered Food Delivery Transforming App Development in Saudi Arabia.pdfAI-Powered Food Delivery Transforming App Development in Saudi Arabia.pdf
AI-Powered Food Delivery Transforming App Development in Saudi Arabia.pdf
Techgropse Pvt.Ltd.
 
June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
Ivanti
 
Full-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalizationFull-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalization
Zilliz
 
OpenID AuthZEN Interop Read Out - Authorization
OpenID AuthZEN Interop Read Out - AuthorizationOpenID AuthZEN Interop Read Out - Authorization
OpenID AuthZEN Interop Read Out - Authorization
David Brossard
 
Removing Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software FuzzingRemoving Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software Fuzzing
Aftab Hussain
 
Climate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing DaysClimate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing Days
Kari Kakkonen
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
panagenda
 
Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of GermanyPresentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
innovationoecd
 
Building Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and MilvusBuilding Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and Milvus
Zilliz
 

Recently uploaded (20)

Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
 
Essentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FMEEssentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FME
 
Infrastructure Challenges in Scaling RAG with Custom AI models
Infrastructure Challenges in Scaling RAG with Custom AI modelsInfrastructure Challenges in Scaling RAG with Custom AI models
Infrastructure Challenges in Scaling RAG with Custom AI models
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
 
Fueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte WebinarFueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte Webinar
 
Things to Consider When Choosing a Website Developer for your Website | FODUU
Things to Consider When Choosing a Website Developer for your Website | FODUUThings to Consider When Choosing a Website Developer for your Website | FODUU
Things to Consider When Choosing a Website Developer for your Website | FODUU
 
Mariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceXMariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceX
 
20240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 202420240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 2024
 
Microsoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdfMicrosoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdf
 
Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
 
Programming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup SlidesProgramming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup Slides
 
AI-Powered Food Delivery Transforming App Development in Saudi Arabia.pdf
AI-Powered Food Delivery Transforming App Development in Saudi Arabia.pdfAI-Powered Food Delivery Transforming App Development in Saudi Arabia.pdf
AI-Powered Food Delivery Transforming App Development in Saudi Arabia.pdf
 
June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
 
Full-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalizationFull-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalization
 
OpenID AuthZEN Interop Read Out - Authorization
OpenID AuthZEN Interop Read Out - AuthorizationOpenID AuthZEN Interop Read Out - Authorization
OpenID AuthZEN Interop Read Out - Authorization
 
Removing Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software FuzzingRemoving Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software Fuzzing
 
Climate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing DaysClimate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing Days
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
 
Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of GermanyPresentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
 
Building Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and MilvusBuilding Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and Milvus
 

Isomorphic js - React in Rails