SPINE JS
var Messenger = function(message){  defaultGreeting = "hello ";  this.message = message;}Messenger.prototype.sayHi = funct...
tr    var Messenger = function(message){                                              ("id",            listParent.childre...
What’s NeededFramework for consistencyCore UI and Data ModelingEasy to get up to speedMinimal dependencies
What’s Out There
SPINE JS HISTORY
MAY 2011
OCTOBER 2011
CURRENT V1.0.4 5
JAVASCRIPT ORCOFFESCRIPT
CoffeeScriptYou’re not forced into using itSpineJS is written in CoffeeScriptIt’s not just a cool new trend...
CoffeeScript BenefitsHelps avoid erroneously global vars and pollutionLeads to more readable codeProvides appearance of cl...
WHAT’S IN IT FOR ME?
BenefitsLightweight FrameworkSingle Library DependencyStraightforward Use
More reasons...Flexible UI rendering with no pre-determined templatingBuilt in LocalStorage and RESTful supportWrite once ...
Minimal Dependencies
CompatibilityNo Plans for Archaic Browser SupportHTML5-Centric with LocalStoragejson2.js Dependency for IE7 Support
ON THE HORIZON
Spine MobileStrengthens reason to build around core frameworkExtend core components to be mobile readyRequires minimal add...
Spine MobileNo Re-Writing, Extend Existing ControllersTransition EffectsTap & Orientation Events
IMPLEMENTATION& CODE EXAMPLES
SPINE CLASS
Module (a.k.a. Spine Class)Spine’s extension of core CoffeeScript classProvides class and instance property supportAll Spi...
Spine Module   (a.k.a. Extended CoffeeScript Class)class MyClass extends Spine.Module  @extend MyOtherClass  @include myIn...
MODEL
ModelInherits from Spine.ModuleEstablishes Controller and UI Agnostic Data ModelOne and Only component for storing and ret...
class UsrGrp extends Spine.model   @configure "UsrGrp",   ↳"groupName", "description"   @extend Spine.Model.Ajax   @extend...
class UsrGrp extends Spine.model   @configure "UsrGrp",   ↳"groupName", "description"   @extend Spine.Model.Ajax   @extend...
@extend Spine.Model.Ajax@extend Spine.Model.Localvalidate: ->   unless @groupName.length > 0   "Group Name field missing"
CONTROLLER
ControllerBrings it all togetherGlues the HTML, DOM manipulation and Model togetherHandles all event and UI interaction bi...
class UsrGrpsApp extends   ↳Spine.Controller   constructor: ->      super      UsrGrp.bind("create",      ↳@addOne)   #Bin...
UsrGrp.bind("create",   ↳@addOne)#Bind event handling#to DOM elementsevents:   "submit form": "create"   "click .deleteAll...
events:   "submit form": "create"   "click .deleteAll": "delete"#DOM Element referenceselements:  "form input": "input"  "...
"form input": "input"  ".list": "list"#New up a model & rendercreate: (event) ->   #Prevent form submit   #page load from ...
#Prevent form submit#page load from propagatingevent.preventDefault()#New up a model instanceuser = new UserGrp(↳groupName...
user = new UserGrp(  ↳groupName: @input.val())   #Persist or catch   #validation error   unless user.save()      #Very bas...
#Add new element to DOM#Triggered on create() of ModeladdOne: (userGroup) =>   group = new UsrGrps(  ↳item: userGroup)   @...
GETTING IT STARTED
$ = jQuery$ ->  new UsrGrpsApp(el: $("#groups"))
CONTROLLER MANAGER
Controller ManagerSimple state machine for Controller InstancesOne additional script to include in HTMLManipulates DOM wit...
<script src="lib/spine/manager.js"↳type="text/javascript"></script>
class UsrGrpsApp extends↳Spine.Controllerclass OtherController extends↳Spine.ControllerugApp = new UsrGrpsAppother = new O...
class UsrGrpsApp extends↳Spine.Controllerclass OtherController extends↳Spine.ControllerugApp = new UsrGrpsAppother = new O...
class OtherController extends↳Spine.ControllerugApp = new UsrGrpsAppother = new OtherControllernew Spine.Manager(ugApp, ot...
ugApp.active()
Ques    tions         ?
Contact MeJordan McCulloughTwitter: @ambientphotoEmail: jordanm@ambientideas.comWeb: ambientideas.com
Links & ResourcesSpineJS: http://www.SpineJS.comjQuery: http://www.jQuery.comZepto: http://www.ZeptoJS.comCoffeeScript: ht...
Links & ResourcesJavaScriptMVC: http://javascriptmvc.comBackbone JS: http://documentcloud.github.com/backbone/SproutCore: ...
Photo CreditAmbient Ideas Photographyhttp://www.AmbientIdeasPhotography.com
Upcoming SlideShare
Loading in …5
×

Spine JS

2,778 views

Published on

Published in: Technology
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,778
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
34
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

Spine JS

  1. 1. SPINE JS
  2. 2. var Messenger = function(message){ defaultGreeting = "hello "; this.message = message;}Messenger.prototype.sayHi = function(){ alert(defaultGreeting + this.message);}var hiDosug = new Messenger("DOSUG");hiDosug.sayHi();
  3. 3. tr var Messenger = function(message){ ("id", listParent.children("ul").at"list" + uniqueListId); defaultGreeting = "hello "; self.listName = "list" + listParent = $ this.message = message;uniqueLi stId; (#categoryList).pare nt(); } " + li stParent.attr("id", "wrapper var listParent.children("u ViewBuilder = functi l").attr("id", on(type){uniqueListId); "list" + uniqueListId); Messenger.prototype.sayHi = functionunction(){ defaultSomething = "grid" se lf.wrapperName = self pper" + "wra ; .listName alert(defaultGreeting + this.message); = "list" +uniqueLi stId; uniqueListId; this.type = type; this.message = message; , } ue); tr self.updateView(inlistPa tion Transi rent.attr("id",this.buildView(); "wrapper" + } uniqueListId); listParent = $ var hiDosug = new Messenger("DOSUG"); }) (#categoryList).parent(); } Messenger.prototype.sayHi = function(){ self.wrapperName = "wra hiDosug.sayHi(); + pper" ); uniqueListId; listParent.children("ul").attr("id", Messen alert(defaultGreeting + this.message); ger.prototype.buildView = function( "list" + uniqueListId); }switch(this.viewType){ self.updateView(inTran target.loa $( tion, true templates } si d(); /category.html self.listName = "list" + case "grid": uniqueListId; }) var hiDosug = new Messenger("DOSUG"); function() { templatePath = "templates/ listParent.attr("id", "wrapper" + ); categoryGridElement.html"; hiDosug.sayHi(); listParent = $ uniqueListId); (#categoryList).parent } (); break; self.wrapperName = "wrapper" + listParent.children("ul" uniqueListId; "list" + uniqueListId); ).att default: self.updateView(inTransition, true); templatePath = "templates/ self.listName = "list" + uniqueListId; categoryListElement.html"; }) } listParent.attr("id", "w rapper
  4. 4. What’s NeededFramework for consistencyCore UI and Data ModelingEasy to get up to speedMinimal dependencies
  5. 5. What’s Out There
  6. 6. SPINE JS HISTORY
  7. 7. MAY 2011
  8. 8. OCTOBER 2011
  9. 9. CURRENT V1.0.4 5
  10. 10. JAVASCRIPT ORCOFFESCRIPT
  11. 11. CoffeeScriptYou’re not forced into using itSpineJS is written in CoffeeScriptIt’s not just a cool new trend...
  12. 12. CoffeeScript BenefitsHelps avoid erroneously global vars and pollutionLeads to more readable codeProvides appearance of classical inheritance
  13. 13. WHAT’S IN IT FOR ME?
  14. 14. BenefitsLightweight FrameworkSingle Library DependencyStraightforward Use
  15. 15. More reasons...Flexible UI rendering with no pre-determined templatingBuilt in LocalStorage and RESTful supportWrite once with near-ready-to-deploy mobile code
  16. 16. Minimal Dependencies
  17. 17. CompatibilityNo Plans for Archaic Browser SupportHTML5-Centric with LocalStoragejson2.js Dependency for IE7 Support
  18. 18. ON THE HORIZON
  19. 19. Spine MobileStrengthens reason to build around core frameworkExtend core components to be mobile readyRequires minimal additional implementation
  20. 20. Spine MobileNo Re-Writing, Extend Existing ControllersTransition EffectsTap & Orientation Events
  21. 21. IMPLEMENTATION& CODE EXAMPLES
  22. 22. SPINE CLASS
  23. 23. Module (a.k.a. Spine Class)Spine’s extension of core CoffeeScript classProvides class and instance property supportAll Spine internals inherit from Spine.Module
  24. 24. Spine Module (a.k.a. Extended CoffeeScript Class)class MyClass extends Spine.Module @extend MyOtherClass @include myInstanceProperty
  25. 25. MODEL
  26. 26. ModelInherits from Spine.ModuleEstablishes Controller and UI Agnostic Data ModelOne and Only component for storing and retrieving data(local or remote)
  27. 27. class UsrGrp extends Spine.model @configure "UsrGrp", ↳"groupName", "description" @extend Spine.Model.Ajax @extend Spine.Model.Local
  28. 28. class UsrGrp extends Spine.model @configure "UsrGrp", ↳"groupName", "description" @extend Spine.Model.Ajax @extend Spine.Model.Local validate: -> unless @groupName.length > 0 "Group Name field missing"
  29. 29. @extend Spine.Model.Ajax@extend Spine.Model.Localvalidate: -> unless @groupName.length > 0 "Group Name field missing"
  30. 30. CONTROLLER
  31. 31. ControllerBrings it all togetherGlues the HTML, DOM manipulation and Model togetherHandles all event and UI interaction bindingExtends Spine.Events, allows custom event triggering
  32. 32. class UsrGrpsApp extends ↳Spine.Controller constructor: -> super UsrGrp.bind("create", ↳@addOne) #Bind event handling
  33. 33. UsrGrp.bind("create", ↳@addOne)#Bind event handling#to DOM elementsevents: "submit form": "create" "click .deleteAll": "delete"#DOM Element referenceselements:
  34. 34. events: "submit form": "create" "click .deleteAll": "delete"#DOM Element referenceselements: "form input": "input" ".list": "list"#New up a model & rendercreate: (event) ->
  35. 35. "form input": "input" ".list": "list"#New up a model & rendercreate: (event) -> #Prevent form submit #page load from propagating event.preventDefault() #New up a model instance
  36. 36. #Prevent form submit#page load from propagatingevent.preventDefault()#New up a model instanceuser = new UserGrp(↳groupName: @input.val())#Persist or catch#validation errorunless user.save()
  37. 37. user = new UserGrp( ↳groupName: @input.val()) #Persist or catch #validation error unless user.save() #Very basic notification alert user.validate()#Add new element to DOM
  38. 38. #Add new element to DOM#Triggered on create() of ModeladdOne: (userGroup) => group = new UsrGrps( ↳item: userGroup) @list.append( ↳$("#listTemplate") ↳.tmpl(userGroup))
  39. 39. GETTING IT STARTED
  40. 40. $ = jQuery$ -> new UsrGrpsApp(el: $("#groups"))
  41. 41. CONTROLLER MANAGER
  42. 42. Controller ManagerSimple state machine for Controller InstancesOne additional script to include in HTMLManipulates DOM with class flag
  43. 43. <script src="lib/spine/manager.js"↳type="text/javascript"></script>
  44. 44. class UsrGrpsApp extends↳Spine.Controllerclass OtherController extends↳Spine.ControllerugApp = new UsrGrpsAppother = new OtherController
  45. 45. class UsrGrpsApp extends↳Spine.Controllerclass OtherController extends↳Spine.ControllerugApp = new UsrGrpsAppother = new OtherControllernew Spine.Manager(ugApp, other)
  46. 46. class OtherController extends↳Spine.ControllerugApp = new UsrGrpsAppother = new OtherControllernew Spine.Manager(ugApp, other)
  47. 47. ugApp.active()
  48. 48. Ques tions ?
  49. 49. Contact MeJordan McCulloughTwitter: @ambientphotoEmail: jordanm@ambientideas.comWeb: ambientideas.com
  50. 50. Links & ResourcesSpineJS: http://www.SpineJS.comjQuery: http://www.jQuery.comZepto: http://www.ZeptoJS.comCoffeeScript: http://jashkenas.github.com/coffee-script/Little Book of CoffeeScript:http://arcturo.github.com/library/coffeescript/
  51. 51. Links & ResourcesJavaScriptMVC: http://javascriptmvc.comBackbone JS: http://documentcloud.github.com/backbone/SproutCore: http://www.sproutcore.comKnockout: http://knockoutjs.com
  52. 52. Photo CreditAmbient Ideas Photographyhttp://www.AmbientIdeasPhotography.com

×