Masterin Large Scale Java Script Applications

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 • 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 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 ﬁles • CSS JS PNG • Images

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

Compress JavaScript

Cache • Serve static ﬁles 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/

http://news.qooxdoo.org	214
http://www.slideshare.net	34
http://swik.net	6
http://feeds2.feedburner.com	6
http://planet.blog.tennessee.1und1.de	3
http://www.mefeedia.com	2
http://feeds.feedburner.com	1
http://planet.blog.tennessee.schlund.de	1
http://twitter.com	1
http://news.new.qooxdoo.org	1
http://static.slidesharecdn.com	1

Masterin Large Scale Java Script Applications

by Fabian Jakobs

Accessibility

Categories

Upload Details

Usage Rights

11 Embeds 270

Statistics

Masterin Large Scale Java Script Applications Presentation Transcript