Your SlideShare is downloading. ×
Backbone js in drupal core
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Backbone js in drupal core

549

Published on

Presentation notes: …

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
549
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. BackboneJs in Drupal coreDrupalCamp Wroclaw, 14 April, 2013
  • 2. Who am I?
  • 3. You?
  • 4. Why js matters?
  • 5. Web 1.0: JS for Almost Nothing
  • 6. Web 2.0: JS for AJAX
  • 7. Web Today: JS for Everything
  • 8. Advantages of new approach Server js & JSON REST templates Client
  • 9. Challenges
  • 10. jQuery is not enough
  • 11. Programming best practices in front end?
  • 12. Solution: Browserside js frameworks
  • 13. Backbone is in Drupal Core
  • 14. What is Backbone? ?
  • 15. MV* in Backbone
  • 16. Modelapp.Todo = Backbone.Model.extend({ defaults: { title: , completed: false }, toggle: function () { this.save({ completed: !this.get(completed) }); } });
  • 17. Templatevar html = _.template(<li><%= name %></li> , { name: John Smith });
  • 18. Collectionvar TodoList = Backbone.Collection.extend({ model: app.Todo, localStorage: new Backbone .LocalStorage(todos-backbone),
  • 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. 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. Underscore
  • 22. Front end templating● allows us to dynamically build html on browser side● non-hacky approach to ajax
  • 23. What we can use Backbone for? Internal app Admin panel
  • 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. Yeoman
  • 26. Drupal as webservice{ "firstName": "John", "lastName": "Smith", "age": 25, "address": { "streetAddress": "21 2nd Street", "city": "New York", "state": "NY", "postalCode": 10021 }}
  • 27. Questions ?
  • 28. Materials● Backbone fundamentals by Andy Osmani● Choosing right js framework with ToDo MVc● Backbone tutorials
  • 29. Summary
  • 30. Contact● @MarcinWosinek● presentation notes:http://bit.ly/DcWrocBackbone● marcin.wosinek@gmail.com
  • 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/

×