Masterin Large Scale Java Script Applications
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Masterin Large Scale Java Script Applications

  • 8,938 views
Uploaded on

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

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.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
8,938
On Slideshare
8,666
From Embeds
272
Number of Embeds
12

Actions

Shares
Downloads
105
Comments
0
Likes
8

Embeds 272

http://news.qooxdoo.org 215
http://www.slideshare.net 34
http://swik.net 6
http://feeds2.feedburner.com 6
http://planet.blog.tennessee.1und1.de 3
http://www.mefeedia.com 2
http://static.slidesharecdn.com 1
http://feeds.feedburner.com 1
http://twitter.com 1
http://news.new.qooxdoo.org 1
http://planet.blog.tennessee.schlund.de 1
https://www.linkedin.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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
  • 12. • Rich Web Mail Application • Pure JavaScript Client • Backend Communication with Ajax calls • Based on qooxdoo
  • 13. • Client-side JavaScript Framework • Cross-browser web applications • Open Source
  • 14. JavaScript isn‘t made for this
  • 15. 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
  • 16. 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
  • 17. 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; } } });
  • 18. Tooling
  • 19. Tooling API Doc Unit Testing Linker Auto Completion Code Coverage Lint IDE Support
  • 20. 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
  • 21. Find the Right Level of Abstraction
  • 22. Desktop Like Web Applications Need Desktop Abstractions • Widgets • DOM Nodes • Layout Manager vs • CSS • Themes • Browser Bugs
  • 23. Abstractions Application Application Components Custom Widgets Base Widgets Framework UI Core (Rendering Engine) BOM (Cross Browser Code) Core (JavaScript OOP)
  • 24. 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!"); });
  • 25. 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
  • 26. Styling
  • 27. Styling No OS clone! No default theme Everything Custom!
  • 28. Not Everyone Speaks German
  • 29. i18n
  • 30. i18n
  • 31. i18n
  • 32. i18n in qooxdoo this button = var qx.ui.form.Button(this.tr("Hello World!")); • Standards • gettext • CLDR • good external tooling • known by professional translators
  • 33. Performance
  • 34. Our Bottlenecks • Startup time • Widget creation • Table scroll performance
  • 35. Startup Time The 3Cs + O • Combine • Compress • Cache • On demand
  • 36. Combine • reduce number of requests • combine JS JS PNG PNG • JavaScript files • CSS JS PNG • Images
  • 37. Compress • optipng et el for images • compress JavaScript • serve with gzip
  • 38. Compress JavaScript
  • 39. Cache • Serve static files with „cache forever“ • Increase version number if content changes • Use Image servers
  • 40. On Demand • Defer operations • Load Code on demand • Load Data on demand • Render UI on demand
  • 41. On Demand Code • The initial view does not need • Editor • Settings • Address book • ...
  • 42. On Demand Code • Code qx.io.PartLoader.require("settings", function() { mailclient.ui.SettingsDialog.getInstance().open(); }, this); • Content ... "packages" : { "parts" : { "settings": { "include" : ["mailclient.ui.SettingsDialog"] } } } ...
  • 43. On Demand Data and UI • Thousands of mails in the inbox • Only load visible data • Only render visible rows of the table
  • 44. Widget Creation • DOM operations are expensive • Creation Widgets is expensive • Reuse Widgets • Share Widgets • Pool Widgets • Increases Complexity!
  • 45. Reuse Widgets pool and reuse share mail preview mail folder among tabs
  • 46. Clean Code
  • 47. Decouple UI Components
  • 48. Decouple UI Components Message Bus
  • 49. Code Should be Executable in Isolation • Without rebuilding the application • Without restarting the application • Without a server
  • 50. Unit Tests
  • 51. Mini Applications
  • 52. Summary • Good Abstractions • Styling • Internationalization • Performance • Clean Code
  • 53. colorstrip.gifT THE NEW ERA OF WEB DEVELOPMENT Thank you. Fabian Jakobs @fjakobs <fabian.jakobs@1und1.de> http://qooxdoo.org
  • 54. 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/