Spine.js & creatingnon-blocking user interfaces       Hjortur Hilmarsson          @hjortureh
Agenda● Why MVC ?● Spine.js● Async UIs● Tips & Tricks● QnA
Javascript MVC
Why MVC ?      “I want 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 ...
Common problems● Structure● Events● Routing● RESTful sync● Local storage
MVC Frameworks ● Backbone.js ● Ember.js (SproutCore 2.0) ● Spine.js ● JavaScriptMVC ● Sammy.js ● YUILibrary ● KnockoutJS (...
Backbone & Spine Lightweight MVC frameworks
Spine.js● Inspire by Backbone.js● Written in Coffee Script● Async UIs● Very light ( 2k )● Includes    ○ Classes    ○ Model...
Backbone vs Spine    Views vs. Controllers  Model/Collection vs. Model
Backbone modelvar ContactModel = Backbone.Model.extend({});var ContactCollection = Backbone.Collection.extend({model: Cont...
Spine.js modelvar ContactModel = Spine.Model.sub();ContactModel.configure("Contact", "name", "email");ContactModel.extend(...
Spine.js model in Coffee Scriptclass ContactModel extends Spine.Model @configure "Contact", "name", "email" @extend "Conta...
Backbone viewvar ContactView = Backbone.View.extend({events: { "click li": "openContact" },initialize: function() {contact...
Spine.js controllervar ContactView = Spine.Controller.create({events: { "click li": "openContact" },elements: { "#contact-...
Async UIs
Async UIs           Backbone              Spine     save()            save()     validate()        validate()     ajax()  ...
Contact Us - Examples
Does not work everywhere ● Transaction ● Login ● Need for server-side validationNotes: ● Spine.js also has ajaxSuccess & a...
Dont believe me ?■ Amazon: 100 ms of extra load time caused a 1% drop in  sales (source: Greg Linden, Amazon).■ Google: 50...
What about read ? - Examples
Bonus● Read Docs & Code● Check TodoMVC● Use Jasmine / Sinon.js for testing
QnA
Thanks!@hjortureh
Spine js & creating non blocking user interfaces
Spine js & creating non blocking user interfaces
Upcoming SlideShare
Loading in...5
×

Spine js & creating non blocking user interfaces

2,390

Published on

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,390
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
31
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Spine js & creating non blocking user interfaces

  1. 1. Spine.js & creatingnon-blocking user interfaces Hjortur Hilmarsson @hjortureh
  2. 2. Agenda● Why MVC ?● Spine.js● Async UIs● Tips & Tricks● QnA
  3. 3. Javascript MVC
  4. 4. Why MVC ? “I want better UX” The user
  5. 5. Why MVC ? “Can it be done in HTML5 ?” The Boss
  6. 6. Why MVC ? “So much Javascript, no structure & always solving the same problems” The Developer
  7. 7. Common problems● Structure● Events● Routing● RESTful sync● Local storage
  8. 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. 9. Backbone & Spine Lightweight MVC frameworks
  10. 10. Spine.js● Inspire by Backbone.js● Written in Coffee Script● Async UIs● Very light ( 2k )● Includes ○ Classes ○ Models ○ Controllers ○ Routes ○ Events
  11. 11. Backbone vs Spine Views vs. Controllers Model/Collection vs. Model
  12. 12. Backbone modelvar ContactModel = Backbone.Model.extend({});var ContactCollection = Backbone.Collection.extend({model: ContactModel,url: "contacts"});// Usagevar contacts = new ContactCollection();var contact = new ContactModel({ name: "Sven Svensson", email: "sven@svensson.se" });contacts.create( contact );
  13. 13. Spine.js modelvar ContactModel = Spine.Model.sub();ContactModel.configure("Contact", "name", "email");ContactModel.extend( Spine.Model.Ajax );// Usagevar contact = new ContactModel( { name: "Sven Svensson", email: "sven@svensson.se" });contact.save();
  14. 14. Spine.js model in Coffee Scriptclass ContactModel extends Spine.Model @configure "Contact", "name", "email" @extend "Contact", "name", "email"// Usagecontact = new ContactModel( name: "Sven Svensson", email: "sven@svensson.se")contact.save()
  15. 15. 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) });
  16. 16. 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") });
  17. 17. Async UIs
  18. 18. Async UIs  Backbone Spine save() save() validate() validate() ajax() save callback() save callback() ajax()
  19. 19. Contact Us - Examples
  20. 20. Does not work everywhere ● Transaction ● Login ● Need for server-side validationNotes: ● Spine.js also has ajaxSuccess & ajaxError events ● Works for CUD, not Read
  21. 21. Dont 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!).
  22. 22. What about read ? - Examples
  23. 23. Bonus● Read Docs & Code● Check TodoMVC● Use Jasmine / Sinon.js for testing
  24. 24. QnA
  25. 25. Thanks!@hjortureh
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×