SlideShare a Scribd company logo
1 of 49
Download to read offline
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/

More Related Content

What's hot

Tipo virus espia con esto aprenderan a espiar a personas etc jeropas de mrd :v
Tipo virus espia con esto aprenderan a espiar a personas etc jeropas de mrd :v Tipo virus espia con esto aprenderan a espiar a personas etc jeropas de mrd :v
Tipo virus espia con esto aprenderan a espiar a personas etc jeropas de mrd :v
Arian Gutierrez
 
연구자 및 교육자를 위한 계산 및 분석 플랫폼 설계 - PyCon KR 2015
연구자 및 교육자를 위한 계산 및 분석 플랫폼 설계 - PyCon KR 2015연구자 및 교육자를 위한 계산 및 분석 플랫폼 설계 - PyCon KR 2015
연구자 및 교육자를 위한 계산 및 분석 플랫폼 설계 - PyCon KR 2015
Jeongkyu Shin
 

What's hot (20)

Tipo virus espia con esto aprenderan a espiar a personas etc jeropas de mrd :v
Tipo virus espia con esto aprenderan a espiar a personas etc jeropas de mrd :v Tipo virus espia con esto aprenderan a espiar a personas etc jeropas de mrd :v
Tipo virus espia con esto aprenderan a espiar a personas etc jeropas de mrd :v
 
연구자 및 교육자를 위한 계산 및 분석 플랫폼 설계 - PyCon KR 2015
연구자 및 교육자를 위한 계산 및 분석 플랫폼 설계 - PyCon KR 2015연구자 및 교육자를 위한 계산 및 분석 플랫폼 설계 - PyCon KR 2015
연구자 및 교육자를 위한 계산 및 분석 플랫폼 설계 - PyCon KR 2015
 
Security Challenges in Node.js
Security Challenges in Node.jsSecurity Challenges in Node.js
Security Challenges in Node.js
 
mongodb-introduction
mongodb-introductionmongodb-introduction
mongodb-introduction
 
Couchdb w Ruby'm
Couchdb w Ruby'mCouchdb w Ruby'm
Couchdb w Ruby'm
 
コミュニケーションとしてのコード
コミュニケーションとしてのコードコミュニケーションとしてのコード
コミュニケーションとしてのコード
 
7주 JavaScript 실습
7주 JavaScript 실습7주 JavaScript 실습
7주 JavaScript 실습
 
Paris js extensions
Paris js extensionsParis js extensions
Paris js extensions
 
Javascript is your (Auto)mate
Javascript is your (Auto)mateJavascript is your (Auto)mate
Javascript is your (Auto)mate
 
[Coscup 2012] JavascriptMVC
[Coscup 2012] JavascriptMVC[Coscup 2012] JavascriptMVC
[Coscup 2012] JavascriptMVC
 
Node.js - A Quick Tour II
Node.js - A Quick Tour IINode.js - A Quick Tour II
Node.js - A Quick Tour II
 
MongoDB + node.js で作るソーシャルゲーム
MongoDB + node.js で作るソーシャルゲームMongoDB + node.js で作るソーシャルゲーム
MongoDB + node.js で作るソーシャルゲーム
 
Couchdb
CouchdbCouchdb
Couchdb
 
Ember background basics
Ember background basicsEmber background basics
Ember background basics
 
Andreas Roth - GraphQL erfolgreich im Backend einsetzen
Andreas Roth - GraphQL erfolgreich im Backend einsetzenAndreas Roth - GraphQL erfolgreich im Backend einsetzen
Andreas Roth - GraphQL erfolgreich im Backend einsetzen
 
NoSQL Injections in Node.js - The case of MongoDB
NoSQL Injections in Node.js - The case of MongoDBNoSQL Injections in Node.js - The case of MongoDB
NoSQL Injections in Node.js - The case of MongoDB
 
Indexing
IndexingIndexing
Indexing
 
What is nodejs
What is nodejsWhat is nodejs
What is nodejs
 
PuppetCamp SEA 1 - Version Control with Puppet
PuppetCamp SEA 1 - Version Control with PuppetPuppetCamp SEA 1 - Version Control with Puppet
PuppetCamp SEA 1 - Version Control with Puppet
 
Understanding the Node.js Platform
Understanding the Node.js PlatformUnderstanding the Node.js Platform
Understanding the Node.js Platform
 

Similar to Trimming The Cruft

JavaScript Growing Up
JavaScript Growing UpJavaScript Growing Up
JavaScript Growing Up
David Padbury
 

Similar to Trimming The Cruft (20)

dojo.Patterns
dojo.Patternsdojo.Patterns
dojo.Patterns
 
The Dojo Build System
The Dojo Build SystemThe Dojo Build System
The Dojo Build System
 
Txjs
TxjsTxjs
Txjs
 
LISA Qooxdoo Tutorial Handouts
LISA Qooxdoo Tutorial HandoutsLISA Qooxdoo Tutorial Handouts
LISA Qooxdoo Tutorial Handouts
 
How DRY impacts JavaScript performance // Faster JavaScript execution for the...
How DRY impacts JavaScript performance // Faster JavaScript execution for the...How DRY impacts JavaScript performance // Faster JavaScript execution for the...
How DRY impacts JavaScript performance // Faster JavaScript execution for the...
 
Bubbles & Trees with jQuery
Bubbles & Trees with jQueryBubbles & Trees with jQuery
Bubbles & Trees with jQuery
 
dojo.things()
dojo.things()dojo.things()
dojo.things()
 
AngularJS Architecture
AngularJS ArchitectureAngularJS Architecture
AngularJS Architecture
 
AngularJS Internal
AngularJS InternalAngularJS Internal
AngularJS Internal
 
Zero To Dojo
Zero To DojoZero To Dojo
Zero To Dojo
 
Using Dojo
Using DojoUsing Dojo
Using Dojo
 
Web Crawling with NodeJS
Web Crawling with NodeJSWeb Crawling with NodeJS
Web Crawling with NodeJS
 
JavaScript Growing Up
JavaScript Growing UpJavaScript Growing Up
JavaScript Growing Up
 
soft-shake.ch - Hands on Node.js
soft-shake.ch - Hands on Node.jssoft-shake.ch - Hands on Node.js
soft-shake.ch - Hands on Node.js
 
Nodejs - A-quick-tour-v3
Nodejs - A-quick-tour-v3Nodejs - A-quick-tour-v3
Nodejs - A-quick-tour-v3
 
DOM Scripting Toolkit - jQuery
DOM Scripting Toolkit - jQueryDOM Scripting Toolkit - jQuery
DOM Scripting Toolkit - jQuery
 
Hacking with ruby2ruby
Hacking with ruby2rubyHacking with ruby2ruby
Hacking with ruby2ruby
 
EWD 3 Training Course Part 22: Traversing Documents using DocumentNode Objects
EWD 3 Training Course Part 22: Traversing Documents using DocumentNode ObjectsEWD 3 Training Course Part 22: Traversing Documents using DocumentNode Objects
EWD 3 Training Course Part 22: Traversing Documents using DocumentNode Objects
 
YUI 3
YUI 3YUI 3
YUI 3
 
jQuery Internals + Cool Stuff
jQuery Internals + Cool StuffjQuery Internals + Cool Stuff
jQuery Internals + Cool Stuff
 

Recently uploaded

Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
Joaquim Jorge
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 

Recently uploaded (20)

Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
HTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation StrategiesHTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation Strategies
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 

Trimming The Cruft

  • 1. Trimming The Cruft: Getting the most of your bits Peter Higgins (dante) Dojo Toolkit Project Lead DevNexus: March 10 + 11, 2009
  • 2. Me.
  • 3.
  • 4. What is Dojo? • A JavaScript Toolkit - Light-weight Base. - Use at will framework. • 100 - point Open Source - Clean IP - Open Cycle • Developer Tools
  • 5. The History of Dojo (cli notes version)
  • 8. Unifying a DHTML landscape
  • 12. Plain JavaScript • JavaScript should have: - dojo.indexOf / forEach / map / lter - hitch / partial - declare / delegate / mixin / extend
  • 13. Package / Module Loading • dojo.require(“some.module”) • dojo.addOnLoad(function(){ ... }) • dojo.registerModulePath(“my”, “../../my/”) • dojo.require(“my.code”) • dojo.provide(“my.code”)
  • 14. 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());
  • 15. 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
  • 16. 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);
  • 19. Scripts are Blocking, Synchronous.
  • 20. <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>
  • 23. gzip “required”. • Incredible, exponential savings. - Bene ts from patterns • 9 / 10 Major Browsers Support
  • 24. CSS is “async” • No reliable “onload” • Put requests rst • Limit @import
  • 25. De ne “ready” • DOMContentLoaded & window.onload • CSS, JS and Image resources - required or deferred? - preloaded and cached.
  • 27. CDN Bene ts • Shared Resources - Cached, common, static • Public vs Private • Headers / Cookies • Beating request limits
  • 28. Client Considerations (on the wire cost)
  • 32. DOM & CSS • Size • Complexity • Manipulation - Avoiding loops - working outside the DOM • Server vs Client
  • 33. Events • Delegation - Normalization - Bubbles, Cancels • Invention - mouseenter/mouseleave - onDijitClick
  • 34. Code Considerations (also on the client)
  • 36. 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(); });
  • 38. 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”
  • 39. 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”
  • 40. 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);
  • 41. 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 })
  • 43. To consider: • YUI / ShrinkSafe / jsmin / packer - variables, whitespace - preserve public APIs • Micro vs. Premature optimizations - For GZIP - For ShrinkSafe
  • 45. All-in-One • Works transparently with Package System • Group modules into layers • Concatenate CSS into layers • Layer & File mini cation - Comments, Whitespace, newlines ...
  • 46. Special Builds • Stubs (6k dojo.js) • Base++ (dojo.js with modules) • Cross-Domain • WebKit Mobile • plugd • Maven
  • 47. Build Options • #ifDef - WebKit Mobile • stripConsole • internStrings
  • 49. Me, Again. dante@dojotoolkit.org http://twitter.com/phiggins http://higginsforpresident.net/