Building Bridges, Connecting CommunitiesVADIM MIRGORODFront-end, 05/22/2013Using Backbone.js withDrupal 7 and 8
Vadim Mirgorod• Lead developer in Trellon• Writing Backbone.js CookBook for PACKT• Email: dealancer@gmail.com• Web: http:/...
Remember the web development in 90s?#3
1995: JavaScript#4
2000: XMLHttpRequest#5
2006: jQuery#6
2013:?#7
Whats new in JS?• HTML5:– Local Storage– pushState• JS templating engines:– Mustache.js– Twig.js• Representative State Tra...
JavaScript client evolution#9
Complexity#10
Thin to thick transition#11
Performance#12
Problems!
Right now typical AJAX code looks like this$(document).ready(function() {$("#getData").click( function() {$.getJSON("artis...
AJAX in DrupalHave you seen any JS?#15
#16
Lets do things properly!#17
Meet...#18
#19
Backbone.js• URL: http://backbonejs.org/• Created by Jeremy Ashkenas in 2010, anauthor of CoffeeScript• Based on Underscor...
Backbone.js features• Minimalistic• Modular• Perfect OOP design• Over 100 available extensions:https://github.com/document...
Backbone vs...• Knockout• AngularJS• CanJS• Spine• Ember.js• many others#22
Backbone vs...#23
Who uses Backbone.js?• Groupon Now!• Foursquare• LinkedIn Mobile• Airbnb#24
Lets learn how to backbone!#25
Main concepts• Model• Collection• View• Template• Router• History• Events#26
MVC: Backbone:http://www.jboss.org/jdf/examples/ticket-monster/tutorial/UserFrontEnd/#27
DEMO!TODO APP#28
Easy example
Define the model and the collection// Define new model.var InvoiceItemModel = Backbone.Model.extend({calculateAmount: func...
Define the view to render the modelvar InvoiceItemView = Backbone.View.extend({// Define element tag name.tagName: tr,// D...
Define the view to render the collectionvar InvoiceItemListView = Backbone.View.extend({tagName: table,template: _.templat...
Add templates into index.html<script type="text/html" class="template" id="item-table-template"><tr><th>Quantity</th><th>D...
Create collection and show the viewvar invoiceItemCollection = new InvoiceItemCollection([{ description: Wooden Toy House,...
Some cool thingsTwo way bindingModel to view bindingLayoutsTemplatesRouterForms
Model to view bindingvar InvoiceItemView = Backbone.View.extend({// ...initialize: function() {this.listenTo(this.model, d...
Forms// Backbone-forms extension.var UserModel = Backbone.Model.extend({schema: {title: { type: Select, options: [Mr, Mrs,...
Two­way binding// Backbone.stickit extension.var InvoiceItemFormView = Backbone.View.extend({className: invoice-item-form-...
Forms// Backbone-forms extension.var UserModel = Backbone.Model.extend({schema: {title: { type: Select, options: [Mr, Mrs,...
Routervar Workspace = Backbone.Router.extend({routes: {// Default path.: invoiceList,// Usage of static path.invoice: invo...
Other cool things...in Backbone.js Cookbook
• Bootstrapping:– Technique we saw above– Do it yourself• Representational State Transfer:– Services module– RESTful webse...
REST#44
REST in Backbonevar PostModel = Backbone.Model.extend({// Override id attribute.idAttribute: _id,// Define URL root to acc...
REST in Backbone.js// Fetches data into a model.model.fetch();// Saves a model.model.save();// Destroys a model.model.dest...
Backbone module• URL: http://drupal.org/project/backbone• Provides models and collections for Drupalentities via REST:– No...
Backbone module// Create new NodeView collection.var viewCollection = new Drupal.Backbone.Collections.NodeView();// Set Dr...
Backbone mdl roadmap• Support for bootstrapping• Better views support• In-place content editing• Drag and Drop• D8 version...
http://www.flickr.com/photos/gabblebee/3977912731/
Backbone and Drupal 8• It is in core!• Used for In-place editing issue:http://drupal.org/node/1824500• Used for layouts is...
DEMO!
One more thing!• Web services initiative– REST in core– Storage controllers• Twig– Templating engine– Twig in core (Twig s...
One more thing!#54Twig templatesStorage controllersAccess controllersRender controllersForm controllersDBBrowser
One more thing!#55Backbone appTwig templatesStorage controllersAccess controllersRender controllersForm controllersDBRESTB...
One more thing!#56Backbone appTwig templatesStorage controllersAccess controllersRender controllersForm controllersDBRESTB...
One more thing!#57Backbone appTwig templatesStorage controllersAccess controllersDBRESTMobile app built with PhoneGap or T...
Building Bridges, Connecting CommunitiesEvaluate this session at: portland2013.drupal.org/node/1578. Thank you!What did yo...
Using Backbone.js with Drupal 7 and 8
Upcoming SlideShare
Loading in …5
×

Using Backbone.js with Drupal 7 and 8

1,632 views
1,568 views

Published on

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,632
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
14
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

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: dealancer@gmail.com• Web: http://vmirgorod.name• 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: http://backbonejs.org/• Created by Jeremy Ashkenas in 2010, anauthor of CoffeeScript• Based on Underscore.js:http://backbonejs.org/• Requires jQuery or Zepto#20
  21. 21. Backbone.js features• Minimalistic• Modular• Perfect OOP design• Over 100 available extensions:https://github.com/documentcloud/backbone/wiki/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:http://www.jboss.org/jdf/examples/ticket-monster/tutorial/UserFrontEnd/#27
  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 parameters.help/:topic/page:page: helpPage,// Usage of splat parameter.download/*path: downloadPage},});#40
  41. 41. Other cool things...in 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 http://example.com/posts/; }});var PostCollection = Backbone.Collection.extend({model: PostModel,// Define path to the collection resource.url: function() { return http://example.com/posts/; }});#45
  45. 45. REST in Backbone.js// Fetches data into a model.model.fetch();// Saves a model.model.save();// 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: http://drupal.org/project/backbone• 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. http://www.flickr.com/photos/gabblebee/3977912731/
  50. 50. Backbone and Drupal 8• It is in core!• Used for In-place editing issue:http://drupal.org/node/1824500• Used for layouts issue:http://drupal.org/node/1841584• Used for toolbar issue:http://drupal.org/node/1860434• META issue: http://drupal.org/node/1858368#51
  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 Trigger.io
  57. 57. Building Bridges, Connecting CommunitiesEvaluate this session at: portland2013.drupal.org/node/1578. Thank you!What did you think?

×