Trimming The Cruft

Trimming The Cruft: Getting the most of your bits Peter Higgins (dante) Dojo Toolkit Project Lead DevNexus: March 10 + 11, 2009

Me.

What is Dojo? • A JavaScript Toolkit - Light-weight Base. - Use at will framework. • 100 - point Open Source - Clean IP - Open Cycle • Developer Tools

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 / delegate / mixin / extend

Package / Module Loading • dojo.require(“some.module”) • dojo.addOnLoad(function(){ ... }) • dojo.registerModulePath(“my”, “../../my/”) • dojo.require(“my.code”) • dojo.provide(“my.code”)

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());

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

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);

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></body> vs: <body> <p>Lots of DOM</p> <script src=”dojo.js”></script> <script>/* code in dojo.js ready */</script> </body>

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

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/_ClassBase.js dojo.declare(“my.Module”, my._ClassBase, {}); // the code: dojo.require(“my.Module”); dojo.addOnLoad(function(){ new my.Module(); });

Mix-in Patterns

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”

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”

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);

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 })

Mini cation

To consider: • YUI / ShrinkSafe / jsmin / packer - variables, whitespace - preserve public APIs • Micro vs. Premature optimizations - For GZIP - For ShrinkSafe

Dojo Build System

All-in-One • Works transparently with Package System • Group modules into layers • Concatenate CSS into layers • Layer & File mini cation - Comments, Whitespace, newlines ...

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

0 comments

Notes on slide 1

Favorites, Groups & Events