Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Using Backbone.js with Drupal 7 and 8


Published on

  • Be the first to comment

Using Backbone.js with Drupal 7 and 8

  1. 1. Building Bridges, Connecting CommunitiesVADIM MIRGORODFront-end, 05/22/2013Using Backbone.js withDrupal 7 and 8
  2. 2. Vadim Mirgorod• Lead developer in Trellon• Writing Backbone.js CookBook for PACKT• Email:• Web:• Twitter: @dealancer#2
  3. 3. Remember the web development in 90s?#3
  4. 4. 1995: JavaScript#4
  5. 5. 2000: XMLHttpRequest#5
  6. 6. 2006: jQuery#6
  7. 7. 2013:?#7
  8. 8. Whats new in JS?• HTML5:– Local Storage– pushState• JS templating engines:– Mustache.js– Twig.js• Representative State Transfer (REST)#8
  9. 9. JavaScript client evolution#9
  10. 10. Complexity#10
  11. 11. Thin to thick transition#11
  12. 12. Performance#12
  13. 13. Problems!
  14. 14. Right now typical AJAX code looks like this$(document).ready(function() {$("#getData").click( function() {$.getJSON("artistsRemote.cfc?method=getArtists&returnformat=json",function(data) {$("#artistsContent").empty();$("#artistsTemplate").tmpl( data ).appendTo("#artistsContent");var nowIs = new Date().toLocaleString();$(#lastLoad).html( nowIs );});});});#14
  15. 15. AJAX in DrupalHave you seen any JS?#15
  16. 16. #16
  17. 17. Lets do things properly!#17
  18. 18. Meet...#18
  19. 19. #19
  20. 20. Backbone.js• URL:• Created by Jeremy Ashkenas in 2010, anauthor of CoffeeScript• Based on Underscore.js:• Requires jQuery or Zepto#20
  21. 21. Backbone.js features• Minimalistic• Modular• Perfect OOP design• Over 100 available extensions:,-Plugins,-Resources• Community#21
  22. 22. Backbone vs...• Knockout• AngularJS• CanJS• Spine• Ember.js• many others#22
  23. 23. Backbone vs...#23
  24. 24. Who uses Backbone.js?• Groupon Now!• Foursquare• LinkedIn Mobile• Airbnb#24
  25. 25. Lets learn how to backbone!#25
  26. 26. Main concepts• Model• Collection• View• Template• Router• History• Events#26
  27. 27. MVC: Backbone:
  28. 28. DEMO!TODO APP#28
  29. 29. Easy example
  30. 30. Define the model and the collection// Define new model.var InvoiceItemModel = Backbone.Model.extend({calculateAmount: function() {return this.get(price) * this.get(quantity);}});// Define new collection object.var InvoiceItemCollection = Backbone.Collection.extend({model: InvoiceItemModel});#30
  31. 31. Define the view to render the modelvar InvoiceItemView = Backbone.View.extend({// Define element tag name.tagName: tr,// Define template.template: _.template($(#item-row-template).html()),// Render the view.render: function() {var data = this.model.toJSON();data.amount = this.model.calculateAmount();$(this.el).html(this.template(data));return this;},});#31
  32. 32. Define the view to render the collectionvar InvoiceItemListView = Backbone.View.extend({tagName: table,template: _.template($(#item-table-template).html()),// Render the view.render: function() {$(this.el).html(this.template());_.each(this.collection.models, function(model, key) { this.append(model); }, this);return this;},// Add an invoice item row to the table.append: function(model) {$(this.el).append(new InvoiceItemView({ model: model }).render().el);}});#32
  33. 33. Add templates into index.html<script type="text/html" class="template" id="item-table-template"><tr><th>Quantity</th><th>Description</th><th>Price</th><th>Amount</th></tr></script><script type="text/html" class="template" id="item-row-template"><td><%= quantity %></td><td><%= description %></td><td><%= price %></td><td><%= amount %></td></script>#33
  34. 34. Create collection and show the viewvar invoiceItemCollection = new InvoiceItemCollection([{ description: Wooden Toy House, price: 22, quantity: 3 },{ description: Farm Animal Set, price: 17, quantity: 1 },]);$(body).html(new InvoiceItemListView({collection: invoiceItemCollection }).render().el);#34
  35. 35. Some cool thingsTwo way bindingModel to view bindingLayoutsTemplatesRouterForms
  36. 36. Model to view bindingvar InvoiceItemView = Backbone.View.extend({// ...initialize: function() {this.listenTo(this.model, destroy, this.destroy, this);this.listenTo(this.model, change, this.render, this);},destroy: function() { this.remove(); }});var InvoiceItemListView = Backbone.View.extend({// ...initialize: function() {this.listenTo(this.collection, add, this.append, this);}});#36
  37. 37. Forms// Backbone-forms extension.var UserModel = Backbone.Model.extend({schema: {title: { type: Select, options: [Mr, Mrs, Ms] },name: Text,email: { validators: [required, email] },password: Password,birthday: Date,}});userModel = new BuyerModel();$(body).append(new Backbone.Form({ model: this.user }).form.render().el);#37
  38. 38. Two­way binding// Backbone.stickit extension.var InvoiceItemFormView = Backbone.View.extend({className: invoice-item-form-view,bindings: {#description: description,#price: price,#quantity: quantity},render: function() {var html = <label>Description:</label><input type="text" id="description"></input><br> +<label>Price:</label><input type="text" id="price"></input><br> +<label>Quantity:</label><input type="text" id="quantity"></input><br>;$(this.el).html(html);// Here binding occurs.this.stickit();return this;}#38
  39. 39. Forms// Backbone-forms extension.var UserModel = Backbone.Model.extend({schema: {title: { type: Select, options: [Mr, Mrs, Ms] },name: Text,email: { validators: [required, email] },password: Password,birthday: Date,}});userModel = new BuyerModel();$(body).append(new Backbone.Form({ model: this.user }).form.render().el);#39
  40. 40. Routervar Workspace = Backbone.Router.extend({routes: {// Default path.: invoiceList,// Usage of static path.invoice: invoiceList,// Usage of fragment parameter.invoice/:id: invoicePage,// Usage of fragment helpPage,// Usage of splat*path: downloadPage},});#40
  41. 41. Other cool Backbone.js Cookbook
  42. 42. • Bootstrapping:– Technique we saw above– Do it yourself• Representational State Transfer:– Services module– RESTful webservices module• Backbone.js moduleBackbone and Drupal 7#43
  43. 43. REST#44
  44. 44. REST in Backbonevar PostModel = Backbone.Model.extend({// Override id attribute.idAttribute: _id,// Define URL root to access model resource. Otherwise use// url() method to provide full path to the model resource.urlRoot: function() { return; }});var PostCollection = Backbone.Collection.extend({model: PostModel,// Define path to the collection resource.url: function() { return; }});#45
  45. 45. REST in Backbone.js// Fetches data into a model.model.fetch();// Saves a;// Destroys a model.model.destroy();// Fetches data into a collection.collection.fetch();// Adds models to a collection.collection.add(models);// Removes specific models from collection.collection.remove(models);#46
  46. 46. Backbone module• URL:• Provides models and collections for Drupalentities via REST:– Node: Node model– All node: NodeIndex collection– Arbitrary view: NodeView collection• Works with both Services and RESTful WebServices modules.#47
  47. 47. Backbone module// Create new NodeView collection.var viewCollection = new Drupal.Backbone.Collections.NodeView();// Set Drupal View name.viewCollection.viewName = backbone_example;// Fetch data from the collection.viewCollection.fetch({success: function() {console.log(viewCollection.toJSON());});#48
  48. 48. Backbone mdl roadmap• Support for bootstrapping• Better views support• In-place content editing• Drag and Drop• D8 version?#49
  49. 49.
  50. 50. Backbone and Drupal 8• It is in core!• Used for In-place editing issue:• Used for layouts issue:• Used for toolbar issue:• META issue:
  51. 51. DEMO!
  52. 52. One more thing!• Web services initiative– REST in core– Storage controllers• Twig– Templating engine– Twig in core (Twig sandbox)– Works both for PHP and JS#53
  53. 53. One more thing!#54Twig templatesStorage controllersAccess controllersRender controllersForm controllersDBBrowser
  54. 54. One more thing!#55Backbone appTwig templatesStorage controllersAccess controllersRender controllersForm controllersDBRESTBrowser
  55. 55. One more thing!#56Backbone appTwig templatesStorage controllersAccess controllersRender controllersForm controllersDBRESTBrowserMobile
  56. 56. One more thing!#57Backbone appTwig templatesStorage controllersAccess controllersDBRESTMobile app built with PhoneGap or
  57. 57. Building Bridges, Connecting CommunitiesEvaluate this session at: Thank you!What did you think?