Laurens Van Den Oever Xopus Presentation

The Challenges and Rewards of Writing a 100K line JavaScript Application September 16 th 2009 Laurens van den Oever CEO, Xopus BV

The Challenges and Rewards of Writing a 120K line JavaScript Application September 16 th 2009 Laurens van den Oever CEO, Xopus BV

Agenda
Background
Framework
Architecture

Background: Xopus Overview
Browser based XML editor
Non-technical target audience
MVC
XML
XSL
XSD
100% JavaScript & XSL
Since 2001

Background: Xopus Demo
http://xopus.com/demos

Background: WYSIWYG View

Background: Prevalidation HTML DOM XML DOM XSD Validator UI

Background: Metrics
986 classes
1,159 source files (js, xml, xsl)
3,411 KB / 1,411 KB obfuscated
8,143 functions
120,935 lines

Framework: Why?
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
1 from: http://edevil.wordpress.com/2005/11/14/javascript-libraries-roundup/

Framework: Why?
We needed an application development framework
Focus:
Performance
Robustness
Code re-use
Automatic Testing
Ease of development less important

Framework: Design
Java/C# like object orientation
JavaScript syntax for backward compatiblity
Incremental migration!
On-the-fly server-side compilation
Client-side compilation for
Dynamic loading
Debugging
Namespacing and typchecking prevent errors

Framework: Source 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" ; }
);

Framework: Language constructs
Fully qualified package names.
Regular classes.
Interfaces and abstract classes.
Multiple inheritance
Static & dynamic decoration
Methods, put on prototype.
Constructors, always the first method. (mandatory, constructor name defines class name)

Framework: Inheritance vs Decoration
A subclass chooses it’s superclass:
Extends ( "com.xopus.code.SuperClass" );
Class ( function SubClass (…) { … }, …)
A decorator chooses it’s decoratee interface:
Decorates ( "com.xopus.core.command.Command" )
Decorator ( function UndoableCommand() … )
Other code can combine decorators at runtime:
UndoableCommand.decorateClass(
ChangeTrackingAcceptCommand);

Framework: Multiple inheritance
Extend two classes:
Extends( "com.xopus.lui.components.Component",
"com.xopus.lui.focus.Focusable“
)
Call super constructor:
this.Component( … );
Call super method:
this.Component$destroy();
Conflict resolution is developer responsibility

Framework: Classloader
Server side compilation uses SpiderMonkey & PHP.
Windows, OS X and Ubuntu
Compilation entirely written in the JS framework.
Uses reflection, only possible compile time.
Compiler extensions for profiling, coverage, dependency visualization.

Framework: Classloader Browser PHP SpiderMonkey .js .js .js .js Classloader.js

Framework: Classloader

Framework: Testrunner
Tests are linked to the modules they test
Tests ( “com.xopus.editor.EditingContext” )
Allows tracking of module quality and browser compatibility.
Manual runner for development
Automated server side runner for browser testing

Framework: Testrunner

Framework: Obfuscator
Protect codebase
Improve loading performance
Java based
Resticts JavaScript identifiers
No string manipulation of identifiers
Knows classloader $ constructs
Byte optimized Unicode output

Framework: Obfuscator
Mixes RTL and LTR languages
function է() { var خ = this. դ. getElementsByTagName('xml')[0]; if(! خ ) return; var د = this. ذ ( خ ); this. ر = د ; this. ز ( د ); this. س ( د ); this. ش ( د ); for(var M=0;M<this. ե. length;M++) ɛ. ص ( this. ե[ M],this.window); }, function ض ( د ) { Ý.Ť( د . selectNodes( "//@src|//@xml|//@xsd|//@xsl|//@url"),this.ũ); }

Architecture
Two main problems:
Many tasks take too long to wait for
Lot of code to sync application state with UI

Architecture: Conductor
JavaScript execution
Event Event Event setTimeout(0) Event setTimeout(0)

JavaScript execution
Event Event Event setTimeout(0) Event setTimeout(0) Browser Rendering

Capture all user input in event code
Execute all code that affects future event
Postpone the rest

Skipping code for perceived performance
Drag example
User drags object
10 mouse events per second
Move takes 150 ms
If you execute every move, you have a 0.5s delay after a second
Feels better if object is moved at lower frequency but higher accuracy
Delay move to timeout, move to last location

‘ Threading’ in JavaScript
Predefined Prioritized Phases
Code can register method call on phase
And cancel if request is outdated
No parameters for simplicity and performance

Code example:
function start() {
Conductor.request(Conductor.UPDATE_PHASE, this );
},
function UpdatePhase() {
/* Do work */
if (!done)
Conductor.request(Conductor.UPDATE_PHASE, this );
},
function stop(){
Conductor.cancel(Conductor.UPDATE_PHASE, this );
}

Architecture: LUI
LUI: Lazy User Interface
(Or: Laurens User Interface if it doesn’t work...)
Functional Reactive Programming User Interface Framework
Combines Conductor threading with
Easy binding of application state with user interface

Architecture: LUI
Component States:
Active: currently busy
Attention: has keyboard focus or mouse over
Checked: applies to current context
Enabled: can be activated
Abstraction for mouse and keyboard events

Architecture: LUI
Button template example


{label}

Architecture: LUI
Component code
XMLResource("Button.uit.xml")
this.declare(“active“, false);
this.set(“active", true);
var active = this.get(“active");

Architecture: LUI
UI config example
<toolbargroup>
<button command="SpellCheckerCommand"/>
...
</toolbargroup>

Architecture: LUI
Formulas
this.declareFormula(“ enabled “, getEnabled);
function getEnabled(scope) {
var node = scope.get(“node”);
return node.getName() == “example”;
}

Final notes
We have not reached the limits of the browser, but it is getting increasingly harder to make the next step.
We are willing to share parts of our platform with other projects.

Please complete an evaluation.

Questions?

Laurens Van Den Oever Xopus Presentation

by Ajax Experience 2009 on Aug 30, 2009

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 6

Statistics

Laurens Van Den Oever Xopus Presentation — Presentation Transcript