57
Software-Development with JavaScript and Joose JSConf 2009

Joose @jsconf

Embed Size (px)

DESCRIPTION

 

Citation preview

Page 1: Joose @jsconf

Software-Development with JavaScript and JooseJSConf 2009

Page 2: Joose @jsconf

No Agenda

Agenda

Page 3: Joose @jsconf

Joose isa meta object system for JavaScript

Page 4: Joose @jsconf

Joose is not

a browser/DOM/Ajax/Widget library like jQuery, Prototype, YUI,

Mootools or Dojo

Page 5: Joose @jsconf

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

Joose helps

_ write

_ well structured,

_ expressive,

_ declarative,

_ maintainable

_ JavaScript applications.

Page 7: Joose @jsconf

Joose helps

_ write

_ well structured,

_ expressive,

_ declarative,

_ maintainable

_ JavaScript applications.

Sun would call it:

JavaScript Enterprise Edition

Page 8: Joose @jsconf

Core Features

_ Classes

_ Interfaces

_ Mixins

_ Modules / Packages / Namespaces

_ Roles

_ (Mixins + Interfaces)

_ Method Modifiers

_ (think aspect oriented programming)

Page 9: Joose @jsconf

Core Features

Declarative methods to build all these things

Page 10: Joose @jsconf

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

Meta?

Page 12: Joose @jsconf

Meta?

You don't need to understand the meta

features to work with Joose.

Page 13: Joose @jsconf

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

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

Java, C#, etc.

_ Classes

_ Interfaces

_ Packages / Namespaces

Page 16: Joose @jsconf

Smalltalk, CLOS (Common Lisp Object System)

_ Meta classes

_ Meta attributes

_ Meta methods

Page 17: Joose @jsconf

Ruby

_ Mixins

_ Meta classes

Page 18: Joose @jsconf

Perl 6

_ Roles

_ Method modifiers

_ Type constraints and coercions

Page 19: Joose @jsconf

Perl 5

_ Moose (All of the above)

Page 20: Joose @jsconf

LET‘S LOOK AT SOME CODE

Page 21: Joose @jsconf

a Class

Class("Point", {

})

Page 22: Joose @jsconf

with two attributes

Class("Point", { has: { x: {is: "ro"}, y: {is: "rw"}, }})

Page 23: Joose @jsconf

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

Inheritance

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

Page 25: Joose @jsconf

after...

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

Page 26: Joose @jsconf

before...

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

Page 27: Joose @jsconf

before...

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

Page 28: Joose @jsconf

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

Modules

_ create a namespace

_ create a lexical scope for your code.

_ No need for ugly

_ (function () { ... })()

Page 30: Joose @jsconf

Bank.Account

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

Page 31: Joose @jsconf

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

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

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

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

Total JavaScript Makeover!

Page 36: Joose @jsconf

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

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

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

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

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

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

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

EXAMPLES

Page 44: Joose @jsconf

Class Browser

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

Page 45: Joose @jsconf

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

File Size

_ Minified: 56 kb

_ GZipped: 16 kb

Page 47: Joose @jsconf

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

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

Other Frameworks

_ Tested with

_ jQuery

_ YUI

_ Prototype

_ MooTools

Page 50: Joose @jsconf

Joose does not

_ extend any default object prototypes.

Object.prototype.boom = function () {

alert(„Dont try this at home“)

}

Page 51: Joose @jsconf

Joose runs

_ in all common browsers

_ Rhino

_ Demandware :)

_ JScript.NET

_ Flash comming soon

_ Ensured by an extensive automated test suite.

Page 52: Joose @jsconf

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

Use cases?

Joose is not always the right tool for the job!

Page 54: Joose @jsconf

Use it if

You need more than three "classes".

It makes sense to maintain page state in objects.

Page 55: Joose @jsconf

Advanced Topics

_ Backend Integration

_ Prototype based object orientation

_ Introspection / Reflection

_ Everything Meta

_ DOM Binding

_ Client Side Databases

Page 56: Joose @jsconf

More Info

_ http://code.google.com/p/joose-js/

_ http://joose-js.blogspot.com

_ http://twitter.com/cramforce

Page 57: Joose @jsconf

Thank You