Trimming The Cruft
-
Upload
peter-higgins -
Category
Technology
-
view
1.309 -
download
0
description
Transcript of Trimming The Cruft
![Page 1: Trimming The Cruft](https://reader033.fdocuments.net/reader033/viewer/2022052822/554dd1f3b4c905cc0e8b486d/html5/thumbnails/1.jpg)
Trimming The Cruft:Getting the most of your bits
Peter Higgins (dante)Dojo Toolkit Project Lead
DevNexus: March 10 + 11, 2009
![Page 2: Trimming The Cruft](https://reader033.fdocuments.net/reader033/viewer/2022052822/554dd1f3b4c905cc0e8b486d/html5/thumbnails/2.jpg)
Me.
![Page 3: Trimming The Cruft](https://reader033.fdocuments.net/reader033/viewer/2022052822/554dd1f3b4c905cc0e8b486d/html5/thumbnails/3.jpg)
![Page 4: Trimming The Cruft](https://reader033.fdocuments.net/reader033/viewer/2022052822/554dd1f3b4c905cc0e8b486d/html5/thumbnails/4.jpg)
What is Dojo?
• A JavaScript Toolkit- Light-weight Base. - Use at will framework.
• 100 - point Open Source- Clean IP - Open Cycle
• Developer Tools
![Page 5: Trimming The Cruft](https://reader033.fdocuments.net/reader033/viewer/2022052822/554dd1f3b4c905cc0e8b486d/html5/thumbnails/5.jpg)
The History of Dojo(cli!notes version)
![Page 6: Trimming The Cruft](https://reader033.fdocuments.net/reader033/viewer/2022052822/554dd1f3b4c905cc0e8b486d/html5/thumbnails/6.jpg)
Alex Russell“netwindows”
![Page 7: Trimming The Cruft](https://reader033.fdocuments.net/reader033/viewer/2022052822/554dd1f3b4c905cc0e8b486d/html5/thumbnails/7.jpg)
A Foundation.
![Page 8: Trimming The Cruft](https://reader033.fdocuments.net/reader033/viewer/2022052822/554dd1f3b4c905cc0e8b486d/html5/thumbnails/8.jpg)
Unifying a DHTML landscape
![Page 9: Trimming The Cruft](https://reader033.fdocuments.net/reader033/viewer/2022052822/554dd1f3b4c905cc0e8b486d/html5/thumbnails/9.jpg)
A Team.
![Page 10: Trimming The Cruft](https://reader033.fdocuments.net/reader033/viewer/2022052822/554dd1f3b4c905cc0e8b486d/html5/thumbnails/10.jpg)
Maintaining a vision.
![Page 11: Trimming The Cruft](https://reader033.fdocuments.net/reader033/viewer/2022052822/554dd1f3b4c905cc0e8b486d/html5/thumbnails/11.jpg)
Dojo, Brie"y.
![Page 12: Trimming The Cruft](https://reader033.fdocuments.net/reader033/viewer/2022052822/554dd1f3b4c905cc0e8b486d/html5/thumbnails/12.jpg)
Plain JavaScript
• JavaScript should have:- dojo.indexOf / forEach / map / #lter - hitch / partial - declare / delegate / mixin / extend
![Page 13: Trimming The Cruft](https://reader033.fdocuments.net/reader033/viewer/2022052822/554dd1f3b4c905cc0e8b486d/html5/thumbnails/13.jpg)
Package / Module Loading
• dojo.require(“some.module”)• dojo.addOnLoad(function(){ ... })• dojo.registerModulePath(“my”, “../../my/”)• dojo.require(“my.code”)• dojo.provide(“my.code”)
![Page 14: Trimming The Cruft](https://reader033.fdocuments.net/reader033/viewer/2022052822/554dd1f3b4c905cc0e8b486d/html5/thumbnails/14.jpg)
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());
![Page 15: Trimming The Cruft](https://reader033.fdocuments.net/reader033/viewer/2022052822/554dd1f3b4c905cc0e8b486d/html5/thumbnails/15.jpg)
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
![Page 16: Trimming The Cruft](https://reader033.fdocuments.net/reader033/viewer/2022052822/554dd1f3b4c905cc0e8b486d/html5/thumbnails/16.jpg)
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);
![Page 17: Trimming The Cruft](https://reader033.fdocuments.net/reader033/viewer/2022052822/554dd1f3b4c905cc0e8b486d/html5/thumbnails/17.jpg)
Optimization Fundamentals
![Page 18: Trimming The Cruft](https://reader033.fdocuments.net/reader033/viewer/2022052822/554dd1f3b4c905cc0e8b486d/html5/thumbnails/18.jpg)
Separate Assets.
![Page 19: Trimming The Cruft](https://reader033.fdocuments.net/reader033/viewer/2022052822/554dd1f3b4c905cc0e8b486d/html5/thumbnails/19.jpg)
Scripts are Blocking, Synchronous.
![Page 20: Trimming The Cruft](https://reader033.fdocuments.net/reader033/viewer/2022052822/554dd1f3b4c905cc0e8b486d/html5/thumbnails/20.jpg)
<head> <script src=”dojo.js”></script> <script>/* code in dojo.js ready */</script></head><body><p>Lots of DOM</p></body>
<body> <p>Lots of DOM</p> <script src=”dojo.js”></script> <script>/* code in dojo.js ready */</script></body>
vs:
![Page 21: Trimming The Cruft](https://reader033.fdocuments.net/reader033/viewer/2022052822/554dd1f3b4c905cc0e8b486d/html5/thumbnails/21.jpg)
Multiple Inline Scripts
![Page 22: Trimming The Cruft](https://reader033.fdocuments.net/reader033/viewer/2022052822/554dd1f3b4c905cc0e8b486d/html5/thumbnails/22.jpg)
Know request limits.
![Page 23: Trimming The Cruft](https://reader033.fdocuments.net/reader033/viewer/2022052822/554dd1f3b4c905cc0e8b486d/html5/thumbnails/23.jpg)
gzip “required”.
• Incredible, exponential savings.- Bene#ts from patterns
• 9 / 10 Major Browsers Support
![Page 24: Trimming The Cruft](https://reader033.fdocuments.net/reader033/viewer/2022052822/554dd1f3b4c905cc0e8b486d/html5/thumbnails/24.jpg)
CSS is “async”
• No reliable “onload”• Put requests #rst• Limit @import
![Page 25: Trimming The Cruft](https://reader033.fdocuments.net/reader033/viewer/2022052822/554dd1f3b4c905cc0e8b486d/html5/thumbnails/25.jpg)
De#ne “ready”
• DOMContentLoaded & window.onload• CSS, JS and Image resources
- required or deferred?- preloaded and cached.
![Page 26: Trimming The Cruft](https://reader033.fdocuments.net/reader033/viewer/2022052822/554dd1f3b4c905cc0e8b486d/html5/thumbnails/26.jpg)
Content Distribution (CDN)
![Page 27: Trimming The Cruft](https://reader033.fdocuments.net/reader033/viewer/2022052822/554dd1f3b4c905cc0e8b486d/html5/thumbnails/27.jpg)
CDN Bene#ts
• Shared Resources- Cached, common, static
• Public vs Private• Headers / Cookies• Beating request limits
![Page 28: Trimming The Cruft](https://reader033.fdocuments.net/reader033/viewer/2022052822/554dd1f3b4c905cc0e8b486d/html5/thumbnails/28.jpg)
Client Considerations(on the wire cost)
![Page 29: Trimming The Cruft](https://reader033.fdocuments.net/reader033/viewer/2022052822/554dd1f3b4c905cc0e8b486d/html5/thumbnails/29.jpg)
JSON vs XML
![Page 30: Trimming The Cruft](https://reader033.fdocuments.net/reader033/viewer/2022052822/554dd1f3b4c905cc0e8b486d/html5/thumbnails/30.jpg)
JavaScript is Fast.
![Page 31: Trimming The Cruft](https://reader033.fdocuments.net/reader033/viewer/2022052822/554dd1f3b4c905cc0e8b486d/html5/thumbnails/31.jpg)
The DOM isn’t.
![Page 32: Trimming The Cruft](https://reader033.fdocuments.net/reader033/viewer/2022052822/554dd1f3b4c905cc0e8b486d/html5/thumbnails/32.jpg)
DOM & CSS
• Size• Complexity• Manipulation
- Avoiding loops- working outside the DOM
• Server vs Client
![Page 33: Trimming The Cruft](https://reader033.fdocuments.net/reader033/viewer/2022052822/554dd1f3b4c905cc0e8b486d/html5/thumbnails/33.jpg)
Events
• Delegation- Normalization
- Bubbles, Cancels• Invention
- mouseenter/mouseleave- onDijitClick
![Page 34: Trimming The Cruft](https://reader033.fdocuments.net/reader033/viewer/2022052822/554dd1f3b4c905cc0e8b486d/html5/thumbnails/34.jpg)
Code Considerations(also on the client)
![Page 35: Trimming The Cruft](https://reader033.fdocuments.net/reader033/viewer/2022052822/554dd1f3b4c905cc0e8b486d/html5/thumbnails/35.jpg)
Modularity. Inheritance.
![Page 36: Trimming The Cruft](https://reader033.fdocuments.net/reader033/viewer/2022052822/554dd1f3b4c905cc0e8b486d/html5/thumbnails/36.jpg)
More on Packages
// the package:dojo.provide(“my.Module”); // my/Module.jsdojo.require(“my._ClassBase”); // my/_ClassBase.jsdojo.declare(“my.Module”, my._ClassBase, {});
// the code:dojo.require(“my.Module”);dojo.addOnLoad(function(){ new my.Module();});
![Page 37: Trimming The Cruft](https://reader033.fdocuments.net/reader033/viewer/2022052822/554dd1f3b4c905cc0e8b486d/html5/thumbnails/37.jpg)
Mix-in Patterns
![Page 38: Trimming The Cruft](https://reader033.fdocuments.net/reader033/viewer/2022052822/554dd1f3b4c905cc0e8b486d/html5/thumbnails/38.jpg)
Arguments, etc.
// function signatures with defaultsmy.func = function(args){ var opts = dojo.mixin({ prop:”foo” }, args||{}); console.log(opts.prop);}
my.func(); // “foo”my.func({ prop:”bar” }); // “bar”
![Page 39: Trimming The Cruft](https://reader033.fdocuments.net/reader033/viewer/2022052822/554dd1f3b4c905cc0e8b486d/html5/thumbnails/39.jpg)
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”
![Page 40: Trimming The Cruft](https://reader033.fdocuments.net/reader033/viewer/2022052822/554dd1f3b4c905cc0e8b486d/html5/thumbnails/40.jpg)
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);
// laterdojo.query(“.nextbutton”).onclick(next);
![Page 41: Trimming The Cruft](https://reader033.fdocuments.net/reader033/viewer/2022052822/554dd1f3b4c905cc0e8b486d/html5/thumbnails/41.jpg)
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 allmy.func(“someId”, { opts:true });dojo.query(“.someNodes”).func({ opts:true })
![Page 42: Trimming The Cruft](https://reader033.fdocuments.net/reader033/viewer/2022052822/554dd1f3b4c905cc0e8b486d/html5/thumbnails/42.jpg)
Mini#cation
![Page 43: Trimming The Cruft](https://reader033.fdocuments.net/reader033/viewer/2022052822/554dd1f3b4c905cc0e8b486d/html5/thumbnails/43.jpg)
To consider:
• YUI / ShrinkSafe / jsmin / packer- variables, whitespace- preserve public APIs
• Micro vs. Premature optimizations- For GZIP- For ShrinkSafe
![Page 44: Trimming The Cruft](https://reader033.fdocuments.net/reader033/viewer/2022052822/554dd1f3b4c905cc0e8b486d/html5/thumbnails/44.jpg)
Dojo Build System
![Page 45: Trimming The Cruft](https://reader033.fdocuments.net/reader033/viewer/2022052822/554dd1f3b4c905cc0e8b486d/html5/thumbnails/45.jpg)
All-in-One
• Works transparently with Package System• Group modules into layers• Concatenate CSS into layers• Layer & File mini#cation
- Comments, Whitespace, newlines ...
![Page 46: Trimming The Cruft](https://reader033.fdocuments.net/reader033/viewer/2022052822/554dd1f3b4c905cc0e8b486d/html5/thumbnails/46.jpg)
Special Builds
• Stubs (6k dojo.js)• Base++ (dojo.js with modules)• Cross-Domain• WebKit Mobile• plugd• Maven
![Page 47: Trimming The Cruft](https://reader033.fdocuments.net/reader033/viewer/2022052822/554dd1f3b4c905cc0e8b486d/html5/thumbnails/47.jpg)
Build Options
• #ifDef - WebKit Mobile
• stripConsole• internStrings
![Page 48: Trimming The Cruft](https://reader033.fdocuments.net/reader033/viewer/2022052822/554dd1f3b4c905cc0e8b486d/html5/thumbnails/48.jpg)
Questions?