More Related Content Similar to Spine js & creating non blocking user interfaces Similar to Spine js & creating non blocking user interfaces (20) 5. Why MVC ?
“Can it be done in HTML5 ?”
The Boss
6. Why MVC ?
“So much Javascript, no structure
& always solving the same
problems”
The
Developer
8. MVC Frameworks
● Backbone.js
● Ember.js (SproutCore 2.0)
● Spine.js
● JavaScriptMVC
● Sammy.js
● YUILibrary
● KnockoutJS (MVVM)
● Knockback
● AngularJS
● Broke.js
● Fidel.js
● ExtJS
Source: https://github.com/addyosmani/todomvc
10. Spine.js
● Inspire by Backbone.js
● Written in Coffee Script
● Async UIs
● Very light ( 2k )
● Includes
○ Classes
○ Models
○ Controllers
○ Routes
○ Events
12. Backbone model
var ContactModel = Backbone.Model.extend({});
var ContactCollection = Backbone.Collection.extend({
model: ContactModel,
url: "contacts"
});
// Usage
var contacts = new ContactCollection();
var contact = new ContactModel(
{ name: "Sven Svensson", email: "sven@svensson.se" }
);
contacts.create( contact );
13. Spine.js model
var ContactModel = Spine.Model.sub();
ContactModel.configure("Contact", "name", "email");
ContactModel.extend( Spine.Model.Ajax );
// Usage
var contact = new ContactModel(
{ name: "Sven Svensson", email: "sven@svensson.se" }
);
contact.save();
14. Spine.js model in Coffee Script
class ContactModel extends Spine.Model
@configure "Contact", "name", "email"
@extend "Contact", "name", "email"
// Usage
contact = new ContactModel(
name: "Sven Svensson", email: "sven@svensson.se"
)
contact.save()
16. Backbone view
var ContactView = Backbone.View.extend({
events: { "click li": "openContact" },
initialize: function() {
contacts.bind( "reset", reset, this );
contacts.fetch();
},
reset: function() {
this.contactList = this.$("#contact-list");
...
},
openContact: function() { ... },
});
// Usage
new ContactView({ el: $("#view").get(0) });
17. Spine.js controller
var ContactView = Spine.Controller.create({
events: { "click li": "openContact" },
elements: { "#contact-list": "contactList" },
init: function() {
ContactModel.bind( "refresh", refresh );
ContactModel.fetch();
},
openContact: function() { ... },
refresh: function() { ... },
});
// Usage
new ContactView({ el: $("#view") });
19. Async UIs
Backbone Spine
save() save()
validate() validate()
ajax() save callback()
save callback() ajax()
21. Does not work everywhere
● Transaction
● Login
● Need for server-side validation
Notes:
● Spine.js also has ajaxSuccess & ajaxError events
● Works for CUD, not Read
22. Don't believe me ?
■ Amazon: 100 ms of extra load time caused a 1% drop in
sales (source: Greg Linden, Amazon).
■ Google: 500 ms of extra load time caused 20% fewer
searches (source: Marrissa Mayer, Google).
■ Yahoo!: 400 ms of extra load time caused a 5–9% increase
in the number of people who clicked “back” before the page
even loaded (source: Nicole Sullivan, Yahoo!).
