Post on 22-May-2015
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
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)
“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
“We like to think of it asnpm's little sister.”
$ 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}