The document describes the Spine JS framework. It defines a Messenger class with a sayHi method that alerts a greeting message. It then creates a new Messenger instance and calls its sayHi method. It provides the basic structure for defining classes, methods, and instantiating objects in Spine JS.

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 Needed
Framework for consistency
Core UI and Data Modeling
Easy to get up to speed
Minimal dependencies

5. What’s Out There

6. SPINE JS HISTORY

7. MAY 2011

8. OCTOBER 2011

9. CURRENT V1.0.4 5

10. JAVASCRIPT OR
COFFESCRIPT

11. CoffeeScript
You’re not forced into using it
SpineJS is written in CoffeeScript
It’s not just a cool new trend...

12. CoffeeScript Benefits
Helps avoid erroneously global vars and pollution
Leads to more readable code
Provides appearance of classical inheritance

13. WHAT’S IN IT FOR ME?

14. Benefits
Lightweight Framework
Single Library Dependency
Straightforward Use

15. More reasons...
Flexible UI rendering with no pre-determined templating
Built in LocalStorage and RESTful support
Write once with near-ready-to-deploy mobile code

16. Minimal Dependencies

17. Compatibility
No Plans for Archaic Browser Support
HTML5-Centric with LocalStorage
json2.js Dependency for IE7 Support

18. ON THE HORIZON

19. Spine Mobile
Strengthens reason to build around core framework
Extend core components to be mobile ready
Requires minimal additional implementation

20. Spine Mobile
No Re-Writing, Extend Existing Controllers
Transition Effects
Tap & Orientation Events

21. IMPLEMENTATION
& CODE EXAMPLES

22. SPINE CLASS

23. Module (a.k.a. Spine Class)
Spine’s extension of core CoffeeScript class
Provides class and instance property support
All 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. Model
Inherits from Spine.Module
Establishes Controller and UI Agnostic Data Model
One 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.Local
validate: ->
unless @groupName.length > 0
"Group Name field missing"

30. CONTROLLER

31. Controller
Brings it all together
Glues the HTML, DOM manipulation and Model together
Handles all event and UI interaction binding
Extends 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 elements
events:
"submit form": "create"
"click .deleteAll": "delete"
#DOM Element references
elements:

34. events:
"submit form": "create"
"click .deleteAll": "delete"
#DOM Element references
elements:
"form input": "input"
".list": "list"
#New up a model & render
create: (event) ->

35. "form input": "input"
".list": "list"
#New up a model & render
create: (event) ->
#Prevent form submit
#page load from propagating
event.preventDefault()
#New up a model instance

36. #Prevent form submit
#page load from propagating
event.preventDefault()
#New up a model instance
user = new UserGrp(
↳groupName: @input.val())
#Persist or catch
#validation error
unless 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 Model
addOne: (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 Manager
Simple state machine for Controller Instances
One additional script to include in HTML
Manipulates DOM with class flag

43. <script src="lib/spine/manager.js"
↳type="text/javascript"></script>

44. class UsrGrpsApp extends
↳Spine.Controller
class OtherController extends
↳Spine.Controller
ugApp = new UsrGrpsApp
other = new OtherController

45. class UsrGrpsApp extends
↳Spine.Controller
class OtherController extends
↳Spine.Controller
ugApp = new UsrGrpsApp
other = new OtherController
new Spine.Manager(ugApp, other)

46. class OtherController extends
↳Spine.Controller
ugApp = new UsrGrpsApp
other = new OtherController
new Spine.Manager(ugApp, other)

47. ugApp.active()

48. Ques
tions
?

49. Contact Me
Jordan McCullough
Twitter: @ambientphoto
Email: jordanm@ambientideas.com
Web: ambientideas.com

50. Links & Resources
SpineJS: http://www.SpineJS.com
jQuery: http://www.jQuery.com
Zepto: http://www.ZeptoJS.com
CoffeeScript: http://jashkenas.github.com/coffee-script/
Little Book of CoffeeScript:
http://arcturo.github.com/library/coffeescript/

51. Links & Resources
JavaScriptMVC: http://javascriptmvc.com
Backbone JS: http://documentcloud.github.com/backbone/
SproutCore: http://www.sproutcore.com
Knockout: http://knockoutjs.com

52. Photo Credit
Ambient Ideas Photography
http://www.AmbientIdeasPhotography.com