Mastering Large Scale
JavaScript Applications
Fabian Jakobs

About
• Senior JavaScript Developer at 1&1
• core developer since 2006
@fjakobs

Man With Two Hats

Framework Application

Large Scale
JavaScript Applications

JavaScript Application

JavaScript Application

JavaScript Application

JavaScript Application

JavaScript Application
• Single Page Application
• Client Logic in JavaScript
• Client-Server
Communication with
AJAX calls

Large Scale
• Complexity and Size of JavaScript code
• ~ 150,000 LOC
• ~ 1000 Classes

• Rich Web Mail Application
• Pure JavaScript Client
• Backend Communication with Ajax calls
• Based on qooxdoo

• Client-side JavaScript Framework
• Cross-browser web applications
• Open Source

JavaScript isn‘t made for this

JavaScript isn‘t made
for this
• No package mechanism
• By default everything is in the global
namespace
• Only basic building blocks for OOP
• Tooling still sucks

Everybody puts a layer
on top
• GWT covers JavaScript with Java
• Cappuchino uses Objective-J
• Adobe invented ActionScript
• Everyone else uses (different) meta object
systems written in JavaScript

qooxdoo OOP
qx.Class.define("demo.Person",
{
extend : qx.core.Object,
construct : function(firstName, lastName)
{
this.base(arguments);
this._firstName = firstName;
this._lastName = lastName;
},
members :
{
getFullName : function() {
return this._firstName + " " + this._lastName;
}
}
});

Tooling

Tooling
API Doc Unit Testing
Linker
Auto Completion Code Coverage
Lint
IDE Support

Tooling dilemma
• Different OOP syntax makes generic
tooling hard
• Tools often depend in certain Framework
features
• Don‘t just look at the widgets, look at the
development tools as well

Find the Right Level of
Abstraction

Desktop Like Web
Applications Need
Desktop Abstractions
• Widgets • DOM Nodes
• Layout Manager vs • CSS
• Themes • Browser Bugs

Abstractions
Application
Application Components
Custom Widgets
Base Widgets Framework
UI Core
(Rendering Engine)
BOM (Cross Browser Code)
Core (JavaScript OOP)

Desktop Style
Development Model
// Create a button
var button = new qx.ui.form.Button("First Button", "demo/browser.png");
// Add button to container at fixed coordinates
container.add(button, {left: 100, top: 50});
// Add an event listener
button.addListener("execute", function(e) {
alert("Hello World!");
});

Leaky Abstractions
• Emulated behavior may be slower
• e.g. Canvas wrapper for IE
• For advanced tasks its essential to know
the lower layers
• CSS, HMTL, DOM knowledge is still
needed

Styling

Styling
No OS clone! No default theme Everything Custom!

Not Everyone
Speaks German

i18n

i18n

i18n

i18n in qooxdoo
this button = var qx.ui.form.Button(this.tr("Hello World!"));
• Standards
• gettext
• CLDR
• good external tooling
• known by professional translators

Performance

Our Bottlenecks
• Startup time
• Widget creation
• Table scroll performance

Startup Time
The 3Cs + O
• Combine
• Compress
• Cache
• On demand

Combine
• reduce number of requests
• combine JS JS PNG PNG
• JavaScript files
• CSS JS PNG
• Images

Compress
• optipng et el for images
• compress JavaScript
• serve with gzip

Compress JavaScript

Cache
• Serve static files with „cache forever“
• Increase version number if content
changes
• Use Image servers

On Demand
• Defer operations
• Load Code on demand
• Load Data on demand
• Render UI on demand

On Demand Code
• The initial view does not need
• Editor
• Settings
• Address book
• ...

On Demand Code
• Code
qx.io.PartLoader.require("settings", function()
{
mailclient.ui.SettingsDialog.getInstance().open();
}, this);
• Content
...
"packages" : {
"parts" : {
"settings": {
"include" : ["mailclient.ui.SettingsDialog"]
}
}
}
...

On Demand Data and UI
• Thousands of mails
in the inbox
• Only load visible
data
• Only render visible
rows of the table

Widget Creation
• DOM operations are expensive
• Creation Widgets is expensive
• Reuse Widgets
• Share Widgets
• Pool Widgets
• Increases Complexity!

Reuse Widgets
pool and reuse share mail preview
mail folder among tabs

Clean Code

Decouple UI
Components

Decouple UI
Components
Message Bus

Code Should be
Executable in Isolation
• Without rebuilding the application
• Without restarting the application
• Without a server

Unit Tests

Mini Applications

Summary
• Good Abstractions
• Styling
• Internationalization
• Performance
• Clean Code

colorstrip.gifT
THE NEW ERA OF WEB DEVELOPMENT
Thank you.
Fabian Jakobs
@fjakobs
<fabian.jakobs@1und1.de>
http://qooxdoo.org

Fotos
• http://www.flickr.com/photos/martin_uj/2505238011/
• http://www.flickr.com/photos/born-clothing/3764261653/
• http://www.flickr.com/photos/countrushmore/540548338/
• http://www.flickr.com/photos/gordonr/42555739/
• http://www.flickr.com/photos/evaekeblad/345203452/
• http://www.flickr.com/photos/oldonliner/1095360979/
• http://www.flickr.com/photos/imcomkorea/3496427357/
• http://www.flickr.com/photos/nhr/460382116/
• http://www.flickr.com/photos/evaekeblad/345203452/