Your SlideShare is downloading. ×
Backbone js in drupal core
Backbone js in drupal core
Backbone js in drupal core
Backbone js in drupal core
Backbone js in drupal core
Backbone js in drupal core
Backbone js in drupal core
Backbone js in drupal core
Backbone js in drupal core
Backbone js in drupal core
Backbone js in drupal core
Backbone js in drupal core
Backbone js in drupal core
Backbone js in drupal core
Backbone js in drupal core
Backbone js in drupal core
Backbone js in drupal core
Backbone js in drupal core
Backbone js in drupal core
Backbone js in drupal core
Backbone js in drupal core
Backbone js in drupal core
Backbone js in drupal core
Backbone js in drupal core
Backbone js in drupal core
Backbone js in drupal core
Backbone js in drupal core
Backbone js in drupal core
Backbone js in drupal core
Backbone js in drupal core
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

564

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
564
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/

×