Makbul Khan Acquia Certified Developer Senior Software Engineer makbul_khan8 makbul_khan08 Nikhil Sukul Senior Drupal Architect nikhilsukul nikhilsukul
Topics 1. What is Isomorphic JavaScript 2. Why Isomorphic JavaScript 3. Isomorphic in a wild 4. How to Isomorph 5. Available libraries 6. Isomorphic JavaScript with Drupal 7. Stop talking. Show me the code!
What is Isomorphic JavaScript?
Iso. morphic Same Form
Isomorphic Application Dynamic website Capable of generating its html Use same code in both server and client side Client Shared code Server REST API
Javascript code that can be shared between Client and Server apps. Shared code
Why Isomorphic Javascript
Compiled Web applications Server-rendered application Client-rendered application Isomorphic web application
Server-rendered application
Server-rendered application DOM manipulation Response User interface Javascript Request Response View layer Client Application logic Request Routing Backend Persistence Drupal (PHP) Ruby Python Node.js
Server-rendered application Server Client Server response Download response Download assets Execute scripts End user sees content
Server-rendered application Server render content Improved user experience by using AJAX, JQuery,... Serving HTML on first-load is fast. Crawler, screen-readers are happy with HTML. But: Maintain UI render and logic in both Client & Server Duplication application logic in (usually) two languages, two frameworks, two development stack, two templates,...
Client-rendered application
Client-rendered application DOM manipulation View layer Application logic Response User interface Client Javascript Routing Request Backend Persistence Drupal (PHP) Ruby Python Node.js
Client-rendered application Server Client Server response End user sees content Download response Download assets Execute scripts Fetch data Render template
Client-rendered application Client side render content Separate application logic and data retrieval More interactivity, optimistic UI, offline, mobile Eg. Gmail and StackEdit Editor But: Not SEO friendly Users have to wait a few seconds of blank page or loading spinner before seeing the content Expensive maintenance
Server v/s Client Initial load Initial load SEO SEO User experience User experience
Server-rendered Application OR Client-rendered Application
We have another option: Isomorphic Web Application The best of both worlds
Isomorphic application DOM manipulation Javascript Request Response View layer User interface Client Application logic Shared Routing Javascript Request Response Backend Persistence Drupal (PHP) Ruby Python Node.js
Isomorphic application DOM manipulation Javascript Request Response View layer User interface Client Application logic Shared Routing Javascript Backend Persistence Drupal (PHP) Ruby Python Node.js
Isomorphic application DOM manipulation Response View layer User interface Request Response Application logic Client Javascript Request Shared Routing Javascript Request Response Backend Persistence Drupal (PHP) Ruby Python Node.js
Isomorphic application Server Client Server response Download response Load app logic Hook into rendered app End user sees content
Isomorphic application DOM manipulation Response User Interface Markup Request Client Javascript Data presentation View layer Application logic Shared RoutingI18n Javascript Date, Currency formatting Response Request URL formatting Backend Persistence Drupal (PHP) Ruby Python Node.js
Why go to the trouble?
Performance Initial page load speed. SEO Crawlable single-page apps. Flexibility Run code anywhere. Maintainability Reduce code duplication.
Isomorphic in a wild
Flickr Yahoo s Modown libraries (successor to Mojito).
Instagram Facebook s React library in a Django app.
Meteor Realtime app framework.
Lullabot React, Node.js, CouchDB and Drupal as the backend CMS.
How to Isomorph
Isomorphic JavaScript can be environment agnostic or shimmed per environment.
Environment agnostic Does not depend on browser-specific properties (window) or server-specific properties (process.env, req.cookies).
Shimmed per Environment Provide shims for accessing environment-specific properties so module can expose a single API. window.location.pathname vs req.path
Abstractions
Isomorphism Isomorphic Code Client Server Abstract all the things!!
Abstraction Cookies setcookie( mycookie, root ); document.cookie = mycookie=root; Domain=.example.org ; response.setheader( Set-Cookie: mycookie=root; + Domain=.example.org ); Client Server
Abstraction Redirects this.transitionto( /login ); document.location.href = /login ; window.pushstate({},, /login ); response.redirect( /login ); Client Server
Most of your favourite JS libraries are Isomorphic
You can use these libraries
React (JavaScript framework by Facebook) New and fashionable Uses a virtual DOM, and syncs only the changed parts A javascript library for building user interface Strict data control mechanism
Isomorphic Javascript with Drupal
Available libraries in Drupal as a Module React -- Recommended release (react & myreactjs) Meteor -- Sandbox Rendr -- No module yet
Stop talking. Show me the code!!
THANK YOU FAICHI SOLUTIONS PVT LTD USA: OFFICE NO. 230, 640 WEST CALIFORNIA AVENUE SUITE 210 SUNNYVALE, CA 94086 TEL: +1 (408) 769-4941 INDIA: ACCORD IT PARK, BANER ROAD, PUNE, MAHARASHATRA-411045 PH. NO. +91-20-65291435