Presented July 17, 2012
aarongreenlee.com
| @aarongreenlee
Director of Development
WRECKINGBALL Media
ja.mesbrown.com
| @ibjhb
Director of Technology
WRECKINGBALL Media
The Central Florida Web Developers User Group’s mission is the professional and personal development of our members through presentations, discussions and exercises that advance technical skills, use best practices, teach methodologies and attract opportunities to our members.
By Aaron Greenlee
How do you modularize the user interface functionality of a Web application so that you can easily modify the individual parts?
Separate the modeling of the domain, presentation and actions into three separate classes.- Microsoft
Code Size Guideline
Come on! Write this one down!
We all love Mario... but what is Mario?
Is he a View?
Or, is he a Model?
Mario can be a view and a model!
Powered by a Controller!
Are you starting to see the MVC "pattern"?
(function($){
var ListView = Backbone.View.extend({
el: $('body')
// `events`: Where DOM events are bound to View methods. Backbone doesn't have a
// separate controller to handle such bindings; it all happens in a View.
,events: {
'click button#add': 'addItem'
}
,initialize: function() {
_.bindAll(this, 'render', 'addItem');
this.counter = 0;
this.render();
}
// `render()` now introduces a button to add a new list item.
,render: function() {
$(this.el).append("<button id='add'>Add list item</button>");
$(this.el).append("<ul></ul>");
}
// `addItem()`: Custom function called via `click` event above.
,addItem: function() {
this.counter++;
$('ul', this.el).append("<li>hello world"+this.counter+"</li>");
}
});
var listView = new ListView();
})(jQuery);
By Aaron Greenlee
Application state is a means of creating variables that can be seen by all users.
By James Brown
Sometimes called the Observer pattern.
Loose coupling between objects.
Reduces dependencies between objects.
Instead of object 1 calling a specific function on object 2, object 2 would instead 'listen' (or subscribe) for an 'announcement' (or publish).
If an announcement is made and no one is listening, nothing happens (i.e. things don't break)
Likewise, if an object is listening and there aren't any announcements, nothing happens.
Why the heck worry about using it?
(obviously)
Publisher doesn't need to know who is subscribing
Better code re-use
Many subscribers can listen to one publisher
More later...
Example: Amazon SQS
Allows publishers to send messages and when subscribers are ready, they can read the message
Simple example: Image resize service
By James Brown
Think Microsoft Word Mail Merge
(but much less painful)
By James Brown
Test Driven Development
Unit testing is about testing the smallest unit of functionality possible
(Just do it)
Sometimes called a spec or SUT
Yay!
Re-run your tests to ensure things didn't break
Jasmine, QUnit, YUI, Hiro, Mocha
(Start with QUnit if unsure)
Sinon.js is great