Joose - JavaScript Meta Object System

7,461 views
7,366 views

Published on

Introduction to JavaScript development with Joose

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

No Downloads
Views
Total views
7,461
On SlideShare
0
From Embeds
0
Number of Embeds
1,626
Actions
Shares
0
Downloads
101
Comments
0
Likes
17
Embeds 0
No embeds

No notes for slide

Joose - JavaScript Meta Object System

  1. 1. Software-Development with JavaScript and Joose Hamburg, 22.Oktober 2008
  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 hen uch need these w Y ou wil still very m the Browser you use Joose in
  6. 6. Joose helps _ write _ well structured, _ expressive, _ declarative, _ maintainable _ JavaScript applications.
  7. 7. Core Features _ Classes _ Interfaces _ Mixins _ Modules / Packages / Namespaces _ Roles _ (Mixins + Interfaces) _ Method Modifiers _ (think aspect oriented programming)
  8. 8. Core Features Declarative methods to build all these things
  9. 9. Meta Features Object based interface to introspect and manipulate all these things at runtime. Meta classes for classes, methods and attributes.
  10. 10. Meta?
  11. 11. Meta? eta understand the m Y ou don't need to with Joose. features to work
  12. 12. Meta? eta understand the m Y ou don't need to with Joose. features to work you do :) But it is more fun if
  13. 13. Mission Steal all the nice features from other programming languages. Make them available in JavaScript in a way that feels native to JavaScript.
  14. 14. Java, C#, etc. _ Classes _ Interfaces _ Packages / Namespaces
  15. 15. Smalltalk, CLOS (Common Lisp Object System) _ Meta classes _ Meta attributes _ Meta methods
  16. 16. Ruby _ Mixins _ Meta classes
  17. 17. Perl 6 _ Roles _ Method modifiers _ Type constraints and coercions
  18. 18. Perl 5 _ Moose (All of the above)
  19. 19. LET‘S LOOK AT SOME CODE
  20. 20. a Class Class(quot;Pointquot;, { })
  21. 21. with two attributes Class(quot;Pointquot;, { has: { x: {is: quot;roquot;}, y: {is: quot;rwquot;}, } })
  22. 22. 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); } } })
  23. 23. Inheritance Class(quot;Point3Dquot;, { isa: Point })
  24. 24. after... Class(quot;Point3Dquot;, { isa: Point, has: { z: {} }, after: { clear: function () { this.z = 0; } } })
  25. 25. before... Class(quot;Point3Dquot;, { isa: Point, has: { z: {} }, before: { clear: function () { this.z = 0; } } })
  26. 26. before... Class(quot;Point3Dquot;, { isa: Point, has: { z: {} }, override: { clear: function () { this.SUPER(); this.z = 0; } } })
  27. 27. 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 });
  28. 28. Modules _ create a namespace _ create a lexical scope for your code. _ No need for ugly _ (function () { ... })()
  29. 29. Bank.Account Module(quot;Bankquot;, function (m) { Class(quot;Accountquot;, { has: { balance: { is: quot;rwquot;, init: 0 } } } })
  30. 30. JSON Integration Class(quot;Geometry.Pointquot;, { does: Joose.Storage, has: { x: {is: rw}, y: {is: rw}, $: { is: rw, init: quot;stuffquot;, persistent: false } } })
  31. 31. JSON Integration var p = new Geometry.Point({x: 10, y: 20}) var jsonSring = JSON.stringify(p); var p2 = JSON.parse(jsonString); alert(p2.getX())
  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()) ON JSON and turn JS Turn Joose Objects into s into Joose object
  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()) tion! Backe nd Integra ON JSON and turn JS Turn Joose Objects into s into Joose object
  34. 34. Total JavaScript Makeover!
  35. 35. 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) { Dramatization
  36. 36. if(Test == null) { Test = {}; Classes and Namespaces in native } JSthis.x = x || 0= function (x, y) { Test.StandardPoint 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 }
  37. 37. 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); } } }) })
  38. 38. Using Joose Module(quot;Testquot;, function (m) { Class(quot;Pointquot;, { has: { x: { is: quot;rwquot;, init: 0 }, y: { is: quot;rwquot;, lling! ed for scro init: 0 } No ne }, methods: { clear: function () { this.setX(0); this.setY(0); } } }) })
  39. 39. 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 Test.StandardPoint3D.prototype.getZ = function () { return this.z Dramatization }
  40. 40. } 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; } Dramatization
  41. 41. 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) } } }) })
  42. 42. EXAMPLES
  43. 43. Class Browser _ http://it.test.avantaxx.de/xssinterface/projects/Joose/examples/class_browser.html
  44. 44. 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
  45. 45. File Size _ Minified: 56 kb _ GZipped: 16 kb
  46. 46. 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.
  47. 47. 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.
  48. 48. Other Frameworks _ Integration with jQuery works like a charm _ YUI should be fine, too (Because YUI is very serious about namespaces). _ Others should be fine as well
  49. 49. Joose does not _ extend any default object prototypes. Object.prototype.boom = function () { alert(„Dont try this at home“) }
  50. 50. Joose runs _ in all common browsers _ Rhino _ JScript.NET _ Flash comming soon _ Ensured by an extensive automated test suite.
  51. 51. Joose runs _ in all common browsers _ Rhino _ JScript.NET _ Flash comming soon _ Ensured by an extensive automated test suite. ired :) sting in IE6 requ No extra te
  52. 52. Use cases? Joose is not always the right tool for the job!
  53. 53. Use it if You need more than three quot;classesquot;. It makes sense to maintain page state in objects.
  54. 54. Advanced Topics _ Backend Integration _ Prototype based object orientation _ Everything Meta _ DOM Binding _ Client Side Databases
  55. 55. More Info _ http://code.google.com/p/joose-js/ _ http://joose-js.blogspot.com
  56. 56. Thank You

×