 Let everybody else also join and then we'll start. Hello. I would like to welcome all. Hello. Yeah, are you going to hear me? Yes. So we are here to discuss isomorphic JavaScript. And with me, like, let's start. So I am Makbul Khan. I work for 5G Solutions Private Limited. And I'm an eco-certified developer. With me, I have Nikhil Sukul. So hi everybody. Good evening. Last session of Drupal Khan Asia. Excited everybody for tomorrow's print? Yes. We should be. So I am working as a senior Drupal architect in 5G Solutions. Okay. So I am working with this firm for a long time now. Okay. So let's start. Not so long, but yeah. Long enough to do a lot of contributions in Drupal. So let's start with this session of isomorphic JavaScript with Drupal. Ready everybody? Yes. Okay. So just to get a feel of audience, how many of you know isomorphic concept? So what do you know about isomorphic? Exactly. Okay. So the topics which are going to cover are what is isomorphic JavaScript? Why isomorphic JavaScript? Why this instinct idea? Then the sites which are using isomorphic JavaScript, the sites which are in production. Then how to isomorph? Available libraries, which library we can use to build our isomorphic applications. Then we'll look on isomorphic JavaScript with Drupal. So we have prepared a small demo using Drupal. And last, we'll see the code. Okay. So let us start is what is isomorphic JavaScript? So isomorphic, as the term goes, is actually means iso means same and morphic means form. It was actually coined by Charles, Charles Robbins, Charlie Robbins actually, in 2011 in one of his blogs. And what he was actually talking about is that we can actually share the same JavaScript code in client as well as on server. So that was actually he was talking about. His vision was that we need to have JavaScript frameworks or JavaScript libraries, which actually have the same JavaScript code, which will be executed same on the server as well as on the client. So what exactly isomorphic application? So in literal sense, isomorphic applications with a dynamic website would literally means that it actually JavaScript based website. Everything is absolutely dynamic. It has a capability to generate its HTML. Well, this term is not exactly very small here. We can have a separate session on it because it's actually talking about something known as virtual DOM. So there's a concept of virtual DOM, which is being there for a while now. Generally, we nowadays using virtual DOM in some of the library, which are using isomorphic concept. Whereas in traditional JavaScript or additional way, we were using structural DOM. So DOM, if you know, document object model. It's a way that HTML and JavaScript are rendered or HTML is rendered in a structured way in HTML page. Virtual DOM is a way where actually you can re-render the HTML based on the dynamic content. That's the whole idea of virtual DOM. And it's a capability of isomorphic application. Yes, that's what the last line is. Use same code in both server and the client. So actually in this diagram what you are seeing, it's not actually ideal because as per the isomorphic application concept, the amount of code which need to be shared between client and the server should be at least 80 to 90%. So for the sake of this presentation, we are actually talking about with respect to Drupal and how we can share the code from Drupal to the browser. Though the isomorphic application can easily share the code for iOS or for Android. So we can actually use isomorphic applications code for any kind of platform. It's a cross-platform thing. You can actually use for iOS, Android, Microsoft or anything. So why isomorphic JavaScript? Why do you require isomorphic JavaScript? What is the need of it? So let's talk about a history behind web applications. So generally the web application to start with was actually a server rendered application to start with. Long back when the web started, we are actually having a same kind of request coming from the browser going to the server. The server was actually giving the entire application in either a static HTML format or very minimal dynamic content on it. The entire HTML gets rendered on the browser and then we can see the application or when we can see the website. So that was the traditional era. So very lately after that people will start thinking that why only server side? Why can't we try something from the client side? So people started working with fat clients. Fat client means where lots of codes are already available on the browser itself rather on the server side. And then nowadays people are talking about a concept known as isomorphic web application. Don't worry, this is only the three things in detail we are coming in the slides anyways. So let's talk about in detail. In the server rendered application, so let's talk about server rendered application. So ideal scenario in a server rendered application you actually have a DOM manipulation and user interface on the client side. And you have view layer, application logic, routing, persistence, which actually your data layer on the server side. It can be on any language. It can be in Drupal, Ruby, Python, you name it. It will be on the server side itself. The flow in which happens is from the browser side on the client side we actually get a request and then from the server side we get a response. And again, if you want another request it will come from the server side and again we get a response, sorry, from the client side and again we get a response from the server side. The request response loop is keep on happening. So for every request coming from the client there will be an ideal response coming from the server. This ideal scenario in server rendered applications. So if a client is sending a request to the server what happens in the background? So the server will send a response. The client will download the response. The response downloading the response means actually having only the static HTML empty divs and then it will render that HTML. But what will follow after that? It will download starting the assets. It means it can be JavaScript assets, images and all those things. And when the JavaScript assets and images are downloaded it will start executing those scripts. This is a very standard way of server rendered application. So what happens in server rendered application? What is the advantages of it? Server renders the content. And now in server rendered application you can actually have using a JAX or jQuery, a lot of effects if you want in server rendered applications. It will serve HTML first load and it is very, very fast. Definitely from server rendered application if your performance is optimized your time to load that particular page will be very fast. And the web page will be SEO friendly. So the search engines can actually do a lot of SEO on it and it will be having the Googles on anywhere on the top 10 sites of the world. But what happens? What is the disadvantage of it? Maintaining UI and render logic in both kind and server. So what happens is you need to have logic. I'm not talking about JavaScript. I'm talking about logic. So in case of logic you need to have some logic to render the things on the server. Then on the same logic you need to have on the client. It can be with the JavaScript logic. It can be the server logic. So what happens? You have a duplication of logic. You have two languages, two frameworks, two development stack or two templates whatever way you think of. It's all duplicated. So it's not easy to maintain. So the idea of what came up after that was rather than maintaining all this, let's say to client rendered applications. Why not we have a client rendered thing rather than having a server rendered application. So in the client rendered application it was actually a concept of a fat client. So we have a DOM manipulation user interface, view layer, application logic, routing, all on the browser based thing. And on the server side, wow, my server is very, very thin. What it has is only have database. Just get the connection and have it. So the client will request for persistence that is only for data. And then the response will be sent by the server to the client. And that's the way it works. But in that case think of a mobile. Think of a browser in mobile. This fat client thing won't work there. It's too heavy. It won't work in this kind of scenarios. We actually want an ideal scenario in which both should work in a same direction and sharing the same amount of code. Otherwise my browser will be too heavy on the client side. It is not actually acceptable, right? Now nobody tries to have a browser which is very, very heavy. It will crash it. Or your mobile will crash or hang or something. This happens when you have a client requesting for a client-ended application. So the server will send a response. The client will download the response. It will download the assets. It will execute the scripts. It will fetch the data. If it is API and I'm still waiting, I'm still waiting, still loading, showing me a spinner on my page and haven't got anything till now on my browser. Then it rendered the template and now I got an HTML. So think about it, that it's taking so much of time to do a client-ended application. What we used to get is animated things, loading GIFs. We used to get that on the browser. It's keep on loading, loading, loading and loading and suddenly you get the browser and everything come at once. And we don't have patience of so many minutes or seconds to wait and get all these things. So in client-ended application, what is the advantage of it? Yes, in client-ended again, it renders the content as a server side. It is separate application logic and data retrieval because a lot of logic is there on the client side and the server side is different. Yeah, you have very much optimistic UI. The UI can be proper. You can actually make drag-drop application on the browsers if you require a client-rendered application. It's very, very heavy, right? And then the examples can be Gmail. Offline Gmail is actually an application which is client-rendered. You can actually use that. Or you're using it already, I hope so. And what happens, what is the disadvantage of it? So let's think about SEO. It's not SEO friendly, a lot of JavaScript and everything is available within that HTML page. And user have to wait. That's what we just saw. Load the spinner and then see the content. And yeah, it's very expensive for the maintenance course. To summarize, in the client-rendered application, server-rendered application, so server initial load is good. Client, bad. And the server SEO is good. Client, bad. In the server, user experience not so good because you actually have to render from the server itself. I mean, you can actually make the UI very good. So what we should do? We should do for server-rendered application or client-rendered application? Yes, so like we have already seen the comparison between server and the client. So we need to think about the best of the both worlds. So we can implement isomorphic JavaScript over here. So let's see the diagram, the basic diagram which we can get when you search the isomorphic. Client in the shared JavaScript and the backend. So the shared JavaScript contains view layer, application logic and routing. So this is the main core part for the isomorphic application. If you see the flow for isomorphic JavaScript application for the first-time request, so we have DOM manipulation user interface. We just set request for some data in the shared JavaScript. At this time, our shared JavaScript rendered as the backend at the server side. So what happens, we get a request from a client, it processes, manipulates and sends a response back to the client. So while sending the response to the client, it also sends view layer, application logic, routing that your shared JavaScript to the client. So what happens for the second request? The subsequent request? So again we do a request. So this time it won't go to the server because we already have our shared JavaScript at the client side. So we have a request it is getting served by our JavaScript because we have an application logic it manipulates the request it builds a virtual DOM over here and sends a response back to the client. Again we have a request it again goes to the our shared JavaScript and sends the response. So as you can see we have graded out request and response to the server. It doesn't mean that request will never go to the server if we do a hard refresh a page. So at that time the request will go to the server. So let's see what happened for the isomorphic application for the first time request. So we have a server response it download the response and user can see the content at the same time it will download the app logic and a rendered updated app. So the client is now having all JavaScript and for a subsequent request it will not go to the server it will come to the load app logic it will face the request it will do the manipulation it will virtual DOM and sends back to the server back to the clients. So this happens for all the subsequent requests. So let's talk about view layer so view layer is really made up of different components and if we are trying to pass a view layer to the client and server so we need to make it this layer as an isomorphic. So what are the components? Markup. Markup is HTML the template part then we have data presentation. So we get data from the server we need to massage it somewhere because we need to make it more effectively to the client side. So we need to add some CSS, JavaScript and all the beautification part. Then we have internationalization we have date currency formatting a gate picker is a good example once we click on the date picker so it automatically populates the calendar then we value our formatting. So basically for our isomorphic JavaScript we need to pass our template to the isomorphic. So why all this trouble? Why we need this one? Because we want our performance. So it improved page load speed because we have for the first time request it's fast but for subsequent request it's more fast. SEO it's probably one single page app so currently Google provide the support for isomorphic apps because your clients Google can index your client page. It's flexible because your same code is running both on client and the server and because it's flexible it's also easy to maintain. We have a single code to maintain so the mentality cost is automatically low. So let's see what are the sites which are currently using isomorphic. So let's talk about the sites using isomorphic JavaScript. One of the examples is Flickr. So you can see here we have a lot of pictures of Taj Mahal so when I search for Taj Mahal I get a list like this and then when you click on any of the image you get like this. So you get a pop-up which actually shows you the image and then it shows the related content for that particular image and it's all being done by isomorphic way. So Flickr is a very good example of how to use isomorphic application. So what Flickr uses is actually Mojito. So Mojito is a framework which is actually a successor of MoDown. So Flickr was actually using a framework known as MoDown and then they discontinued it and make it as Mojito. So Mojito is a framework a JavaScript framework which is used by Flickr to get the isomorphic effect here. Another example is Instagram Surprisingly Instagram is not actually using it right now for the production sites but they actually implemented this for their sandbox for a while and this is also using an isomorphic concept here. So here if I click on a picture I get a pop-up like this and actually in the pop-up you can see there a lot of information available and what kind of framework they were using is React. So React is one of the best isomorphic framework or library you can say available and they were actually using in the back end as Python. So Zango is a Python framework they were using in the back end. So they tried to experiment it in their sandbox and that time they actually tried using React with Zango. Do you think Drupal is far behind? No. So Lollabot around 7 to 8 months back launched their isomorphic site. So Lollabot is actually using isomorphic. Can we have a round of applause for Lollabot because they are Drupal? So Lollabot is using the way they are using Drupal is and the way they are using isomorphic is using React. They are using Node.js in front of it and Drupal as a back end CMS. So they are actually using these four technologies to have this isomorphic thing done. So not only Lollabot, there are so many more. So Facebook is anyway using it. Everybody knows Facebook. React is actually from Facebook so Facebook will be using it definitely. Yahoo is using it. So this is a very good site. Go and check it out. It's actually a task management tool. It's a browser-based task management tool. Try to check it out. It's very, very user-friendly. It's actually using isomorphic application behind it. Then we have rising stack, Airbnb and all. So everybody, a lot of things are using isomorphic here. Actually, how to isomorph? How we can build an isomorphic application? So if I categorize isomorphic JavaScript, so it can be categorized in two parts. One is environment agnostic and second one is as per environment. Environment agnostic does not depend on any client-specific properties or browser-specific properties. So like we have a window, we have process.environment, request.cookies. So it does not depend on any of the browser or client-specific properties. As per environment, it exploits environment-specific properties. So one can expose a single API. But under the hood, there are actually two environments running. Then it has window.location.path name, request.path, abstraction. So one of my favorite is set cookies. So if you have to set the cookies at the client side, so we use document.cookie, the cookie name and the value. On the server side, we have response.set header and then set header name, cookie name and the cookie value. In the green, you can see we are using React. So it's used set cookie, cookie name and cookie value. So we don't have to write it two times like client and server. We can use a set cookie for both. Redirects, same thing. So we have document.location.href and the destination URL. And if you want to do some more estimate five things, more fancy part, so we can use window.push state and the destination thing. And on the server side, we have response.redirect and we are sending an HTTP header over here. And if we see on the isometric part, so this dot transition2 and the destination URL. So writing of cookies, like if we take an example of cookies, we have some other properties, like domain name, path and then expires. So it's a complete string. But if you write on isomorphic, we can write in this way. We have cookie, cookie name, then part, domain, expires. So it's like an array format, we can see. It's quite easy than the complete string, big string. So there are many JS library which are isomorphic and some of them we are already using. So let's see which are those react. Listed, naso, render, meteor, bojito. So there are lots of things. I am mostly interested on react, render and meteor. As per my understanding, these are the mostly used for isomorphic applications. So react a JavaScript library for building a user interface. Meteor is a JavaScript app platform that builds apps. And render is a small library that allows you to run a backbone apps. So we will be taking a react for our demo purpose. So react is basically introduced by Facebook and why we have taken react. So it has some advantages. So it's new, like a JavaScript library for building user interface. Open source, it's a library. It's new and fashionable. New. Because we have released from 2013 and the stable version was released on 28th of January 2016. Just quite a days before. It uses a virtual DOM and since only the change part. So if you have to change a specific part of a web page like it can be a blog, it can be a region, it can be a header, it can be a footer. So we can use it. JSX, it's in JavaScript XML. So it helps developer to write an HTML like syntax that compiles down to JavaScript. React puts HTML into JavaScript. So all the HTML part that tags the span table or goes into JavaScript. It's lightweight as compared to other libraries so that's the reason we have chosen React. So if you see a simple application if you have to build on React, so we have a simple HTML page. On the header part we have script tag. So it's used build slash react.js and then we have a JSX transformer.js. That's in JS largely. So even if you use the React.js it will, like you can build your apps. Now on the body part we have an empty div which has id block slider and we have a script type text slash JavaScript and our React code will go over here. Let's see how. So we have React.Render and then we are printing a hello world over here. So how does it get replaced? It's replaced by get element by id. So if we do a most specifically using React so we can build a component. Components are basically a functions in React. So we have a component, my component then we have a react.create class render function then hello world and it's again pass the value to the top bit. So I sum up a JavaScript with Drupal. How we can implement this one. So I search it out on the Drupal.org I found React with two models. React and my React.js. So basically React is for this React is basically download all the libraries and it's called libraries API and then my React.js it's a test model where they are building a pie chart using React and then we have Meteor it's a sandbox project and not been updated for while. For render we don't have any model. There are some risks with the React it's still growing as the stable version already is on January. So it's still growing. Debugging is trickier. We don't have any tools such now to debug the React applications. Then avoid exposing sensitive data because we are creating a code which is getting shared by client and the server. So we should not use it for sensitive sites and then we need to put number of libraries for enforcing directional flows where we have called testing, dependency different ways to declare a component. So the example which we have seen so there are different ways to declare same component. So I think we have already talked much about the isomorphic so let's see the code. So this is the demo which we have built. We have used our Fitches site and we have changed the slider. So only the block part you see we have just make it isomorphic. So we click on the navigation part. So we have panels, layout, duration is, there are different options we can use. So it's like quite fancy part. So previously we were using this thing from views we used to change the view slide show and then save it out and then go to the home page or the block. So let's see the code behind this one. So I have created a simple module demo underscore react this is an info file which has a style sheet simple css which we have written on for this demo and then we have a react.min.js where we actually implement the react and we have created one more js demo underscore react.js that's our one. Yes, it's in Drupal server. So we have created a simple block. We have a block underscore hook underscore block underscore info it shows my slider then it is a block underscore view subject as my slider then it's called a function. So we have Drupal get path model name and then it's called a json URL. So this json URL can be from any third party json. Currently we have created a view using data source so we have a json data format over here. We have used a single image field over here and if I click on the demo part so we have a json over here. So basically a complete URL for the image. So we have created an array variable over here and then we are storing all the image URLs over on this variable then we have created a Drupal where we are passing this variable to our React.js file and then we have a theme. So maybe all logic goes on the slider isomorphic template. Let's see. Oh, we don't have anything on this one. We have div id slider content. This text will get replaced by react. So let's see on the demo part let's see the view source of this one. So as you can see we have a div id over here which shows this text will get replaced by react even on the source we don't have the code where it comes from. So we have demo underscore react .js. So this code is already available on Drupal and it's an open source so we have downloaded from there so what we have done over here we have passed the id for the div which we got to replace and at the bottom we have passed the URL the image URL that is an array. So basically it includes a class initialization and the render and this gives effect of first slider and that's all for the demo for isomorphic. Yes. So if you guys have any questions please ask we are ready for it any modules available for this isomorphic. So basically we had one model the name of the model is react there's one more model my react.js basically we can use react model what it does it just download all the libraries for the react and my react.js is a model which has been built for just for the demo purpose it has the feature which we can use. So basically it creates a content type at the back end and you can expose all the data via json over there and you can just build a pie chart they use a pie chart library they pass all their data to that pie chart and they build a graph over there. Indiate anything? Not yet. Any other? Yes. We won't pass it we won't get any data I want to show the blogs in a view. So if there is no data there's an actual markup of the blogs then how will crawler it will affect the user? So like we have a react.js the implementation Google is smart enough to call that JavaScript it's built based on there. So what happens is in case of react as what you have studied the only search engine which is actually able to work for isomorphic JavaScript is Google right now and they say that they are able to search inside it but you are right that as per the view source code we are just replacing that particular thing dynamically. So the crawler won't able to get that. Right. So instead of showing that the implementation of the data it's giving me the tax. Correct. So I have worked with Angular.js and Angular is more of a framework than a library and they both have different things altogether but Angular is more in that perspective but the SU is not there also so I don't think currently we have a solution on it but we can search on it currently I don't think in Angular we have a solution for it my own site is in Angular and this is just struggling on it. But in react what they said is as per the Google goes they actually do that I don't know how but we need to search on it. No they are not only doing that they are also using Node.js in front of it so it's here we don't have any Node.js thing we only have Drupal and we only have react there they have four things we have seen the slide so they have Node.js, CoachDB, Drupal they have four things involved and that's why they were able to get that effect so a lot of push thing is happening from the Node.js which is not possible in case of normal Drupal application it's more of get and then post so we are just creating an application where it's more of only using Drupal and how you can do react yeah so SU is one of the things which we need to take off any other? okay so thanks a lot thank you for coming hope you enjoyed it and please give us the feedback which is there here thank you