Spine

JavaScript MVC Framework

Transcript

1. Spine JavaScript MVC Framework
3. 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);" " " } " " }
4. The Problem with JavaScript • No structure • No namespacing • No dependency management • No conventions • Poor JS implementations • Misunderstanding and ignorance
5. Hope
6. Namespacing
7. The Good Parts
8. MVC
12. ?
13. Spine
14. MVC
15. Don’t block
16. Simplicity
18. 1.0
19. Features • CoffeeScript (although not required) • MVC and ORM • Ajax and Local Storage • HTML5 History integration • Simple API • Excellent documentation
20. Models
21. 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()
22. 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()
23. 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()
24. Controllers
25. @el
26. class Tasks extends Spine.Controller constructor: -> Task.bind('refresh change', @render) render: => tasks = Task.all() @html require('views/tasks')(tasks)
27. class Tasks extends Spine.Controller constructor: -> Task.bind('refresh change', @render) render: => tasks = Task.all() @html require('views/tasks')(tasks)
28. class Tasks extends Spine.Controller constructor: -> Task.bind('refresh change', @render) render: => tasks = Task.all() @html require('views/tasks')(tasks)
29. class Tasks extends Spine.Controller constructor: -> Task.bind('refresh change', @render) render: => tasks = Task.all() @html require('views/tasks')(tasks)
30. Views
31. <div class="item"> <input type="checkbox" <%- if @done: %>checked="checked"<% end %>> <span> <%= @name %> <a class="destroy"></a> </span> </div>
32. <div class="item"> <input type="checkbox" <%- if @done: %>checked="checked"<% end %>> <span> <%= @name %> <a class="destroy"></a> </span> </div>
33. <div class="item"> <input type="checkbox" <%- if @done: %>checked="checked"<% end %>> <span> <%= @name %> <a class="destroy"></a> </span> </div>
34. <div class="item"> <input type="checkbox" <%- if @done: %>checked="checked"<% end %>> <span> <%= @name %> <a class="destroy"></a> </span> </div>
35. 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()
36. 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()
37. Binding
38. 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()
39. 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
40. 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
41. 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
42. More? •Classes & Modules •Routing •Ajax •Dependency Manager (Hem)
43. Spine Mobile
44. UX
47. ? Stage Panel Transitions
48. 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)
49. 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)
50. 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)
51. 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)
54. Full Featured
57. @maccman http://alexmaccaw.co.uk