1. Spine.js & creating
non-blocking user interfaces
Hjortur Hilmarsson
@hjortureh

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

3. Javascript MVC

4. Why MVC ?
“I wan't better UX”
The user

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

7. Common problems
● Structure
● Events
● Routing
● RESTful sync
● Local storage

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

9. Backbone & Spine
Lightweight MVC frameworks

10. Spine.js
● Inspire by Backbone.js
● Written in Coffee Script
● Async UIs
● Very light ( 2k )
● Includes
○ Classes
○ Models
○ Controllers
○ Routes
○ Events

11. Backbone vs Spine
Views vs. Controllers
Model/Collection vs. Model

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

18. Async UIs

19. Async UIs
Backbone Spine
save() save()
validate() validate()
ajax() save callback()
save callback() ajax()

20. Contact Us - Examples

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

24. What about read ? - Examples

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

26. QnA

27. Thanks!
@hjortureh