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