0
BackboneJs in Drupal       coreDrupalCamp Wroclaw, 14 April, 2013
Who am I?
You?
Why js matters?
Web 1.0: JS for Almost Nothing
Web 2.0: JS for AJAX
Web Today: JS for Everything
Advantages of new approach               Server   js &                 JSON   REST   templates               Client
Challenges
jQuery is not enough
Programming best practices in front end?
Solution: Browserside js frameworks
Backbone is in Drupal Core
What is Backbone?                    ?
MV* in Backbone
Modelapp.Todo = Backbone.Model.extend({  defaults: {   title: ,   completed: false },  toggle: function () {      this.sav...
Templatevar html =  _.template(<li><%= name %></li>   , { name: John Smith });
Collectionvar TodoList = Backbone.Collection.extend({  model: app.Todo,  localStorage: new Backbone   .LocalStorage(todos-...
Viewapp.AppView = Backbone.View.extend({  el: #todoapp, statTemplate: _.template($(#id).html()),  events: {     click #cle...
Routingvar AppRouter = Backbone.Router.extend({    routes: { "posts/:id": "getPost"}});var app_router = new AppRouter;app_...
Underscore
Front end templating● allows us to dynamically build html on  browser side● non-hacky approach to ajax
What we can use Backbone for?      Internal app      Admin panel
Using Backbone in modulefunction backbone_todo_library_info() {  $libraries[backbone_todo] = array(    js => array(       ...
Yeoman
Drupal as webservice{    "firstName": "John",    "lastName": "Smith",    "age": 25,    "address": {         "streetAddress...
Questions            ?
Materials● Backbone fundamentals by Andy Osmani● Choosing right js framework with ToDo MVc● Backbone tutorials
Summary
Contact● @MarcinWosinek● presentation notes:http://bit.ly/DcWrocBackbone● marcin.wosinek@gmail.com
Credits●   logo of BackboneJs: https://github.com/documentcloud/backbone/blob/master/docs/images/backbone.png●   logo of A...
Upcoming SlideShare
Loading in...5
×

Backbone js in drupal core

585

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

No notes for slide

Transcript of "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/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×