Bacbkone js
Upcoming SlideShare
Loading in...5
×
 

Bacbkone js

on

  • 246 views

 

Statistics

Views

Total Views
246
Views on SlideShare
244
Embed Views
2

Actions

Likes
0
Downloads
0
Comments
0

1 Embed 2

http://www.linkedin.com 2

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Bacbkone js Bacbkone js Presentation Transcript

  • BACKBONE.JSJavascript framework intro // based on Artjom Kurapov’s experience on Weekendee project
  • Problem (JS) code becomes messy Dynamic HTML (done any dynamic tables with jquery?)
  • Lots of 0-level UI functions
  • SolutionObject Oriented code = more focus on what, less on functionHigher level of abstraction = more layers
  • Enter JS frameworks Hello ladies..
  • 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)
  • SO its not a DOM manipulation lib (jquery, prototype, mootools) Animation kit Control suite (jquery UI, ExtJS)
  • Core Concepts Models — storage Collections — grouping Views — rendering Router — navigation
  • Bird’s eye view
  • Models
  • Primitive model
  • 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
  • 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); } }});
  • 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(); } }
  • Views
  • Primitive view
  • View events
  • Views – most important .extend events:{} .el .initialize() -> .render() -> .template()
  • _js templating
  • 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(); }});
  • Collections
  • Primitive collections
  • 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; }});
  • Actual collection creationWeekendee.Views.ContactsPage = Backbone.View.extend({ "el": "#contacts", show: function () { this.friendRequestsView = new Weekendee.Views.FriendRequests({ collection: new Weekendee.Collections.FriendRequests() });…
  • 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); }); }});
  • Router
  • Primitive router
  • 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(); },
  • Mine field
  • 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?’);
  • Problems Lack of documentation / best practices…
  • 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?