View
5.712
Download
0
Category
Tags:
Preview:
DESCRIPTION
Writing large desktop-like web applications is a challenge. Adapting such an application to different markets, languages or brands is even more of a challenge. This talk shows how the open source JavaScript framework qooxdoo can be leveraged to build such a rich internet application. As a real-life example the free web mail client gmx.com is used. This talk discusses the development model, customization and deployment of such an application. Learn how JavaScript applications of this size and complexity are fundamentally different from classic web applications, and what issues come up when building fast, multi-language, multi-brand JavaScript applications.
Citation preview
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/
Recommended