Joose is a meta object system for JavaScript that helps write well-structured, expressive, declarative, maintainable JavaScript applications. It allows for classes, interfaces, mixins, modules/packages/namespaces, roles, and method modifiers. Joose aims to bring features from other programming languages like Java, C#, Smalltalk, Ruby, and Perl to JavaScript in a native way. It provides a declarative syntax for building classes and other structures and also includes meta features for introspecting and manipulating objects at runtime.

1. Software-Development with
JavaScript and Joose
Hamburg, 22.Oktober 2008

2. Agenda
No Agenda

3. Joose is
a meta object system for JavaScript

4. Joose is not
a browser/DOM/Ajax/Widget library
like jQuery, Prototype, YUI,
Mootools or Dojo

5. Joose is not
a browser/DOM/Ajax/Widget library
like jQuery, Prototype, YUI,
Mootools or Dojo
hen
uch need these w
Y ou wil still very m
the Browser
you use Joose in

6. Joose helps
_ write
_ well structured,
_ expressive,
_ declarative,
_ maintainable
_ JavaScript applications.

7. Core Features
_ Classes
_ Interfaces
_ Mixins
_ Modules / Packages / Namespaces
_ Roles
_ (Mixins + Interfaces)
_ Method Modifiers
_ (think aspect oriented programming)

8. Core Features
Declarative methods to build
all these things

9. Meta Features
Object based interface to introspect
and manipulate all these things at
runtime.
Meta classes for classes, methods
and attributes.

10. Meta?

11. Meta?
eta
understand the m
Y ou don't need to
with Joose.
features to work

12. Meta?
eta
understand the m
Y ou don't need to
with Joose.
features to work
you do :)
But it is more fun if

13. Mission
Steal all the nice features from other
programming languages.
Make them available in JavaScript in a
way that feels native to JavaScript.

14. Java, C#, etc.
_ Classes
_ Interfaces
_ Packages / Namespaces

15. Smalltalk, CLOS (Common Lisp
Object System)
_ Meta classes
_ Meta attributes
_ Meta methods

16. Ruby
_ Mixins
_ Meta classes

17. Perl 6
_ Roles
_ Method modifiers
_ Type constraints and coercions

18. Perl 5
_ Moose (All of the above)

19. LET‘S LOOK AT SOME CODE

20. a Class
Class(quot;Pointquot;, {
})

21. with two attributes
Class(quot;Pointquot;, {
has: {
x: {is: quot;roquot;},
y: {is: quot;rwquot;},
}
})

22. and a clear method
Class(quot;Pointquot;, {
has: {
x: {is: quot;roquot;},
y: {is: quot;rwquot;},
},
methods: {
clear: function () {
this.x = 0;
this.setY(0);
}
}
})

23. Inheritance
Class(quot;Point3Dquot;, {
isa: Point
})

24. after...
Class(quot;Point3Dquot;, {
isa: Point,
has: {
z: {}
},
after: {
clear: function () {
this.z = 0;
}
}
})

25. before...
Class(quot;Point3Dquot;, {
isa: Point,
has: {
z: {}
},
before: {
clear: function () {
this.z = 0;
}
}
})

26. before...
Class(quot;Point3Dquot;, {
isa: Point,
has: {
z: {}
},
override: {
clear: function () {
this.SUPER();
this.z = 0;
}
}
})

27. Usage
var point = new Point3D();
point.setX(10);
var y = point.getY(10);
point.z = 1;
point.clear();
var point2 = new Point3D({ x: 10, y: 20 });

28. Modules
_ create a namespace
_ create a lexical scope for your code.
_ No need for ugly
_ (function () { ... })()

29. Bank.Account
Module(quot;Bankquot;, function (m) {
Class(quot;Accountquot;, {
has: {
balance: {
is: quot;rwquot;,
init: 0
}
}
}
})

30. JSON Integration
Class(quot;Geometry.Pointquot;, {
does: Joose.Storage,
has: {
x: {is: rw},
y: {is: rw},
$: {
is: rw,
init: quot;stuffquot;,
persistent: false
}
}
})

31. JSON Integration
var p = new Geometry.Point({x: 10, y: 20})
var jsonSring = JSON.stringify(p);
var p2 = JSON.parse(jsonString);
alert(p2.getX())

32. JSON Integration
var p = new Geometry.Point({x: 10, y: 20})
var jsonSring = JSON.stringify(p);
var p2 = JSON.parse(jsonString);
alert(p2.getX())
ON
JSON and turn JS
Turn Joose Objects into s
into Joose object

33. JSON Integration
var p = new Geometry.Point({x: 10, y: 20})
var jsonSring = JSON.stringify(p);
var p2 = JSON.parse(jsonString);
alert(p2.getX()) tion!
Backe nd Integra
ON
JSON and turn JS
Turn Joose Objects into s
into Joose object

34. Total JavaScript Makeover!

35. Classes and Namespaces in native
JS
if(Test == null) {
Test = {};
}
Test.StandardPoint = function (x, y) {
this.x = x || 0
this.y = y || 0
}
Test.StandardPoint.prototype = {
getX: function () {
return this.x
},
setX: function (x) {
this.x = x
},
getY: function () {
return this.y
},
setY: function (y) { Dramatization

36. if(Test == null) {
Test = {};
Classes and Namespaces in native
}
JSthis.x = x || 0= function (x, y) {
Test.StandardPoint
this.y = y || 0
}
Test.StandardPoint.prototype = {
getX: function () {
return this.x
},
setX: function (x) {
this.x = x
},
getY: function () {
return this.y
},
setY: function (y) {
this.y = y;
},
clear: function () {
this.setX(0)
this.setY(0)
} Dramatization
}

37. Using Joose
Module(quot;Testquot;, function (m) {
Class(quot;Pointquot;, {
has: {
x: {
is: quot;rwquot;,
init: 0
},
y: {
is: quot;rwquot;,
init: 0
}
},
methods: {
clear: function () {
this.setX(0);
this.setY(0);
}
}
})
})

38. Using Joose
Module(quot;Testquot;, function (m) {
Class(quot;Pointquot;, {
has: {
x: {
is: quot;rwquot;,
init: 0
},
y: {
is: quot;rwquot;,
lling!
ed for scro
init: 0
} No ne
},
methods: {
clear: function () {
this.setX(0);
this.setY(0);
}
}
})
})

39. Class inheritance and method
wrappers in native JS
// We need a utility function to do the inheritance
function inherit(superClass, subClass) {
for(var i in superClass.prototype) {
subClass.prototype[i] = superClass.prototype[i]
}
}
Test.StandardPoint3D = function (x, y, z) {
this.x = x || 0
this.y = y || 0
this.z = z || 0
}
// Make Test.Standard the super class of Test.StandardPoint3D
inherit(Test.StandardPoint, Test.StandardPoint3D)
// we cant assign a new prototype because we already have the
one from the super
Test.StandardPoint3D.prototype.getZ = function () {
return this.z Dramatization
}

40. }
Test.StandardPoint3D = function (x, y, z) {
this.x = x || 0
Class inheritance and method
this.y = y || 0
this.z = z || 0
wrappers in native JS
}
// Make Test.Standard the super class of Test.StandardPoint3D
inherit(Test.StandardPoint, Test.StandardPoint3D)
// we cant assign a new prototype because we already have the
one from the super
Test.StandardPoint3D.prototype.getZ = function () {
return this.z
}
Test.StandardPoint3D.prototype.setZ = function (z) {
this.z = z;
}
var superMethod = Test.StandardPoint3D.prototype.clear;
Test.StandardPoint3D.prototype.clear = function () {
superMethod.apply(this);
this.z = 0;
}
Dramatization

41. Using Joose
Module(quot;Testquot;, function (m) {
Class(quot;Point3Dquot;, {
isa: m.Point,
has: {
z: {
is: quot;rwquot;,
init: 0
}
},
after: {
clear: function () {
this.setZ(0)
}
}
})
})

42. EXAMPLES

43. Class Browser
_ http://it.test.avantaxx.de/xssinterface/projects/Joose/examples/class_browser.html

44. blok
_ http://blok.appspot.com
_ http://code.google.com/p/joose-js/source/browse/trunk/examples/blok/block/ui/Element.js
_ http://code.google.com/p/joose-js/source/browse/trunk/examples/blok/block/ui/role/
Focusable.js
_ http://code.google.com/p/joose-js/source/browse/trunk/examples/blok/block/ui/role/
Resizable.js

45. File Size
_ Minified: 56 kb
_ GZipped: 16 kb

46. Speed
Should be fine if you're not building a
canvas based ray tracer for real time
animations.
Profiling shows that Joose's overhead
is negligible in most real world
applications.

47. Speed
Should be fine if you're not building a
canvas based ray tracer for real time
animations.if you do, though!
Tell me
Profiling shows that Joose's overhead
is negligible in most real world
applications.

48. Other Frameworks
_ Integration with jQuery works like a charm
_ YUI should be fine, too (Because YUI is very serious about namespaces).
_ Others should be fine as well

49. Joose does not
_ extend any default object prototypes.
Object.prototype.boom = function () {
alert(„Dont try this at home“)
}

50. Joose runs
_ in all common browsers
_ Rhino
_ JScript.NET
_ Flash comming soon
_ Ensured by an extensive automated test suite.

51. Joose runs
_ in all common browsers
_ Rhino
_ JScript.NET
_ Flash comming soon
_ Ensured by an extensive automated test suite.
ired :)
sting in IE6 requ
No extra te

52. Use cases?
Joose is not always the right tool for
the job!

53. Use it if
You need more than three quot;classesquot;.
It makes sense to maintain page
state in objects.

54. Advanced Topics
_ Backend Integration
_ Prototype based object orientation
_ Everything Meta
_ DOM Binding
_ Client Side Databases

55. More Info
_ http://code.google.com/p/joose-js/
_ http://joose-js.blogspot.com

56. Thank You