JavaScriptAssets & Packaging Overview

   <script  src=    <script  src=    <script  src=    <script  src=    <script  src=    <script  src=    <script  src=    <script  src=</head>

“80% of the end-user response time is spent on the front-end. Most of this time is tied up in downloading all the

components in the page: images, stylesheets, scripts, Flash, etc”

Yahoo!'s Exceptional Performance team

Minimize HTTP requests

Minimize HTTP requests...but don't end up with a ~30k line source

Google Libraries API

http://code.google.com/apis/libraries/

(function()  {

   //  Code  goes  here...

}).call(this);

var  exports  =  (function()  {

   //  Code  goes  here...    return  exports;

})();

var  MyClass  =  (function()  {

   function  MyClass()  {}                                    //  constructor    MyClass.foo  =  function()  {};                      //  static    MyClass.prototype.bar  =  function()  {};  //  instance    return  MyClass;

})();

var  myObject  =  new  MyClass();myObject.bar();MyClass.foo();

function  first()  {    var  result  =  'WIN';    return  result;}

function  second()  {    result  =  'FAIL';    return  result;}

var  result  =  first();var  result2  =  second();console.log(result);

The deal with globals

JSHint

http://www.jshint.com/

function  first()  {    var  result  =  'WIN';    return  result;}

function  second()  {    result  =  'FAIL';    return  result;}

var  result  =  first();var  result2  =  second();console.log(result);

/*jshint  undef:true,devel:true  */

function  first()  {    var  result  =  'WIN';    return  result;}

function  second()  {    result  =  'FAIL';    return  result;}

var  result  =  first();var  result2  =  second();console.log(result);

$  jshint  test.jstest.js:  line  9,  col  3,  'result'  is  not  defined.test.js:  line  10,  col  10,  'result'  is  not  defined.

2  errors

HELL YEAH!

UglifyJS

https://github.com/mishoo/UglifyJShttp://marijnhaverbeke.nl/uglifyjs

UglifyJS – how good is it?

UglifyJS Closure YUI

Size 39% 38% 43%

Time 1.59 s 7.4 s 1.82 s

(lower is better)

http://www.commonjs.org/specs/

“Small, loosely coupled modules are the future and large, tightly-bound monolithic libraries are the past.”

CommonJS: Packages/1.1{    "name":  "beans",    "description":  "Build  tasks  for  CoffeeScript  projects  targeting  Node  and  the  browser.",    "keywords":  ["browser",  "build",  "coffeescript"],    "version":  "0.6.1",    "author":  "Dimitry  Solovyov  <dimituri@gmail.com>  (http://100-­‐hour.com)",    "repository":  {        "type":  "git",        "url":  "git://github.com/dimituri/beans.git"    },    "main":  "./lib/beans",    "dependencies":  {        "glob":  "~2.0.7",        "nodeunit":  "~0.5.3",        "request":  "~2.1.1",        "rimraf":  "~1.0.4",        "stitch":  "~0.3.2",        "uglify-­‐js":  "~1.0.6",        "which":  "~1.0.0"

Contents ofpackage.json

CommonJS: Packages/1.1{    "name":  "beans",    "description":  "Build  tasks  for  CoffeeScript  projects  targeting  Node  and  the  browser.",    "keywords":  ["browser",  "build",  "coffeescript"],    "version":  "0.6.1",    "author":  "Dimitry  Solovyov  <dimituri@gmail.com>  (http://100-­‐hour.com)",    "repository":  {        "type":  "git",        "url":  "git://github.com/dimituri/beans.git"    },    "main":  "./lib/beans",    "dependencies":  {        "glob":  "~2.0.7",        "nodeunit":  "~0.5.3",        "request":  "~2.1.1",        "rimraf":  "~1.0.4",        "stitch":  "~0.3.2",        "uglify-­‐js":  "~1.0.6",        "which":  "~1.0.0"

Dependency hell

http://npmjs.org

“We like to think of it asnpm's little sister.”

$  npm  install  ender  -­‐g$  ender  build  jquery@1.6.3  backbone

$  npm  ls├─┬  backbone@0.5.3  │  └──  underscore@1.2.2  ├──  ender-­‐js@0.3.6  └─┬  jquery@1.6.3      ├──  htmlparser@1.7.3      └─┬  jsdom@0.2.10          ├──  contextify@0.0.6          ├──  cssom@0.2.1          └──  request@2.2.5

WE NEED TO GO DEEPER(that's what she said)

//  In  'path/to/file.js':module.exports  =  {    exportedFunction:  function()  {}};

//  In  some  other  file:var  localName  =  require('path/to/file.js');localName.exportedFunction();

CommonJS: Modules/1.1

https://github.com/sstephenson/stitch

var  fs            =  require('fs')    ,  stitch    =  require('stitch');

var  package  =  stitch.createPackage({    paths:  [        __dirname  +  '/lib',        __dirname  +  '/vendor'    ]});

package.compile(function(err,  source)  {    fs.writeFileSync('package.js',  source);});

The debugger statement...or how to find your way around a stiched source

function  mayContainBugs()  {    //  Executed  code  goes  here...    debugger;  //  Pause  and  invoke  debugger}