JavaScript Assets & Packaging Overview

519 views
485 views

Published on

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
519
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

JavaScript Assets & Packaging Overview

  1. 1. JavaScriptAssets & Packaging Overview
  2. 2. “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>
  3. 3. Minimize HTTP requests
  4. 4. Minimize HTTP requests...but dont end up with a ~30k line source
  5. 5. Google Libraries API http://code.google.com/apis/libraries/
  6. 6. (function()  {    //  Code  goes  here...}).call(this);
  7. 7. var  exports  =  (function()  {    //  Code  goes  here...    return  exports;})();
  8. 8. 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();
  9. 9. 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);
  10. 10. JSHinthttp://www.jshint.com/
  11. 11. function  first()  {    var  result  =  WIN;    return  result;}function  second()  {    result  =  FAIL;    return  result;}var  result  =  first();var  result2  =  second();console.log(result);
  12. 12. /*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);
  13. 13. $  jshint  test.jstest.js:  line  9,  col  3,  result  is  not  defined.test.js:  line  10,  col  10,  result  is  not  defined.2  errors
  14. 14. HELL YEAH!
  15. 15. UglifyJShttps://github.com/mishoo/UglifyJS http://marijnhaverbeke.nl/uglifyjs
  16. 16. 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)
  17. 17. http://www.commonjs.org/specs/
  18. 18. “Small, loosely coupled modules are the future and large, tightly-bound monolithic libraries are the past.”
  19. 19. 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",
  20. 20. 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",
  21. 21. Dependency hell
  22. 22. http://npmjs.org
  23. 23. “We like to think of it as npms little sister.”
  24. 24. $  npm  install  ender  -­‐g$  ender  build  jquery@1.6.3  backbone
  25. 25. $  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
  26. 26. WE NEED TO GO DEEPER (thats what she said)
  27. 27. 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();
  28. 28. https://github.com/sstephenson/stitch
  29. 29. 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);});
  30. 30. The debugger statement...or how to find your way around a stiched source function  mayContainBugs()  {    //  Executed  code  goes  here...    debugger;  //  Pause  and  invoke  debugger }

×