• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Trimming The Cruft
 

Trimming The Cruft

on

  • 2,479 views

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

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

Statistics

Views

Total Views
2,479
Views on SlideShare
2,475
Embed Views
4

Actions

Likes
0
Downloads
36
Comments
0

1 Embed 4

http://www.slideshare.net 4

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Trimming The Cruft Trimming The Cruft Presentation Transcript

    • 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/