Spine.js

4,256 views

Published on

Published in: Technology, Design
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,256
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
37
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Spine.js

  1. 1. Spine.js<br />http://maccman.github.com/spine/<br />@WeAreFractal<br />
  2. 2. Spine.js<br />MVC framework (primarily client side, can be used with node)<br /> real prototypal inheritance<br />500 lines of JS ~2k minified<br />Highly opinionated<br />Controller based on Backbone.js API<br />Baked-in HTML5 local storage<br />Optimized to work with jQuery or Zepto<br />
  3. 3. Setup<br /><script src="spine.js" type="text/javascript" charset="utf-8"></script><br />
  4. 4. Classes<br />Prototypal<br />var Task = Spine.Class.create();<br />No Constructors<br />var User = Spine.Class.create({ name: "Tonje" }); <br />varuser = User.init();<br />assertEqual( user.name, "Tonje" ); <br />user.name = "Trish"; <br />assertEqual( user.name, "Trish" );<br />
  5. 5. Events<br />Spine.Events gives you three functions, bind(), trigger(), and unbind(). <br />Tasks.bind("create", function(){ /* ... */});<br />Tasks.trigger("create", ["some", "data"]);<br />
  6. 6. Models<br />Extend Classes, create() is reserved – we use “setup”<br />varContact = Spine.Model.setup("Contact", ["first_name", "last_name"]);<br />Instances created with init()<br />var contact = Contact.init({first_name: "Alex", last_name: "MacCaw"});<br />assertEqual( contact.fullName(), "Alex MacCaw" );<br />Saving / Retrieving <br />var Contact = Spine.Model.setup("Contact", ["first_name", "last_name"]); <br />varcontact = Contact.init({first_name: "Joe"}); <br />contact.save();<br />Automatically creates id if not specified, which you can then find by<br />
  7. 7. Persistence<br />Using HTML5 local storage<br />Contact.extend(Spine.Model.Local);<br />
  8. 8. Model CRUD<br />Model supports events:<br />save - record was saved (either created/updated)<br />update - record was updated<br />create - record was created<br />destroy - record was destroyed<br />change - any of the above, record was created/updated/destroyed<br />refresh - all records invalidated and replaced<br />error - validation failed<br />
  9. 9. Controllers<br />Controllers deal with adding and responding to DOM events, rendering templates and keeping views and models in sync<br />Extends Class<br />The convention inside Spine is to give the controller a plural camel cased name of the model it is most associated with<br />Every controller has an element associated with it, which you can access under the instance property el<br />var Tasks = Spine.Controller.create({ init: function(){ // Called on instantiation } });<br />vartasks = Tasks.init();<br />
  10. 10. Routing<br />Routing based on the URL's hash fragment, for example the URLhttp://example.com/#/users has the hash fragment /users<br />Your application can also be indexed by hash fragments using Google's Ajax Crawling specification.<br />HTML5 history Spine.Route.setup({history: true});<br />var App = Spine.Controller.create({ <br />init: function(){ <br />this.routes({ <br /> "/users/:id": function(id){ <br /> // Activate controller or something<br /> console.log("/users/", id) }, "/users": function(any){ console.log("/users") } }); } }).init();<br />
  11. 11. Spine.js Todos<br />http://maccman.github.com/spine.todos/<br />https://github.com/maccman/spine.todos<br />https://github.com/maccman/spine.todos/blob/coffee/app/application.js<br />
  12. 12. Spine.js Todos In JavaScript<br />
  13. 13. Spine.js Todos in Coffeescript<br />https://github.com/maccman/spine.todos/blob/coffee/app/application.coffee<br />
  14. 14. Spine.js Todos in Coffeescript<br />

×