 Hello, good afternoon. I'm Nick Vidal, I'm the room monitor. If you guys need any help, please let me know. I'm going to introduce you Vadim from Ukraine. He's going to give us a talk about backbone JS and Drupal 7 and 8. Thank you very much. Dear ladies and gentlemen, welcome on the backbone JS session. My name is Vadim and I'm lead developer in TreloN. Currently I'm writing a book for a packed publishing and about backbone JS and it's not ready yet but it's on the final drafts and I hope it will be published soon and I probably can have some discounts for a Drupal column attendees so just email me or leave business card I will like to share as voucher review and so let's start. Do you remember those lovely 90s where JavaScript was used just there are not so many JavaScript actually was there like some scripts that validate in forms and drop in alert box if something filled not properly so this is how it was used in the early 90s and in 1995 actually I started to develop websites in 1999 and there were like lots of websites on the merry Christmas Eve with the snows floating over the screen if you remember it it was cool and this is how JavaScript was used and then in 2000 Microsoft invented XML HTTP request and it actually allowed to do Ajax but the word Ajax we had been known in five years later and in 1998 people actually was doing the same with iFrames like you can do Ajax call with iFrame in 2006 the world first have seen jQuery it was awesome it allowed to use CSS lectures for traversing document object module and do event handling perform Ajax make animations and achieve compatibility with all browsers and by the way it's going to be a jQuery conference in Portland next month in June sorry in and foreign so it's maybe if you're a stand here that could be a reason to stay and come this conference and what are we having in 2013 so many new scenes have appeared during the recent years let's get familiar with them so now we have HTML5 and it provides lots of cool features like local storage if you enable local storage you can store data even if there is no internet connection with a server and even more cool thing that if you write a special script you can store data there and then there is internet connection with a server this data will be automatically synchronized with a server there is also push state push state is the technology that allows to control browser history and browser URLs before for making for changing URLs we need to use the hash character and this hash character was almost in any Ajax application it was difficult to share this thing to it was difficult for search engines to get the link with this character and to index it because they thought that it was a single page and now it's possible to have a completely separate convenient URL how it is used for typical websites and it brings more features to search engine optimization and also there are more new JavaScript templating engines like a moustache.js or even Twig so Twig it's templating engine that is now being added in a Drupal 8 it's in the Twig sandbox and actually the Twig could be processed by JavaScript too so and there is also a representative state transfer which is REST so the REST allows to communicate between client and the server over HTTP protocol and it's actually a cool thing so with REST it makes possible that server takes care about data and client application takes care about rendering and so client and server completely independent they all only communicate through the REST and we are going to cover in this session all of this so let's speak about JavaScript client evolution how it was evolved during recent years first JavaScript clients became more complex and they able to do more complex things and second it's happening in synthe C client transition so the clients contains business logic do rendering and actually do some other cool stuff for example it's not actually in you like for example in the past we have unix and people were connecting to the big machine called mainframe through the terminals and those terminals was like a sync clients and then personal computer appears it's like a moving from a scene to seek and then again we have a new transition from the client from the desktop application to the web it's again browser was a sync client and server was a sync and could be able to process all user requests and now we are having another transition from sync to sync to sync sorry from sync to sync so right now it's possible to create a JavaScript application that could sit in the browser it could be a browser extension and it could do whatever it can and synchronize with the server only in during if there is internet connection also browsers became more performance and now JavaScript is being processed in 10 times faster than like 10 years ago but there are still some problems right now typical Ajax code looks like this so here we do like Ajax request don't traversing event handling we also process some templates hopefully we are not seeing HTML code here but many scripts contain such thing and let's speak about Ajax in Drupal well actually have you ever seen any JavaScript code when dealing with Ajax there are like there are forum API and you can you are defining Ajax in the PHP arrays that ridiculous and let's do things properly it's it's unbelievable like we may use JavaScript when it is intended to be used and there is a good solution meet backbone.js so backbone.js was created in 2010 by Jeremy Ashkenos he's also known for a coffee script. Backbone.js is based on the underscore.js framework this framework allows to do some manipulation with arrays, objects, provide event handling and many other cool things and backbone.js requires jQuery or Zepto if you heard about Zepto or if not I will say so Zepto is 99% compatible with jQuery library but it is more light and it does not take much space it lots and works very fast but it works only in the modern browsers and let's speak about backbone.js advantages first it's minimalistic it could be integrated to any front-end and non-front-end framework it's modular and there are about 100 extensions available extensions on the github it has perfect object-oriented design so it's quite easy to extend and write your extension and there is a good community actually about 90% of my request on the github was answered and I found the community very good growing and it's not as much big as a Drupal but it's also cool so the things you should know about backbone.js that it's not only one there are lots of competitors and you may want to know why backbone.js so look at this slide this slide describes how new framework appears so if somebody wants to create a new framework that covers all standards all existing standards he decided to do it and do it and then new framework appear but backbone was one of the first frameworks that MVC JavaScript and there are now about 100 extensions so if there is something not in core you probably might find something as an extension so there are good examples of the usage of backbone.js. Groupon now find that it is very good for building AX heavily web applications and the more exciting thing that they found that the learning curve of the backbone.js is very great so and they build their working prototype the working product the first prototype in two weeks amazing first square also uses a backbone.js for first square entities and they are finding very extendable and they have lots of extensions that is used with first square. LinkedIn mobile uses backbone.js for their mobile website and they are very happy they have heavily actually websites rendering on the client side and this is all done by backbone.js also Airbnb uses it and they actually use it with Node.js on the server and they created their own library called renderer and there are lots of examples of who and how uses backbone.js so let's start to learn how to do application with it. So there are some basics like there are model. Model contains data and a business logic collection is a set of the models that can be processed in a loop or some filtering are certain to be performed for the collection view renders a collection and the template is used for separating HTML from the JavaScript. There is also a router which is similar to HookminU in Drupal it provides some passes, bases and the callbacks it also allows to process parameters and history it's a global object it's only one in backbone it stores the current router and it also controls over the changes in the URL. There are also events. Events are provided by the underscore.js and mixed with almost any backbone object. Events allows to objects to define events or to handle events from the other objects. So here you see a difference of MVC from the backbone.js in MVC user see what's view has been rendered and can use website which is handled by controller which manipulates over models and collections if the model and collections are changed then view is updated and shows new picture to the user. Also model can store data inside and synchronize it with a storage. In backbone.js the things are very similar but the main difference is that view there is no controller. Controller is separated and some of the parts is in view and some of the parts are in router. So in backbone.js view listens to model changes and updates HTML and DOM tree and also it listens to changes from the DOM like user events and then updates models. Also like in MVC models are synchronized with the storage currently in backbone rest is used but you can actually override so any data provider can be used and also there is a router which intercepts changes in the URL and shows appropriate view. So the models are typically updated in the view or router so in the view they are typically written to the server and in the routers they are typically fetched from the server. So let's see some demo. I'm going to show you a simple to-do application there are many implementation of this application in different frameworks like here is we have several to-dos I've added I can add some new like setup setup Drupal website also configure content type also configure views yeah there's a typo I can change it by double click and then press enter again so if something is already done just click in checkbox there is a way how to delete or clear completed so it's simple example of them this application if I open it in the new tab I will see same result and it's completely stores data in in the browser storage so actually it could store in the server or synchronize it with the server and let's go back to our presentation one more thing do it so this all each line is there div or table row I'm not sure but it represents a model so the model forms a collection and when I add something I'm creating new model adding to collection and then backbone intercepts this and adds new row to this table let's now go to um oh sorry oh something not sure I just will open you presentation something's going wrong sorry you just need to fix it now what happened here but okay okay yeah so hopefully we're back so this is an example that shows how we can what we can do with backbone jets and we are going to investigate how to do the same actually it's not just a table it's full of controllers views and models so as I said each row is a view each row is a model and the whole table is also a view and the collection collections are bound to and models are bound to views so this table shows some simple items let's um define model and the collection here how we can do it we extend our model from the backbone model add some new function as calculate amount that gets a price and a quantity and returns it to the user also we are creating our own collection and um define that which model should be used with this collection then we defined the view to render the model we extend it from the default backbone view we are defining a tag name which is tr like a table row also we can define template of entire of the row currently we are getting it from the html file it could be stored in the body or in the header we are doing it with jQuery and we are using underscore to load the collection inside backbone and then we can use it then we can render it in the render method we are getting data from the model in json and then we are adding new properties as json like amount which we are calculating and then we are rendering it with the template and setting it as html of the element if you see that we are using this dot l which is a current element associated with the table row it is created automatically when we are creating a new view and this is how we are defining a view to render a table we are defining a tag name we are getting a template of the table which contains only empty table with the table headers and there is a render method which which shows this table assigned the template to the html of the current element which is stable and also you are seeing that we are using underscore dot each method which is a loop we are making a loop for models inside the collection and then appending a model into the table we are running a special method called append in the append method we just create new in new view new sub view for the model and pass model inside and then we get in we are rendering it get an element and append in this element to the to the whole table also we should to define our templates inside index php so this is how templates look if you see that we have id specified and table template for the table is just containing table headers and row template containing data we are rendering this is specific underscore syntax but we can actually use our any of the templating tool also the last step is where we need to create collection and internalize it with values like description price quantity and then we are creating new view for this table and assigning it to the html body that's all but there are also some cool things like we can bind model to the view which mean if the model is updated the view gets updated automatically we can also create two way binding that means that if we have input elements to enter the data when the user inputs it then it will automatically update model properties and if there are any other views which deals with the same model it will update the view automatically so it's a very cool thing there I can there also can be a forms layouts which manage views we can speak about router and other templating engines so this is how we can bind model to a view we need to add initialize function to our view for the model where we are listening to model events such as destroying change if we are getting destroyed when then we are calling method of the view remove which removes view freeze all memory allocated and also removes view element from the document object model also we add initialize method to the view for the rendering collection where we are listening to add event so if there is new collections new models have been added to the collection we are running append method that we already defined there could be other events handling other ways to deal with this but this is just an example there is how to way bindings occurs so we are defining bindings property in voice item form view this is a view for a specific model the keys are jQuery selectors and the values are model properties also what else we need to do is to run stick it method which will automatically bind and that's all but I forget to say that we need to use backbone sticking extension for this it's not in the backbone core just extension to download and to include it in your project and that's all also there is a way how to deal with forms the forms are can be difficult to create without this extension but with it it's easy like in Drupal it backbone forms extension is somehow similar to form API we can define form fields form set the form type saved options set validators set submit method and we are defining it in the model and what else we need to do is to create this model and then then create new instance of backbone form and pass this model and render this form so actually backbone form is inherited from the backbone view so it's used in similar way but we are not doing entire of it it just takes care about it automatically the router the router is very similar to hook menu in Drupal and we are defining routes the routes is the URLs it can contain parameters if you write a semicolon and the parameter name that will take this parameter from the URL and will pass it to the callback which is defined as a value and this is how it is done callbacks are also defined as part of this object so some other cool things um I'm describing in backbone js cookbooks I hope it will be available soon just need to complete the final chapter yeah and maybe next month or in a couple of months yeah so let's speak about a droop a backbone in a Drupal so I have introduced you to this backbone and now it's time to understand how uh backbone enters can be used in a Drupal so there are different ways bootstrapping method we saw this technique above where we defined our created uh defined our data data in javascript and we just uh said that we are creating new collection and passed all data in it this is how we can do it with Drupal we can make javascript and pass those data as in the settings if you know there is Drupal at js function that allows to add javascript and also it allows to add settings so those settings could be data that we could later use it in our script to initialize our objects but it's maybe difficult way to do and there are also um uh representative state transfer method which is the rest it's very cool um it allows to communicate with a Drupal over HTTP in Ajax and in Drupal on the Drupal site we need to install services module or rest to web services module it's very easy to configure them and the other way I will speak about this method later and the other way is backbone js module it also deals with the rest in Ajax but it already preconfigured so you don't need to install this actually you need to install this module but it will do most of the job for you and will provide some useful classes to the backbone so the rest rest is allows to as I said to request server and you could use the post get put delete request which can do appropriate functionality for example post can create new item in the collection get can list all the collections or retrieve specific model from the collection put can replace the whole entire of the collection or replace the content of the model and delete I can delete entire the collection or delete specific model from it so um at this at the top you see URLs which example URLs to access the rest resource the resource can be a multiple which is the collection or it can be single as a model which is the element of the collection so this is how rest works in the backbone you are defining your model and in model you can override but you don't need to do but you can override ID attribute for example if you are working with the MongoDB then the attribute is like underscore ID in Drupal it can be NADL something else you can you should define URL root which is a root to the resource of the collection for example Drupal use it as a part to access the whole URL it adds some ID to the end of the root but if you don't want to use URL root you can define the whole path to the model with a URL method URL keyword and you also should define define the collection and define the URL key it can be a function or a value it just URL to access the whole collection whole resource in backbone JS you could use following methods to deal with this for example with uh you can use fetch module of the model it fetches data from the server and if you're done so it can automatically update the whatever on the screen which is uh bind with this model and there is also a method to save and destroy the model delete from the collection if you're working these collections so you can fetch the whole collection it means several models some reservoirs allows to pass additional parameters in the URL so you can filter or apply sorting you can also add specific models to a collection or remove them and with backbone JS module you don't need to do all of this it was created by esonbin and it provides models and collection already built to use this Drupal and it is via REST so you can use users, nodes, commands from the javascript and you can even access this view of nodes it's very cool I will show and it works both with services and the RESTful web services module and here is how we can access to node view so the Drupal view is a bit different from the backbone view so don't confuse it so the backbone module provides a collection called node view which is extended from the basic collection and you can create it on you can create instance and to specify the view name and also when you are doing fetch on if there is success we are just printing the entire of the collection to the browser but you have not seen any resource definition or any other work it just automatically take the Drupal view and transform in the backbone collection so this model is quite new and but the implants in their roadmap they will support bootstrapping and also will do better view support so I guess it will be more entities also they're going to introduce in place content editing for Drupal 7 and provide some dragon group and maybe there will be specific Drupal 8 version by the way do you know how a Drupal is Drupal 8 how is intersected with the backbone I mean the backbone.js is now in core in the Drupal 8 and there are good examples it's used for in place content editing I will show you it's also will be used for the layouts it's a new initiative which is mainly developed in the Spark distribution there will be a mobile preview bar it's now available in the Spark distribution and there can be any other some things that will be and chase the user experience in Drupal 8 so right now Spark is a separate distribution that like experimental platform and some cool thing that is that are working there they are transferred to the Drupal core like in place editing let me show you for example some Drupal 8 functionality so here is a simple Drupal 8 website it looks almost the same it just in development now and we can here see menu items we can do quick edit so I have added some content which is context and I can click here and update the fields directly not going to the edit page and there is no need to reload it automatically updated and this is how things could be edited in Drupal 8 it's very useful and I think it's in Spark distribution it looks a bit more clear but it just you know that Drupal 8 is now being developed and it's going to be a code sprint soon so yeah this is one of the example so let me get back to the slides and one more thing I want to speak about it's in the Drupal 8 there is a web services initiative uh which means that REST in core so um and in Drupal 8 they use symphony system to create storage controllers which are allows to access a database and provide with the classes and provide with a method it's like a storage controllers it's like a separate classes and they can be exposed to the REST so actually by default they are exposed and you can access if you have a login with your REST you can access any storage controllers storage control can be like entities some data it could be also access controllers or anything else and that week that week is in core uh almost in core actually it is a week sandbox and if it is work out maybe on this code sprint it will be committed to the core and it's much more powerful template in edging but the funny thing is that there is um javascript implementation for a week and just let's understand how the data flows in the um backbone gs so there is database and which provides data to the access controllers and storage controllers which are used by the renderer controllers and form controllers which render those data and they use in tweak templates to render them and output to the browser let's um see so if you are using REST so this storage controller i explode to the as a RESTful service and can be accessed by the backbone application you are writing on and the funny thing is that probably it's just let's imagine if you could reuse Drupal uh templates like a tweak templates it will be fun so you you can make your own application that uses some templates already written for the Drupal it maybe will be hard to do but it just um imagination so you can even do mobile application or even more uh you can do um native applications that will work um android or um iphone with the tools such as phone gap or trigger IO it's possible to create mobile application from css javascript in html so if you are using backbone you just can um access data we REST and then render it with tweak and that's will be your application you are building it with phone gap and trigger and upload some virtues in app store or android market yeah so this is my session and i would like to hear questions from you if you have a question i hope you have please stand in the line and ask the microphone yeah so any questions everything understood or everything not understood yeah please so my question would be let's say we're building a backbone app which is a catalog so it's really important that it would be indexed by google yeah is there a good standard way how to make our backbone app more co-friendly yeah i hope so so i see this way how you can do it now right now there are possible to use standard URLs and your server can just um see if it's a search engine if the ip address is search engine then you can um output just html does this and in the index file you can output links or maybe uh just i i think you just need to create um maybe files like a robots files for search engines and to add the pages you want it to be indexed and then the search engine comes you just need to make sure you as output also pure html i i hope it would work so basically we're serving different content for first for search engine spiders yeah i i'm not sure how smart search engines are if they are able to process javascript but um if like if they are not they are typically seen a blank page and if you are able to uh show html instead so they can index it will be great maybe uh it's possible yeah i know it's possible to backbone to work with a node gs if it's on a server so um maybe there can be a way to switch between server and the client implementation though you are rendering not on the client on the server if um any search engine um spider comes to the page thanks yeah thank you any more questions yeah how do you have you found a way to not have to duplicate your form api rules in both backbone.js and on the Drupal side because you were pointing out that you can add mr misses and um miss as like allowable can you have you figured out a way to combine that with all it's actually a great question so yeah i i need this to be done so um maybe with some mapper function that can but actually it's very similar so there are like uh input boxes select boxes um but i'm not sure about validation but i think it's quite possible to just build a form from the form api if it is a simple form yeah it's just need to to work and get deep in this okay and can you give a practical like have you tried services and rest ws because i've tried to do backbone with these and i i just run into problems especially because you have to go and figure out and form api like what it's expecting like date fields for example would be a really hard one oh so for notes right yeah yeah um i actually used um a backbone module i i don't think they there are some problems here and i see very good examples but if you are dealing with a date uh i had a similar problem you are talking about with the mongo db so uh it's actually a mongo lap which is a restful service of a mongo db um and uh the dates are in starting the different format so uh when you are um fetching data there is a way how to alter the behavior so you are you can um rewrite what is get from the server okay thanks no problem yeah uh you mentioned that you can save data uh on the browser uh you actually showed us on the demo yeah um then you also mentioned that you could later sync that back with the server yeah is there anything that helps that yeah of course so let me uh go to the first slides there's a link where there are lots of here it is so i just need to connect to the internet yeah so um i think it's the presentation is available online so if you click on this link you will go to the list of the backbone extensions and if you go to the storage section there are about more than 10 extensions that um allows to work with different storage engines and there are web sequel local storage and i think this extension is called um something like a local storage sync or yeah it's very i i've tried it and i'm writing uh including a recipe in in my book and it works very well okay thank you no problem hi i've arrived a little late so apologies if this isn't your presentation um do you have examples of a single page app that uses drupal as the back end and backbone as the front end uh yeah there is example um if you go to the backbone project there is a link on the example and also um that's quite cool module and it uses i think it's somewhere on the github but there should be a link on the on the model page where um application connects to the uh drupal via backbone module and it's a kind of um to do application okay anything that's in um wrapped in phone gap or anything that's in a store we're still we're still sort of in the very early stages of this kind of integration not not with backbone but um in my company we are being developed uh application which are wrapped in the phone gap and now it's been on the uh final steps of adding to the app store i think it's already added and it uses drupal yeah it uses drupal yes there is a mag module uh mag like a mobile app generator last drupal cons there were a couple of sessions and the drupal con london sorry drupal con munich there was a session about mobile app generator i was speaking with the fabian and um so you're out what what framework does it use on the yeah phone gap uh but just just what javascript framework uh no javascript framework just j quarry and j quarry mobile j quarry mobile yeah okay so there's not real any good examples yet out there then is it i hope it will be but not yet no yet no okay and then so where does no no j s fit until yeah the equation so what is the question so if you have drupal on your back end backbone with another side but yeah would you need no j s or does it fit in there in any way no uh if you have a uh backbone j s on the client side you don't need any j s just no j s is server side right yeah yeah it's server side so if so typically you'd use no j s with backbone j s so can you use no j s back when j s and drupal in some capacity there's no need for i'm i'm really there is no use cases for this all right thanks yeah no problem are there any more questions okay thank you Vadim oh thank you very much