Spine js & creating non blocking user interfaces
4 likes1,314 views
This document discusses Spine.js and creating non-blocking user interfaces. It provides an overview of Spine.js, including how it compares to Backbone.js in its use of controllers instead of views and models instead of collections. It also discusses how Spine.js enables asynchronous user interfaces through its handling of events like save callbacks before ajax calls. Finally, it addresses some limitations of Spine.js for transactions and situations requiring server-side validation.
Spine js & creating non blocking user interfaces
- 1. Spine.js & creating non-blocking user interfaces Hjortur Hilmarsson @hjortureh
- 2. Agenda ● Why MVC ? ● Spine.js ● Async UIs ● Tips & Tricks ● QnA
- 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