• Like
Backbone js in drupal core
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Backbone js in drupal core

  • 508 views
Published

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
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
508
On SlideShare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
6
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/