Spine

Spine JavaScript MVC Framework

None

createBox(t, s): function{ return ['<div class="x-box-blue">', '<div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>',

'<div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc"><h3>', t, '</h3>', s, '</div '<div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>', '</div>'].join(''); }, emailMultiple : function(){ " " if(!Aireo.multipleSelect()){ " " " return " " } " " var nodes = assetView.getSelectedNodes() " " var query_string = [] " " for(var i=0; i < nodes.length; i ++){ " " " var data = Aireo.lookup[nodes[i].id]; " " " if(data.is_folder){ " " " query_string.push('folders[]=' + data.id) " " " " } else { " " " query_string.push('assets[]=' + data.id) " " " } " " } " " Email.init(lc.multiple_file_folders, query_string.join('&'), '',true); " " }, " " emailSelected : function(e){ " " if(!Aireo.currentlySelectedObject){ " " " return; " " } " " if(Aireo.multipleSelect()){ " " " Aireo.emailMultiple() " " } else { " " if(Aireo.currentlySelectedObject){ " " " var data = Aireo.currentlySelectedObject; " " if(Aireo.currentlySelectedObject.type == 'folder'){ " " Email.init(data.name,data.id,'folders',false);" " " } " " else if(Aireo.currentlySelectedObject.type == 'asset') {" " " Email.init(data.name,data.id,'assets',false);" " " } " " }

The Problem with JavaScript • No structure • No namespacing

• No dependency management • No conventions • Poor JS implementations • Misunderstanding and ignorance

Hope

Namespacing

The Good Parts

MVC

None

None

None

?

Spine

MVC

Don’t block

Simplicity

None

1.0

Features • CoffeeScript (although not required) • MVC and ORM

• Ajax and Local Storage • HTML5 History integration • Simple API • Excellent documentation

Models

class Task extends Spine.Model @configure "Task", "name", "done" @extend Spine.Model.Local

@active: -> @select (item) -> !item.done @done: -> @select (item) -> !!item.done @destroyDone: -> rec.destroy() for rec in @done()

class Task extends Spine.Model @configure "Task", "name", "done" @extend Spine.Model.Local

@active: -> @select (item) -> !item.done @done: -> @select (item) -> !!item.done @destroyDone: -> rec.destroy() for rec in @done()

class Task extends Spine.Model @configure "Task", "name", "done" @extend Spine.Model.Local

@active: -> @select (item) -> !item.done @done: -> @select (item) -> !!item.done @destroyDone: -> rec.destroy() for rec in @done()

Controllers

@el

class Tasks extends Spine.Controller constructor: -> Task.bind('refresh change', @render) render:

=> tasks = Task.all() @html require('views/tasks')(tasks)

class Tasks extends Spine.Controller constructor: -> Task.bind('refresh change', @render) render:

=> tasks = Task.all() @html require('views/tasks')(tasks)

class Tasks extends Spine.Controller constructor: -> Task.bind('refresh change', @render) render:

=> tasks = Task.all() @html require('views/tasks')(tasks)

class Tasks extends Spine.Controller constructor: -> Task.bind('refresh change', @render) render:

=> tasks = Task.all() @html require('views/tasks')(tasks)

Views

<div class="item"> <input type="checkbox" <%- if @done: %>checked="checked"<% end %>>

<span> <%= @name %> <a class="destroy"></a> </span> </div>

<div class="item"> <input type="checkbox" <%- if @done: %>checked="checked"<% end %>>

<span> <%= @name %> <a class="destroy"></a> </span> </div>

<div class="item"> <input type="checkbox" <%- if @done: %>checked="checked"<% end %>>

<span> <%= @name %> <a class="destroy"></a> </span> </div>

<div class="item"> <input type="checkbox" <%- if @done: %>checked="checked"<% end %>>

<span> <%= @name %> <a class="destroy"></a> </span> </div>

class Tasks extends Spine.Controller events: 'click .item .destroy': 'destroy' constructor:

-> Task.bind('refresh change', @render) render: => tasks = Task.all() @html require('views/tasks')(tasks) destroy: (e) -> task = $(e).item() task.destroy()

class Tasks extends Spine.Controller events: 'click .item .destroy': 'destroy' constructor:

-> Task.bind('refresh change', @render) render: => tasks = Task.all() @html require('views/tasks')(tasks) destroy: (e) -> task = $(e).item() task.destroy()

Binding

class Tasks extends Spine.Controller events: 'click .item .destroy': 'destroy' constructor:

-> Task.bind('refresh change', @render) render: => tasks = Task.all() @html require('views/tasks')(tasks) destroy: (e) -> task = $(e).item() task.destroy()

class Tasks extends Spine.Controller events: 'click .item .destroy': 'destroy' constructor:

-> Task.bind('refresh change', @render) render: => tasks = Task.all() @html require('views/tasks')(tasks) destroy: (e) -> task = $(e).item() task.destroy() 1. record is destroyed

class Tasks extends Spine.Controller events: 'click .item .destroy': 'destroy' constructor:

-> Task.bind('refresh change', @render) render: => tasks = Task.all() @html require('views/tasks')(tasks) destroy: (e) -> task = $(e).item() task.destroy() 1. record is destroyed 2. change callback is triggered

class Tasks extends Spine.Controller events: 'click .item .destroy': 'destroy' constructor:

-> Task.bind('refresh change', @render) render: => tasks = Task.all() @html require('views/tasks')(tasks) destroy: (e) -> task = $(e).item() task.destroy() 1. record is destroyed 2. change callback is triggered 3. tasks are re-rendered

More? •Classes & Modules •Routing •Ajax •Dependency Manager (Hem)

Spine Mobile

UX

None

None

? Stage Panel Transitions

class ContactsCreate extends Panel # ... class ContactsList extends Panel

constructor: -> super @addButton('Add Contact', @add) add: -> @navigate('/contacts/create', trans: 'right') class Contacts extends Spine.Controller constructor: -> super @list = new ContactsList @create = new ContactsCreate @routes '/contacts': (params) -> @list.active(params) '/contacts/create': (params) -> @create.active(params)

class ContactsCreate extends Panel # ... class ContactsList extends Panel

constructor: -> super @addButton('Add Contact', @add) add: -> @navigate('/contacts/create', trans: 'right') class Contacts extends Spine.Controller constructor: -> super @list = new ContactsList @create = new ContactsCreate @routes '/contacts': (params) -> @list.active(params) '/contacts/create': (params) -> @create.active(params)

class ContactsCreate extends Panel # ... class ContactsList extends Panel

constructor: -> super @addButton('Add Contact', @add) add: -> @navigate('/contacts/create', trans: 'right') class Contacts extends Spine.Controller constructor: -> super @list = new ContactsList @create = new ContactsCreate @routes '/contacts': (params) -> @list.active(params) '/contacts/create': (params) -> @create.active(params)

class ContactsCreate extends Panel # ... class ContactsList extends Panel

constructor: -> super @addButton('Add Contact', @add) add: -> @navigate('/contacts/create', trans: 'right') class Contacts extends Spine.Controller constructor: -> super @list = new ContactsList @create = new ContactsCreate @routes '/contacts': (params) -> @list.active(params) '/contacts/create': (params) -> @create.active(params)

None

None

Full Featured

None

None

@maccman http://alexmaccaw.co.uk