• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
JavaScript Assets & Packaging Overview
 

JavaScript Assets & Packaging Overview

on

  • 576 views

 

Statistics

Views

Total Views
576
Views on SlideShare
576
Embed Views
0

Actions

Likes
0
Downloads
1
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    JavaScript Assets & Packaging Overview JavaScript Assets & Packaging Overview Presentation Transcript

    • JavaScriptAssets & Packaging Overview
    • “80% of the end-user response timeis spent on the front-end. Most of this time is tied up in downloading all the    <script  src= components in the page: images,    <script  src= stylesheets, scripts, Flash, etc”    <script  src=    <script  src= Yahoo!s Exceptional Performance team    <script  src=    <script  src=    <script  src=    <script  src= </head>
    • Minimize HTTP requests
    • Minimize HTTP requests...but dont 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();
    • 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);
    • JSHinthttp://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!
    • UglifyJShttps://github.com/mishoo/UglifyJS http://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      "keywords":  ["browser",  "build",  "coffeescript"],    "version":  "0.6.1",    "author":  "Dimitry  Solovyov  <dimituri@gmail.com>  (http    "repository":  {        "type":  "git",        "url":  "git://github.com/dimituri/beans.git"    },    "main":  "./lib/beans",    "dependencies":  {        "glob":  "~2.0.7", Contents of        "nodeunit":  "~0.5.3", package.json        "request":  "~2.1.1",        "rimraf":  "~1.0.4",
    • CommonJS: Packages/1.1{    "name":  "beans",    "description":  "Build  tasks  for  CoffeeScript  projects      "keywords":  ["browser",  "build",  "coffeescript"],    "version":  "0.6.1",    "author":  "Dimitry  Solovyov  <dimituri@gmail.com>  (http    "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",
    • Dependency hell
    • http://npmjs.org
    • “We like to think of it as npms 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 (thats what she said)
    • CommonJS: Modules/1.1//  In  path/to/file.js:module.exports  =  {    exportedFunction:  function()  {}};//  In  some  other  file:var  localName  =  require(path/to/file.js);localName.exportedFunction();
    • 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 }