Agenda
• What is Isomorphic Javascript and similarities and
differences from SPAs and MPAs
• Why do we need it and and what makes it special !
• How to build Isomorphic apps and what tools to use
• Express + React + …
Slide 3
Slide 3 text
TL;DR
• Isomorphic Javascript is a broad topic
• Use React as the view layer on both client and server
• Syncing the state of client and server rendered app
• Lots of resources and sample codes at the end
Slide 4
Slide 4 text
What ?
Isomorphic JS
Slide 5
Slide 5 text
JavaScrips code that runs on both the client and server
Slide 6
Slide 6 text
Multi-Page Applications
Routing Logics Views
HTML
Validation
Animation Client
Server
Slide 7
Slide 7 text
Multi-Page Applications
• Duplicate logic, different languages
• Full reload on each rout, slow
• I can’t even …
• Server rendered content, fast initial load
• SEO friendly, Crawlable !
Slide 8
Slide 8 text
Single-Page Applications
API Static Files
index.html
Views
Logic
Client
Server
Routing Validation Animation DOM
JS
Slide 9
Slide 9 text
Single-Page Applications
• Not SEO friendly, need to pre-render pages
for crawlers
• Users see a blank page or a spinner for few
second until application is loaded
• Client rendered, faster
• More complicated applications
• More interactive
Slide 10
Slide 10 text
Isomorphic Applications
API
Static
Files
Shared!
Views
Logic
Client
Server
Routing
Validation
Services Data
I18n
Slide 11
Slide 11 text
What if I told you
you could have the best of both worlds?
Slide 12
Slide 12 text
Why ?
Isomorphic JS
Slide 13
Slide 13 text
• High Performance
• Fast initial load (like MPAs)
• Ajax and delivering data instead of html (SPAs)
• Maintainable
• SEO Friendly
Best of both worlds
Slide 14
Slide 14 text
• Facebook
• Instagram
• Asana
• RisingStack
Isomorphic Apps
in Production
Slide 15
Slide 15 text
How ?
Isomorphic JS
Slide 16
Slide 16 text
ReactJS Official Website
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
Demo
Isomorphic JS
Slide 20
Slide 20 text
A complete routing solution for React.js
Slide 21
Slide 21 text
React.Rocks
Place to find lots of cool sample react apps
Slide 22
Slide 22 text
react-components.com
Place to find lots of cool react components
Slide 23
Slide 23 text
Isomorphic JS
Demo Codes
http://bit.ly/isoninja
Additional
and
Resources