Downloaded 110 times
![On Demand Code
• Code
qx.io.PartLoader.require("settings", function()
{
mailclient.ui.SettingsDialog.getInstance().open();
}, this);
• Content
...
"packages" : {
"parts" : {
"settings": {
"include" : ["mailclient.ui.SettingsDialog"]
}
}
}
...](https://image.slidesharecdn.com/masterinlargescalejavascriptapplications-090918083625-phpapp02/85/Masterin-Large-Scale-Java-Script-Applications-44-320.jpg)
![On Demand Code
• Code
qx.io.PartLoader.require("settings", function()
{
mailclient.ui.SettingsDialog.getInstance().open();
}, this);
• Content
...
"packages" : {
"parts" : {
"settings": {
"include" : ["mailclient.ui.SettingsDialog"]
}
}
}
...](https://image.slidesharecdn.com/masterinlargescalejavascriptapplications-090918083625-phpapp02/75/Masterin-Large-Scale-Java-Script-Applications-44-2048.jpg)
Uploaded byFabian Jakobs
Masterin Large Scale Java Script Applications
The document discusses strategies for mastering large-scale JavaScript applications, highlighting the challenges of managing complexity and performance while utilizing frameworks like qooxdoo. Key topics include the importance of good abstractions, tooling for development, and techniques for optimizing startup time and widget creation. Additionally, it emphasizes the need for internationalization and clean code practices in web development.
More Related Content
![[Srijan Wednesday Webinars] Developing Large Scale Applications in AngularJS](https://cdn.slidesharecdn.com/ss_thumbnails/srijanwednesdaywebinars-angularjs-141001063445-phpapp02-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Similar to Masterin Large Scale Java Script Applications
Masterin Large Scale Java Script Applications
- 1. Mastering Large Scale JavaScriptApplications Fabian Jakobs
- 2. About • Senior JavaScript Developer at 1&1 • core developer since 2006 @fjakobs
- 3. Man With TwoHats
- 4. Framework Application
- 5.
- 6.
- 7.
- 8.
- 9.
- 10. JavaScript Application • Single Page Application • Client Logic in JavaScript • Client-Server Communication with AJAX calls
- 11. Large Scale • Complexityand Size of JavaScript code • ~ 150,000 LOC • ~ 1000 Classes
- 13. • Rich WebMail Application • Pure JavaScript Client • Backend Communication with Ajax calls • Based on qooxdoo
- 14. • Client-side JavaScriptFramework • Cross-browser web applications • Open Source
- 15. JavaScript isn‘t madefor 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 alayer 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.
- 20. Tooling APIDoc Unit Testing Linker Auto Completion Code Coverage Lint IDE Support
- 21. Tooling dilemma • DifferentOOP 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 RightLevel 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 • Emulatedbehavior 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.
- 28. Styling No OS clone! No default theme Everything Custom!
- 30.
- 31.
- 32.
- 33.
- 34. i18n in qooxdoo thisbutton = var qx.ui.form.Button(this.tr("Hello World!")); • Standards • gettext • CLDR • good external tooling • known by professional translators
- 35.
- 36. Our Bottlenecks • Startuptime • Widget creation • Table scroll performance
- 37. Startup Time The 3Cs + O • Combine • Compress • Cache • On demand
- 38. Combine • reduce numberof requests • combine JS JS PNG PNG • JavaScript files • CSS JS PNG • Images
- 39. Compress • optipng etel for images • compress JavaScript • serve with gzip
- 40.
- 41. Cache • Serve staticfiles with „cache forever“ • Increase version number if content changes • Use Image servers
- 42. On Demand • Deferoperations • 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 Dataand UI • Thousands of mails in the inbox • Only load visible data • Only render visible rows of the table
- 46. Widget Creation • DOMoperations are expensive • Creation Widgets is expensive • Reuse Widgets • Share Widgets • Pool Widgets • Increases Complexity!
- 47. Reuse Widgets pool andreuse share mail preview mail folder among tabs
- 48.
- 49.
- 50. Decouple UI Components Message Bus
- 51. Code Should be Executablein Isolation • Without rebuilding the application • Without restarting the application • Without a server
- 52.
- 53.
- 54. Summary • Good Abstractions •Styling • Internationalization • Performance • Clean Code
- 55. colorstrip.gifT THE NEW ERAOF 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/