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.

1. Mastering Large Scale
JavaScript Applications
Fabian Jakobs

2. About
• Senior JavaScript Developer at 1&1
• core developer since 2006
@fjakobs

3. Man With Two Hats

4. Framework Application

5. Large Scale
JavaScript Applications

6. JavaScript Application

7. JavaScript Application

8. JavaScript Application

9. JavaScript Application

10. JavaScript Application
• Single Page Application
• Client Logic in JavaScript
• Client-Server
Communication with
AJAX calls

11. Large Scale
• Complexity and Size of JavaScript code
• ~ 150,000 LOC
• ~ 1000 Classes

13. • Rich Web Mail Application
• Pure JavaScript Client
• Backend Communication with Ajax calls
• Based on qooxdoo

14. • Client-side JavaScript Framework
• Cross-browser web applications
• Open Source

15. JavaScript isn‘t made for this

16. 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

17. 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

18. 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;
}
}
});

19. Tooling

20. Tooling
API Doc Unit Testing
Linker
Auto Completion Code Coverage
Lint
IDE Support

21. 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

22. Find the Right Level of
Abstraction

23. Desktop Like Web
Applications Need
Desktop Abstractions
• Widgets • DOM Nodes
• Layout Manager vs • CSS
• Themes • Browser Bugs

24. Abstractions
Application
Application Components
Custom Widgets
Base Widgets Framework
UI Core
(Rendering Engine)
BOM (Cross Browser Code)
Core (JavaScript OOP)

25. 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!");
});

26. 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

27. Styling

28. Styling
No OS clone! No default theme Everything Custom!

30. Not Everyone
Speaks German

31. i18n

32. i18n

33. i18n

34. i18n in qooxdoo
this button = var qx.ui.form.Button(this.tr("Hello World!"));
• Standards
• gettext
• CLDR
• good external tooling
• known by professional translators

35. Performance

36. Our Bottlenecks
• Startup time
• Widget creation
• Table scroll performance

37. Startup Time
The 3Cs + O
• Combine
• Compress
• Cache
• On demand

38. Combine
• reduce number of requests
• combine JS JS PNG PNG
• JavaScript files
• CSS JS PNG
• Images

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

40. Compress JavaScript

41. Cache
• Serve static files with „cache forever“
• Increase version number if content
changes
• Use Image servers

42. On Demand
• Defer operations
• Load Code on demand
• Load Data on demand
• Render UI on demand

43. On Demand Code
• The initial view does not need
• Editor
• Settings
• Address book
• ...

44. On Demand Code
• Code
qx.io.PartLoader.require("settings", function()
{
mailclient.ui.SettingsDialog.getInstance().open();
}, this);
• Content
...
"packages" : {
"parts" : {
"settings": {
"include" : ["mailclient.ui.SettingsDialog"]
}
}
}
...

45. On Demand Data and UI
• Thousands of mails
in the inbox
• Only load visible
data
• Only render visible
rows of the table

46. Widget Creation
• DOM operations are expensive
• Creation Widgets is expensive
• Reuse Widgets
• Share Widgets
• Pool Widgets
• Increases Complexity!

47. Reuse Widgets
pool and reuse share mail preview
mail folder among tabs

48. Clean Code

49. Decouple UI
Components

50. Decouple UI
Components
Message Bus

51. Code Should be
Executable in Isolation
• Without rebuilding the application
• Without restarting the application
• Without a server

52. Unit Tests

53. Mini Applications

54. Summary
• Good Abstractions
• Styling
• Internationalization
• Performance
• Clean Code

55. colorstrip.gifT
THE NEW ERA OF WEB DEVELOPMENT
Thank you.
Fabian Jakobs
@fjakobs
<fabian.jakobs@1und1.de>
http://qooxdoo.org

56. 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/