Your SlideShare is downloading. ×
0
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 Scale
JavaScript Applications
JavaScript Application
JavaScript Application
JavaScript Application
JavaScript Application
JavaScript Application

•   Single Page Application

•   Client Logic in JavaScript

•   Client-Server
    Communication w...
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...
Everybody puts a layer
       on top
• GWT covers JavaScript with Java
• Cappuchino uses Objective-J
• Adobe invented Acti...
qooxdoo OOP
qx.Class.define("demo.Person",
{
  extend : qx.core.Object,

  construct : function(firstName, lastName)
  {
	...
Tooling
Tooling

  API Doc                    Unit Testing
                  Linker
Auto Completion            Code Coverage
     ...
Tooling dilemma
• Different OOP syntax makes generic
  tooling hard
• Tools often depend in certain Framework
  features

...
Find the Right Level of
      Abstraction
Desktop Like Web
 Applications Need
Desktop Abstractions

• Widgets               • DOM Nodes
• Layout Manager   vs   • CS...
Abstractions
                            Application
  Application Components

      Custom Widgets


       Base Widgets ...
Desktop Style
       Development Model

// Create a button
var button = new qx.ui.form.Button("First Button", "demo/browse...
Leaky Abstractions
• Emulated behavior may be slower
 • e.g. Canvas wrapper for IE
• For advanced tasks its essential to k...
Styling
Styling
No OS clone!   No default theme   Everything Custom!
Not Everyone
Speaks German
i18n
i18n
i18n
i18n in qooxdoo
this button = var qx.ui.form.Button(this.tr("Hello World!"));




      • Standards
       • gettext
     ...
Performance
Our Bottlenecks

• Startup time
• Widget creation
• Table scroll performance
Startup Time
  The 3Cs + O


  • Combine
  • Compress
  • Cache
  • On demand
Combine

• reduce number of requests
• combine                  JS        JS   PNG     PNG
 • JavaScript files
 • CSS      ...
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
   • Code
qx.io.PartLoader.require("settings", function()
{
  mailclient.ui.SettingsDialog.getInstance().op...
On Demand Data and UI

• Thousands of mails
  in the inbox
• Only load visible
  data
• Only render visible
  rows of the ...
Widget Creation
• DOM operations are expensive
• Creation Widgets is expensive
• Reuse Widgets
 • Share Widgets
 • Pool Wi...
Reuse Widgets



pool and reuse               share mail preview
  mail folder                   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
• Withou...
Unit Tests
Mini Applications
Summary

• Good Abstractions
• Styling
• Internationalization
• Performance
• Clean Code
colorstrip.gifT
THE NEW ERA OF WEB DEVELOPMENT




Thank you.

                                Fabian Jakobs
             ...
Fotos
•   http://www.flickr.com/photos/martin_uj/2505238011/

•   http://www.flickr.com/photos/born-clothing/3764261653/

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

Masterin Large Scale Java Script Applications

5,755

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

Published in: Technology, News & Politics
0 Comments
9 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,755
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
106
Comments
0
Likes
9
Embeds 0
No embeds

No notes for slide

Transcript of "Masterin Large Scale Java Script Applications"

  1. 1. Mastering Large Scale JavaScript Applications Fabian Jakobs
  2. 2. About • Senior JavaScript Developer at 1&1 • core developer since 2006 @fjakobs
  3. 3. Man With Two Hats
  4. 4. Framework Application
  5. 5. Large Scale JavaScript Applications
  6. 6. JavaScript Application
  7. 7. JavaScript Application
  8. 8. JavaScript Application
  9. 9. JavaScript Application
  10. 10. JavaScript Application • Single Page Application • Client Logic in JavaScript • Client-Server Communication with AJAX calls
  11. 11. Large Scale • Complexity and Size of JavaScript code • ~ 150,000 LOC • ~ 1000 Classes
  12. 12. • Rich Web Mail Application • Pure JavaScript Client • Backend Communication with Ajax calls • Based on qooxdoo
  13. 13. • Client-side JavaScript Framework • Cross-browser web applications • Open Source
  14. 14. JavaScript isn‘t made for this
  15. 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. 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. 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. 18. Tooling
  19. 19. Tooling API Doc Unit Testing Linker Auto Completion Code Coverage Lint IDE Support
  20. 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. 21. Find the Right Level of Abstraction
  22. 22. Desktop Like Web Applications Need Desktop Abstractions • Widgets • DOM Nodes • Layout Manager vs • CSS • Themes • Browser Bugs
  23. 23. Abstractions Application Application Components Custom Widgets Base Widgets Framework UI Core (Rendering Engine) BOM (Cross Browser Code) Core (JavaScript OOP)
  24. 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. 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. 26. Styling
  27. 27. Styling No OS clone! No default theme Everything Custom!
  28. 28. Not Everyone Speaks German
  29. 29. i18n
  30. 30. i18n
  31. 31. i18n
  32. 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. 33. Performance
  34. 34. Our Bottlenecks • Startup time • Widget creation • Table scroll performance
  35. 35. Startup Time The 3Cs + O • Combine • Compress • Cache • On demand
  36. 36. Combine • reduce number of requests • combine JS JS PNG PNG • JavaScript files • CSS JS PNG • Images
  37. 37. Compress • optipng et el for images • compress JavaScript • serve with gzip
  38. 38. Compress JavaScript
  39. 39. Cache • Serve static files with „cache forever“ • Increase version number if content changes • Use Image servers
  40. 40. On Demand • Defer operations • Load Code on demand • Load Data on demand • Render UI on demand
  41. 41. On Demand Code • The initial view does not need • Editor • Settings • Address book • ...
  42. 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. 43. On Demand Data and UI • Thousands of mails in the inbox • Only load visible data • Only render visible rows of the table
  44. 44. Widget Creation • DOM operations are expensive • Creation Widgets is expensive • Reuse Widgets • Share Widgets • Pool Widgets • Increases Complexity!
  45. 45. Reuse Widgets pool and reuse share mail preview mail folder among tabs
  46. 46. Clean Code
  47. 47. Decouple UI Components
  48. 48. Decouple UI Components Message Bus
  49. 49. Code Should be Executable in Isolation • Without rebuilding the application • Without restarting the application • Without a server
  50. 50. Unit Tests
  51. 51. Mini Applications
  52. 52. Summary • Good Abstractions • Styling • Internationalization • Performance • Clean Code
  53. 53. colorstrip.gifT THE NEW ERA OF WEB DEVELOPMENT Thank you. Fabian Jakobs @fjakobs <fabian.jakobs@1und1.de> http://qooxdoo.org
  54. 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/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×