Fast, modular code with jQuery and RequireJS
James Burke
Mozilla Messaging
http://tagneto.blogspot.com
twitter: jrburke
http://requirejs.org
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
http://www.flickr.com/photos/jpasden/67513019/
Sunday, April 25, 2010
Script Tag Vomit
<script src="../js/JQuery.js" type="text/javascript"></script>
<script src="../js/SwfObject.js" type="text/javascript"></script>
<script src="../js/JsLib.js" type="text/javascript"></script>
<script src="../js/Utils.js" type="text/javascript"></script>
<script src="../js/Validation.js" type="text/javascript"></script>
<script src="../js/Personal.js" type="text/javascript"></script>
<script src="../js/SpecialFeatures.js" type="text/javascript"></
script>
<script src="../js/Basket.js" type="text/javascript"></script>
<script src="../js/Catalog.js" type="text/javascript"></script>
<script src="../js/Marketing.js" type="text/javascript"></script>
<script src="../js/Search.js" type="text/javascript"></script>
<script src="../js/GlobalSpecialUIInit.js" type="text/
javascript"></script>
<script src="../js/BbyMenus.js" type="text/javascript"></script>
<script src="../js/BbyMenuHover.js" type="text/javascript"></
script>
<script src="../js/BbyMenuiframe.js" type="text/javascript"></
script>
<script src="/js/CartObject.js" type="text/javascript"></script>
<script src="../js/jQueryUI.js" type="text/javascript"></script>
<script src="../Projects/_Content/Headlines/Include/
HomeAccordion.js" type="text/javascript"></script>
<script src="/Projects/_Content/Include/CategoryPage/
CategoryUI.js" type="text/javascript"></script>
<script src="/js/MenuAdapter.js" type="text/javascript"></script>
<script src="/Projects/Foresee/foresee-trigger.js" type="text/
javascript"></script>
http://www.flickr.com/photos/nicasaurusrex/1363221060/
Sunday, April 25, 2010
Script Tag Vomit
• Slow
> many HTTP requests
> blocking render
• Manual Dependencies
• Lacks Encapsulation
http://www.flickr.com/photos/nicasaurusrex/1363221060/
Sunday, April 25, 2010
RequireJS
• async script tag loader
• call it any time
• encapsulation
• trace nested dependencies
• optimization tool
> JS and CSS
http://www.flickr.com/photos/jjay/112404324/
Sunday, April 25, 2010
Better Vomit
<script src="../js/require-jquery.js"></script>
<script>
require([
“SwfObject”,
“JsLib”,
“Utils”
“Validation”,
“Personal”,
“SpecialFeatures”,
“Basket”,
“Catalog”,
“Marketing”,
“Search”,
“GlobalSpecialUIInit”,
...etc...
]);
</script> • Async
• Even better if each
specifies own
dependencies
http://www.flickr.com/photos/jjay/112404324/
Sunday, April 25, 2010
Best
<script src="../js/require-jquery.js"></script>
<script>require([“app”]);</script>
http://www.flickr.com/photos/jjay/112404324/
Sunday, April 25, 2010
Delicious jQuery Sample http://www.flickr.com/photos/tracyhunter/140049154/
http://requirejs.org/docs/download.html
Sunday, April 25, 2010
Cash Money FAST
• On-the-fly loading
• Reduce HTTP Requests
-> CSS and JS
• Reduce file size via Closure
Compiler integration
http://www.flickr.com/photos/jphilipson/2444879696/
Sunday, April 25, 2010
• For Dev:
../../requirejs/build/build.sh baseUrl=. name=app out=app-built.js shallowExclude=jquery.alpha
• For Deployment:
../../requirejs/build/build.sh baseUrl=. name=app out=app-built.js
<script src="scripts/require-jquery.js"></script>
<script>
require(["app-built"]);
</script>
http://requirejs.org/docs/optimization.html
Warp Speed http://www.flickr.com/photos/xpurpurax/2336739798/
Sunday, April 25, 2010
• CSS Optimization
• @import inlining, url() correction
• comment stripping
../../requirejs/build/build.sh cssIn=app.css out=app-built.css
http://requirejs.org/docs/optimization.html
Warp Speed http://www.flickr.com/photos/xpurpurax/2336739798/
Sunday, April 25, 2010
Modules
• Strict encapsulation
• Allows multiple versions on a
page
• Special jQuery+RequireJS file
> http://requirejs.org/docs/download.html
> domready integration
> jquery as a module
http://www.flickr.com/photos/origomi/62687502/
Sunday, April 25, 2010
Module Pattern
(function($) {
//Extend jQuery
$.fn.foo = function() {};
$(function() {
//execute on
//page load
});
}(jQuery));
http://www.flickr.com/photos/origomi/73209540/
Sunday, April 25, 2010
RequireJS Pattern
require([“jquery”], function($) {
//Extend jQuery
$.fn.foo = function() {};
$(function() {
//execute on
//page load
});
});
http://www.flickr.com/photos/origomi/73209540/
Sunday, April 25, 2010
require([“jquery”, “cookie”, “http://some.domain/lib.js”], function($, cookie) {
//Extend jQuery
$.fn.foo = function() {};
$(function() {
//cookie is a module that uses
//require.def() to define itself
var state = cookie.get(“state”);
//lib is a global defined by lib.js
lib.go();
});
});
Dependencies http://www.flickr.com/photos/jonathanvlarocca/443069768/
Sunday, April 25, 2010
cookie.js
---------
require.def(“cookie”, [“nameParser”], function(nameParser) {
return {
get: function () {
//uses nameParser to do something
}
};
});
Modules http://www.flickr.com/photos/jonathanvlarocca/443069768/
Sunday, April 25, 2010
Nutritional Facts
• 3.7 KB Minified/Gzipped
> Smallest option 2.6 KB
> require-jquery.js 26.9 KB
• i18n/text plugins
• document.write BAD inside
modules
• Works in Node, Rhino
http://www.flickr.com/photos/gentlepurespace/2366729959/
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
http://www.flickr.com/photos/gentlepurespace/2366729959/
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
http://www.flickr.com/photos/gentlepurespace/2366729959/
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!
http://www.flickr.com/photos/kelvin255/4487200368/
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
http://www.mozillamessaging.com/
Sunday, April 25, 2010
