Presented at the Boston Code Camp 19.
Demo app, CallButler can be found at http://ushag-backbonejs.site44.com/CallButler and the source code at https://github.com/ushag/call-butler
5. HOW DO WE ACHIEVE DYNAMISM?
“ The best thing about JavaScript is its
implementation of functions. ”
6. JQUERY
AJAX
$(function () {
// do stuff after DOM has loaded
});
$.ajax({
url: "/myurl",
beforeSend: function ( xhr ) {
xhr.overrideMimeType("text/plain;");
},
success: function(response) {
// I AM INVINCIBLE!
},
error: function(response) {
// What, I FAILED ? :O
}
})
7. WHAT THE HECK IS THE PROBLEM?!!!
Lets check Boston.com
8. “ Backbone.js gives structure to web
applications by providing models with key-
value binding and custom events, collections
with a rich API of enumerable functions,
views with declarative event handling, and
connects it all to your existing API over a
RESTful JSON interface. ”
10. BACKBONEJS CONSTRUCTS
Model (and Collection): Application (domain) data objects
that are retrieved from and persisted to the server
View: HTML presentation of the data stored in the models
and DOM 'controller'
Router: Controller that saves the state of the application
via a url hash
History: Global router (per frame) to handle hashchange
events or pushState
Events: Module that can be mixed in to any object, giving
the object the ability to bind and trigger custom named
events.
Sync: Manages actual persistence by a "function that
Backbone calls every time it attempts to read or save a
model to the server."
20. FURTHER RESOURCES
AngularJS Videos at
Using Knockoutjs and JQuery to Create Richer MVC 4
Applications at 11:40am
Backbone.JS
Backbone.JS Source Code
Call Butler Source Code
Backbone Tutorials
egghead.io
Bocoup Training at $1,149!