Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Joose @jsconf

3,586 views

Published on

Published in: Technology
  • Be the first to comment

Joose @jsconf

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

×