Upload
jady-yang
View
887
Download
0
Embed Size (px)
DESCRIPTION
Xopus Application Framework
Citation preview
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.
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.
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!
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);
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);
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
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.