Fast, modular code with jQuery and RequireJS
James Burke
Mozilla Messaging
[Link]
twitter: jrburke
[Link]
Sunday, April 25, 2010
Who are you?
• Party in the front!
• Server free
• Historical AOL: Pictures, AIM
Express, AIMPages, WebMail,
myAOL, AIM Chat
• Dojo Core lead: loader, build
system
• Mozilla Messaging: Raindrop
• Front end code assembly,
optimization
[Link]
Sunday, April 25, 2010
Script Tag Vomit
<script src="../js/[Link]" type="text/javascript"></script>
<script src="../js/[Link]" type="text/javascript"></script>
<script src="../js/[Link]" type="text/javascript"></script>
<script src="../js/[Link]" type="text/javascript"></script>
<script src="../js/[Link]" type="text/javascript"></script>
<script src="../js/[Link]" type="text/javascript"></script>
<script src="../js/[Link]" type="text/javascript"></
script>
<script src="../js/[Link]" type="text/javascript"></script>
<script src="../js/[Link]" type="text/javascript"></script>
<script src="../js/[Link]" type="text/javascript"></script>
<script src="../js/[Link]" type="text/javascript"></script>
<script src="../js/[Link]" type="text/
javascript"></script>
<script src="../js/[Link]" type="text/javascript"></script>
<script src="../js/[Link]" type="text/javascript"></
script>
<script src="../js/[Link]" type="text/javascript"></
script>
<script src="/js/[Link]" type="text/javascript"></script>
<script src="../js/[Link]" type="text/javascript"></script>
<script src="../Projects/_Content/Headlines/Include/
[Link]" type="text/javascript"></script>
<script src="/Projects/_Content/Include/CategoryPage/
[Link]" type="text/javascript"></script>
<script src="/js/[Link]" type="text/javascript"></script>
<script src="/Projects/Foresee/[Link]" type="text/
javascript"></script>
[Link]
Sunday, April 25, 2010
Script Tag Vomit
• Slow
> many HTTP requests
> blocking render
• Manual Dependencies
• Lacks Encapsulation
[Link]
Sunday, April 25, 2010
RequireJS
• async script tag loader
• call it any time
• encapsulation
• trace nested dependencies
• optimization tool
> JS and CSS
[Link]
Sunday, April 25, 2010
Better Vomit
<script src="../js/[Link]"></script>
<script>
require([
“SwfObject”,
“JsLib”,
“Utils”
“Validation”,
“Personal”,
“SpecialFeatures”,
“Basket”,
“Catalog”,
“Marketing”,
“Search”,
“GlobalSpecialUIInit”,
...etc...
]);
</script> • Async
• Even better if each
specifies own
dependencies
[Link]
Sunday, April 25, 2010
Best
<script src="../js/[Link]"></script>
<script>require([“app”]);</script>
[Link]
Sunday, April 25, 2010
Delicious jQuery Sample [Link]
[Link]
Sunday, April 25, 2010
Cash Money FAST
• On-the-fly loading
• Reduce HTTP Requests
-> CSS and JS
• Reduce file size via Closure
Compiler integration
[Link]
Sunday, April 25, 2010
• For Dev:
../../requirejs/build/[Link] baseUrl=. name=app out=[Link] shallowExclude=[Link]
• For Deployment:
../../requirejs/build/[Link] baseUrl=. name=app out=[Link]
<script src="scripts/[Link]"></script>
<script>
require(["app-built"]);
</script>
[Link]
Warp Speed [Link]
Sunday, April 25, 2010
• CSS Optimization
• @import inlining, url() correction
• comment stripping
../../requirejs/build/[Link] cssIn=[Link] out=[Link]
[Link]
Warp Speed [Link]
Sunday, April 25, 2010
Modules
• Strict encapsulation
• Allows multiple versions on a
page
• Special jQuery+RequireJS file
> [Link]
> domready integration
> jquery as a module
[Link]
Sunday, April 25, 2010
Module Pattern
(function($) {
//Extend jQuery
$.[Link] = function() {};
$(function() {
//execute on
//page load
});
}(jQuery));
[Link]
Sunday, April 25, 2010
RequireJS Pattern
require([“jquery”], function($) {
//Extend jQuery
$.[Link] = function() {};
$(function() {
//execute on
//page load
});
});
[Link]
Sunday, April 25, 2010
require([“jquery”, “cookie”, “[Link] function($, cookie) {
//Extend jQuery
$.[Link] = function() {};
$(function() {
//cookie is a module that uses
//[Link]() to define itself
var state = [Link](“state”);
//lib is a global defined by [Link]
[Link]();
});
});
Dependencies [Link]
Sunday, April 25, 2010
[Link]
---------
[Link](“cookie”, [“nameParser”], function(nameParser) {
return {
get: function () {
//uses nameParser to do something
}
};
});
Modules [Link]
Sunday, April 25, 2010
Nutritional Facts
• 3.7 KB Minified/Gzipped
> Smallest option 2.6 KB
> [Link] 26.9 KB
• i18n/text plugins
• [Link] BAD inside
modules
• Works in Node, Rhino
[Link]
Sunday, April 25, 2010
Compare LABjs
• Different optimizations:
Download, do not execute vs
script combining
• LABjs: preserve script order
• RequireJS: focus on modules,
but allow existing scripts
• RequireJS: universal module
loader, Rhino, Node
• Both are better than script tag
vomit
[Link]
Sunday, April 25, 2010
Compare CommonJS
• Browser is not the primary
concern
• Means inferior approaches to
code loading in browser
• Format tradeoffs, exports, to
me, not as JavaScripty
[Link]
Sunday, April 25, 2010
jQuery++
• Encapsulation, do not need
everything hanging off $
• Multiple versions of jQuery in a
page!
• jQuery UI
• Built-in optimizer
• No special server required!
[Link]
Sunday, April 25, 2010
MoMo is hiring!
• Messaging
• jQuery
• Mozilla Platform: XUL
• Web: HTML/JS/CSS
• Open Messaging for the Open
Web
• We call ourselves MoMo!
• Find out more
[Link]
Sunday, April 25, 2010