Makbul Khan. Nikhil Sukul

Transcription

1 Makbul Khan Acquia Certified Developer Senior Software Engineer makbul_khan8 makbul_khan08 Nikhil Sukul Senior Drupal Architect nikhilsukul nikhilsukul

2 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!

3 What is Isomorphic JavaScript?

4 Iso. morphic Same Form

5 Isomorphic Application Dynamic website Capable of generating its html Use same code in both server and client side Client Shared code Server REST API

6 Javascript code that can be shared between Client and Server apps. Shared code

7 Why Isomorphic Javascript

8 Compiled Web applications Server-rendered application Client-rendered application Isomorphic web application

9 Server-rendered application

10 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

11 Server-rendered application Server Client Server response Download response Download assets Execute scripts End user sees content

12 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,...

13 Client-rendered application

14 Client-rendered application DOM manipulation View layer Application logic Response User interface Client Javascript Routing Request Backend Persistence Drupal (PHP) Ruby Python Node.js

15 Client-rendered application Server Client Server response End user sees content Download response Download assets Execute scripts Fetch data Render template

16 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

17 Server v/s Client Initial load Initial load SEO SEO User experience User experience

18 Server-rendered Application OR Client-rendered Application

19 We have another option: Isomorphic Web Application The best of both worlds

20 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

21 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

22 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

23 Isomorphic application Server Client Server response Download response Load app logic Hook into rendered app End user sees content

24 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

25 Why go to the trouble?

26 Performance Initial page load speed. SEO Crawlable single-page apps. Flexibility Run code anywhere. Maintainability Reduce code duplication.

27 Isomorphic in a wild

28

29 Flickr Yahoo s Modown libraries (successor to Mojito).

30

31 Instagram Facebook s React library in a Django app.

32 Meteor Realtime app framework.

33 Lullabot React, Node.js, CouchDB and Drupal as the backend CMS.

34 How to Isomorph

35 Isomorphic JavaScript can be environment agnostic or shimmed per environment.

36 Environment agnostic Does not depend on browser-specific properties (window) or server-specific properties (process.env, req.cookies).

37 Shimmed per Environment Provide shims for accessing environment-specific properties so module can expose a single API. window.location.pathname vs req.path

38 Abstractions

39 Isomorphism Isomorphic Code Client Server Abstract all the things!!

40 Abstraction Cookies setcookie( mycookie, root ); document.cookie = mycookie=root; Domain=.example.org ; response.setheader( Set-Cookie: mycookie=root; + Domain=.example.org ); Client Server

41 Abstraction Redirects this.transitionto( /login ); document.location.href = /login ; window.pushstate({},, /login ); response.redirect( /login ); Client Server

42 Most of your favourite JS libraries are Isomorphic

43 You can use these libraries

44

45 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

46 Isomorphic Javascript with Drupal

47 Available libraries in Drupal as a Module React -- Recommended release (react & myreactjs) Meteor -- Sandbox Rendr -- No module yet

48 Stop talking. Show me the code!!

49 THANK YOU FAICHI SOLUTIONS PVT LTD USA: OFFICE NO. 230, 640 WEST CALIFORNIA AVENUE SUITE 210 SUNNYVALE, CA TEL: +1 (408) INDIA: ACCORD IT PARK, BANER ROAD, PUNE, MAHARASHATRA PH. NO