makbul khan - drupalcon and... · makbul khan acquia certified developer senior software engineer...
TRANSCRIPT
![Page 1: Makbul Khan - DrupalCon and... · Makbul Khan Acquia Certified Developer Senior Software Engineer makbul_khan08 Nikhil Sukul Senior Drupal Architect makbul_khan8 nikhilsukul nikhilsukul](https://reader030.vdocument.in/reader030/viewer/2022041014/5ec5685f668468537156f3d2/html5/thumbnails/1.jpg)
Makbul KhanAcquia Certified Developer
Senior Software Engineer
makbul_khan08
Nikhil SukulSenior Drupal Architect
makbul_khan8
nikhilsukul
nikhilsukul
![Page 2: Makbul Khan - DrupalCon and... · Makbul Khan Acquia Certified Developer Senior Software Engineer makbul_khan08 Nikhil Sukul Senior Drupal Architect makbul_khan8 nikhilsukul nikhilsukul](https://reader030.vdocument.in/reader030/viewer/2022041014/5ec5685f668468537156f3d2/html5/thumbnails/2.jpg)
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!
![Page 3: Makbul Khan - DrupalCon and... · Makbul Khan Acquia Certified Developer Senior Software Engineer makbul_khan08 Nikhil Sukul Senior Drupal Architect makbul_khan8 nikhilsukul nikhilsukul](https://reader030.vdocument.in/reader030/viewer/2022041014/5ec5685f668468537156f3d2/html5/thumbnails/3.jpg)
What is Isomorphic JavaScript?
![Page 4: Makbul Khan - DrupalCon and... · Makbul Khan Acquia Certified Developer Senior Software Engineer makbul_khan08 Nikhil Sukul Senior Drupal Architect makbul_khan8 nikhilsukul nikhilsukul](https://reader030.vdocument.in/reader030/viewer/2022041014/5ec5685f668468537156f3d2/html5/thumbnails/4.jpg)
Iso . morphic
Same Form
![Page 5: Makbul Khan - DrupalCon and... · Makbul Khan Acquia Certified Developer Senior Software Engineer makbul_khan08 Nikhil Sukul Senior Drupal Architect makbul_khan8 nikhilsukul nikhilsukul](https://reader030.vdocument.in/reader030/viewer/2022041014/5ec5685f668468537156f3d2/html5/thumbnails/5.jpg)
Isomorphic Application
• Dynamic website
• Capable of generating its html
• Use same code in both server and client side
REST APIShared code
Client
Server
![Page 6: Makbul Khan - DrupalCon and... · Makbul Khan Acquia Certified Developer Senior Software Engineer makbul_khan08 Nikhil Sukul Senior Drupal Architect makbul_khan8 nikhilsukul nikhilsukul](https://reader030.vdocument.in/reader030/viewer/2022041014/5ec5685f668468537156f3d2/html5/thumbnails/6.jpg)
Javascript code that can be shared between Client and Server apps.
Shared code
![Page 7: Makbul Khan - DrupalCon and... · Makbul Khan Acquia Certified Developer Senior Software Engineer makbul_khan08 Nikhil Sukul Senior Drupal Architect makbul_khan8 nikhilsukul nikhilsukul](https://reader030.vdocument.in/reader030/viewer/2022041014/5ec5685f668468537156f3d2/html5/thumbnails/7.jpg)
Why Isomorphic Javascript
![Page 8: Makbul Khan - DrupalCon and... · Makbul Khan Acquia Certified Developer Senior Software Engineer makbul_khan08 Nikhil Sukul Senior Drupal Architect makbul_khan8 nikhilsukul nikhilsukul](https://reader030.vdocument.in/reader030/viewer/2022041014/5ec5685f668468537156f3d2/html5/thumbnails/8.jpg)
● Server-rendered application
● Client-rendered application
● Isomorphic web application
Compiled Web applications
![Page 9: Makbul Khan - DrupalCon and... · Makbul Khan Acquia Certified Developer Senior Software Engineer makbul_khan08 Nikhil Sukul Senior Drupal Architect makbul_khan8 nikhilsukul nikhilsukul](https://reader030.vdocument.in/reader030/viewer/2022041014/5ec5685f668468537156f3d2/html5/thumbnails/9.jpg)
Server-rendered application
![Page 10: Makbul Khan - DrupalCon and... · Makbul Khan Acquia Certified Developer Senior Software Engineer makbul_khan08 Nikhil Sukul Senior Drupal Architect makbul_khan8 nikhilsukul nikhilsukul](https://reader030.vdocument.in/reader030/viewer/2022041014/5ec5685f668468537156f3d2/html5/thumbnails/10.jpg)
Routing
ClientJavascript
BackendDrupal (PHP)
RubyPythonNode.js
User interfaceDOM manipulation
Application logic
View layer
Server-rendered application
Persistence
Request
Response
Response
Request
![Page 11: Makbul Khan - DrupalCon and... · Makbul Khan Acquia Certified Developer Senior Software Engineer makbul_khan08 Nikhil Sukul Senior Drupal Architect makbul_khan8 nikhilsukul nikhilsukul](https://reader030.vdocument.in/reader030/viewer/2022041014/5ec5685f668468537156f3d2/html5/thumbnails/11.jpg)
Server response
Download response
Download assets
Execute scripts
Server Client
Server-rendered application
End user sees content
![Page 12: Makbul Khan - DrupalCon and... · Makbul Khan Acquia Certified Developer Senior Software Engineer makbul_khan08 Nikhil Sukul Senior Drupal Architect makbul_khan8 nikhilsukul nikhilsukul](https://reader030.vdocument.in/reader030/viewer/2022041014/5ec5685f668468537156f3d2/html5/thumbnails/12.jpg)
● Server render content● Improved user experience by using AJAX, JQuery, ...● Serving HTML on first-load is fast.● Crawler, screen-readers are happy with HTML.
Server-rendered application
But:
● Maintain UI render and logic in both Client & Server● Duplication application logic in (usually) two languages, two
frameworks, two development stack, two templates, ...
![Page 13: Makbul Khan - DrupalCon and... · Makbul Khan Acquia Certified Developer Senior Software Engineer makbul_khan08 Nikhil Sukul Senior Drupal Architect makbul_khan8 nikhilsukul nikhilsukul](https://reader030.vdocument.in/reader030/viewer/2022041014/5ec5685f668468537156f3d2/html5/thumbnails/13.jpg)
Client-rendered application
![Page 14: Makbul Khan - DrupalCon and... · Makbul Khan Acquia Certified Developer Senior Software Engineer makbul_khan08 Nikhil Sukul Senior Drupal Architect makbul_khan8 nikhilsukul nikhilsukul](https://reader030.vdocument.in/reader030/viewer/2022041014/5ec5685f668468537156f3d2/html5/thumbnails/14.jpg)
Persistence
Routing
ClientJavascript
BackendDrupal (PHP)
RubyPythonNode.js
DOM manipulation
Application logic
View layer
User interface
Client-rendered application
RequestResponse
![Page 15: Makbul Khan - DrupalCon and... · Makbul Khan Acquia Certified Developer Senior Software Engineer makbul_khan08 Nikhil Sukul Senior Drupal Architect makbul_khan8 nikhilsukul nikhilsukul](https://reader030.vdocument.in/reader030/viewer/2022041014/5ec5685f668468537156f3d2/html5/thumbnails/15.jpg)
Server response
Download response
Server Client
Client-rendered application
Download assets
Execute scripts
Fetch data
Render template
End user sees content
![Page 16: Makbul Khan - DrupalCon and... · Makbul Khan Acquia Certified Developer Senior Software Engineer makbul_khan08 Nikhil Sukul Senior Drupal Architect makbul_khan8 nikhilsukul nikhilsukul](https://reader030.vdocument.in/reader030/viewer/2022041014/5ec5685f668468537156f3d2/html5/thumbnails/16.jpg)
● Client side render content● Separate application logic and data retrieval● More interactivity, optimistic UI, offline, mobile● Eg. Gmail and StackEdit Editor
Client-rendered application
But:
● Not SEO friendly● Users have to wait a few seconds of blank page or loading
spinner before seeing the content● Expensive maintenance
![Page 17: Makbul Khan - DrupalCon and... · Makbul Khan Acquia Certified Developer Senior Software Engineer makbul_khan08 Nikhil Sukul Senior Drupal Architect makbul_khan8 nikhilsukul nikhilsukul](https://reader030.vdocument.in/reader030/viewer/2022041014/5ec5685f668468537156f3d2/html5/thumbnails/17.jpg)
Server v/s Client
Initial load
SEO
User experience
Initial load
SEO
User experience
![Page 18: Makbul Khan - DrupalCon and... · Makbul Khan Acquia Certified Developer Senior Software Engineer makbul_khan08 Nikhil Sukul Senior Drupal Architect makbul_khan8 nikhilsukul nikhilsukul](https://reader030.vdocument.in/reader030/viewer/2022041014/5ec5685f668468537156f3d2/html5/thumbnails/18.jpg)
Server-rendered Application
OR
Client-rendered Application
![Page 19: Makbul Khan - DrupalCon and... · Makbul Khan Acquia Certified Developer Senior Software Engineer makbul_khan08 Nikhil Sukul Senior Drupal Architect makbul_khan8 nikhilsukul nikhilsukul](https://reader030.vdocument.in/reader030/viewer/2022041014/5ec5685f668468537156f3d2/html5/thumbnails/19.jpg)
We have another option:
Isomorphic Web Application
The best of both worlds
![Page 20: Makbul Khan - DrupalCon and... · Makbul Khan Acquia Certified Developer Senior Software Engineer makbul_khan08 Nikhil Sukul Senior Drupal Architect makbul_khan8 nikhilsukul nikhilsukul](https://reader030.vdocument.in/reader030/viewer/2022041014/5ec5685f668468537156f3d2/html5/thumbnails/20.jpg)
Persistence
ClientJavascript
BackendDrupal (PHP)
RubyPythonNode.js
User interfaceDOM manipulation
Application logic
View layer Routing
Isomorphic application
SharedJavascript
RequestResponse
RequestResponse
![Page 21: Makbul Khan - DrupalCon and... · Makbul Khan Acquia Certified Developer Senior Software Engineer makbul_khan08 Nikhil Sukul Senior Drupal Architect makbul_khan8 nikhilsukul nikhilsukul](https://reader030.vdocument.in/reader030/viewer/2022041014/5ec5685f668468537156f3d2/html5/thumbnails/21.jpg)
Persistence
ClientJavascript
BackendDrupal (PHP)
RubyPythonNode.js
User interfaceDOM manipulation
Application logic
View layer Routing
Isomorphic application
SharedJavascript
RequestResponse
![Page 22: Makbul Khan - DrupalCon and... · Makbul Khan Acquia Certified Developer Senior Software Engineer makbul_khan08 Nikhil Sukul Senior Drupal Architect makbul_khan8 nikhilsukul nikhilsukul](https://reader030.vdocument.in/reader030/viewer/2022041014/5ec5685f668468537156f3d2/html5/thumbnails/22.jpg)
Persistence
ClientJavascript
BackendDrupal (PHP)
RubyPythonNode.js
User interfaceDOM manipulation
Application logic
View layer Routing
Isomorphic application
SharedJavascript
RequestResponse Request Response
RequestResponse
![Page 23: Makbul Khan - DrupalCon and... · Makbul Khan Acquia Certified Developer Senior Software Engineer makbul_khan08 Nikhil Sukul Senior Drupal Architect makbul_khan8 nikhilsukul nikhilsukul](https://reader030.vdocument.in/reader030/viewer/2022041014/5ec5685f668468537156f3d2/html5/thumbnails/23.jpg)
Server response
Download response
Load app logic
Hook into rendered app
Server Client
Isomorphic application
End user sees content
![Page 24: Makbul Khan - DrupalCon and... · Makbul Khan Acquia Certified Developer Senior Software Engineer makbul_khan08 Nikhil Sukul Senior Drupal Architect makbul_khan8 nikhilsukul nikhilsukul](https://reader030.vdocument.in/reader030/viewer/2022041014/5ec5685f668468537156f3d2/html5/thumbnails/24.jpg)
RequestResponse
RequestResponse
SharedJavascript
Persistence
ClientJavascript
BackendDrupal (PHP)
RubyPythonNode.js
User InterfaceDOM manipulation
View layerApplication
logicRouting
Markup
Data presentation
I18n
Date, Currency formatting
URL formatting
Isomorphic application
![Page 25: Makbul Khan - DrupalCon and... · Makbul Khan Acquia Certified Developer Senior Software Engineer makbul_khan08 Nikhil Sukul Senior Drupal Architect makbul_khan8 nikhilsukul nikhilsukul](https://reader030.vdocument.in/reader030/viewer/2022041014/5ec5685f668468537156f3d2/html5/thumbnails/25.jpg)
Why go to the trouble?
![Page 26: Makbul Khan - DrupalCon and... · Makbul Khan Acquia Certified Developer Senior Software Engineer makbul_khan08 Nikhil Sukul Senior Drupal Architect makbul_khan8 nikhilsukul nikhilsukul](https://reader030.vdocument.in/reader030/viewer/2022041014/5ec5685f668468537156f3d2/html5/thumbnails/26.jpg)
PerformanceInitial page load speed.
SEOCrawlable single-page apps.
FlexibilityRun code anywhere.
MaintainabilityReduce code duplication.
![Page 27: Makbul Khan - DrupalCon and... · Makbul Khan Acquia Certified Developer Senior Software Engineer makbul_khan08 Nikhil Sukul Senior Drupal Architect makbul_khan8 nikhilsukul nikhilsukul](https://reader030.vdocument.in/reader030/viewer/2022041014/5ec5685f668468537156f3d2/html5/thumbnails/27.jpg)
Isomorphic in a wild
![Page 28: Makbul Khan - DrupalCon and... · Makbul Khan Acquia Certified Developer Senior Software Engineer makbul_khan08 Nikhil Sukul Senior Drupal Architect makbul_khan8 nikhilsukul nikhilsukul](https://reader030.vdocument.in/reader030/viewer/2022041014/5ec5685f668468537156f3d2/html5/thumbnails/28.jpg)
![Page 29: Makbul Khan - DrupalCon and... · Makbul Khan Acquia Certified Developer Senior Software Engineer makbul_khan08 Nikhil Sukul Senior Drupal Architect makbul_khan8 nikhilsukul nikhilsukul](https://reader030.vdocument.in/reader030/viewer/2022041014/5ec5685f668468537156f3d2/html5/thumbnails/29.jpg)
Flickr Yahoo’s Modown libraries (successor to Mojito).
![Page 30: Makbul Khan - DrupalCon and... · Makbul Khan Acquia Certified Developer Senior Software Engineer makbul_khan08 Nikhil Sukul Senior Drupal Architect makbul_khan8 nikhilsukul nikhilsukul](https://reader030.vdocument.in/reader030/viewer/2022041014/5ec5685f668468537156f3d2/html5/thumbnails/30.jpg)
![Page 31: Makbul Khan - DrupalCon and... · Makbul Khan Acquia Certified Developer Senior Software Engineer makbul_khan08 Nikhil Sukul Senior Drupal Architect makbul_khan8 nikhilsukul nikhilsukul](https://reader030.vdocument.in/reader030/viewer/2022041014/5ec5685f668468537156f3d2/html5/thumbnails/31.jpg)
Instagram Facebook’s React library in a Django app.
![Page 32: Makbul Khan - DrupalCon and... · Makbul Khan Acquia Certified Developer Senior Software Engineer makbul_khan08 Nikhil Sukul Senior Drupal Architect makbul_khan8 nikhilsukul nikhilsukul](https://reader030.vdocument.in/reader030/viewer/2022041014/5ec5685f668468537156f3d2/html5/thumbnails/32.jpg)
Meteor Realtime app framework.
![Page 33: Makbul Khan - DrupalCon and... · Makbul Khan Acquia Certified Developer Senior Software Engineer makbul_khan08 Nikhil Sukul Senior Drupal Architect makbul_khan8 nikhilsukul nikhilsukul](https://reader030.vdocument.in/reader030/viewer/2022041014/5ec5685f668468537156f3d2/html5/thumbnails/33.jpg)
Lullabot React, Node.js, CouchDB and Drupal as the backend CMS.
![Page 34: Makbul Khan - DrupalCon and... · Makbul Khan Acquia Certified Developer Senior Software Engineer makbul_khan08 Nikhil Sukul Senior Drupal Architect makbul_khan8 nikhilsukul nikhilsukul](https://reader030.vdocument.in/reader030/viewer/2022041014/5ec5685f668468537156f3d2/html5/thumbnails/34.jpg)
How to Isomorph
![Page 35: Makbul Khan - DrupalCon and... · Makbul Khan Acquia Certified Developer Senior Software Engineer makbul_khan08 Nikhil Sukul Senior Drupal Architect makbul_khan8 nikhilsukul nikhilsukul](https://reader030.vdocument.in/reader030/viewer/2022041014/5ec5685f668468537156f3d2/html5/thumbnails/35.jpg)
Isomorphic JavaScript can beenvironment agnostic
orshimmed per environment.
![Page 36: Makbul Khan - DrupalCon and... · Makbul Khan Acquia Certified Developer Senior Software Engineer makbul_khan08 Nikhil Sukul Senior Drupal Architect makbul_khan8 nikhilsukul nikhilsukul](https://reader030.vdocument.in/reader030/viewer/2022041014/5ec5685f668468537156f3d2/html5/thumbnails/36.jpg)
Environment agnosticDoes not depend on browser-specific properties
(window) or server-specific properties(process.env, req.cookies).
![Page 37: Makbul Khan - DrupalCon and... · Makbul Khan Acquia Certified Developer Senior Software Engineer makbul_khan08 Nikhil Sukul Senior Drupal Architect makbul_khan8 nikhilsukul nikhilsukul](https://reader030.vdocument.in/reader030/viewer/2022041014/5ec5685f668468537156f3d2/html5/thumbnails/37.jpg)
Provide shims for accessing environment-specific properties so module can expose a single API.
window.location.pathnamevs
req.path
Shimmed per Environment
![Page 38: Makbul Khan - DrupalCon and... · Makbul Khan Acquia Certified Developer Senior Software Engineer makbul_khan08 Nikhil Sukul Senior Drupal Architect makbul_khan8 nikhilsukul nikhilsukul](https://reader030.vdocument.in/reader030/viewer/2022041014/5ec5685f668468537156f3d2/html5/thumbnails/38.jpg)
Abstractions
![Page 39: Makbul Khan - DrupalCon and... · Makbul Khan Acquia Certified Developer Senior Software Engineer makbul_khan08 Nikhil Sukul Senior Drupal Architect makbul_khan8 nikhilsukul nikhilsukul](https://reader030.vdocument.in/reader030/viewer/2022041014/5ec5685f668468537156f3d2/html5/thumbnails/39.jpg)
Isomorphism
Abstract all the things!!
Isomorphic Code
Client Server
![Page 40: Makbul Khan - DrupalCon and... · Makbul Khan Acquia Certified Developer Senior Software Engineer makbul_khan08 Nikhil Sukul Senior Drupal Architect makbul_khan8 nikhilsukul nikhilsukul](https://reader030.vdocument.in/reader030/viewer/2022041014/5ec5685f668468537156f3d2/html5/thumbnails/40.jpg)
AbstractionCookies
ServerClient
setCookie(‘myCookie’, ‘root’);
document.cookie =‘myCookie=root;
Domain=.example.org’;
response.setHeader(‘Set-Cookie: myCookie=root;’ +
‘Domain=.example.org’);
![Page 41: Makbul Khan - DrupalCon and... · Makbul Khan Acquia Certified Developer Senior Software Engineer makbul_khan08 Nikhil Sukul Senior Drupal Architect makbul_khan8 nikhilsukul nikhilsukul](https://reader030.vdocument.in/reader030/viewer/2022041014/5ec5685f668468537156f3d2/html5/thumbnails/41.jpg)
AbstractionRedirects
ServerClient
this.transitionTo(‘/login’);
document.location.href =‘/login’;window.pushState({}, ‘’, ‘/login’);
response.redirect(‘/login’);
![Page 42: Makbul Khan - DrupalCon and... · Makbul Khan Acquia Certified Developer Senior Software Engineer makbul_khan08 Nikhil Sukul Senior Drupal Architect makbul_khan8 nikhilsukul nikhilsukul](https://reader030.vdocument.in/reader030/viewer/2022041014/5ec5685f668468537156f3d2/html5/thumbnails/42.jpg)
Most of your favourite JS libraries are Isomorphic
![Page 43: Makbul Khan - DrupalCon and... · Makbul Khan Acquia Certified Developer Senior Software Engineer makbul_khan08 Nikhil Sukul Senior Drupal Architect makbul_khan8 nikhilsukul nikhilsukul](https://reader030.vdocument.in/reader030/viewer/2022041014/5ec5685f668468537156f3d2/html5/thumbnails/43.jpg)
You can use these libraries
![Page 44: Makbul Khan - DrupalCon and... · Makbul Khan Acquia Certified Developer Senior Software Engineer makbul_khan08 Nikhil Sukul Senior Drupal Architect makbul_khan8 nikhilsukul nikhilsukul](https://reader030.vdocument.in/reader030/viewer/2022041014/5ec5685f668468537156f3d2/html5/thumbnails/44.jpg)
![Page 45: Makbul Khan - DrupalCon and... · Makbul Khan Acquia Certified Developer Senior Software Engineer makbul_khan08 Nikhil Sukul Senior Drupal Architect makbul_khan8 nikhilsukul nikhilsukul](https://reader030.vdocument.in/reader030/viewer/2022041014/5ec5685f668468537156f3d2/html5/thumbnails/45.jpg)
● New and fashionable
● Uses a virtual DOM, and syncs only the changed
parts
● A javascript library for building user interface
● Strict data control mechanism
React(JavaScript framework by Facebook)
![Page 46: Makbul Khan - DrupalCon and... · Makbul Khan Acquia Certified Developer Senior Software Engineer makbul_khan08 Nikhil Sukul Senior Drupal Architect makbul_khan8 nikhilsukul nikhilsukul](https://reader030.vdocument.in/reader030/viewer/2022041014/5ec5685f668468537156f3d2/html5/thumbnails/46.jpg)
Isomorphic Javascript with Drupal
![Page 47: Makbul Khan - DrupalCon and... · Makbul Khan Acquia Certified Developer Senior Software Engineer makbul_khan08 Nikhil Sukul Senior Drupal Architect makbul_khan8 nikhilsukul nikhilsukul](https://reader030.vdocument.in/reader030/viewer/2022041014/5ec5685f668468537156f3d2/html5/thumbnails/47.jpg)
React -- Recommended release (react & myreactjs)
Meteor -- Sandbox
Rendr -- No module yet
Available libraries in Drupal as a Module
![Page 48: Makbul Khan - DrupalCon and... · Makbul Khan Acquia Certified Developer Senior Software Engineer makbul_khan08 Nikhil Sukul Senior Drupal Architect makbul_khan8 nikhilsukul nikhilsukul](https://reader030.vdocument.in/reader030/viewer/2022041014/5ec5685f668468537156f3d2/html5/thumbnails/48.jpg)
Stop talking. Show me the code!!
![Page 49: Makbul Khan - DrupalCon and... · Makbul Khan Acquia Certified Developer Senior Software Engineer makbul_khan08 Nikhil Sukul Senior Drupal Architect makbul_khan8 nikhilsukul nikhilsukul](https://reader030.vdocument.in/reader030/viewer/2022041014/5ec5685f668468537156f3d2/html5/thumbnails/49.jpg)
FAICHI SOLUTIONS PVT LTD
USA:OFFICE NO. 230, 640 WEST CALIFORNIA AVENUE SUITE 210SUNNYVALE, CA 94086TEL: +1 (408) 769-4941
INDIA:ACCORD IT PARK, BANER ROAD, PUNE, MAHARASHATRA-411045PH. NO. +91-20-65291435
THANK YOU