Your SlideShare is downloading. ×
  • Like
Spine JS
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply
Published

 

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,135
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
33
Comments
0
Likes
6

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. SPINE JS
  • 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. 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. What’s NeededFramework for consistencyCore UI and Data ModelingEasy to get up to speedMinimal dependencies
  • 5. What’s Out There
  • 6. SPINE JS HISTORY
  • 7. MAY 2011
  • 8. OCTOBER 2011
  • 9. CURRENT V1.0.4 5
  • 10. JAVASCRIPT ORCOFFESCRIPT
  • 11. CoffeeScriptYou’re not forced into using itSpineJS is written in CoffeeScriptIt’s not just a cool new trend...
  • 12. CoffeeScript BenefitsHelps avoid erroneously global vars and pollutionLeads to more readable codeProvides appearance of classical inheritance
  • 13. WHAT’S IN IT FOR ME?
  • 14. BenefitsLightweight FrameworkSingle Library DependencyStraightforward Use
  • 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. Minimal Dependencies
  • 17. CompatibilityNo Plans for Archaic Browser SupportHTML5-Centric with LocalStoragejson2.js Dependency for IE7 Support
  • 18. ON THE HORIZON
  • 19. Spine MobileStrengthens reason to build around core frameworkExtend core components to be mobile readyRequires minimal additional implementation
  • 20. Spine MobileNo Re-Writing, Extend Existing ControllersTransition EffectsTap & Orientation Events
  • 21. IMPLEMENTATION& CODE EXAMPLES
  • 22. SPINE CLASS
  • 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. Spine Module (a.k.a. Extended CoffeeScript Class)class MyClass extends Spine.Module @extend MyOtherClass @include myInstanceProperty
  • 25. MODEL
  • 26. ModelInherits from Spine.ModuleEstablishes Controller and UI Agnostic Data ModelOne and Only component for storing and retrieving data(local or remote)
  • 27. class UsrGrp extends Spine.model @configure "UsrGrp", ↳"groupName", "description" @extend Spine.Model.Ajax @extend Spine.Model.Local
  • 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. @extend Spine.Model.Ajax@extend Spine.Model.Localvalidate: -> unless @groupName.length > 0 "Group Name field missing"
  • 30. CONTROLLER
  • 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. class UsrGrpsApp extends ↳Spine.Controller constructor: -> super UsrGrp.bind("create", ↳@addOne) #Bind event handling
  • 33. UsrGrp.bind("create", ↳@addOne)#Bind event handling#to DOM elementsevents: "submit form": "create" "click .deleteAll": "delete"#DOM Element referenceselements:
  • 34. events: "submit form": "create" "click .deleteAll": "delete"#DOM Element referenceselements: "form input": "input" ".list": "list"#New up a model & rendercreate: (event) ->
  • 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. #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. 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. #Add new element to DOM#Triggered on create() of ModeladdOne: (userGroup) => group = new UsrGrps( ↳item: userGroup) @list.append( ↳$("#listTemplate") ↳.tmpl(userGroup))
  • 39. GETTING IT STARTED
  • 40. $ = jQuery$ -> new UsrGrpsApp(el: $("#groups"))
  • 41. CONTROLLER MANAGER
  • 42. Controller ManagerSimple state machine for Controller InstancesOne additional script to include in HTMLManipulates DOM with class flag
  • 43. <script src="lib/spine/manager.js"↳type="text/javascript"></script>
  • 44. class UsrGrpsApp extends↳Spine.Controllerclass OtherController extends↳Spine.ControllerugApp = new UsrGrpsAppother = new OtherController
  • 45. class UsrGrpsApp extends↳Spine.Controllerclass OtherController extends↳Spine.ControllerugApp = new UsrGrpsAppother = new OtherControllernew Spine.Manager(ugApp, other)
  • 46. class OtherController extends↳Spine.ControllerugApp = new UsrGrpsAppother = new OtherControllernew Spine.Manager(ugApp, other)
  • 47. ugApp.active()
  • 48. Ques tions ?
  • 49. Contact MeJordan McCulloughTwitter: @ambientphotoEmail: jordanm@ambientideas.comWeb: ambientideas.com
  • 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. Links & ResourcesJavaScriptMVC: http://javascriptmvc.comBackbone JS: http://documentcloud.github.com/backbone/SproutCore: http://www.sproutcore.comKnockout: http://knockoutjs.com
  • 52. Photo CreditAmbient Ideas Photographyhttp://www.AmbientIdeasPhotography.com