Software-Development with
JavaScript and Joose
JSConf 2009

Agenda
No Agenda

Joose is
a meta object system for JavaScript

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

Joose is not
a browser/DOM/Ajax/Widget library
like jQuery, Prototype, YUI,
Mootools or Dojo
se when
very much need the
You will still
e Browser
you use Joose in th

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

Joose helps
_ write
_ well structured,
_ expressive,
_ declarative,
_ maintainable
_ JavaScript applications.
ll it:
n would ca
Su Edition
Enterprise
JavaScript

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

Core Features
Declarative methods to build
all these things

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

Meta?

Meta?
the meta
need to understand
You don't
Joose.
features to work with

Meta?
the meta
need to understand
You don't
Joose.
features to work with
o :)
ou d
ore fun if y
it is m
But

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

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

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

Ruby
_ Mixins
_ Meta classes

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

Perl 5
_ Moose (All of the above)

LET‘S LOOK AT SOME CODE

a Class
Class(\"Point\", {
})

with two attributes
Class(\"Point\", {
has: {
x: {is: \"ro\"},
y: {is: \"rw\"},
}
})

and a clear method
Class(\"Point\", {
has: {
x: {is: \"ro\"},
y: {is: \"rw\"},
},
methods: {
clear: function () {
this.x = 0;
this.setY(0);
}
}
})

Inheritance
Class(\"Point3D\", {
isa: Point
})

after...
Class(\"Point3D\", {
isa: Point,
has: {
z: {}
},
after: {
clear: function () {
this.z = 0;
}
}
})

before...
Class(\"Point3D\", {
isa: Point,
has: {
z: {}
},
before: {
clear: function () {
this.z = 0;
}
}
})

before...
Class(\"Point3D\", {
isa: Point,
has: {
z: {}
},
override: {
clear: function () {
this.SUPER();
this.z = 0;
}
}
})

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 });

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

Bank.Account
Module(\"Bank\", function (m) {
Class(\"Account\", {
has: {
balance: {
is: \"rw\",
init: 0
}
}
}
})

JSON Integration
Class(\"Geometry.Point\", {
does: Joose.Storage,
has: {
x: {is: rw},
y: {is: rw},
$: {
is: rw,
init: \"stuff\",
persistent: false
}
}
})

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

JSON Integration
var p = new Geometry.Point({x: 10, y: 20})
var jsonSring = JSON.stringify(p);
var p2 = JSON.parse(jsonString);
alert(p2.getX())
N and turn
se Objects into JSO
Turn Joo jects
JSON into Joose ob

JSON Integration
var p = new Geometry.Point({x: 10, y: 20})
var jsonSring = JSON.stringify(p);
var p2 = JSON.parse(jsonString);
alert(p2.getX())
egration
t
Backend In
N and turn
se Objects into JSO
Turn Joo jects
JSON into Joose ob

Total JavaScript Makeover!

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 () {
ion
return this.y
zat
ati
},
m
Dra
setY: function (y) {
this.y = y;

if(Test == null) {
Test = {};
Classes and Namespaces in native JS
}
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) {
this.y = y;
},
clear: function () {
this.setX(0)
ion
zat
this.setY(0)
ati
}
m
Dra
}

Using Joose
Module(\"Test\", function (m) {
Class(\"Point\", {
has: {
x: {
is: \"rw\",
init: 0
},
y: {
is: \"rw\",
init: 0
}
},
methods: {
clear: function () {
this.setX(0);
this.setY(0);
}
}
})
})

Using Joose
Module(\"Test\", function (m) {
Class(\"Point\", {
has: {
x: {
is: \"rw\",
init: 0
},
y: {
is: \"rw\",
init: 0
}
},
methods: {
clear: function () {
this.setX(0);
this.setY(0);
olling
}
eed for scr
No n
}
})
})

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
ion
zat
Test.StandardPoint3D.prototype.getZ = function () {
ti
ma
return this.z
Dra
}

}
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;
}
ion
zat
ati
m
Dra

Using Joose
Module(\"Test\", function (m) {
Class(\"Point3D\", {
isa: m.Point,
has: {
z: {
is: \"rw\",
init: 0
}
},
after: {
clear: function () {
this.setZ(0)
}
}
})
})

EXAMPLES

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

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

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

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.

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.

Other Frameworks
_ Tested with
_ jQuery
_ YUI
_ Prototype
_ MooTools

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

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

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

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

Use it if
You need more than three \"classes\".
It makes sense to maintain page
state in objects.

Advanced Topics
_ Backend Integration
_ Prototype based object orientation
_ Introspection / Reflection
_ Everything Meta
_ DOM Binding
_ Client Side Databases

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

Thank You