Laurens Van Den Oever Xopus Presentation

  • 2,017 views
Uploaded on

 

More in: Business , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,017
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
32
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. The Challenges and Rewards of Writing a 100K line JavaScript Application September 16 th 2009 Laurens van den Oever CEO, Xopus BV
  • 2. The Challenges and Rewards of Writing a 120K line JavaScript Application September 16 th 2009 Laurens van den Oever CEO, Xopus BV
  • 3. Agenda
    • Background
    • Framework
    • Architecture
  • 4. Background: Xopus Overview
    • Browser based XML editor
    • Non-technical target audience
    • MVC
      • XML
      • XSL
      • XSD
    • 100% JavaScript & XSL
    • Since 2001
  • 5. Background: Xopus Demo
    • http://xopus.com/demos
  • 6. Background: WYSIWYG View
  • 7. Background: Prevalidation HTML DOM XML DOM XSD Validator UI
  • 8. Background: Metrics
    • 986 classes
    • 1,159 source files (js, xml, xsl)
    • 3,411 KB / 1,411 KB obfuscated
    • 8,143 functions
    • 120,935 lines
  • 9. 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/
  • 10. Framework: Why?
    • We needed an application development framework
    • Focus:
      • Performance
      • Robustness
      • Code re-use
      • Automatic Testing
    • Ease of development less important
  • 11. 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
  • 12. 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" ; }
    • );
  • 13. 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" ; }
    • );
  • 14. 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)
  • 15. 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);
  • 16. 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
  • 17. 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.
  • 18. Framework: Classloader Browser PHP SpiderMonkey .js .js .js .js Classloader.js
  • 19. Framework: Classloader
  • 20. 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
  • 21. Framework: Testrunner
  • 22. Framework: Obfuscator
    • Protect codebase
    • Improve loading performance
    • Java based
    • Resticts JavaScript identifiers
      • No string manipulation of identifiers
    • Knows classloader $ constructs
    • Byte optimized Unicode output
  • 23. 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( &quot;//@src|//@xml|//@xsd|//@xsl|//@url&quot;),this.ũ); }
  • 24. Architecture
    • Two main problems:
      • Many tasks take too long to wait for
      • Lot of code to sync application state with UI
  • 25. Architecture: Conductor
    • JavaScript execution
    Event Event Event setTimeout(0) Event setTimeout(0)
  • 26. Architecture: Conductor
    • JavaScript execution
    Event Event Event setTimeout(0) Event setTimeout(0) Browser Rendering
  • 27. Architecture: Conductor
    • Capture all user input in event code
    • Execute all code that affects future event
    • Postpone the rest
  • 28. Architecture: Conductor
    • 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
  • 29. Architecture: Conductor
    • ‘ 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
  • 30. Architecture: Conductor
    • 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 );
    • }
  • 31. 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
  • 32. 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
  • 33. Architecture: LUI
    • Button template example
    • <span class=&quot;button&quot;>
    • <span class=&quot;{active}-button
    • {attention}-button
    • {label}-button&quot;>
    • <span>{label}</span>
    • </span>
    • </span>
  • 34. Architecture: LUI
    • Component code
    • XMLResource(&quot;Button.uit.xml&quot;)
    • this.declare(“active“, false);
    • this.set(“active&quot;, true);
    • var active = this.get(“active&quot;);
  • 35. Architecture: LUI
    • UI config example
    • <toolbargroup>
    • <button command=&quot;SpellCheckerCommand&quot;/>
    • ...
    • </toolbargroup>
  • 36. Architecture: LUI
    • Formulas
    • this.declareFormula(“ enabled “, getEnabled);
    • function getEnabled(scope) {
    • var node = scope.get(“node”);
    • return node.getName() == “example”;
    • }
    • <span class=&quot;{ enabled }-component”/>
  • 37. 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.
  • 38.
    • Please complete an evaluation.
  • 39.
    • Questions?