• Objective-C, OS X & iOS • Placethings • BA of Arts and Technology from UT Dallas • Match.com on Facebook Wednesday, December 19, 12 Introduce my awesomeself Started playing with javascript in middle school (like inline onClick crap) Began developing web applications in high school Started working for a web shop directly after graduating high school. That was fun... but not for me so I went back to school @ UTD.
you here tonight? Who’s built some client side stuff in javascript? AJAXy stuff? More client heavy apps? Full JavaScript applications? Why should you want to use Backbone.js or go client side at all? ‘cause JavaScript is cool and you can debate semicolons, bro. Maintainable JavaScript.
you to search once it is completed. For now it just takes you Home. top.location = '//apps.facebook.com/' + appData.uri + '/Winks.aspx?fid=R'; e.preventDefault(); }); $('button.favorites').live('click', function (e) { ///this action will take you to search once it is completed. For now it just takes you Home. top.location = '//apps.facebook.com/' + appData.uri + '/Favorites.aspx?fid=S'; e.preventDefault(); }); $('button.subRedirect').live('click', function (e) { ///this action will take you to search once it is completed. For now it just takes you Home. top.location = '//apps.facebook.com/' + appData.uri + '/SubRedirect.aspx'; e.preventDefault(); }); $('button.search').live('click', function (e) { top.location = '//apps.facebook.com/' + appData.uri + '/Search.aspx'; e.preventDefault(); }); $('button.matches').live('click', function (e) { top.location = '//apps.facebook.com/' + appData.uri + '/Matches.aspx'; e.preventDefault(); }); $('a.viewProfile').live('click', function (e) { store.get('m_userid', function (ok, val) { m_userid = val }); top.location = '//apps.facebook.com/' + appData.uri + '/Profile.aspx?uid=' + m_userid; e.preventDefault(); }); $('#sub1form').live('submit', function (e) { modalClick('sub2', 670, 700, 40, 80); Wednesday, December 19, 12
have to introduce your code base to your new hire) Wednesday, December 19, 12 That dear poor soul that has to come work on the application after you. >>
is about using patterns to get a job done. The use of software design patterns in your application typical indicates that some thought was put into your solution. The previous two code snippets are still used in our backbone applications but in a more appropriate fashion. Tonight we’re going to focus on... >>
MVC originally implemented by smalltalk-80. (1970s) Perhaps originally more low level than we need today. Controllers should relay user interaction from input devices to the model. (Input Controller)
of MVC It’s all about separation of concerns This helps split up code into different files (units) Separate files (with separate areas of functionality) means a more navigable code base Helps create testable units of functionality
now for something completely different! Wednesday, December 19, 12 This gets really interesting. Present stale data from local storage, fetch new data from server, re- render on changes. Websockets!
tool written for reports and editors. Originally a nonprofit funded by a Knight News Foundation grant. Now a part of the nonprofit group Investigative Reporters and Editors.
adopted by different industries. new hulu linkedin mobile gilt mobile, gilt live new foursquare new usatoday Go checkout http://backbonejs.org/#examples
"Doe" }, initialize: function() { //setup code }, isAnonymous: function() { //sorry to all the real John Does out there return (this.get("firstName")==="John"&&this.get("lastName")==="Doe") } }); Wednesday, December 19, 12
"Doe" }, initialize: function() { //setup code }, isAnonymous: function() { //sorry to all the real John Does out there return (this.get("firstName")==="John"&&this.get("lastName")==="Doe") } }); var user = new User({ firstName: "Nicholas", lastName: "Spencer" }); Wednesday, December 19, 12
"Doe" }, initialize: function() { //setup code }, isAnonymous: function() { //sorry to all the real John Does out there return (this.get("firstName")==="John"&&this.get("lastName")==="Doe") } }); var user = new User({ firstName: "Nicholas", lastName: "Spencer" }); user.isAnonymous(); // false Wednesday, December 19, 12
); Blarg.yick(); //”yick” var blarg = new Blarg; blarg.yack(); //”yack” Backbone’s extend pattern • Takes two object literals • instance properties • class properties • Copies them onto the new • prototype chain • namespace Wednesday, December 19, 12 The object literal that you pass in gets copied to the prototype chain
• new up instances with optional attributes and options arguments • Maintains an internal attributes object accessed through get() & set() • Handles data validation on set() • Triggers change events Wednesday, December 19, 12
• new up instances with optional models and options arguments • Maintains an internal models array accessed through add(), remove(), get(), at(), push(), pop() and many more including collection functions from underscore • Triggers change events after validation from the individual models Wednesday, December 19, 12
node • id - HTML node id • className - CSS class name • tagName - HTML node name (div by default) Wednesday, December 19, 12 initialization on next slide
- HTML node id • className - CSS class name • attribuets - HTML node attributes • tagName - HTML node name • el - Existing HTML node • model - Backbone model instance • collection - Backbone collection instance • cached on view.options Wednesday, December 19, 12
for view.$el.find() • events - DOM events are delegated to view.$el • {“load img”:”imageLoaded”} • view.el = foo; • use view.setElement() instead Wednesday, December 19, 12
used to build up view.el’s DOM • templates • direct DOM manipulation • little bit of both • return this; • Be mindful about event delegation Wednesday, December 19, 12
cool! • Good views present state • Model holds state • view.isOpen() • driven by the model; not jQuery • Unit testing • mock models vs mock DOM Wednesday, December 19, 12
API to their prototype chains • Backbone does as well for a central eventing bus • Events can be namespaced • “change:firstName” Wednesday, December 19, 12
operations with a RESTful service • .save([attributes],[options]) - PUT, POST the model • .fetch([options]) - GET the model • .destroy([options]) - DELETE the model • .create(attributes, [options]) - POST to the collection Wednesday, December 19, 12
takuyakatsusa
m_seki
slecache
panda_program
narihara
zsmb
tosuri13
ishkawa
righttouch
antimon2
umigishiaoi
shingangan
bkeepers
eileencodes
soudai
swwweet
nonsquared
chriscoyier
deanohume
marcduiker
garrettdimon
destraynor
ammeep
lara
![Backbone.Events • instance.on(“channel:detail”,[function],[context]); • instance.off([“channel:detail”],[function],[context]); • instance.trigger(“channel:detail”); • instance.listenTo(); •](https://files.speakerdeck.com/presentations/88311e702bda01301e24123139285937/slide_57.jpg){kind=link}
