Bacbkone js

431 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
431
On SlideShare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Bacbkone js

  1. 1. BACKBONE.JSJavascript framework intro // based on Artjom Kurapov’s experience on Weekendee project
  2. 2. Problem (JS) code becomes messy Dynamic HTML (done any dynamic tables with jquery?)
  3. 3. Lots of 0-level UI functions
  4. 4. SolutionObject Oriented code = more focus on what, less on functionHigher level of abstraction = more layers
  5. 5. Enter JS frameworks Hello ladies..
  6. 6. Details please View — Collection — Model ( MVC, right? ) Lightweight (6kb ≠ Extjs 1mb) JSON, pure REST (remember PUT/DELETE http headers?) Event driven (bang your head here)
  7. 7. SO its not a DOM manipulation lib (jquery, prototype, mootools) Animation kit Control suite (jquery UI, ExtJS)
  8. 8. Core Concepts Models — storage Collections — grouping Views — rendering Router — navigation
  9. 9. Bird’s eye view
  10. 10. Models
  11. 11. Primitive model
  12. 12. Now can be used asme.set({someAttr:’Today!’});me.save();… but we can handle saving too ….save({success:.., error:..});… and tie it to some view …SomeEventView.model
  13. 13. Actual model definitionWeekendee.Models.Event = Backbone.Model.extend({ defaults: { }, url: function () { if (this.id === undefined) this.id = ; return base_url + event/ + this.id; }, validate: function (attrs) { if (attrs.text != null && $.trim(attrs.text) == ) { return t(event.error_empty); } }});
  14. 14. Kohana controller in back public function action_index() { $requestMethod = $this->request->method(); switch ($requestMethod) { case GET: $eventId = $this->request->param(id); $this->_read(); break; case POST: $eventId = $this->request->param(id); if (!$eventId) { $this->_create(); } else if (isset($_SERVER[HTTP_X_HTTP_METHOD_OVERRIDE])) { $httpMethodOverride = $_SERVER[HTTP_X_HTTP_METHOD_OVERRIDE]; if ($httpMethodOverride == "PUT") { $this->_update(); } else if ($httpMethodOverride == "DELETE") { $this->_delete(); } } break; default: $this->_read(); } }
  15. 15. Views
  16. 16. Primitive view
  17. 17. View events
  18. 18. Views – most important .extend events:{} .el .initialize() -> .render() -> .template()
  19. 19. _js templating
  20. 20. Actual view definitionWeekendee.Views.EventComment = Backbone.View.extend({ className: comment clearAfter’, template: _.template($(#event-comment-template).html()), events: {click a.removeComment: removeComment’}, render: function () { var template_vars = this.model.toJSON(); template_vars.text = replaceURLWithHTMLLinks(template_vars.comment); $(this.el).html(this.template(template_vars)); $(this.el).attr(data-id, this.model.get(commentId)); $(h3, $(this.el)).css(color, this.model.get(color)); return this; }, removeComment: function () { this.model.destroy(); this.remove(); }});
  21. 21. Collections
  22. 22. Primitive collections
  23. 23. Actual collection definitionWeekendee.Collections.FriendRequests = Backbone.Collection.extend({ page: 1, url: function () { return base_url + user/list_friend_requests/?page= + this.page; }, parse: function (resp) { this.page = resp.page; this.perPage = resp.per_page; this.total = resp.total; return resp.models; }});
  24. 24. Actual collection creationWeekendee.Views.ContactsPage = Backbone.View.extend({ "el": "#contacts", show: function () { this.friendRequestsView = new Weekendee.Views.FriendRequests({ collection: new Weekendee.Collections.FriendRequests() });…
  25. 25. Actual collection viewWeekendee.Views.FriendRequests = Backbone.View.extend({ el: #friend_requests’, initialize: function () { this.collection.bind(reset, this.reset, this); this.collection.fetch(); }, reset: function (FriendRequestWrapper) { var me = this; $(.contacts-body, $(this.el)).html(); $.each(FriendRequestWrapper.models, function (i, model) { var view = new Weekendee.Views.FriendRequest({ model: new Weekendee.Models.Contact(model) }); $(.contacts-body, $(me.el)).append(view.render().el); }); }});
  26. 26. Router
  27. 27. Primitive router
  28. 28. Actual routerWeekendee.Routers.AppRouter = Backbone.Router.extend({ routes: { "/week": "week", // #/week "/": "week", "": "week", "/contacts": "contacts", // #/week //"/week/:year/:week": "week",// #/week/2011/13 //"/week/:startdate": "week", // #/week/2011-10-07 "/event/:id": "event", // #/event/123 "/event/:id/:uid": "event", // external facebook links "/vibe/:id": "vibe", // #/vibe/123 "/invite/:id": "invite", // #/vibe/123 "/*": "initial” }, week: function () { Weekendee.WeekPage.reload(); Weekendee.WeekPage.show(); //Weekendee.WeekPage.setSlider(sliderState); Weekendee.ContactsPage.hide(); },
  29. 29. Mine field
  30. 30. Problems Event propagation - loss of bind contextvar me = this;var comment = new Weekendee.Models.EventComment(commentModel);me.collection.add(comment);comment.bind(destroy, me.removeComment, me); Hard to debug if you’re being dumb – model is not printable userModel.set(‘name’,’Dr. Who?’);
  31. 31. Problems Lack of documentation / best practices…
  32. 32. Problems (because of) big variety of connectivity combinations: X Models (update/get updated by) Y Views with Z Collections And thus.. How to bind stuff correctly? Manage collection of views?

×