require.js                          a keynote information loader                                       about              ...
what is requires                   • a javascript module loaderWednesday, March 27, 13
where to get it?                   • http://requirejs.orgWednesday, March 27, 13
who has it?                          wget http://requirejs.org/docs/release/2.1.5/minified/require.js                      ...
why do I need it?Wednesday, March 27, 13
why do I need it?                   • Web sites are turning into Web appsWednesday, March 27, 13
why do I need it?                   • Web sites are turning into Web apps                   • Code complexity grows as the...
why do I need it?                   • Web sites are turning into Web apps                   • Code complexity grows as the...
why do I need it?                   • Web sites are turning into Web apps                   • Code complexity grows as the...
why do I need it?                   • Web sites are turning into Web apps                   • Code complexity grows as the...
how does it solve this?Wednesday, March 27, 13
how does it solve this?                   • Some sort of #include/import/requireWednesday, March 27, 13
how does it solve this?                   • Some sort of #include/import/require                   • ability to load neste...
how does it solve this?                   • Some sort of #include/import/require                   • ability to load neste...
how do I use require.js?                          // index.html                          <script data-main="scripts/main" ...
how do I use require.js?                          // index.html                          <script data-main="scripts/main" ...
how do I use require.js?                          // index.html                          <script data-main="scripts/main" ...
writing a module, today                          (function ($) {                            function Foo() {              ...
writing a module, today                          var $ = require(jquery);                          exports.myExample = fun...
writing a module,                                  today++: AMD                          define(mod,function(){            ...
What is AMD?                   • Asynchronous Module DefinitionWednesday, March 27, 13
why is this good?                   •      Uses the CommonJS practice of string IDs for dependencies                   •  ...
why is this good?                   •      Easy to test, because modules are compartmentalized                   •      De...
amd still handles this                          (function () {                            this.myGlobal = function () {}; ...
require still supports                            normal javascript                          require(["some/script.js"], f...
It’s easy!                   • http://requirejs.org/docs/why.htmlWednesday, March 27, 13
Optimization!                   • We can compile all requirements into one                          file                   ...
Can run...                   • In the browser                   • In Node                   • In RhinoWednesday, March 27,...
Using Closure                            Compiler                   • Means uses Java                   • Means using Rhin...
jscompile                          #!/bin/sh                          java -classpath /Users/jasonlotito/Downloads/rhino1_...
Getting the Compiler                   • http://requirejs.org/docs/download.html#rjsWednesday, March 27, 13
compiler                          java -classpath /Users/jasonlotito/Downloads/rhino1_7R4/js.jar:/Users/                  ...
compiler                          java -classpath /Users/jasonlotito/Downloads/rhino1_7R4/js.jar:/                        ...
compiler                          java -classpath /Users/jasonlotito/Downloads/rhino1_7R4/js.jar:/Users/                  ...
compiler                          java -classpath /Users/jasonlotito/Downloads/rhino1_7R4/js.jar:/Users/                  ...
compiler                          java -classpath /Users/jasonlotito/Downloads/rhino1_7R4/js.jar:/Users/                  ...
compiler                          java -classpath /Users/jasonlotito/Downloads/rhino1_7R4/js.jar:/Users/                  ...
How to compile?                   • jscompile path/to/app.build.jsWednesday, March 27, 13
What’s app.build.js                          ({                            appDir: "../",                            baseU...
Alright stop...                Let’s make sense of all these options by establishing our                       surrounding...
Our sample                  directory                  structureWednesday, March 27, 13
Our sample                  directory                  structure           •      r.jsWednesday, March 27, 13
Our sample                  directory                  structure           •      r.js           •      webapp/Wednesday, ...
Our sample                  directory                  structure           •      r.js           •      webapp/           ...
Our sample                  directory                  structure           •      r.js           •      webapp/           ...
Our sample                  directory                  structure           •      r.js           •      webapp/           ...
Our sample                  directory                  structure           •      r.js           •      webapp/           ...
Our sample                  directory                  structure           •      r.js           •      webapp/           ...
Our sample                  directory                  structure           •      r.js           •      webapp/           ...
the app                          require( ["jquery", "mod"], function ( $, mod )                          {               ...
the module                          define(mod,function(){                            return function() {                  ...
modules can include                             other modules                          define(mod,[member/photos],function(...
Compiled!                          whee!Wednesday, March 27, 13
Compiled and minified                   via Closure Compiler                          (function(){define("mod",[],function()...
Compiled with           Source Maps          closure: {             CompilerOptions: {},             CompilationLevel: SIM...
.map file                          {"version":3,                          "file":"main.js",                          "lineCo...
testing                          define( mod, [Profile], function ( Profile ) {                           function mod() {   ...
JSTestDriver                          # tests.jstd                          load:                            - r.js       ...
JSTestRunner                          # tests.jstd                          load:                           - r.js        ...
JSTestRunner                          # tests.jstd                          load:                            - r.js       ...
JSTestRunner                          # tests.jstd                          load:                            - r.js       ...
(function (){                                       TestJSTestDriver                            var Mod;                  ...
TestJSTestDriver                          (function (){                            var Mod;                           Asyn...
(function (){                                       TestJSTestDriver                            var Mod;                  ...
(function (){                                       TestJSTestDriver                            var Mod;                  ...
(function (){                                       TestJSTestDriver                            var Mod;                  ...
(function (){                                       TestJSTestDriver                            var Mod;                  ...
(function (){                                       TestJSTestDriver                            var Mod;                  ...
TestJSTestDriver                          (function (){                            var Mod;                           Asyn...
TestJSTestDriver                          (function (){                            var Mod;                           Asyn...
TestJSTestDriver                          (function (){                            var Mod;                           Asyn...
PHPStorm                           Code and Compile Example                          They all worked before, honest!Wednes...
Upcoming SlideShare
Loading in...5
×

Requirejs

671

Published on

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
671
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
17
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Requirejs

  1. 1. require.js a keynote information loader about a javascript module loaderWednesday, March 27, 13
  2. 2. what is requires • a javascript module loaderWednesday, March 27, 13
  3. 3. where to get it? • http://requirejs.orgWednesday, March 27, 13
  4. 4. who has it? wget http://requirejs.org/docs/release/2.1.5/minified/require.js -O ./public/js/require.min.js wget http://requirejs.org/docs/release/2.1.5/comments/require.js -O ./public/js/require.jsWednesday, March 27, 13
  5. 5. why do I need it?Wednesday, March 27, 13
  6. 6. why do I need it? • Web sites are turning into Web appsWednesday, March 27, 13
  7. 7. why do I need it? • Web sites are turning into Web apps • Code complexity grows as the site gets biggerWednesday, March 27, 13
  8. 8. why do I need it? • Web sites are turning into Web apps • Code complexity grows as the site gets bigger • Assembly gets harderWednesday, March 27, 13
  9. 9. why do I need it? • Web sites are turning into Web apps • Code complexity grows as the site gets bigger • Assembly gets harder • Developer wants discrete JS files/modulesWednesday, March 27, 13
  10. 10. why do I need it? • Web sites are turning into Web apps • Code complexity grows as the site gets bigger • Assembly gets harder • Developer wants discrete JS files/modules • Deployment wants optimized code in just one or a few HTTP callsWednesday, March 27, 13
  11. 11. how does it solve this?Wednesday, March 27, 13
  12. 12. how does it solve this? • Some sort of #include/import/requireWednesday, March 27, 13
  13. 13. how does it solve this? • Some sort of #include/import/require • ability to load nested dependenciesWednesday, March 27, 13
  14. 14. how does it solve this? • Some sort of #include/import/require • ability to load nested dependencies • ease of use for developer but then backed by an optimization tool that helps deploymentWednesday, March 27, 13
  15. 15. how do I use require.js? // index.html <script data-main="scripts/main" src="scripts/require.js"></script> // scripts/main.js require(["loc/module"], function(module) { //This function is called when scripts/loc/module.js is loaded. //If module.js calls define(), then this function is not fired until //utils dependencies have loaded, and the util argument will hold //the module value for "helper/util". });Wednesday, March 27, 13
  16. 16. how do I use require.js? // index.html <script data-main="scripts/main" src="scripts/require.js"></script> // scripts/main.js require(["loc/module"], function(module) { //This function is called when scripts/loc/module.js is loaded. //If module.js calls define(), then this function is not fired until //utils dependencies have loaded, and the util argument will hold //the module value for "helper/util". });Wednesday, March 27, 13
  17. 17. how do I use require.js? // index.html <script data-main="scripts/main" src="scripts/require.js"></script> // scripts/main.js require(["loc/module"], function(module) { //This function is called when scripts/loc/module.js is loaded. //If module.js calls define(), then this function is not fired until //utils dependencies have loaded, and the util argument will hold //the module value for "helper/util". });Wednesday, March 27, 13
  18. 18. writing a module, today (function ($) { function Foo() { // do stuff here! } new Foo(); }(jQuery));Wednesday, March 27, 13
  19. 19. writing a module, today var $ = require(jquery); exports.myExample = function () { // do stuff here! };Wednesday, March 27, 13
  20. 20. writing a module, today++: AMD define(mod,function(){ return function() { this.boom = function () { alert( Boom ); }; } } );Wednesday, March 27, 13
  21. 21. What is AMD? • Asynchronous Module DefinitionWednesday, March 27, 13
  22. 22. why is this good? • Uses the CommonJS practice of string IDs for dependencies • IDs can be mapped to different paths. • Encapsulates the module definition. • Clear path to defining the module value. • Allows setting a function as a return value. Useful for constructor functions. • Defines a way to include multiple modules in one file.Wednesday, March 27, 13
  23. 23. why is this good? • Easy to test, because modules are compartmentalized • Dependency InjectionWednesday, March 27, 13
  24. 24. amd still handles this (function () { this.myGlobal = function () {}; }());Wednesday, March 27, 13
  25. 25. require still supports normal javascript require(["some/script.js"], function() { //This function is called after some/script.js has loaded. });Wednesday, March 27, 13
  26. 26. It’s easy! • http://requirejs.org/docs/why.htmlWednesday, March 27, 13
  27. 27. Optimization! • We can compile all requirements into one file • We can minimize CSS and JavaScript using Closure Compiler (or UglifyJS) • We aren’t worried about CSS todayWednesday, March 27, 13
  28. 28. Can run... • In the browser • In Node • In RhinoWednesday, March 27, 13
  29. 29. Using Closure Compiler • Means uses Java • Means using Rhino • r.jsWednesday, March 27, 13
  30. 30. jscompile #!/bin/sh java -classpath /Users/jasonlotito/Downloads/rhino1_7R4/js.jar:/Users/ jasonlotito/Downloads/compiler-latest/compiler.jar org.mozilla.javascript.tools.shell.Main r.js -o $1Wednesday, March 27, 13
  31. 31. Getting the Compiler • http://requirejs.org/docs/download.html#rjsWednesday, March 27, 13
  32. 32. compiler java -classpath /Users/jasonlotito/Downloads/rhino1_7R4/js.jar:/Users/ jasonlotito/Downloads/compiler-latest/compiler.jar org.mozilla.javascript.tools.shell.Main r.js -o $1Wednesday, March 27, 13
  33. 33. compiler java -classpath /Users/jasonlotito/Downloads/rhino1_7R4/js.jar:/ Users/jasonlotito/Downloads/compiler-latest/compiler.jar org.mozilla.javascript.tools.shell.Main r.js -o $1Wednesday, March 27, 13
  34. 34. compiler java -classpath /Users/jasonlotito/Downloads/rhino1_7R4/js.jar:/Users/ jasonlotito/Downloads/compiler-latest/compiler.jar org.mozilla.javascript.tools.shell.Main r.js -o $1Wednesday, March 27, 13
  35. 35. compiler java -classpath /Users/jasonlotito/Downloads/rhino1_7R4/js.jar:/Users/ jasonlotito/Downloads/compiler-latest/compiler.jar org.mozilla.javascript.tools.shell.Main r.js -o $1Wednesday, March 27, 13
  36. 36. compiler java -classpath /Users/jasonlotito/Downloads/rhino1_7R4/js.jar:/Users/ jasonlotito/Downloads/compiler-latest/compiler.jar org.mozilla.javascript.tools.shell.Main r.js -o $1Wednesday, March 27, 13
  37. 37. compiler java -classpath /Users/jasonlotito/Downloads/rhino1_7R4/js.jar:/Users/ jasonlotito/Downloads/compiler-latest/compiler.jar org.mozilla.javascript.tools.shell.Main r.js -o $1Wednesday, March 27, 13
  38. 38. How to compile? • jscompile path/to/app.build.jsWednesday, March 27, 13
  39. 39. What’s app.build.js ({ appDir: "../", baseUrl: "scripts/", dir: "../../webapp-build", optimize: "closure", paths: { "jquery": "empty:" }, modules: [ //Optimize the application files. jQuery is not //included since it is already in require-jquery.js { name: "main" } ], closure: { CompilerOptions: {}, CompilationLevel: SIMPLE_OPTIMIZATIONS, loggingLevel: WARNING }, generateSourceMaps: true, preserveLicenseComments: false })Wednesday, March 27, 13
  40. 40. Alright stop... Let’s make sense of all these options by establishing our surroundings, namely, our project structureWednesday, March 27, 13
  41. 41. Our sample directory structureWednesday, March 27, 13
  42. 42. Our sample directory structure • r.jsWednesday, March 27, 13
  43. 43. Our sample directory structure • r.js • webapp/Wednesday, March 27, 13
  44. 44. Our sample directory structure • r.js • webapp/ • app.htmlWednesday, March 27, 13
  45. 45. Our sample directory structure • r.js • webapp/ • app.html • scripts/Wednesday, March 27, 13
  46. 46. Our sample directory structure • r.js • webapp/ • app.html • scripts/ • app.build.jsWednesday, March 27, 13
  47. 47. Our sample directory structure • r.js • webapp/ • app.html • scripts/ • app.build.js • app.build.dev.jsWednesday, March 27, 13
  48. 48. Our sample directory structure • r.js • webapp/ • app.html • scripts/ • app.build.js • app.build.dev.js • main.jsWednesday, March 27, 13
  49. 49. Our sample directory structure • r.js • webapp/ • app.html • scripts/ • app.build.js • app.build.dev.js • main.js • mod.jsWednesday, March 27, 13
  50. 50. the app require( ["jquery", "mod"], function ( $, mod ) { var mod = new mod(); setTimeout( function () { mod.boom(); $( h1 ).text( Hey you guys! ); }, 2000 ); setTimeout( function () { mod.boom(); $( h1 ).text( Baby, ruth? ); }, 4000 ); setTimeout( function () { mod.boom(); $( h1 ).text( Truffle Shuffle ); }, 6000 ); } );Wednesday, March 27, 13
  51. 51. the module define(mod,function(){ return function() { this.boom = function () { alert( Boom ); }; } } );Wednesday, March 27, 13
  52. 52. modules can include other modules define(mod,[member/photos],function(photos){ return function() { this.boom = function () { alert( Boom ); photos.boom(); }; } } );Wednesday, March 27, 13
  53. 53. Compiled! whee!Wednesday, March 27, 13
  54. 54. Compiled and minified via Closure Compiler (function(){define("mod",[],function(){return function(){this.boom=function() {alert("Boom")}}});require(["jquery","mod"],function(b,a){a=new a;setTimeout(function(){a.boom();b("h1").text("Hey you guys!")}, 2E3);setTimeout(function(){a.boom();b("h1").text("Baby, ruth?")}, 4E3);setTimeout(function(){a.boom();b("h1").text("Truffle Shuffle")}, 6E3)});define("main",function(){})})(); //@ sourceMappingURL=main.js.mapWednesday, March 27, 13
  55. 55. Compiled with Source Maps closure: { CompilerOptions: {}, CompilationLevel: SIMPLE_OPTIMIZATIONS, loggingLevel: WARNING }, generateSourceMaps: true, preserveLicenseComments: falseWednesday, March 27, 13
  56. 56. .map file {"version":3, "file":"main.js", "lineCount":1, "mappings":"AAAC,SAAA,GACDA,MAAA,UAAgB,QAAA,SACP,SAAA,GACLC, SADK,CACOC,QAAAA,GAEVC,KAAA,QAFUD,CADP,CADO,CAAhB,CASA E,QAAA,kBAA4B,QAAA,CAAWC,CAAX,CAAcC,CAAd,EAEtBA,CAFsB,CAE hB,IAAIA,CAEdC,WAAA,CAAY,QAAA,GAEVD,CAAAL,KAAA,EACAI,EAAA, MAAAG,KAAA,iBAHU,CAAZ,KAMAD,WAAA,CAAY,QAAA,GAEVD,CAAAL, KAAA,EACAI,EAAA,MAAAG,KAAA,eAHU,CAAZ,KAMAD,WAAA,CAAY,QA AA,GAEVD,CAAAL,KAAA,EACAI,EAAA,MAAAG,KAAA,mBAHU,CAAZ,KAh B0B,CAA5B,CAwBAR,OAAA,QAAe,QAAA,IAAf,CAlCC,EAAA;", "sources":["main.js.src"], "names": ["define","boom","this.boom","alert","require","$","mod","setTimeout","text"]}Wednesday, March 27, 13
  57. 57. testing define( mod, [Profile], function ( Profile ) { function mod() { this.boom = function () { return (new Profile()).mockTrueLol(); }; } return mod; } );Wednesday, March 27, 13
  58. 58. JSTestDriver # tests.jstd load: - r.js - webapp/tests/app.build.test.js # This let’s JSTestRunner serve up all the scripts for require serve: - webapp/scripts/*.js # Could also just do - webapp/tests/*.js test: - webapp/tests/GangTest.js - webapp/tests/LandTest.js - webapp/tests/ProfileTest.js - webapp/tests/TestJSTestDriver.jsWednesday, March 27, 13
  59. 59. JSTestRunner # tests.jstd load: - r.js - webapp/tests/app.build.test.js # This let’s JSTestRunner serve up all the scripts for require serve: - webapp/scripts/*.js # Could also just do - webapp/tests/*.js test: - webapp/tests/GangTest.js - webapp/tests/LandTest.js - webapp/tests/ProfileTest.js - webapp/tests/TestJSTestDriver.jsWednesday, March 27, 13
  60. 60. JSTestRunner # tests.jstd load: - r.js - webapp/tests/app.build.test.js # This let’s JSTestRunner serve up all the scripts for require serve: - webapp/scripts/*.js # Could also just do - webapp/tests/*.js test: - webapp/tests/GangTest.js - webapp/tests/LandTest.js - webapp/tests/ProfileTest.js - webapp/tests/TestJSTestDriver.jsWednesday, March 27, 13
  61. 61. JSTestRunner # tests.jstd load: - r.js - webapp/tests/app.build.test.js # This let’s JSTestRunner serve up all the scripts for require serve: - webapp/scripts/*.js # Could also just do - webapp/tests/*.js test: - webapp/tests/GangTest.js - webapp/tests/LandTest.js - webapp/tests/ProfileTest.js - webapp/tests/TestJSTestDriver.jsWednesday, March 27, 13
  62. 62. (function (){ TestJSTestDriver var Mod; AsyncTestCase( "TestJSTestDriver", { setUp: function ( queue ){ queue.call( function ( callbacks ){ require.undef( Profile ); define( Profile, function (){ function Profile() {} Profile.prototype.mockTrueLol = function() { return true; }; return Profile; } ); require( [ mod ], callbacks.add( function ( m ){ Mod = new m(); } ) ); } ); }, // tests here } ); })();Wednesday, March 27, 13
  63. 63. TestJSTestDriver (function (){ var Mod; AsyncTestCase( "TestJSTestDriver", { setUp: function ( queue ){ queue.call( function ( callbacks ){ require.undef( Profile ); define( Profile, function (){ function Profile() {} Profile.prototype.mockTrueLol = function() { return true; }; return Profile; } ); require( [ mod ], callbacks.add( function ( m ){ Mod = new m(); } ) ); } ); }, // tests here } ); })();Wednesday, March 27, 13
  64. 64. (function (){ TestJSTestDriver var Mod; AsyncTestCase( "TestJSTestDriver", { setUp: function ( queue ){ queue.call( function ( callbacks ){ require.undef( Profile ); define( Profile, function (){ function Profile() {} Profile.prototype.mockTrueLol = function() { return true; }; return Profile; } ); require( [ mod ], callbacks.add( function ( m ){ Mod = new m(); } ) ); } ); }, // tests here } ); })();Wednesday, March 27, 13
  65. 65. (function (){ TestJSTestDriver var Mod; AsyncTestCase( "TestJSTestDriver", { setUp: function ( queue ){ queue.call( function ( callbacks ){ require.undef( Profile ); define( Profile, function (){ function Profile() {} Profile.prototype.mockTrueLol = function() { return true; }; return Profile; } ); require( [ mod ], callbacks.add( function ( m ){ Mod = new m(); } ) ); } ); }, // tests here } ); })();Wednesday, March 27, 13
  66. 66. (function (){ TestJSTestDriver var Mod; AsyncTestCase( "TestJSTestDriver", { setUp: function ( queue ){ queue.call( function ( callbacks ){ require.undef( Profile ); define( Profile, function (){ function Profile() {} Profile.prototype.mockTrueLol = function() { return true; }; return Profile; } ); require( [ mod ], callbacks.add( function ( m ){ Mod = new m(); } ) ); } ); }, // tests here } ); })();Wednesday, March 27, 13
  67. 67. (function (){ TestJSTestDriver var Mod; AsyncTestCase( "TestJSTestDriver", { setUp: function ( queue ){ queue.call( function ( callbacks ){ require.undef( Profile ); define( Profile, function (){ function Profile() {} Profile.prototype.mockTrueLol = function() { return true; }; return Profile; } ); require( [ mod ], callbacks.add( function ( m ){ Mod = new m(); } ) ); } ); }, // tests here } ); })();Wednesday, March 27, 13
  68. 68. (function (){ TestJSTestDriver var Mod; AsyncTestCase( "TestJSTestDriver", { setUp: function ( queue ){ queue.call( function ( callbacks ){ require.undef( Profile ); define( Profile, function (){ function Profile() {} Profile.prototype.mockTrueLol = function() { return true; }; return Profile; } ); require( [ mod ], callbacks.add( function ( m ){ Mod = new m(); } ) ); } ); }, // tests here } ); })();Wednesday, March 27, 13
  69. 69. TestJSTestDriver (function (){ var Mod; AsyncTestCase( "TestJSTestDriver", { // setUp here tearDown: function (){ Mod = null; }, "test Mod is setup": function (){ assertTrue( Mod.hasOwnProperty( boom ) ); assertTrue( Mod.boom() ); } } ); })();Wednesday, March 27, 13
  70. 70. TestJSTestDriver (function (){ var Mod; AsyncTestCase( "TestJSTestDriver", { // setUp here tearDown: function (){ Mod = null; }, "test Mod is setup": function (){ assertTrue( Mod.hasOwnProperty( boom ) ); assertTrue( Mod.boom() ); } } ); })();Wednesday, March 27, 13
  71. 71. TestJSTestDriver (function (){ var Mod; AsyncTestCase( "TestJSTestDriver", { // setUp here tearDown: function (){ Mod = null; }, "test Mod is setup": function (){ assertTrue( Mod.hasOwnProperty( boom ) ); assertTrue( Mod.boom() ); } } ); })(); // From Mod this.boom = function () { return (new Profile()).mockTrueLol(); };Wednesday, March 27, 13
  72. 72. PHPStorm Code and Compile Example They all worked before, honest!Wednesday, March 27, 13
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×