Spine.js & creating non-blocking user interfaces

Hjortur Hilmarsson@hjortureh

Agenda

● Why MVC ?● Spine.js● Async UIs● Tips & Tricks● QnA

Javascript MVC

“I wan't better UX”The user

Why MVC ?

“Can it be done in HTML5 ?”The Boss

Why MVC ?

“So much Javascript, no structure & always solving the same

problems”The Developer

Why MVC ?

Common problems

● Structure ● Events● Routing● RESTful sync● Local storage

MVC Frameworks

Source: https://github.com/addyosmani/todomvc

● Backbone.js● Ember.js (SproutCore 2.0)● Spine.js● JavaScriptMVC● Sammy.js● YUILibrary● KnockoutJS (MVVM)● Knockback● AngularJS● Broke.js● Fidel.js● ExtJS

Backbone & SpineLightweight MVC frameworks

Spine.js

● Inspire by Backbone.js● Written in Coffee Script● Async UIs● Very light ( 2k )● Includes

○ Classes○ Models○ Controllers○ Routes○ Events

Backbone vs SpineViews vs. Controllers

Model/Collection vs. Model

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 );

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();

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()

Backbone viewvar 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() { ... },

});

// Usagenew ContactView({ el: $("#view").get(0) });

Spine.js controllervar ContactView = Spine.Controller.create({

events: { "click li": "openContact" },

elements: { "#contact-list": "contactList" },

init: function() {ContactModel.bind( "refresh", refresh );ContactModel.fetch();},

openContact: function() { ... },refresh: function() { ... },

});

// Usagenew ContactView({ el: $("#view") });

Async UIs

Async UIs 

Backbone Spine

save() save()

validate() validate()

ajax() save callback()

save callback() ajax()

Contact Us - Examples

Does not work everywhere

● Transaction● Login ● Need for server-side validation

Notes: ● Spine.js also has ajaxSuccess & ajaxError events● Works for CUD, not Read

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!).

What about read ? - Examples

Bonus

● Read Docs & Code● Check TodoMVC● Use Jasmine / Sinon.js for testing

QnA

Thanks!

@hjortureh