Joose @jsconf
-
Upload
malteubl -
Category
Technology
-
view
2.530 -
download
0
description
Transcript of Joose @jsconf
Software-Development with JavaScript and JooseJSConf 2009
No Agenda
Agenda
Joose isa 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
You will still very much need these when
you use Joose in the Browser
Joose helps
_ write
_ well structured,
_ expressive,
_ declarative,
_ maintainable
_ JavaScript applications.
Joose helps
_ write
_ well structured,
_ expressive,
_ declarative,
_ maintainable
_ JavaScript applications.
Sun would call it:
JavaScript Enterprise Edition
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?
You don't need to understand the meta
features to work with Joose.
Meta?
You don't need to understand the meta
features to work with Joose.
But it is more fun if you do :)
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())
Turn Joose Objects into JSON and turn
JSON into Joose objects
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
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 () { return this.y }, setY: function (y) { this.y = y; }, clear: function () { this.setX(0) this.setY(0) }}
Dramatization
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
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); } } })})
No need for scrolling
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
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
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.
Profiling shows that Joose's overhead is negligible in most real world
applications.
Tell me if you do, though
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.
No extra testing in IE6 required
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