joose @jsconf
DESCRIPTION
TRANSCRIPT
![Page 1: Joose @jsconf](https://reader035.vdocuments.mx/reader035/viewer/2022081413/5496d529ac7959222e8b51f5/html5/thumbnails/1.jpg)
Software-Development with JavaScript and JooseJSConf 2009
![Page 2: Joose @jsconf](https://reader035.vdocuments.mx/reader035/viewer/2022081413/5496d529ac7959222e8b51f5/html5/thumbnails/2.jpg)
No Agenda
Agenda
![Page 3: Joose @jsconf](https://reader035.vdocuments.mx/reader035/viewer/2022081413/5496d529ac7959222e8b51f5/html5/thumbnails/3.jpg)
Joose isa meta object system for JavaScript
![Page 4: Joose @jsconf](https://reader035.vdocuments.mx/reader035/viewer/2022081413/5496d529ac7959222e8b51f5/html5/thumbnails/4.jpg)
Joose is not
a browser/DOM/Ajax/Widget library like jQuery, Prototype, YUI,
Mootools or Dojo
![Page 5: Joose @jsconf](https://reader035.vdocuments.mx/reader035/viewer/2022081413/5496d529ac7959222e8b51f5/html5/thumbnails/5.jpg)
Joose is not
a browser/DOM/Ajax/Widget library like jQuery, Prototype, YUI,
Mootools or Dojo
You will still very much need these when
you use Joose in the Browser
![Page 6: Joose @jsconf](https://reader035.vdocuments.mx/reader035/viewer/2022081413/5496d529ac7959222e8b51f5/html5/thumbnails/6.jpg)
Joose helps
_ write
_ well structured,
_ expressive,
_ declarative,
_ maintainable
_ JavaScript applications.
![Page 7: Joose @jsconf](https://reader035.vdocuments.mx/reader035/viewer/2022081413/5496d529ac7959222e8b51f5/html5/thumbnails/7.jpg)
Joose helps
_ write
_ well structured,
_ expressive,
_ declarative,
_ maintainable
_ JavaScript applications.
Sun would call it:
JavaScript Enterprise Edition
![Page 8: Joose @jsconf](https://reader035.vdocuments.mx/reader035/viewer/2022081413/5496d529ac7959222e8b51f5/html5/thumbnails/8.jpg)
Core Features
_ Classes
_ Interfaces
_ Mixins
_ Modules / Packages / Namespaces
_ Roles
_ (Mixins + Interfaces)
_ Method Modifiers
_ (think aspect oriented programming)
![Page 9: Joose @jsconf](https://reader035.vdocuments.mx/reader035/viewer/2022081413/5496d529ac7959222e8b51f5/html5/thumbnails/9.jpg)
Core Features
Declarative methods to build all these things
![Page 10: Joose @jsconf](https://reader035.vdocuments.mx/reader035/viewer/2022081413/5496d529ac7959222e8b51f5/html5/thumbnails/10.jpg)
Meta Features
Object based interface to introspect and manipulate all these things at
runtime.
Meta classes for classes, methods and attributes.
![Page 11: Joose @jsconf](https://reader035.vdocuments.mx/reader035/viewer/2022081413/5496d529ac7959222e8b51f5/html5/thumbnails/11.jpg)
Meta?
![Page 12: Joose @jsconf](https://reader035.vdocuments.mx/reader035/viewer/2022081413/5496d529ac7959222e8b51f5/html5/thumbnails/12.jpg)
Meta?
You don't need to understand the meta
features to work with Joose.
![Page 13: Joose @jsconf](https://reader035.vdocuments.mx/reader035/viewer/2022081413/5496d529ac7959222e8b51f5/html5/thumbnails/13.jpg)
Meta?
You don't need to understand the meta
features to work with Joose.
But it is more fun if you do :)
![Page 14: Joose @jsconf](https://reader035.vdocuments.mx/reader035/viewer/2022081413/5496d529ac7959222e8b51f5/html5/thumbnails/14.jpg)
Mission
Steal all the nice features from other programming languages.
Make them available in JavaScript in a way that feels native to JavaScript.
![Page 15: Joose @jsconf](https://reader035.vdocuments.mx/reader035/viewer/2022081413/5496d529ac7959222e8b51f5/html5/thumbnails/15.jpg)
Java, C#, etc.
_ Classes
_ Interfaces
_ Packages / Namespaces
![Page 16: Joose @jsconf](https://reader035.vdocuments.mx/reader035/viewer/2022081413/5496d529ac7959222e8b51f5/html5/thumbnails/16.jpg)
Smalltalk, CLOS (Common Lisp Object System)
_ Meta classes
_ Meta attributes
_ Meta methods
![Page 17: Joose @jsconf](https://reader035.vdocuments.mx/reader035/viewer/2022081413/5496d529ac7959222e8b51f5/html5/thumbnails/17.jpg)
Ruby
_ Mixins
_ Meta classes
![Page 18: Joose @jsconf](https://reader035.vdocuments.mx/reader035/viewer/2022081413/5496d529ac7959222e8b51f5/html5/thumbnails/18.jpg)
Perl 6
_ Roles
_ Method modifiers
_ Type constraints and coercions
![Page 19: Joose @jsconf](https://reader035.vdocuments.mx/reader035/viewer/2022081413/5496d529ac7959222e8b51f5/html5/thumbnails/19.jpg)
Perl 5
_ Moose (All of the above)
![Page 20: Joose @jsconf](https://reader035.vdocuments.mx/reader035/viewer/2022081413/5496d529ac7959222e8b51f5/html5/thumbnails/20.jpg)
LET‘S LOOK AT SOME CODE
![Page 21: Joose @jsconf](https://reader035.vdocuments.mx/reader035/viewer/2022081413/5496d529ac7959222e8b51f5/html5/thumbnails/21.jpg)
a Class
Class("Point", {
})
![Page 22: Joose @jsconf](https://reader035.vdocuments.mx/reader035/viewer/2022081413/5496d529ac7959222e8b51f5/html5/thumbnails/22.jpg)
with two attributes
Class("Point", { has: { x: {is: "ro"}, y: {is: "rw"}, }})
![Page 23: Joose @jsconf](https://reader035.vdocuments.mx/reader035/viewer/2022081413/5496d529ac7959222e8b51f5/html5/thumbnails/23.jpg)
and a clear method
Class("Point", { has: { x: {is: "ro"}, y: {is: "rw"}, }, methods: { clear: function () { this.x = 0; this.setY(0); } }})
![Page 24: Joose @jsconf](https://reader035.vdocuments.mx/reader035/viewer/2022081413/5496d529ac7959222e8b51f5/html5/thumbnails/24.jpg)
Inheritance
Class("Point3D", { isa: Point})
![Page 25: Joose @jsconf](https://reader035.vdocuments.mx/reader035/viewer/2022081413/5496d529ac7959222e8b51f5/html5/thumbnails/25.jpg)
after...
Class("Point3D", { isa: Point, has: { z: {} }, after: { clear: function () { this.z = 0; } }})
![Page 26: Joose @jsconf](https://reader035.vdocuments.mx/reader035/viewer/2022081413/5496d529ac7959222e8b51f5/html5/thumbnails/26.jpg)
before...
Class("Point3D", { isa: Point, has: { z: {} }, before: { clear: function () { this.z = 0; } }})
![Page 27: Joose @jsconf](https://reader035.vdocuments.mx/reader035/viewer/2022081413/5496d529ac7959222e8b51f5/html5/thumbnails/27.jpg)
before...
Class("Point3D", { isa: Point, has: { z: {} }, override: { clear: function () { this.SUPER(); this.z = 0; } }})
![Page 28: Joose @jsconf](https://reader035.vdocuments.mx/reader035/viewer/2022081413/5496d529ac7959222e8b51f5/html5/thumbnails/28.jpg)
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 });
![Page 29: Joose @jsconf](https://reader035.vdocuments.mx/reader035/viewer/2022081413/5496d529ac7959222e8b51f5/html5/thumbnails/29.jpg)
Modules
_ create a namespace
_ create a lexical scope for your code.
_ No need for ugly
_ (function () { ... })()
![Page 30: Joose @jsconf](https://reader035.vdocuments.mx/reader035/viewer/2022081413/5496d529ac7959222e8b51f5/html5/thumbnails/30.jpg)
Bank.Account
Module("Bank", function (m) { Class("Account", { has: { balance: { is: "rw", init: 0 } } }})
![Page 31: Joose @jsconf](https://reader035.vdocuments.mx/reader035/viewer/2022081413/5496d529ac7959222e8b51f5/html5/thumbnails/31.jpg)
JSON Integration
Class("Geometry.Point", { does: Joose.Storage, has: { x: {is: rw}, y: {is: rw}, $: { is: rw, init: "stuff", persistent: false } }})
![Page 32: Joose @jsconf](https://reader035.vdocuments.mx/reader035/viewer/2022081413/5496d529ac7959222e8b51f5/html5/thumbnails/32.jpg)
JSON Integration
var p = new Geometry.Point({x: 10, y: 20}) var jsonSring = JSON.stringify(p); var p2 = JSON.parse(jsonString); alert(p2.getX())
![Page 33: Joose @jsconf](https://reader035.vdocuments.mx/reader035/viewer/2022081413/5496d529ac7959222e8b51f5/html5/thumbnails/33.jpg)
JSON Integration
var p = new Geometry.Point({x: 10, y: 20}) var jsonSring = JSON.stringify(p); var p2 = JSON.parse(jsonString); alert(p2.getX())
Turn Joose Objects into JSON and turn
JSON into Joose objects
![Page 34: Joose @jsconf](https://reader035.vdocuments.mx/reader035/viewer/2022081413/5496d529ac7959222e8b51f5/html5/thumbnails/34.jpg)
JSON Integration
var p = new Geometry.Point({x: 10, y: 20}) var jsonSring = JSON.stringify(p); var p2 = JSON.parse(jsonString); alert(p2.getX())
Turn Joose Objects into JSON and turn
JSON into Joose objects
Backend Integration
![Page 35: Joose @jsconf](https://reader035.vdocuments.mx/reader035/viewer/2022081413/5496d529ac7959222e8b51f5/html5/thumbnails/35.jpg)
Total JavaScript Makeover!
![Page 36: Joose @jsconf](https://reader035.vdocuments.mx/reader035/viewer/2022081413/5496d529ac7959222e8b51f5/html5/thumbnails/36.jpg)
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) { this.y = y; }, clear: function () { this.setX(0) this.setY(0) }}
Dramatization
![Page 37: Joose @jsconf](https://reader035.vdocuments.mx/reader035/viewer/2022081413/5496d529ac7959222e8b51f5/html5/thumbnails/37.jpg)
Classes and Namespaces in native JSif(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) { this.y = y; }, clear: function () { this.setX(0) this.setY(0) }} Dramatization
![Page 38: Joose @jsconf](https://reader035.vdocuments.mx/reader035/viewer/2022081413/5496d529ac7959222e8b51f5/html5/thumbnails/38.jpg)
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); } } })})
![Page 39: Joose @jsconf](https://reader035.vdocuments.mx/reader035/viewer/2022081413/5496d529ac7959222e8b51f5/html5/thumbnails/39.jpg)
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); } } })})
No need for scrolling
![Page 40: Joose @jsconf](https://reader035.vdocuments.mx/reader035/viewer/2022081413/5496d529ac7959222e8b51f5/html5/thumbnails/40.jpg)
Class inheritance and method wrappers in native JS// We need a utility function to do the inheritancefunction 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.StandardPoint3Dinherit(Test.StandardPoint, Test.StandardPoint3D)
// we cant assign a new prototype because we already have the one from the superTest.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
![Page 41: Joose @jsconf](https://reader035.vdocuments.mx/reader035/viewer/2022081413/5496d529ac7959222e8b51f5/html5/thumbnails/41.jpg)
Class inheritance and method wrappers in native JS
// We need a utility function to do the inheritancefunction 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.StandardPoint3Dinherit(Test.StandardPoint, Test.StandardPoint3D)
// we cant assign a new prototype because we already have the one from the superTest.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
![Page 42: Joose @jsconf](https://reader035.vdocuments.mx/reader035/viewer/2022081413/5496d529ac7959222e8b51f5/html5/thumbnails/42.jpg)
Using Joose
Module("Test", function (m) { Class("Point3D", { isa: m.Point, has: { z: { is: "rw", init: 0 } }, after: { clear: function () { this.setZ(0) } } })})
![Page 43: Joose @jsconf](https://reader035.vdocuments.mx/reader035/viewer/2022081413/5496d529ac7959222e8b51f5/html5/thumbnails/43.jpg)
EXAMPLES
![Page 44: Joose @jsconf](https://reader035.vdocuments.mx/reader035/viewer/2022081413/5496d529ac7959222e8b51f5/html5/thumbnails/44.jpg)
Class Browser
_ http://it.test.avantaxx.de/xssinterface/projects/Joose/examples/class_browser.html
![Page 45: Joose @jsconf](https://reader035.vdocuments.mx/reader035/viewer/2022081413/5496d529ac7959222e8b51f5/html5/thumbnails/45.jpg)
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
![Page 46: Joose @jsconf](https://reader035.vdocuments.mx/reader035/viewer/2022081413/5496d529ac7959222e8b51f5/html5/thumbnails/46.jpg)
File Size
_ Minified: 56 kb
_ GZipped: 16 kb
![Page 47: Joose @jsconf](https://reader035.vdocuments.mx/reader035/viewer/2022081413/5496d529ac7959222e8b51f5/html5/thumbnails/47.jpg)
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.
![Page 48: Joose @jsconf](https://reader035.vdocuments.mx/reader035/viewer/2022081413/5496d529ac7959222e8b51f5/html5/thumbnails/48.jpg)
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.
Tell me if you do, though
![Page 49: Joose @jsconf](https://reader035.vdocuments.mx/reader035/viewer/2022081413/5496d529ac7959222e8b51f5/html5/thumbnails/49.jpg)
Other Frameworks
_ Tested with
_ jQuery
_ YUI
_ Prototype
_ MooTools
![Page 50: Joose @jsconf](https://reader035.vdocuments.mx/reader035/viewer/2022081413/5496d529ac7959222e8b51f5/html5/thumbnails/50.jpg)
Joose does not
_ extend any default object prototypes.
Object.prototype.boom = function () {
alert(„Dont try this at home“)
}
![Page 51: Joose @jsconf](https://reader035.vdocuments.mx/reader035/viewer/2022081413/5496d529ac7959222e8b51f5/html5/thumbnails/51.jpg)
Joose runs
_ in all common browsers
_ Rhino
_ Demandware :)
_ JScript.NET
_ Flash comming soon
_ Ensured by an extensive automated test suite.
![Page 52: Joose @jsconf](https://reader035.vdocuments.mx/reader035/viewer/2022081413/5496d529ac7959222e8b51f5/html5/thumbnails/52.jpg)
Joose runs
_ in all common browsers
_ Rhino
_ Demandware :)
_ JScript.NET
_ Flash comming soon
_ Ensured by an extensive automated test suite.
No extra testing in IE6 required
![Page 53: Joose @jsconf](https://reader035.vdocuments.mx/reader035/viewer/2022081413/5496d529ac7959222e8b51f5/html5/thumbnails/53.jpg)
Use cases?
Joose is not always the right tool for the job!
![Page 54: Joose @jsconf](https://reader035.vdocuments.mx/reader035/viewer/2022081413/5496d529ac7959222e8b51f5/html5/thumbnails/54.jpg)
Use it if
You need more than three "classes".
It makes sense to maintain page state in objects.
![Page 55: Joose @jsconf](https://reader035.vdocuments.mx/reader035/viewer/2022081413/5496d529ac7959222e8b51f5/html5/thumbnails/55.jpg)
Advanced Topics
_ Backend Integration
_ Prototype based object orientation
_ Introspection / Reflection
_ Everything Meta
_ DOM Binding
_ Client Side Databases
![Page 56: Joose @jsconf](https://reader035.vdocuments.mx/reader035/viewer/2022081413/5496d529ac7959222e8b51f5/html5/thumbnails/56.jpg)
More Info
_ http://code.google.com/p/joose-js/
_ http://joose-js.blogspot.com
_ http://twitter.com/cramforce
![Page 57: Joose @jsconf](https://reader035.vdocuments.mx/reader035/viewer/2022081413/5496d529ac7959222e8b51f5/html5/thumbnails/57.jpg)
Thank You