0
Trimming The Cruft:
                Getting the most of your bits




    Peter Higgins (dante)
  Dojo Toolkit Project Lea...
Me.
What is Dojo?

• A JavaScript Toolkit
  - Light-weight Base.
  - Use at will framework.
• 100 - point Open Source
  - Clea...
The History of Dojo
      (cli notes version)
Alex Russell
“netwindows”
A Foundation.
Unifying a DHTML landscape
A Team.
Maintaining a vision.
Dojo, Brie y.
Plain JavaScript

 • JavaScript should have:
    - dojo.indexOf / forEach / map / lter
    - hitch / partial
    - declare...
Package / Module Loading

• dojo.require(“some.module”)
• dojo.addOnLoad(function(){ ... })
• dojo.registerModulePath(“my”...
Events, Ajax, FX, DOM

• dojo.connect(node, “onclick”, function(){ });
• dojo.connect(obj, “custom”, obj, “sync”);
• dojo....
CSS Selectors

• dojo.query(“ul > li”).addClass(“listy”);
• dojo.query(“a”).onclick(function(){ });
• dojo.query(“tr td + ...
Flexible Dynamic Language

 // confuse people
 (function(foo){
      var f = foo, fid = f.byId;
      f.require(“my.code”)...
Optimization Fundamentals
Separate Assets.
Scripts are Blocking,
   Synchronous.
<head>
  <script src=”dojo.js”></script>
  <script>/* code in dojo.js ready */</script>
</head>
<body><p>Lots of DOM</p></...
Multiple Inline Scripts
Know request limits.
gzip “required”.

 • Incredible, exponential savings.
    - Bene ts from patterns
 • 9 / 10 Major Browsers Support
CSS is “async”

 • No reliable “onload”
 • Put requests rst
 • Limit @import
De ne “ready”

• DOMContentLoaded & window.onload
• CSS, JS and Image resources
  - required or deferred?
  - preloaded an...
Content Distribution (CDN)
CDN Bene ts

• Shared Resources
  - Cached, common, static
• Public vs Private
• Headers / Cookies
• Beating request limits
Client Considerations
       (on the wire cost)
JSON vs XML
JavaScript is Fast.
The DOM isn’t.
DOM & CSS

• Size
• Complexity
• Manipulation
  - Avoiding loops
  - working outside the DOM
• Server vs Client
Events

• Delegation
   - Normalization
     - Bubbles, Cancels
• Invention
   - mouseenter/mouseleave
   - onDijitClick
Code Considerations
     (also on the client)
Modularity. Inheritance.
More on Packages


 // the package:
 dojo.provide(“my.Module”); // my/Module.js
 dojo.require(“my._ClassBase”); // my/_Cla...
Mix-in Patterns
Arguments, etc.


 // function signatures with defaults
 my.func = function(args){
    var opts = dojo.mixin({
        pro...
Ambiguous Constructors


 dojo.declare(“some.Thing”, null, {
     opt:”a-default”,
     constructor: function(args){
     ...
DRY


 my.turnIt = function(dir){
    // if 1, go next. -1, go left.
 }

 var next = dojo.partial(my.turnIt, 1),
     prev...
Dual Service Functions

 my.func = function(node, args){
   node = dojo.byId(node); // Sting|DomNode
   /* do something to...
Mini cation
To consider:

 • YUI / ShrinkSafe / jsmin / packer
   - variables, whitespace
   - preserve public APIs
 • Micro vs. Prema...
Dojo Build System
All-in-One

• Works transparently with Package System
• Group modules into layers
• Concatenate CSS into layers
• Layer & ...
Special Builds

 • Stubs (6k dojo.js)
 • Base++ (dojo.js with modules)
 • Cross-Domain
 • WebKit Mobile
 • plugd
 • Maven
Build Options

• #ifDef
   - WebKit Mobile
• stripConsole
• internStrings
Questions?
Me, Again.
    dante@dojotoolkit.org
 http://twitter.com/phiggins
http://higginsforpresident.net/
Trimming The Cruft
Upcoming SlideShare
Loading in...5
×

Trimming The Cruft

1,313

Published on

A Browser performance optimization talk which includes bits on Dojo's automated steps to alleviate much pain.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,313
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
37
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Trimming The Cruft"

  1. 1. Trimming The Cruft: Getting the most of your bits Peter Higgins (dante) Dojo Toolkit Project Lead DevNexus: March 10 + 11, 2009
  2. 2. Me.
  3. 3. What is Dojo? • A JavaScript Toolkit - Light-weight Base. - Use at will framework. • 100 - point Open Source - Clean IP - Open Cycle • Developer Tools
  4. 4. The History of Dojo (cli notes version)
  5. 5. Alex Russell “netwindows”
  6. 6. A Foundation.
  7. 7. Unifying a DHTML landscape
  8. 8. A Team.
  9. 9. Maintaining a vision.
  10. 10. Dojo, Brie y.
  11. 11. Plain JavaScript • JavaScript should have: - dojo.indexOf / forEach / map / lter - hitch / partial - declare / delegate / mixin / extend
  12. 12. Package / Module Loading • dojo.require(“some.module”) • dojo.addOnLoad(function(){ ... }) • dojo.registerModulePath(“my”, “../../my/”) • dojo.require(“my.code”) • dojo.provide(“my.code”)
  13. 13. Events, Ajax, FX, DOM • dojo.connect(node, “onclick”, function(){ }); • dojo.connect(obj, “custom”, obj, “sync”); • dojo.xhrPost({ form:”login”, load:function(dat){}}); • dojo.xhrGet({ url:”foo.txt”, load:function(){ } }); • dojo.anim(node, { width:200 }); • dojo.fadeIn({ node: node }).play(); • dojo.style(n, “height”, “50px”); • dojo.place(“<p>Hi</p>”, dojo.body());
  14. 14. CSS Selectors • dojo.query(“ul > li”).addClass(“listy”); • dojo.query(“a”).onclick(function(){ }); • dojo.query(“tr td + td”).forEach(function(n){ }); • dojo.query(“.someClass”).map(function(n){ .. }); • dojo.NodeList.prototype / dojo.extend
  15. 15. Flexible Dynamic Language // confuse people (function(foo){ var f = foo, fid = f.byId; f.require(“my.code”); f.addOnLoad(function(){ new my.Thinger({ node: fid(‘bar’) }); }); })(dojo); // bling (function(d, $){ $(“.class”).onclick(function(){ }); })(dojo, dojo.query);
  16. 16. Optimization Fundamentals
  17. 17. Separate Assets.
  18. 18. Scripts are Blocking, Synchronous.
  19. 19. <head> <script src=”dojo.js”></script> <script>/* code in dojo.js ready */</script> </head> <body><p>Lots of DOM</p></body> vs: <body> <p>Lots of DOM</p> <script src=”dojo.js”></script> <script>/* code in dojo.js ready */</script> </body>
  20. 20. Multiple Inline Scripts
  21. 21. Know request limits.
  22. 22. gzip “required”. • Incredible, exponential savings. - Bene ts from patterns • 9 / 10 Major Browsers Support
  23. 23. CSS is “async” • No reliable “onload” • Put requests rst • Limit @import
  24. 24. De ne “ready” • DOMContentLoaded & window.onload • CSS, JS and Image resources - required or deferred? - preloaded and cached.
  25. 25. Content Distribution (CDN)
  26. 26. CDN Bene ts • Shared Resources - Cached, common, static • Public vs Private • Headers / Cookies • Beating request limits
  27. 27. Client Considerations (on the wire cost)
  28. 28. JSON vs XML
  29. 29. JavaScript is Fast.
  30. 30. The DOM isn’t.
  31. 31. DOM & CSS • Size • Complexity • Manipulation - Avoiding loops - working outside the DOM • Server vs Client
  32. 32. Events • Delegation - Normalization - Bubbles, Cancels • Invention - mouseenter/mouseleave - onDijitClick
  33. 33. Code Considerations (also on the client)
  34. 34. Modularity. Inheritance.
  35. 35. More on Packages // the package: dojo.provide(“my.Module”); // my/Module.js dojo.require(“my._ClassBase”); // my/_ClassBase.js dojo.declare(“my.Module”, my._ClassBase, {}); // the code: dojo.require(“my.Module”); dojo.addOnLoad(function(){ new my.Module(); });
  36. 36. Mix-in Patterns
  37. 37. Arguments, etc. // function signatures with defaults my.func = function(args){ var opts = dojo.mixin({ prop:”foo” }, args||{}); console.log(opts.prop); } my.func(); // “foo” my.func({ prop:”bar” }); // “bar”
  38. 38. Ambiguous Constructors dojo.declare(“some.Thing”, null, { opt:”a-default”, constructor: function(args){ dojo.mixin(this, args); } }); var a = new some.Thing(), b = new some.Thing({ opt:”x” }); a.opt == “a-default” b.opt == “x”
  39. 39. DRY my.turnIt = function(dir){ // if 1, go next. -1, go left. } var next = dojo.partial(my.turnIt, 1), prev = dojo.partial(my.turnIt, -1); // later dojo.query(“.nextbutton”).onclick(next);
  40. 40. Dual Service Functions my.func = function(node, args){ node = dojo.byId(node); // Sting|DomNode /* do something to node */ } dojo.extend(dojo.NodeList, { func: dojo.NodeList._mapAsForEach(“func”, my) }); // run one, run all my.func(“someId”, { opts:true }); dojo.query(“.someNodes”).func({ opts:true })
  41. 41. Mini cation
  42. 42. To consider: • YUI / ShrinkSafe / jsmin / packer - variables, whitespace - preserve public APIs • Micro vs. Premature optimizations - For GZIP - For ShrinkSafe
  43. 43. Dojo Build System
  44. 44. All-in-One • Works transparently with Package System • Group modules into layers • Concatenate CSS into layers • Layer & File mini cation - Comments, Whitespace, newlines ...
  45. 45. Special Builds • Stubs (6k dojo.js) • Base++ (dojo.js with modules) • Cross-Domain • WebKit Mobile • plugd • Maven
  46. 46. Build Options • #ifDef - WebKit Mobile • stripConsole • internStrings
  47. 47. Questions?
  48. 48. Me, Again. dante@dojotoolkit.org http://twitter.com/phiggins http://higginsforpresident.net/
  1. A particular slide catching your eye?

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

×