Masterin Large Scale Java Script Applications
-
Upload
fabian-jakobs -
Category
Technology
-
view
5.712 -
download
0
description
Transcript of 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 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
<[email protected]>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/