masterin large scale java script applications
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.TRANSCRIPT
![Page 1: Masterin Large Scale Java Script Applications](https://reader035.vdocuments.mx/reader035/viewer/2022062312/554f412ab4c905cd048b543e/html5/thumbnails/1.jpg)
Mastering Large Scale JavaScript Applications
Fabian Jakobs
![Page 2: Masterin Large Scale Java Script Applications](https://reader035.vdocuments.mx/reader035/viewer/2022062312/554f412ab4c905cd048b543e/html5/thumbnails/2.jpg)
About
• Senior JavaScript Developer at 1&1
• core developer since 2006
@fjakobs
![Page 3: Masterin Large Scale Java Script Applications](https://reader035.vdocuments.mx/reader035/viewer/2022062312/554f412ab4c905cd048b543e/html5/thumbnails/3.jpg)
Man With Two Hats
![Page 4: Masterin Large Scale Java Script Applications](https://reader035.vdocuments.mx/reader035/viewer/2022062312/554f412ab4c905cd048b543e/html5/thumbnails/4.jpg)
Framework Application
![Page 5: Masterin Large Scale Java Script Applications](https://reader035.vdocuments.mx/reader035/viewer/2022062312/554f412ab4c905cd048b543e/html5/thumbnails/5.jpg)
Large ScaleJavaScript Applications
![Page 6: Masterin Large Scale Java Script Applications](https://reader035.vdocuments.mx/reader035/viewer/2022062312/554f412ab4c905cd048b543e/html5/thumbnails/6.jpg)
JavaScript Application
![Page 7: Masterin Large Scale Java Script Applications](https://reader035.vdocuments.mx/reader035/viewer/2022062312/554f412ab4c905cd048b543e/html5/thumbnails/7.jpg)
JavaScript Application
![Page 8: Masterin Large Scale Java Script Applications](https://reader035.vdocuments.mx/reader035/viewer/2022062312/554f412ab4c905cd048b543e/html5/thumbnails/8.jpg)
JavaScript Application
![Page 9: Masterin Large Scale Java Script Applications](https://reader035.vdocuments.mx/reader035/viewer/2022062312/554f412ab4c905cd048b543e/html5/thumbnails/9.jpg)
JavaScript Application
![Page 10: Masterin Large Scale Java Script Applications](https://reader035.vdocuments.mx/reader035/viewer/2022062312/554f412ab4c905cd048b543e/html5/thumbnails/10.jpg)
JavaScript Application
• Single Page Application
• Client Logic in JavaScript
• Client-Server Communication with AJAX calls
![Page 11: Masterin Large Scale Java Script Applications](https://reader035.vdocuments.mx/reader035/viewer/2022062312/554f412ab4c905cd048b543e/html5/thumbnails/11.jpg)
Large Scale
• Complexity and Size of JavaScript code
• ~ 150,000 LOC
• ~ 1000 Classes
![Page 12: Masterin Large Scale Java Script Applications](https://reader035.vdocuments.mx/reader035/viewer/2022062312/554f412ab4c905cd048b543e/html5/thumbnails/12.jpg)
![Page 13: Masterin Large Scale Java Script Applications](https://reader035.vdocuments.mx/reader035/viewer/2022062312/554f412ab4c905cd048b543e/html5/thumbnails/13.jpg)
• Rich Web Mail Application
• Pure JavaScript Client
• Backend Communication with Ajax calls
• Based on qooxdoo
![Page 14: Masterin Large Scale Java Script Applications](https://reader035.vdocuments.mx/reader035/viewer/2022062312/554f412ab4c905cd048b543e/html5/thumbnails/14.jpg)
• Client-side JavaScript Framework
• Cross-browser web applications
• Open Source
![Page 15: Masterin Large Scale Java Script Applications](https://reader035.vdocuments.mx/reader035/viewer/2022062312/554f412ab4c905cd048b543e/html5/thumbnails/15.jpg)
JavaScript isn‘t made for this
![Page 16: Masterin Large Scale Java Script Applications](https://reader035.vdocuments.mx/reader035/viewer/2022062312/554f412ab4c905cd048b543e/html5/thumbnails/16.jpg)
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
![Page 17: Masterin Large Scale Java Script Applications](https://reader035.vdocuments.mx/reader035/viewer/2022062312/554f412ab4c905cd048b543e/html5/thumbnails/17.jpg)
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
![Page 18: Masterin Large Scale Java Script Applications](https://reader035.vdocuments.mx/reader035/viewer/2022062312/554f412ab4c905cd048b543e/html5/thumbnails/18.jpg)
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; } }});
![Page 19: Masterin Large Scale Java Script Applications](https://reader035.vdocuments.mx/reader035/viewer/2022062312/554f412ab4c905cd048b543e/html5/thumbnails/19.jpg)
Tooling
![Page 20: Masterin Large Scale Java Script Applications](https://reader035.vdocuments.mx/reader035/viewer/2022062312/554f412ab4c905cd048b543e/html5/thumbnails/20.jpg)
Tooling
Linker
Lint
IDE Support
Auto Completion
Unit Testing
Code Coverage
API Doc
![Page 21: Masterin Large Scale Java Script Applications](https://reader035.vdocuments.mx/reader035/viewer/2022062312/554f412ab4c905cd048b543e/html5/thumbnails/21.jpg)
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
![Page 22: Masterin Large Scale Java Script Applications](https://reader035.vdocuments.mx/reader035/viewer/2022062312/554f412ab4c905cd048b543e/html5/thumbnails/22.jpg)
Find the Right Level of Abstraction
![Page 23: Masterin Large Scale Java Script Applications](https://reader035.vdocuments.mx/reader035/viewer/2022062312/554f412ab4c905cd048b543e/html5/thumbnails/23.jpg)
Desktop Like Web Applications Need
Desktop Abstractions
• Widgets
• Layout Manager
• Themes
• DOM Nodes
• CSS
• Browser Bugs
vs
![Page 24: Masterin Large Scale Java Script Applications](https://reader035.vdocuments.mx/reader035/viewer/2022062312/554f412ab4c905cd048b543e/html5/thumbnails/24.jpg)
Abstractions
Core (JavaScript OOP)
BOM (Cross Browser Code)
UI Core(Rendering Engine)
Base Widgets
Application Components
Custom Widgets
Framework
Application
![Page 25: Masterin Large Scale Java Script Applications](https://reader035.vdocuments.mx/reader035/viewer/2022062312/554f412ab4c905cd048b543e/html5/thumbnails/25.jpg)
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!");});
![Page 26: Masterin Large Scale Java Script Applications](https://reader035.vdocuments.mx/reader035/viewer/2022062312/554f412ab4c905cd048b543e/html5/thumbnails/26.jpg)
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
![Page 27: Masterin Large Scale Java Script Applications](https://reader035.vdocuments.mx/reader035/viewer/2022062312/554f412ab4c905cd048b543e/html5/thumbnails/27.jpg)
Styling
![Page 28: Masterin Large Scale Java Script Applications](https://reader035.vdocuments.mx/reader035/viewer/2022062312/554f412ab4c905cd048b543e/html5/thumbnails/28.jpg)
StylingNo OS clone! No default theme Everything Custom!
![Page 29: Masterin Large Scale Java Script Applications](https://reader035.vdocuments.mx/reader035/viewer/2022062312/554f412ab4c905cd048b543e/html5/thumbnails/29.jpg)
![Page 30: Masterin Large Scale Java Script Applications](https://reader035.vdocuments.mx/reader035/viewer/2022062312/554f412ab4c905cd048b543e/html5/thumbnails/30.jpg)
Not EveryoneSpeaks German
![Page 31: Masterin Large Scale Java Script Applications](https://reader035.vdocuments.mx/reader035/viewer/2022062312/554f412ab4c905cd048b543e/html5/thumbnails/31.jpg)
i18n
![Page 32: Masterin Large Scale Java Script Applications](https://reader035.vdocuments.mx/reader035/viewer/2022062312/554f412ab4c905cd048b543e/html5/thumbnails/32.jpg)
i18n
![Page 33: Masterin Large Scale Java Script Applications](https://reader035.vdocuments.mx/reader035/viewer/2022062312/554f412ab4c905cd048b543e/html5/thumbnails/33.jpg)
i18n
![Page 34: Masterin Large Scale Java Script Applications](https://reader035.vdocuments.mx/reader035/viewer/2022062312/554f412ab4c905cd048b543e/html5/thumbnails/34.jpg)
i18n in qooxdoo
• Standards
• gettext
• CLDR
• good external tooling
• known by professional translators
this button = var qx.ui.form.Button(this.tr("Hello World!"));
![Page 35: Masterin Large Scale Java Script Applications](https://reader035.vdocuments.mx/reader035/viewer/2022062312/554f412ab4c905cd048b543e/html5/thumbnails/35.jpg)
Performance
![Page 36: Masterin Large Scale Java Script Applications](https://reader035.vdocuments.mx/reader035/viewer/2022062312/554f412ab4c905cd048b543e/html5/thumbnails/36.jpg)
Our Bottlenecks
• Startup time
• Widget creation
• Table scroll performance
![Page 37: Masterin Large Scale Java Script Applications](https://reader035.vdocuments.mx/reader035/viewer/2022062312/554f412ab4c905cd048b543e/html5/thumbnails/37.jpg)
Startup Time
• Combine
• Compress
• Cache
• On demand
The 3Cs + O
![Page 38: Masterin Large Scale Java Script Applications](https://reader035.vdocuments.mx/reader035/viewer/2022062312/554f412ab4c905cd048b543e/html5/thumbnails/38.jpg)
Combine
• reduce number of requests
• combine
• JavaScript files
• CSS
• Images
PNGPNGJSJS
PNGJS
![Page 39: Masterin Large Scale Java Script Applications](https://reader035.vdocuments.mx/reader035/viewer/2022062312/554f412ab4c905cd048b543e/html5/thumbnails/39.jpg)
Compress
• optipng et el for images
• compress JavaScript
• serve with gzip
![Page 40: Masterin Large Scale Java Script Applications](https://reader035.vdocuments.mx/reader035/viewer/2022062312/554f412ab4c905cd048b543e/html5/thumbnails/40.jpg)
Compress JavaScript
![Page 41: Masterin Large Scale Java Script Applications](https://reader035.vdocuments.mx/reader035/viewer/2022062312/554f412ab4c905cd048b543e/html5/thumbnails/41.jpg)
Cache
• Serve static files with „cache forever“
• Increase version number if content changes
• Use Image servers
![Page 42: Masterin Large Scale Java Script Applications](https://reader035.vdocuments.mx/reader035/viewer/2022062312/554f412ab4c905cd048b543e/html5/thumbnails/42.jpg)
On Demand
• Defer operations
• Load Code on demand
• Load Data on demand
• Render UI on demand
![Page 43: Masterin Large Scale Java Script Applications](https://reader035.vdocuments.mx/reader035/viewer/2022062312/554f412ab4c905cd048b543e/html5/thumbnails/43.jpg)
On Demand Code
• The initial view does not need
• Editor
• Settings
• Address book
• ...
![Page 44: Masterin Large Scale Java Script Applications](https://reader035.vdocuments.mx/reader035/viewer/2022062312/554f412ab4c905cd048b543e/html5/thumbnails/44.jpg)
On Demand Code
qx.io.PartLoader.require("settings", function(){ mailclient.ui.SettingsDialog.getInstance().open();}, this);
..."packages" : { "parts" : { "settings": { "include" : ["mailclient.ui.SettingsDialog"] } }}...
• Code
• Content
![Page 45: Masterin Large Scale Java Script Applications](https://reader035.vdocuments.mx/reader035/viewer/2022062312/554f412ab4c905cd048b543e/html5/thumbnails/45.jpg)
On Demand Data and UI
• Thousands of mails in the inbox
• Only load visible data
• Only render visible rows of the table
![Page 46: Masterin Large Scale Java Script Applications](https://reader035.vdocuments.mx/reader035/viewer/2022062312/554f412ab4c905cd048b543e/html5/thumbnails/46.jpg)
Widget Creation
• DOM operations are expensive
• Creation Widgets is expensive
• Reuse Widgets
• Share Widgets
• Pool Widgets
• Increases Complexity!
![Page 47: Masterin Large Scale Java Script Applications](https://reader035.vdocuments.mx/reader035/viewer/2022062312/554f412ab4c905cd048b543e/html5/thumbnails/47.jpg)
Reuse Widgets
pool and reuse mail folder
share mail preview among tabs
![Page 48: Masterin Large Scale Java Script Applications](https://reader035.vdocuments.mx/reader035/viewer/2022062312/554f412ab4c905cd048b543e/html5/thumbnails/48.jpg)
Clean Code
![Page 49: Masterin Large Scale Java Script Applications](https://reader035.vdocuments.mx/reader035/viewer/2022062312/554f412ab4c905cd048b543e/html5/thumbnails/49.jpg)
Decouple UI Components
![Page 50: Masterin Large Scale Java Script Applications](https://reader035.vdocuments.mx/reader035/viewer/2022062312/554f412ab4c905cd048b543e/html5/thumbnails/50.jpg)
Decouple UI Components
Message Bus
![Page 51: Masterin Large Scale Java Script Applications](https://reader035.vdocuments.mx/reader035/viewer/2022062312/554f412ab4c905cd048b543e/html5/thumbnails/51.jpg)
Code Should be Executable in Isolation
• Without rebuilding the application
• Without restarting the application
• Without a server
![Page 52: Masterin Large Scale Java Script Applications](https://reader035.vdocuments.mx/reader035/viewer/2022062312/554f412ab4c905cd048b543e/html5/thumbnails/52.jpg)
Unit Tests
![Page 53: Masterin Large Scale Java Script Applications](https://reader035.vdocuments.mx/reader035/viewer/2022062312/554f412ab4c905cd048b543e/html5/thumbnails/53.jpg)
Mini Applications
![Page 54: Masterin Large Scale Java Script Applications](https://reader035.vdocuments.mx/reader035/viewer/2022062312/554f412ab4c905cd048b543e/html5/thumbnails/54.jpg)
Summary
• Good Abstractions
• Styling
• Internationalization
• Performance
• Clean Code
![Page 55: Masterin Large Scale Java Script Applications](https://reader035.vdocuments.mx/reader035/viewer/2022062312/554f412ab4c905cd048b543e/html5/thumbnails/55.jpg)
Thank you.
Fabian Jakobs @fjakobs
<[email protected]>http://qooxdoo.org
colorstrip.gifTTHE NEW ERA OF WEB DEVELOPMENT
![Page 56: Masterin Large Scale Java Script Applications](https://reader035.vdocuments.mx/reader035/viewer/2022062312/554f412ab4c905cd048b543e/html5/thumbnails/56.jpg)
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/