xopus application framework

Xopus Application Framework

Sebastiaan Visser - Xopus [email protected]

January 15, 2009

Introduction

Everyone likes JavaScript!

JavaScript is a very popular client-side language because:

I It is a simple language.

I It is a very dynamic language.

I It is very closely tied to the DOM.

I It is the only thing out there.

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:

I There are only functions and objects.

I No modules, classes, name spacing, explicit dependencies, etc.

I No help to structure your program.

I No such thing as ‘idiomatic JavaScript’.

Existing JS Frameworks

AFLAX AJAX.NET AJAXGear Toolkit AJFORM AjaxAC AjaxRequestAjaxcaller Bajax Behaviour CPaint DOM-Drag Dojo ToolkitEngine FlashObject Flexible AJAX JSPkg MochiKit Moo.FXNifty Corners OSFlash Flashjs PAJAJ PEAR:: HTML AJAX PlexToolkit Prototype RSLite Rico SACK SAJAX Sardalya SarissaScriptaculous Solvent Symfony TOXIC Taconite ThyApi TibetWZ DradDrop WZ jsGraphics XAJAX XHConn XOAD ZK ZephyrZimbra dp.SyntaxHighlighter jQuery jWic libXmlRequestmoo.ajax overLIB qForms qooxdoo 1

We focus on program architecture not browser integration.

1from: http://edevil.wordpress.com/2005/11/14/javascript-libraries-roundup/

Solving the problem

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

This presentation describes:

I how we have created an ‘object oriented’ framework.

I how we could keep this framework to be pure JavaScript.

I how this framework can help us structure our programs.

I how Xopus 4 uses this framework.

Framework

The framework supports:

I Writing modules in an OO ‘extended subset’ of JS.

I Hierarchically structuring programs into packages.

I Some forms of program verification.

I Making dependencies explicit.

I Dependency resolution.

I Consistent file-system layout.

And:

I Server side compilation to flattened form.

I Serving the client efficient and possibly obfuscated code.

I Even more!

Example

Package("com.xopus.code" );

Import("com.xopus.code.Food" );Extends("com.xopus.code.Animal" );

Class(function Monkey (name) { this.name = name; },function getName () { return this.name; },function favorite () { return new Food("banana" ) ; },Static, function kind () { return "chimp" ; }

);

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("banana" ); };Monkey.kind = function Monkey kind () { return "chimp" ; };

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}) + "$" + prop] = Animal.prototype[prop];else

Monkey.prototype[prop] = Animal.prototype[prop];

}).apply(this, [comxopuscodeFood,comxopuscodeAnimal]);

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]);

Example - methods

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

Monkey prototype.favorite =function Monkey favorite () { return new Food("banana" ); };

Monkey.kind = function Monkey kind () { return "chimp" ; };

for (var method in Monkey.prototype)Monkey.prototype[method]. class = Monkey;

Preserving stacktrace

Example - inheritance

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

Monkey.prototype[Identifier({Animal:1}) + "$" + prop] =Animal.prototype[prop];

elseMonkey.prototype[prop] = Animal.prototype[prop];

Compilation

I Server side compilation (currently) uses SpiderMonkey.

I Compilation entirely written in the JS framework.

I Uses reflection, only possible compile time.

I Compiler extensions for profiling, coverage, dependencyvisualization.

http://localhost/xopus/loader/test.html

console.dir(Loader.modules.map);

http://localhost/xopus/loader/test.html

Modules

The framework has support for:

I Fully qualified package names.

I Regular classes.

I Interfaces and abstract classes.

I Methods, put on prototype.

I Constructors, always the first method.(mandatory, constructor name defines class name)

Dependencies

The framework also has support for:

I Implementing interfaces.

I Extending (possibly multiple) other classes.

I Static decoration of other classes.

I Dynamic decoration of instances.

No full checks on interface implementation yet, should be possible.

Annotations

Methods can be annotated with additional information:

I Public, Private, Protected, Static.

I Continuation, Test, Deprecated, API.

I Anonymous static functions are special: class constructors.

Annotations can be used for:

I Documentation.

I Parametrize compilation.

I For runtime reflection.

Unit testing

Package("com.xopus.test.lang.js" );Extends("com.xopus.code.dev.testing.TestCase" )Tests("com.xopus.code.lang.js.ArrayUtil" )Class(

function ArrayUtilTest() { this.TestCase(); },Static, function () { new ArrayUtilTest().start(); },Test, function last(){

var obj = {};var arr = [1, 2, 3, obj];this.assertTrue("last() should return the last value in the array",arr.last() === obj);

});

Demo

I Uses runtime Test annotation.

I Can run entire packages - like com.xopus.*

I Mac mini automatically tests everything.

http://localhost/xopus/tester/runner/runner.html?modules=com.xopus.test.lang&profiling=true

http://localhost/xopus/tester/runner/runner.html?modules=com.xopus.test.lang&profiling=true

Conclusion

Advantages:

I More consistency, more structure

I Framework for abstraction.

I Framework for analyses.

I No runtime overhead.

Disadvantages:

I Code you debug not the code you write.

I Minor compile-time overhead.

I Requires server side machinery.

xopus application framework

Technology