Backbone js in drupal core

969 views
875 views

Published on

Presentation notes:
http://marcin-wosinek.github.io/blog/presentation/2013/04/14/BackboneJs-in-Drupal-core-DcWroc-Wroclaw.html

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
969
On SlideShare
0
From Embeds
0
Number of Embeds
99
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Backbone js in drupal core

  1. 1. BackboneJs in Drupal coreDrupalCamp Wroclaw, 14 April, 2013
  2. 2. Who am I?
  3. 3. You?
  4. 4. Why js matters?
  5. 5. Web 1.0: JS for Almost Nothing
  6. 6. Web 2.0: JS for AJAX
  7. 7. Web Today: JS for Everything
  8. 8. Advantages of new approach Server js & JSON REST templates Client
  9. 9. Challenges
  10. 10. jQuery is not enough
  11. 11. Programming best practices in front end?
  12. 12. Solution: Browserside js frameworks
  13. 13. Backbone is in Drupal Core
  14. 14. What is Backbone? ?
  15. 15. MV* in Backbone
  16. 16. Modelapp.Todo = Backbone.Model.extend({ defaults: { title: , completed: false }, toggle: function () { this.save({ completed: !this.get(completed) }); } });
  17. 17. Templatevar html = _.template(<li><%= name %></li> , { name: John Smith });
  18. 18. Collectionvar TodoList = Backbone.Collection.extend({ model: app.Todo, localStorage: new Backbone .LocalStorage(todos-backbone),
  19. 19. Viewapp.AppView = Backbone.View.extend({ el: #todoapp, statTemplate: _.template($(#id).html()), events: { click #clear: clear}, initialize: function () { this.$input = this.$(#new-todo); this.listenTo(app.Todos, add, this.addOne); }
  20. 20. Routingvar AppRouter = Backbone.Router.extend({ routes: { "posts/:id": "getPost"}});var app_router = new AppRouter;app_router.on(route:getPost, function (id){ alert( "Get post number " + id );});Backbone.history.start();
  21. 21. Underscore
  22. 22. Front end templating● allows us to dynamically build html on browser side● non-hacky approach to ajax
  23. 23. What we can use Backbone for? Internal app Admin panel
  24. 24. Using Backbone in modulefunction backbone_todo_library_info() { $libraries[backbone_todo] = array( js => array( $path . /js/todo.js => $options, ), dependencies => array( array(system, jquery), array(system, underscore), array(system, backbone), ));
  25. 25. Yeoman
  26. 26. Drupal as webservice{ "firstName": "John", "lastName": "Smith", "age": 25, "address": { "streetAddress": "21 2nd Street", "city": "New York", "state": "NY", "postalCode": 10021 }}
  27. 27. Questions ?
  28. 28. Materials● Backbone fundamentals by Andy Osmani● Choosing right js framework with ToDo MVc● Backbone tutorials
  29. 29. Summary
  30. 30. Contact● @MarcinWosinek● presentation notes:http://bit.ly/DcWrocBackbone● marcin.wosinek@gmail.com
  31. 31. Credits● logo of BackboneJs: https://github.com/documentcloud/backbone/blob/master/docs/images/backbone.png● logo of AngularJs:https://github.com/angular/angular.js/blob/master/images/logo/AngularJS.exports/AngularJS-large.png● http://www.teaching-materials.org/jsmvc/#/2● http://www.teaching-materials.org/jsmvc/#/3● http://www.teaching-materials.org/jsmvc/#/4● http://www.teaching-materials.org/jsmvc/#/18● photo with audience http://www.flickr.com/photos/dougbelshaw/5604047370/in/photostream/● kid in sandbox: http://www.flickr.com/photos/thenickster/266142840/● underscore logo: https://github.com/documentcloud/underscore/blob/master/docs/images/underscore.png● http://yeoman.io/

×