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

2. Spine.js
MVC framework (primarily client side, can be used with node)
realprototypal inheritance
500 lines of JS ~2k minified
Highly opinionated
Controller based on Backbone.js API
Baked-in HTML5 local storage
Optimized to work with jQuery or Zepto
3. Setup

4. Classes
Prototypal
var Task = Spine.Class.create();
No Constructors
var User = Spine.Class.create({ name: "Tonje" });
varuser = User.init();
assertEqual( user.name, "Tonje" );
user.name = "Trish";
assertEqual( user.name, "Trish" );
5. Events
Spine.Eventsgives you three functions,bind(),trigger(), andunbind().
Tasks.bind("create", function(){ /* ... */});
Tasks.trigger("create", ["some", "data"]);
6. Models
Extend Classes, create() is reserved we use setup
varContact = Spine.Model.setup("Contact", ["first_name", "last_name"]);
Instances created with init()
var contact = Contact.init({first_name: "Alex", last_name: "MacCaw"});
assertEqual( contact.fullName(), "Alex MacCaw" );
Saving / Retrieving
var Contact = Spine.Model.setup("Contact", ["first_name", "last_name"]);
varcontact = Contact.init({first_name: "Joe"});
contact.save();
Automatically creates id if not specified, which you can then find by
7. Persistence
Using HTML5 local storage
Contact.extend(Spine.Model.Local);
8. Model CRUD
Model supports events:
save- record was saved (either created/updated)
update- record was updated
create- record was created
destroy- record was destroyed
change- any of the above, record was created/updated/destroyed
refresh- all records invalidated and replaced
error- validation failed
9. Controllers
Controllers deal with adding and responding to DOM events, rendering templates and keeping views and models in sync
Extends Class
The convention inside Spine is to give the controller a plural camel cased name of the model it is most associated with
Every controller has an element associated with it, which you can access under the instance propertyel
var Tasks = Spine.Controller.create({ init: function(){ // Called on instantiation } });
vartasks = Tasks.init();
10. Routing
Routing based on the URL's hash fragment, for example the URLhttp://example.com/#/usershas the hash fragment/users
Your application can also be indexed by hash fragments using Google'sAjax Crawling specification.
HTML5 history Spine.Route.setup({history: true});
var App = Spine.Controller.create({
init: function(){
this.routes({
"/users/:id": function(id){
// Activate controller or something
console.log("/users/", id) }, "/users": function(any){ console.log("/users") } }); } }).init();
11. Spine.js Todos
http://maccman.github.com/spine.todos/
https://github.com/maccman/spine.todos
https://github.com/maccman/spine.todos/blob/coffee/app/application.js
12. Spine.js Todos In JavaScript
13. Spine.js Todos in Coffeescript
https://github.com/maccman/spine.todos/blob/coffee/app/application.coffee
14. Spine.js Todos in Coffeescript