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 ScaleJavaScript 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 OOPqx.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

Linker

Lint

IDE Support

Auto Completion

Unit Testing

Code Coverage

API Doc

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

• Layout Manager

• Themes

• DOM Nodes

• CSS

• Browser Bugs

vs

Abstractions

Core (JavaScript OOP)

BOM (Cross Browser Code)

UI Core(Rendering Engine)

Base Widgets

Application Components

Custom Widgets

Framework

Application

Desktop StyleDevelopment Model

// Create a buttonvar button = new qx.ui.form.Button("First Button", "demo/browser.png");

// Add button to container at fixed coordinatescontainer.add(button, {left: 100, top: 50});

// Add an event listenerbutton.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

StylingNo OS clone! No default theme Everything Custom!

Not EveryoneSpeaks German

i18n

i18n

i18n

i18n in qooxdoo

• Standards

• gettext

• CLDR

• good external tooling

• known by professional translators

this button = var qx.ui.form.Button(this.tr("Hello World!"));

Performance

Our Bottlenecks

• Startup time

• Widget creation

• Table scroll performance

Startup Time

• Combine

• Compress

• Cache

• On demand

The 3Cs + O

Combine

• reduce number of requests

• combine

• JavaScript files

• CSS

• Images

PNGPNGJSJS

PNGJS

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

qx.io.PartLoader.require("settings", function(){ mailclient.ui.SettingsDialog.getInstance().open();}, this);

..."packages" : { "parts" : { "settings": { "include" : ["mailclient.ui.SettingsDialog"] } }}...

• Code

• Content

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 mail folder

share mail preview 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

Thank you.

Fabian Jakobs @fjakobs

<fabian.jakobs@1und1.de>http://qooxdoo.org

colorstrip.gifTTHE NEW ERA OF WEB DEVELOPMENT

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/