0
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
              ...
Joose helps

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

_   write
_   well structured,
_   expressive,
_   declarative,
_   maintainable
_   JavaScript applications....
Core Features

_   Classes
_   Interfaces
_   Mixins
_   Modules / Packages / Namespaces
_   Roles
     _   (Mixins + Inte...
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 ...
Meta?
Meta?
                              the meta
          need to understand
You don't
                           Joose.
    ...
Meta?
                              the meta
          need to understand
You don't
                           Joose.
    ...
Mission
Steal all the nice features from other
      programming languages.
Make them available in JavaScript in a
 way th...
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(quot;Pointquot;, {

})
with two attributes

Class(quot;Pointquot;, {
    has: {
        x: {is: quot;roquot;},
        y: {is: quot;rwquot;},
   ...
and a clear method

Class(quot;Pointquot;, {
    has: {
        x: {is: quot;roquot;},
        y: {is: quot;rwquot;},
    ...
Inheritance

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

Class(quot;Point3Dquot;, {
    isa: Point,
    has: {
        z: {}
    },
    after: {
        clear: function ...
before...

Class(quot;Point3Dquot;, {
    isa: Point,
    has: {
        z: {}
    },
    before: {
        clear: functio...
before...

Class(quot;Point3Dquot;, {
    isa: Point,
    has: {
        z: {}
    },
    override: {
        clear: funct...
Usage

var point = new Point3D();

point.setX(10);

var y = point.getY(10);

point.z = 1;

point.clear();

var point2 = ne...
Modules

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

Module(quot;Bankquot;, function (m) {
    Class(quot;Accountquot;, {
        has: {
            balance: {
 ...
JSON Integration

Class(quot;Geometry.Pointquot;, {
    does: Joose.Storage,
    has: {
        x: {is: rw},
        y: {i...
JSON Integration

var p = new Geometry.Point({x: 10, y: 20})

var jsonSring = JSON.stringify(p);

var p2 = JSON.parse(json...
JSON Integration

var p = new Geometry.Point({x: 10, y: 20})

var jsonSring = JSON.stringify(p);

var p2 = JSON.parse(json...
JSON Integration

var p = new Geometry.Point({x: 10, y: 20})

var jsonSring = JSON.stringify(p);

var p2 = JSON.parse(json...
Total JavaScript Makeover!
Classes and Namespaces in native JS

if(Test == null) {
    Test = {};
}

Test.StandardPoint = function (x, y) {
    this....
if(Test == null) {
    Test = {};
Classes and Namespaces in native JS
}

Test.StandardPoint = function (x, y) {
    this.x...
Using Joose

Module(quot;Testquot;, function (m) {
    Class(quot;Pointquot;, {
        has: {
            x: {
          ...
Using Joose

Module(quot;Testquot;, function (m) {
    Class(quot;Pointquot;, {
        has: {
            x: {
          ...
Class inheritance and method
wrappers in native JS
// We need a utility function to do the inheritance
function inherit(su...
}

Test.StandardPoint3D = function (x, y, z) {
    this.x = x || 0
Class inheritance and method
    this.y = y || 0
    th...
Using Joose

Module(quot;Testquot;, function (m) {
    Class(quot;Point3Dquot;, {
        isa: m.Point,
        has: {
   ...
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...
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 ...
Speed
Should be fine if you're not building a
canvas based ray tracer for real time
            animations. if you do, thou...
Other Frameworks

_   Tested with
     _   jQuery
     _   YUI
     _   Prototype
     _   MooTools
Joose does not

_   extend any default object prototypes.


Object.prototype.boom = function () {
      alert(„Dont try th...
Joose runs

_   in all common browsers
_   Rhino
_   Demandware :)
_   JScript.NET
_   Flash comming soon
_   Ensured by a...
Joose runs

_   in all common browsers
_   Rhino
_   Demandware :)
_   JScript.NET
_   Flash comming soon
_   Ensured by a...
Use cases?
Joose is not always the right tool for
              the job!
Use it if
You need more than three quot;classesquot;.
 It makes sense to maintain page
         state in objects.
Advanced Topics

_   Backend Integration
_   Prototype based object orientation
_   Introspection / Reflection
_   Everythi...
More Info

_   http://code.google.com/p/joose-js/
_   http://joose-js.blogspot.com
_   http://twitter.com/cramforce
Thank You
Upcoming SlideShare
Loading in...5
×

Joose @jsconf

2,564

Published on

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,564
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
38
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Transcript of "Joose @jsconf"

  1. 1. Software-Development with JavaScript and Joose JSConf 2009
  2. 2. Agenda No Agenda
  3. 3. Joose is a meta object system for JavaScript
  4. 4. Joose is not a browser/DOM/Ajax/Widget library like jQuery, Prototype, YUI, Mootools or Dojo
  5. 5. 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
  6. 6. Joose helps _ write _ well structured, _ expressive, _ declarative, _ maintainable _ JavaScript applications.
  7. 7. Joose helps _ write _ well structured, _ expressive, _ declarative, _ maintainable _ JavaScript applications. ll it: n would ca Su Edition Enterprise JavaScript
  8. 8. Core Features _ Classes _ Interfaces _ Mixins _ Modules / Packages / Namespaces _ Roles _ (Mixins + Interfaces) _ Method Modifiers _ (think aspect oriented programming)
  9. 9. Core Features Declarative methods to build all these things
  10. 10. Meta Features Object based interface to introspect and manipulate all these things at runtime. Meta classes for classes, methods and attributes.
  11. 11. Meta?
  12. 12. Meta? the meta need to understand You don't Joose. features to work with
  13. 13. 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
  14. 14. Mission Steal all the nice features from other programming languages. Make them available in JavaScript in a way that feels native to JavaScript.
  15. 15. Java, C#, etc. _ Classes _ Interfaces _ Packages / Namespaces
  16. 16. Smalltalk, CLOS (Common Lisp Object System) _ Meta classes _ Meta attributes _ Meta methods
  17. 17. Ruby _ Mixins _ Meta classes
  18. 18. Perl 6 _ Roles _ Method modifiers _ Type constraints and coercions
  19. 19. Perl 5 _ Moose (All of the above)
  20. 20. LET‘S LOOK AT SOME CODE
  21. 21. a Class Class(quot;Pointquot;, { })
  22. 22. with two attributes Class(quot;Pointquot;, { has: { x: {is: quot;roquot;}, y: {is: quot;rwquot;}, } })
  23. 23. 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); } } })
  24. 24. Inheritance Class(quot;Point3Dquot;, { isa: Point })
  25. 25. after... Class(quot;Point3Dquot;, { isa: Point, has: { z: {} }, after: { clear: function () { this.z = 0; } } })
  26. 26. before... Class(quot;Point3Dquot;, { isa: Point, has: { z: {} }, before: { clear: function () { this.z = 0; } } })
  27. 27. before... Class(quot;Point3Dquot;, { isa: Point, has: { z: {} }, override: { clear: function () { this.SUPER(); this.z = 0; } } })
  28. 28. 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 });
  29. 29. Modules _ create a namespace _ create a lexical scope for your code. _ No need for ugly (function () { ... })() _
  30. 30. Bank.Account Module(quot;Bankquot;, function (m) { Class(quot;Accountquot;, { has: { balance: { is: quot;rwquot;, init: 0 } } } })
  31. 31. JSON Integration Class(quot;Geometry.Pointquot;, { does: Joose.Storage, has: { x: {is: rw}, y: {is: rw}, $: { is: rw, init: quot;stuffquot;, persistent: false } } })
  32. 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())
  33. 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()) N and turn se Objects into JSO Turn Joo jects JSON into Joose ob
  34. 34. 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
  35. 35. Total JavaScript Makeover!
  36. 36. 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;
  37. 37. 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 }
  38. 38. 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); } } }) })
  39. 39. 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); olling } eed for scr No n } }) })
  40. 40. 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 }
  41. 41. } 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
  42. 42. 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) } } }) })
  43. 43. EXAMPLES
  44. 44. Class Browser _ http://it.test.avantaxx.de/xssinterface/projects/Joose/examples/class_browser.html
  45. 45. 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
  46. 46. File Size _ Minified: 56 kb _ GZipped: 16 kb
  47. 47. 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.
  48. 48. 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.
  49. 49. Other Frameworks _ Tested with _ jQuery _ YUI _ Prototype _ MooTools
  50. 50. Joose does not _ extend any default object prototypes. Object.prototype.boom = function () { alert(„Dont try this at home“) }
  51. 51. Joose runs _ in all common browsers _ Rhino _ Demandware :) _ JScript.NET _ Flash comming soon _ Ensured by an extensive automated test suite.
  52. 52. 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
  53. 53. Use cases? Joose is not always the right tool for the job!
  54. 54. Use it if You need more than three quot;classesquot;. It makes sense to maintain page state in objects.
  55. 55. Advanced Topics _ Backend Integration _ Prototype based object orientation _ Introspection / Reflection _ Everything Meta _ DOM Binding _ Client Side Databases
  56. 56. More Info _ http://code.google.com/p/joose-js/ _ http://joose-js.blogspot.com _ http://twitter.com/cramforce
  57. 57. Thank You
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×