Xopus Application Framework


   Sebastiaan Visser - Xopus B.V.
      sebastiaan@xopus.com




         January 15, 2009
Introduction



   Everyone likes JavaScript!
Introduction



   Everyone likes JavaScript!

   JavaScript is a very popular client-side language because:


       It i...
Introduction



   Everyone likes JavaScript!

   JavaScript is a very popular client-side language because:


       It i...
Problem observation


   JavaScript is very well-suited for dynamic web pages.

   Xopus is not a web page, but an applica...
Existing JS Frameworks


  AFLAX AJAX.NET AJAXGear Toolkit AJFORM AjaxAC AjaxRequest
  Ajaxcaller Bajax Behaviour CPaint D...
Solving the problem


   Luckily JavaScript is very dynamic, why not create us a paradigm
   ourselves?

   This presentat...
Framework
  The framework supports:


      Writing modules in an OO ‘extended subset’ of JS.
      Hierarchically structu...
Framework
  The framework supports:


         Writing modules in an OO ‘extended subset’ of JS.
         Hierarchically s...
Example



  Package(quot;com.xopus.codequot; );

  Import(quot;com.xopus.code.Foodquot; );
  Extends(quot;com.xopus.code....
Example - compiled


  (function (Food,Animal) {

    var Monkey = comxopuscodeMonkey = function Monkey (name) { this.name...
Example - construction


   (function (Food,Animal) {

    var Monkey =
    comxopuscodeMonkey =
    function Monkey (name...
Example - methods



   Monkey prototype.getName =
   function Monkey getName () { return this.name; };

   Monkey prototy...
Preserving stacktrace
Example - inheritance




    for (var prop in Animal.prototype)
      if (Monkey.prototype[prop])
        Monkey.prototyp...
Compilation



      Server side compilation (currently) uses SpiderMonkey.
      Compilation entirely written in the JS f...
Compilation



      Server side compilation (currently) uses SpiderMonkey.
      Compilation entirely written in the JS f...
Modules



  The framework has support for:


      Fully qualified package names.
      Regular classes.
      Interfaces ...
Dependencies


  The framework also has support for:


      Implementing interfaces.
      Extending (possibly multiple) ...
Annotations

  Methods can be annotated with additional information:


      Public, Private, Protected, Static.
      Con...
Unit testing


   Package(quot;com.xopus.test.lang.jsquot; );
   Extends(quot;com.xopus.code.dev.testing.TestCasequot; )
 ...
Demo




        Uses runtime Test annotation.
        Can run entire packages - like com.xopus.*
        Mac mini automat...
Conclusion

  Advantages:


      More consistency, more structure
      Framework for abstraction.
      Framework for an...
Xopus Application Framework
Xopus Application Framework
Xopus Application Framework
Xopus Application Framework
Upcoming SlideShare
Loading in …5
×

Xopus Application Framework

960
-1

Published on

Xopus Application Framework

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
960
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Xopus Application Framework

  1. 1. Xopus Application Framework Sebastiaan Visser - Xopus B.V. sebastiaan@xopus.com January 15, 2009
  2. 2. Introduction Everyone likes JavaScript!
  3. 3. Introduction Everyone likes JavaScript! JavaScript is a very popular client-side language because: It is a simple language. It is a very dynamic language. It is very closely tied to the DOM.
  4. 4. Introduction Everyone likes JavaScript! JavaScript is a very popular client-side language because: It is a simple language. It is a very dynamic language. It is very closely tied to the DOM. It is the only thing out there.
  5. 5. Problem observation JavaScript is very well-suited for dynamic web pages. Xopus is not a web page, but an application. We observe some problems with the language: There are only functions and objects. No modules, classes, name spacing, explicit dependencies, etc. No help to structure your program. No such thing as ‘idiomatic JavaScript’.
  6. 6. Existing JS Frameworks AFLAX AJAX.NET AJAXGear Toolkit AJFORM AjaxAC AjaxRequest Ajaxcaller Bajax Behaviour CPaint DOM-Drag Dojo Toolkit Engine FlashObject Flexible AJAX JSPkg MochiKit Moo.FX Nifty Corners OSFlash Flashjs PAJAJ PEAR:: HTML AJAX Plex Toolkit Prototype RSLite Rico SACK SAJAX Sardalya Sarissa Scriptaculous Solvent Symfony TOXIC Taconite ThyApi Tibet WZ DradDrop WZ jsGraphics XAJAX XHConn XOAD ZK Zephyr Zimbra dp.SyntaxHighlighter jQuery jWic libXmlRequest moo.ajax overLIB qForms qooxdoo 1 We focus on program architecture not browser integration. 1 from: http://edevil.wordpress.com/2005/11/14/javascript-libraries-roundup/
  7. 7. Solving the problem Luckily JavaScript is very dynamic, why not create us a paradigm ourselves? This presentation describes: how we have created an ‘object oriented’ framework. how we could keep this framework to be pure JavaScript. how this framework can help us structure our programs. how Xopus 4 uses this framework.
  8. 8. Framework The framework supports: Writing modules in an OO ‘extended subset’ of JS. Hierarchically structuring programs into packages. Some forms of program verification. Making dependencies explicit. Dependency resolution. Consistent file-system layout.
  9. 9. Framework The framework supports: Writing modules in an OO ‘extended subset’ of JS. Hierarchically structuring programs into packages. Some forms of program verification. Making dependencies explicit. Dependency resolution. Consistent file-system layout. And: Server side compilation to flattened form. Serving the client efficient and possibly obfuscated code. Even more!
  10. 10. Example Package(quot;com.xopus.codequot; ); Import(quot;com.xopus.code.Foodquot; ); Extends(quot;com.xopus.code.Animalquot; ); Class( function Monkey (name) { this.name = name; }, function getName () { return this.name; }, function favorite () { return new Food(quot;bananaquot; ) ; }, Static, function kind () { return quot;chimpquot; ; } );
  11. 11. Example - compiled (function (Food,Animal) { var Monkey = comxopuscodeMonkey = function Monkey (name) { this.name = name; }; Monkey.prototype.Monkey = Monkey; var Monkey prototype = Monkey.prototype; Monkey prototype.getName = function Monkey getName () { return this.name; }; Monkey prototype.favorite = function Monkey favorite () { return new Food(quot;bananaquot; ); }; Monkey.kind = function Monkey kind () { return quot;chimpquot; ; }; for (var method in Monkey.prototype) Monkey.prototype[method]. class = Monkey; for (var prop in Animal.prototype) if (Monkey.prototype[prop]) Monkey.prototype[Identifier({Animal:1}) + quot;$quot; + prop] = Animal.prototype[prop]; else Monkey.prototype[prop] = Animal.prototype[prop]; }).apply(this, [comxopuscodeFood,comxopuscodeAnimal]);
  12. 12. Example - construction (function (Food,Animal) { var Monkey = comxopuscodeMonkey = function Monkey (name) { this.name = name; }; Monkey.prototype.Monkey = Monkey; var Monkey prototype = Monkey.prototype; ... }).apply(this, [comxopuscodeFood,comxopuscodeAnimal]);
  13. 13. Example - methods Monkey prototype.getName = function Monkey getName () { return this.name; }; Monkey prototype.favorite = function Monkey favorite () { return new Food(quot;bananaquot; ); }; Monkey.kind = function Monkey kind () { return quot;chimpquot; ; }; for (var method in Monkey.prototype) Monkey.prototype[method]. class = Monkey;
  14. 14. Preserving stacktrace
  15. 15. Example - inheritance for (var prop in Animal.prototype) if (Monkey.prototype[prop]) Monkey.prototype[Identifier({Animal:1}) + quot;$quot; + prop] = Animal.prototype[prop]; else Monkey.prototype[prop] = Animal.prototype[prop];
  16. 16. Compilation Server side compilation (currently) uses SpiderMonkey. Compilation entirely written in the JS framework. Uses reflection, only possible compile time. Compiler extensions for profiling, coverage, dependency visualization.
  17. 17. Compilation Server side compilation (currently) uses SpiderMonkey. Compilation entirely written in the JS framework. Uses reflection, only possible compile time. Compiler extensions for profiling, coverage, dependency visualization. http://localhost/xopus/loader/test.html console.dir(Loader.modules.map);
  18. 18. Modules The framework has support for: Fully qualified package names. Regular classes. Interfaces and abstract classes. Methods, put on prototype. Constructors, always the first method. (mandatory, constructor name defines class name)
  19. 19. Dependencies The framework also has support for: Implementing interfaces. Extending (possibly multiple) other classes. Static decoration of other classes. Dynamic decoration of instances. No full checks on interface implementation yet, should be possible.
  20. 20. Annotations Methods can be annotated with additional information: Public, Private, Protected, Static. Continuation, Test, Deprecated, API. Anonymous static functions are special: class constructors. Annotations can be used for: Documentation. Parametrize compilation. For runtime reflection.
  21. 21. Unit testing Package(quot;com.xopus.test.lang.jsquot; ); Extends(quot;com.xopus.code.dev.testing.TestCasequot; ) Tests(quot;com.xopus.code.lang.js.ArrayUtilquot; ) Class( function ArrayUtilTest() { this.TestCase(); }, Static, function () { new ArrayUtilTest().start(); }, Test, function last() { var obj = {}; var arr = [1, 2, 3, obj]; this.assertTrue( quot;last() should return the last value in the arrayquot;, arr.last() === obj); } );
  22. 22. Demo Uses runtime Test annotation. Can run entire packages - like com.xopus.* Mac mini automatically tests everything. http://localhost/xopus/tester/runner/runner.html?modules=com.xopus.test.lang&profiling=true
  23. 23. Conclusion Advantages: More consistency, more structure Framework for abstraction. Framework for analyses. No runtime overhead. Disadvantages: Code you debug not the code you write. Minor compile-time overhead. Requires server side machinery.

×