 My name is Nabi Karetha and I have my co-speaker, Vishet Anandri, and we are going to take another session with Dupal Eid with underscore and platform JS. According to me, I work for Apia as a senior director. And apart from the contribution, I am a git admin at dupal.gov and maintainers of several modules and also the co- maintainer of groups.dupal.gov. If anyone is interested in maintaining or couple of modules of mine, please feel free to reach me. Hi guys, I am Abhishek Anand. I am a senior technical advocate at Apia and I am a maintainer of couple of modules. I like working with Dupal at the same time. I am very fond of JavaScript and I was a friend in that besides Dupal I like painting. So today's session is about backbone and underscore in the core and we will briefly look what backbone is and what underscore is, how it is being used in core, what is the scope of backbone underscore in Dupal core. At the same time we will look at a demo where we will have a simple application which we will build using restful APIs of Dupal Eid and one page application of backbone. Using our Dupal Eid, there are a lot of client-side trials for batteries which are being experimented and backbone, what are the real options in Dupal core. So Naveen will take you through what backbone is for the slides. So with the headless Dupal we have already know that we do the fetching of the data from some server or some type of service. That we have some agent request with the J2D library and everyone of us have already used it. So we don't have any consistent API or something like that to do that for us. So backbone is like that. It is providing that functionality out of the box for us. So it gives us a structure to provide some key value binding with the element that we want to bind some functions or something else with the elements over the web page also. So it has dependencies on underscore js. So it comes up with lots of useful functions like signify and JSON and so on. So backbone, we already, backbone follows the MVP model you presented but we are not considering MVP presenter here. So we have several ways to present something, present the data. So we are only talking about the models and views here. So models are the, models are just like in the class that we are considering. I am assuming that we already are knows about the Dupal modules and so on. Just like in the PD modules we brought up the core PHP core to do something. So but this is, it's a definition of from the backbone js. So my definition is that the backbone model is like a Dupal module and backbone view is like a Dupal thing. So whatever I have to do in the CSS or so or styling and stuff like that, I take care of that in the view and if I need to take care of logics and validations and all other stuff, I take care of that in models. So the interaction part with the backend happens with the model. What it does is it takes a restful object and it prepares it for the view to be used. View is pretty much what does the download manipulation and what are the changes that it needs to bring in the state of without it is carried by the view. This is a simple example of model view interaction. So here if a user, if a visitor or if a user will interact with element on their page. So if all the, if we have one need some like on focus, on focus, we have one need that event with view in the models. So if that user will interact with that particular element on their page that an event will fire that then view will send a response to the model that this something, that this, that now this event has to be happened. So this is a small example. We see a block and there's an edit link on the block. When you edit that, it happens with the help of backbone. Whenever you, there's an interaction with the user and when you try to edit the block, there's an inline function. It changes the state of the view. Now model will take that change state and sync that with the database and the database will return back with some update in the view. The model will again pass that to the view and view will make appropriate changes to the dog. So this diagram explains. So we generally have model and view. We do not have any controller which is being used in the code in backbone. The underscore is a helper library that backbone is using. So it comes up with several functions that for setting up, for getting settings and for manipulating up of data. It has very handful functions like get set, stringify, JSON and to approach and so on. So backbone is depending on this library. So it's like a hyperlibrary for it. So these are the libraries that are in Drupal code that we have. Backbone and underscore are just like any of the libraries. Like to include any of the libraries in Drupal you include backbone and underscore in Drupal code. The scope is pretty much limited to the admin section in Drupal code for backbone underscore. Let's take an example of the data that was talking earlier. You can see a red round. So do you know the guy's red circle? Do you guys know this point that where the red circle is? What are these pencil icons? What does it do? These pencil icons are conceptual links. So it's a great example in Drupal code that one of the nice implementation in Drupal code is in the contextual links. The models, views and controls have been separated out. It's one of the complex examples in code where the collection of models has been taken care of. So backbone is using in Drupal code is several modules. For the configuration of the Drupal, we are using the backbone and for the conceptual links and for the quick edit at Drupal and to. And they are also planning to replace out the whole field API with the backbone because to make it happen on the single page at the right time we have to go on several screens to create a single field. So to make it more robust and user friendly. So there is a discussion going on. So we are still working on a prototype for that for we are we are not to show that how that field API, field API UI. So basically what Navin was talking about the implementation of backbone and underscore in the code and what we saw is different places where backbone has been used. CT editor and contextual links are a very good example. We will look at refer to this example later. What I am going to cover is under part where we take a headless Drupal and we expose restful APIs for a backbone app to use it. With this approach you can totally eliminate all the UI which Drupal provides. Obviously it comes with a lot of work that you need to do on the front end but sometimes you might want to do that it is very handy. Suppose if you are building a mobile application or an application where you do not need the Drupal look and feel at all. You want to build a one page application and you just want Drupal to be a data store for you and then the API for you. Why do you want to use this because we want to use Drupal as one platform and nowadays it is not just one web we also want mobile apps and there are several edge points for our web application. So it is a good idea to have a headless Drupal which exposes the rest data in the rest format and it is being consumed by a backbone application and we have one page application which is very light. So I will configure a couple of views. We will take a simple example of article and configure a couple of views to expose restful API and then we will see how backbone is using it and we will look into the detail of the code, the backbone code that we need to write for that. I am switching over to HP strong. So this is vanilla Drupal installation. I have generated some content using devil generate. So we have a content type called article and we have some content already created. I just use devil generate to create some content. Now there are couple of modules that we need to do this. There is a module called services. So restful web services is the module that we need to use to be able to expose our data in the rest format. Now we will look at how we can do this using this. So I am going to create a simple view that I have already created one so I will just name it article one. This will show me content of type article. I can create a page for this but what I am interested in is providing a rest export for this. And I have to provide a path which will be used as an endpoint for the application. So the path would be articles and I just keep it rest so that I can read the article part for the normal HTML page. Once I create this I have got a display called rest export. What this is going to do is it is going to send the data in rest format. This is JSON and I use this in our backbone app. I might not want to show the whole entity because it comes with a lot of links and stuff like that. So I will just switch it over to things. I will just add body field. Now what I get is a title and a body field in a JSON format. So now my endpoint from group side is ready. If I visit this URL I will get my data. So this is the data that I am able to use. You can use it extensively to do this. This is the best way in which you can expose your data for consumption by your backbone app. You can use for pretty much anything. If you want to expose a single article, like if you want to have something like node slash NID, you can have article slash article ID. You can create a view with a simple app with a contextual filter which will take your node ID and it will generate just one node. Now this endpoint can be used in an Angular app. So I have created a root folder because I will use the same again. In the root folder I have the only two files which are of my use which is index.html and there is an app. In my index.html I have just added some libraries and spore and backbone and jQuery and I am writing some code. I will simplify this video later. I will just show you a demo in my review and there is an app.js file which has a simple module. There is a view and there is a collection which we will look at in detail later on. I need to specify my endpoint here which is already there. So now I need to visit this URL, index.html and I will see what we get there. So now this is a pretty different look and feel which this term all my articles which is fetched from Google. To get into details of how we did this, the html file has some existing links which will be used by backbone to add these things. So first thing we do is we need to add required libraries and everything else is just a starting thing. There are two major templates. We will look at what template it is. This is a template, article view and this is an article list. Article view is like you can say html in Google and article list is like new teaser. So article view is providing template for the whole list of articles and article list is providing the template for just one article. These two templates are required and then we specify a div where backbone has to add its data. So that div can be found somewhere in the ID main point. So backbone will add the data here. Let's look at our backbone app. There is nothing that we need to do in the module because we are not doing anything, we are just getting the data and passing it to the view. We need to have a collection which will fetch the data from the URL. And the major thing which is happening is in the view. The view is getting the element as main content. It is fetching the template from the article list and then it's initializing this. And this part is the render part which is generating the URLI from the list from the data which is in the template. And it is giving it to the article view model. There is an article model view and there is an article view view. So we have article list view which will generate the master list. And then for each individual list it will keep adding it to the article view list in the module. And we are passing the module. So this is being rendered. This goes to article view and article view renders it in an ally. Okay, sure. So should I repeat what I said? So basically what I said was we are not doing too much with module. We have a collection and then there is view. There is no data manipulation that we are doing in the module. So we are not changing the module at all. We are just getting the data. And there are two views that we are writing. What is for the list and for each list item. This is for article view and article list. Article list is getting the element for main container where it will append its data. It is getting the article list as a template which we saw earlier in the list for HTML. And then it starts rendering the article view which is a single article and passes the module to it. And we have article view which renders each ally as per the template of article. Now you can extend this to individual pages as well without going to a different page. I have done that as well which I will show you how to exit presentation mode. So this was simple one page app which is just consuming data from Google and it is rendering it. If you want to make it more fancy what you can do is you can have your route. So this is another example of wine. I had a wine container. This is not functional. I was doing it but there are still bugs to solve in this so I can't show you a demo of this. But what we are doing here is we are defining routes to different routes. So the second route is the ID which is passed as a parameter to wine details. And it renders the view according to the ID which is passed. It will fetch the ID with this URL so my endpoint will be Google 8 slash wine slash ID. So again I have written another view which will expose data in the Res format to this ID. That will be a single node data using construction filters and it will get the data and it will render it. So now we have just one page app which has a list and there are IDs. Once I click the ID it will append the view to have a node of that particular ID. It will make the call back to Google, fetch the data and it will append it to the existing view. So there is no page node or anything. It is just a backend call to the service call to Google which it can suggest format and which is done by this app. So this was the demo which I wanted to show you. The other thing is what is the future of backbone in Google code? Why was it adopted and is it really going to go any further? There are certain drawbacks with backbone. That one has no built-in data binding which means any logic to change the view or built-in long manipulation has to be written in your backbone through your custom code. There is no built-in data binding which will update the view automatically from your JSON file or from the model. So this has to be manually written in backbone. This is a drawback because there are other JavaScript libraries like Angular which does it for you. And it relies on getters and setters which is again not an ideal thing to do. And backbone also does not have any stuff like virtual DOM. So any manipulation it does on the actual DOM and once the DOM is updated it is very hard to get back to the in-state. So any changes reflect directly to the DOM. And we do not want to do that because now we have an advanced system where you create a virtual DOM and anything, any changes you make to the virtual DOM and the real DOM stays as it is. But backbone will modify the DOM and you cannot change the state back to the original one. These are the major drawbacks of backbone. So in future most likely backbone is going to be confined to the running space where you have the inline, the view-CY or the field-CY, all these things. Whatever I show you about the inline rating will probably be changed. The key Google community is trying to figure out ways or trying to find out a unified solution where they have a better library. And they are looking at AngularJS, Timber, or ELM libraries. Angular is supposedly more advanced than why backbone was selected was it is the oldest one and it has a higher option in open source community. That is why it was included in Drupal 8. But as far as going further is concerned backbone will not be the primary library library which will be used in Drupal. Most probably with the further versions of Drupal or maybe in Drupal 8 itself we will see something like Angular or Ember which will be adopted more than backbone. And there is this issue queue which has, this is having discussion going on. If you have any ideas around this you can always continue to this issue queue. This is the last session of the day, we will not take much of your time. We can open the rest of the time for any queue, any that you might have, this pretty much what we had for our session. Any questions? Finally what they are looking at is Angular and Ember. So GraphQL and they are comparing AngularJS, Angular 2 and GraphQL for the client side framework. So backbone was, this made issues for the backbone for the admin you guys, for the backend, not from the front end. There is often issues going on for that discussion of that. This is the example. One of the, Babu is only going to stay in the admin which is not going to come out of AngularJS. For all user-related stuff, all stuff that he does, he doesn't have any discussion. There is no discussion and Angular and Ember are the biggest criteria for this. Angular has, lately you have to do more than backbone, so that is the, this and that. Angular, Angular has its own standards. I said that was your application, you can support it and you can do that. You can save a lot of tags and stuff like that. You can't do this. And one thing with backbone is it can, you know not need to do all those stuff with one hand. You can just move it as a component for certain users. So, these are added for developers if they, for building them in choice, if they only use Angular as a library. Anyone who can define Angular as a library or if they do not want to, they can totally change it, add new library and re-assist and use that. That's the reason why underscore and backbone was a problem. And it's a very unique thing. It's a very thin library, so, you don't want to make a group of them or any other. That's the reason why. With Angular, there are also problems, which we can discuss. That's the reason why this is not my question. It's a question of Java's tradition when we get to the top of the throne and as a CMO. I think it's a good idea. I think it's a good idea. I think it's a good idea. I think it's a good idea. I think it's a good idea. I think it's a good idea. The concept of isomorphic JavaScript, because I mean JavaScript on the server side. So, you could take, for example, an example to correct the end of the JavaScript. I know that the library has a whole bunch of Chrome, VAP, and the VAP version of it. So, it's my, Reactworks, in conjunction with Node.js. React is an experiment with React, you know. Yeah, but it's also front-end, sorry, back-end server side. As far as I knew what React is, I have limited output React. Sorry, it was Meteor. Meteor is the one which runs with Node.js. Meteor does React. I don't have too much of knowledge about React, but I don't think there's any option for any server side JavaScript running for Google as of now. Because it will be solving the same problem which Drupal is solving. You can use Drupal in conjunction with Node.js. Drupal is not very good when it comes to the real-time interaction. So, when you have something which is going for very high IO, for example, if you have a Facebook's time notification, or if you have a Drupal connection, you can use Drupal in conjunction with Node.js. These are the problems which are not being solved by Drupal right now. Drupal is still relying on long polling or a Jax polling methods. Others can use Node.js module. So, these are the problems that you can solve with that, but other than that, anything that you do with server side JavaScript would primarily be doing the same thing which Drupal is doing. So, I don't think there's any way to solve this problem. So, I'm not aware of any such conversation which is happening around it. Some ID you have in place, if a specific content has, I have this one for a specific role, then what would be the problem? What would be my role? What is specific role? Suppose an ID will show the whole content type for a specific ID, but it might not manage the role. But when it has managed the role, and it doesn't show the administrative type, then what would be the problem? What would be the main problem? Is there any two factors that you would like to practice? Yes, I think you'd have to ask, because whatever interaction that is happening between your badminton app and your Drupal app is through the ghetto perspective in your past. Yes. So generally what happens is you might not use underscore, this is for admin users, you should have your admin interface. So, you'll have to pass as a parameter. Yes, you have to add another parameter. Yes, but your application needs to, your front-end application needs to know, right? Drupal will know that I have rendered this view for this role. But how would you have, when your application, your front-end application is requesting the URL, at the end it is just requesting the URL to the view? Yes, but then how would you pass the session and this problem? Yeah, but you are just sending it request. You need to pass a token through the URL, like session was handled already. Or make a post request and pass it in the post session. Even that can happen. Either do a get or a post. Yes. That's the reason why that role is for the admin section. For any module that you are using, like I said, for any module that you are using, you will paste these libraries and you can use that as a library. Drupal will just support, the core will just support the use of this library and use this library. It might not necessarily get into the port. It will just support this library. You can use this library. Yes. For example, there are a lot of modules which is using, which has mixed licensing. That's why we have library modules. Your module, which is GPL licensed, does not need to have a third party license, which might have some other license. That brings in the licensing issue. So yeah, of course, unless it is GPL, it will never get into root or core because we cannot get into mixed licensing. That's why there are several other libraries, which have the idea is to get, unify and have a platform where you can use a lot more front end libraries than just underscore any platform. That's how it is. Zools is using its own custom library for doing that. Yeah. So, Zools has to be compatible with that one. That one doesn't have to be compatible with Zools. So, I will check in the port whether Zools is in that one. But, I have got... I'm sorry. Thank you. I'm just coming through. And I'm... Yeah, I didn't know that. You're saying that Zools should support... Yeah. If Zools is not using that underscore, then it's a nice feature that we can file an issue for Zools. Why don't you go ahead and file an issue for Zools? I don't think Zools is using underscore or backbone. But yeah. If you have a recommendation, you can always do a feature request in the issue queue from the previous window. Thank you. Thank you. I'll put two in here. I'll put two in here. Okay.