1.
Spine.js<br />http://maccman.github.com/spine/<br />@WeAreFractal<br />

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.
Setup<br /><script src="spine.js" type="text/javascript" charset="utf-8"></script><br />

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.
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.
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.
Persistence<br />Using HTML5 local storage<br />Contact.extend(Spine.Model.Local);<br />

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.
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.
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.
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.
Spine.js Todos In JavaScript<br />

13.
Spine.js Todos in Coffeescript<br />https://github.com/maccman/spine.todos/blob/coffee/app/application.coffee<br />

14.
Spine.js Todos in Coffeescript<br />