• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Bacbkone js
 

Bacbkone js

on

  • 230 views

 

Statistics

Views

Total Views
230
Views on SlideShare
228
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?