SlideShare a Scribd company logo
1 of 72
Download to read offline
require.js
                          a keynote information loader
                                       about
                            a javascript module loader




Wednesday, March 27, 13
what is requires


                   • a javascript module loader



Wednesday, March 27, 13
where to get it?


                   • http://requirejs.org



Wednesday, March 27, 13
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.js




Wednesday, March 27, 13
why do I need it?




Wednesday, March 27, 13
why do I need it?
                   • Web sites are turning into Web apps




Wednesday, March 27, 13
why do I need it?
                   • Web sites are turning into Web apps
                   • Code complexity grows as the site gets
                          bigger




Wednesday, March 27, 13
why do I need it?
                   • Web sites are turning into Web apps
                   • Code complexity grows as the site gets
                          bigger
                   • Assembly gets harder



Wednesday, March 27, 13
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


Wednesday, March 27, 13
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 calls


Wednesday, March 27, 13
how does it solve this?




Wednesday, March 27, 13
how does it solve this?

                   • Some sort of #include/import/require




Wednesday, March 27, 13
how does it solve this?

                   • Some sort of #include/import/require
                   • ability to load nested dependencies




Wednesday, March 27, 13
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
                          deployment



Wednesday, March 27, 13
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
                            //util's dependencies have loaded, and the util argument will hold
                            //the module value for "helper/util".
                          });




Wednesday, March 27, 13
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
                            //util's dependencies have loaded, and the util argument will hold
                            //the module value for "helper/util".
                          });




Wednesday, March 27, 13
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
                            //util's dependencies have loaded, and the util argument will hold
                            //the module value for "helper/util".
                          });




Wednesday, March 27, 13
writing a module, today

                          (function ($) {
                            function Foo() {
                              // do stuff here!
                            }

                            new Foo();
                          }(jQuery));




Wednesday, March 27, 13
writing a module, today


                          var $ = require('jquery');

                          exports.myExample = function () {
                            // do stuff here!
                          };




Wednesday, March 27, 13
writing a module,
                                  today++: AMD
                          define('mod',function(){
                            return function() {
                              this.boom = function ()
                              {
                                alert( 'Boom' );
                              };
                            }
                          } );




Wednesday, March 27, 13
What is AMD?


                   • Asynchronous Module Definition



Wednesday, March 27, 13
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
why is this good?


                   •      Easy to test, because modules are compartmentalized

                   •      Dependency Injection




Wednesday, March 27, 13
amd still handles this


                          (function () {

                            this.myGlobal = function () {};

                          }());




Wednesday, March 27, 13
require still supports
                            normal javascript

                          require(["some/script.js"], function() {
                              //This function is called after some/script.js has loaded.
                          });




Wednesday, March 27, 13
It’s easy!


                   • http://requirejs.org/docs/why.html



Wednesday, March 27, 13
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 today

Wednesday, March 27, 13
Can run...

                   • In the browser
                   • In Node
                   • In Rhino


Wednesday, March 27, 13
Using Closure
                            Compiler

                   • Means uses Java
                   • Means using Rhino
                   • r.js


Wednesday, March 27, 13
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 $1




Wednesday, March 27, 13
Getting the Compiler


                   • http://requirejs.org/docs/download.html#rjs



Wednesday, March 27, 13
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 $1




Wednesday, March 27, 13
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 $1




Wednesday, March 27, 13
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 $1




Wednesday, March 27, 13
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 $1




Wednesday, March 27, 13
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 $1




Wednesday, March 27, 13
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 $1




Wednesday, March 27, 13
How to compile?


                   • jscompile path/to/app.build.js



Wednesday, March 27, 13
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
Alright stop...
                Let’s make sense of all these options by establishing our
                       surroundings, namely, our project structure




Wednesday, March 27, 13
Our sample
                  directory
                  structure




Wednesday, March 27, 13
Our sample
                  directory
                  structure
           •      r.js




Wednesday, March 27, 13
Our sample
                  directory
                  structure
           •      r.js
           •      webapp/




Wednesday, March 27, 13
Our sample
                  directory
                  structure
           •      r.js
           •      webapp/
                  •    app.html




Wednesday, March 27, 13
Our sample
                  directory
                  structure
           •      r.js
           •      webapp/
                  •    app.html
                  •    scripts/




Wednesday, March 27, 13
Our sample
                  directory
                  structure
           •      r.js
           •      webapp/
                  •    app.html
                  •    scripts/
                          •
                          app.build.js




Wednesday, March 27, 13
Our sample
                  directory
                  structure
           •      r.js
           •      webapp/
                  •    app.html
                  •    scripts/
                          •
                          app.build.js
                          •
                          app.build.dev.js



Wednesday, March 27, 13
Our sample
                  directory
                  structure
           •      r.js
           •      webapp/
                  •    app.html
                  •    scripts/
                          •
                          app.build.js
                          •
                          app.build.dev.js
                          •
                          main.js


Wednesday, March 27, 13
Our sample
                  directory
                  structure
           •      r.js
           •      webapp/
                  •    app.html
                  •    scripts/
                          •
                          app.build.js
                          •
                          app.build.dev.js
                          •
                          main.js
                          •
                          mod.js

Wednesday, March 27, 13
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
the module

                          define('mod',function(){
                            return function() {
                              this.boom = function ()
                              {
                                alert( 'Boom' );
                              };
                            }
                          } );




Wednesday, March 27, 13
modules can include
                             other modules
                          define('mod',['member/photos'],function(photos){
                            return function() {
                              this.boom = function ()
                              {
                                alert( 'Boom' );
                                photos.boom();
                              };
                            }
                          } );




Wednesday, March 27, 13
Compiled!
                          whee!




Wednesday, March 27, 13
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.map




Wednesday, March 27, 13
Compiled with
           Source Maps
          closure: {
             CompilerOptions: {},
             CompilationLevel: 'SIMPLE_OPTIMIZATIONS',
             loggingLevel: 'WARNING'
          },
          generateSourceMaps: true,
          preserveLicenseComments: false




Wednesday, March 27, 13
.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
testing

                          define( 'mod', ['Profile'], function ( Profile ) {
                           function mod() {
                             this.boom = function () {
                               return (new Profile()).mockTrueLol();
                             };
                           }

                            return mod;
                          } );




Wednesday, March 27, 13
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.js




Wednesday, March 27, 13
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.js




Wednesday, March 27, 13
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.js




Wednesday, March 27, 13
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.js




Wednesday, March 27, 13
(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
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
(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
(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
(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
(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
(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
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
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
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
PHPStorm
                           Code and Compile Example
                          They all worked before, honest!




Wednesday, March 27, 13

More Related Content

What's hot

Modularize JavaScript with RequireJS
Modularize JavaScript with RequireJSModularize JavaScript with RequireJS
Modularize JavaScript with RequireJSMinh Hoang
 
Javascript ui for rest services
Javascript ui for rest servicesJavascript ui for rest services
Javascript ui for rest servicesIoan Eugen Stan
 
uRequire@greecejs: An introduction to http://uRequire.org
uRequire@greecejs: An introduction to http://uRequire.orguRequire@greecejs: An introduction to http://uRequire.org
uRequire@greecejs: An introduction to http://uRequire.orgAgelos Pikoulas
 
Backbone.js
Backbone.jsBackbone.js
Backbone.jsVO Tho
 
React.js触ってみた 吉澤和香奈
React.js触ってみた 吉澤和香奈React.js触ってみた 吉澤和香奈
React.js触ってみた 吉澤和香奈Wakana Yoshizawa
 
Packing it all: JavaScript module bundling from 2000 to now
Packing it all: JavaScript module bundling from 2000 to nowPacking it all: JavaScript module bundling from 2000 to now
Packing it all: JavaScript module bundling from 2000 to nowDerek Willian Stavis
 
CodeFest 2014. Пухальский И. — Отзывчивые кроссплатформенные веб-приложения
CodeFest 2014. Пухальский И. — Отзывчивые кроссплатформенные веб-приложенияCodeFest 2014. Пухальский И. — Отзывчивые кроссплатформенные веб-приложения
CodeFest 2014. Пухальский И. — Отзывчивые кроссплатформенные веб-приложенияCodeFest
 
An Introduction To Testing In AngularJS Applications
An Introduction To Testing In AngularJS Applications An Introduction To Testing In AngularJS Applications
An Introduction To Testing In AngularJS Applications Rohan Chandane
 
Integrating Browserify with Sprockets
Integrating Browserify with SprocketsIntegrating Browserify with Sprockets
Integrating Browserify with SprocketsSpike Brehm
 
Asynchronous Module Definition (AMD)
Asynchronous Module Definition (AMD)Asynchronous Module Definition (AMD)
Asynchronous Module Definition (AMD)xMartin12
 
Module, AMD, RequireJS
Module, AMD, RequireJSModule, AMD, RequireJS
Module, AMD, RequireJS偉格 高
 
Workshop Intro: FrontEnd General Overview
Workshop Intro: FrontEnd General OverviewWorkshop Intro: FrontEnd General Overview
Workshop Intro: FrontEnd General OverviewVisual Engineering
 
Workshop 9: BackboneJS y patrones MVC
Workshop 9: BackboneJS y patrones MVCWorkshop 9: BackboneJS y patrones MVC
Workshop 9: BackboneJS y patrones MVCVisual Engineering
 
Modern Web Application Development Workflow - EclipseCon Europe 2014
Modern Web Application Development Workflow - EclipseCon Europe 2014Modern Web Application Development Workflow - EclipseCon Europe 2014
Modern Web Application Development Workflow - EclipseCon Europe 2014Stéphane Bégaudeau
 
Vue 淺談前端建置工具
Vue 淺談前端建置工具Vue 淺談前端建置工具
Vue 淺談前端建置工具andyyou
 
Vue.js is boring - and that's a good thing
Vue.js is boring - and that's a good thingVue.js is boring - and that's a good thing
Vue.js is boring - and that's a good thingJoonas Lehtonen
 
AngularJS with RequireJS
AngularJS with RequireJSAngularJS with RequireJS
AngularJS with RequireJSJohannes Weber
 

What's hot (20)

Require js
Require jsRequire js
Require js
 
Modularize JavaScript with RequireJS
Modularize JavaScript with RequireJSModularize JavaScript with RequireJS
Modularize JavaScript with RequireJS
 
Javascript ui for rest services
Javascript ui for rest servicesJavascript ui for rest services
Javascript ui for rest services
 
uRequire@greecejs: An introduction to http://uRequire.org
uRequire@greecejs: An introduction to http://uRequire.orguRequire@greecejs: An introduction to http://uRequire.org
uRequire@greecejs: An introduction to http://uRequire.org
 
Backbone.js
Backbone.jsBackbone.js
Backbone.js
 
React.js触ってみた 吉澤和香奈
React.js触ってみた 吉澤和香奈React.js触ってみた 吉澤和香奈
React.js触ってみた 吉澤和香奈
 
Packing it all: JavaScript module bundling from 2000 to now
Packing it all: JavaScript module bundling from 2000 to nowPacking it all: JavaScript module bundling from 2000 to now
Packing it all: JavaScript module bundling from 2000 to now
 
CodeFest 2014. Пухальский И. — Отзывчивые кроссплатформенные веб-приложения
CodeFest 2014. Пухальский И. — Отзывчивые кроссплатформенные веб-приложенияCodeFest 2014. Пухальский И. — Отзывчивые кроссплатформенные веб-приложения
CodeFest 2014. Пухальский И. — Отзывчивые кроссплатформенные веб-приложения
 
An Introduction To Testing In AngularJS Applications
An Introduction To Testing In AngularJS Applications An Introduction To Testing In AngularJS Applications
An Introduction To Testing In AngularJS Applications
 
Integrating Browserify with Sprockets
Integrating Browserify with SprocketsIntegrating Browserify with Sprockets
Integrating Browserify with Sprockets
 
Vuex
VuexVuex
Vuex
 
Asynchronous Module Definition (AMD)
Asynchronous Module Definition (AMD)Asynchronous Module Definition (AMD)
Asynchronous Module Definition (AMD)
 
Module, AMD, RequireJS
Module, AMD, RequireJSModule, AMD, RequireJS
Module, AMD, RequireJS
 
Rails3 asset-pipeline
Rails3 asset-pipelineRails3 asset-pipeline
Rails3 asset-pipeline
 
Workshop Intro: FrontEnd General Overview
Workshop Intro: FrontEnd General OverviewWorkshop Intro: FrontEnd General Overview
Workshop Intro: FrontEnd General Overview
 
Workshop 9: BackboneJS y patrones MVC
Workshop 9: BackboneJS y patrones MVCWorkshop 9: BackboneJS y patrones MVC
Workshop 9: BackboneJS y patrones MVC
 
Modern Web Application Development Workflow - EclipseCon Europe 2014
Modern Web Application Development Workflow - EclipseCon Europe 2014Modern Web Application Development Workflow - EclipseCon Europe 2014
Modern Web Application Development Workflow - EclipseCon Europe 2014
 
Vue 淺談前端建置工具
Vue 淺談前端建置工具Vue 淺談前端建置工具
Vue 淺談前端建置工具
 
Vue.js is boring - and that's a good thing
Vue.js is boring - and that's a good thingVue.js is boring - and that's a good thing
Vue.js is boring - and that's a good thing
 
AngularJS with RequireJS
AngularJS with RequireJSAngularJS with RequireJS
AngularJS with RequireJS
 

Viewers also liked

How we killed our process, technology stack, and assumptions – and survived
How we killed our process, technology stack, and assumptions – and survivedHow we killed our process, technology stack, and assumptions – and survived
How we killed our process, technology stack, and assumptions – and survivedJason Lotito
 
Load Testing with RedLine13: Or getting paid to DoS your own systems
Load Testing with RedLine13: Or getting paid to DoS your own systemsLoad Testing with RedLine13: Or getting paid to DoS your own systems
Load Testing with RedLine13: Or getting paid to DoS your own systemsJason Lotito
 
Twitter Bootstrap, or why being a PHP Developer is a bad idea
Twitter Bootstrap, or why being a PHP Developer is a bad ideaTwitter Bootstrap, or why being a PHP Developer is a bad idea
Twitter Bootstrap, or why being a PHP Developer is a bad ideaJason Lotito
 
Load Testing with PHP and RedLine13
Load Testing with PHP and RedLine13Load Testing with PHP and RedLine13
Load Testing with PHP and RedLine13Jason Lotito
 
A Presentation on Presenting
A Presentation on PresentingA Presentation on Presenting
A Presentation on PresentingJason Lotito
 
Social Media and ADHD – Turning Distractions Into Directions
Social Media and ADHD – Turning Distractions Into DirectionsSocial Media and ADHD – Turning Distractions Into Directions
Social Media and ADHD – Turning Distractions Into DirectionsGrant Crowell
 
Getting Things Done - Tips from someone with ADHD and OCD
Getting Things Done - Tips from someone with ADHD and OCDGetting Things Done - Tips from someone with ADHD and OCD
Getting Things Done - Tips from someone with ADHD and OCDJason Lotito
 

Viewers also liked (9)

How we killed our process, technology stack, and assumptions – and survived
How we killed our process, technology stack, and assumptions – and survivedHow we killed our process, technology stack, and assumptions – and survived
How we killed our process, technology stack, and assumptions – and survived
 
Load Testing with RedLine13: Or getting paid to DoS your own systems
Load Testing with RedLine13: Or getting paid to DoS your own systemsLoad Testing with RedLine13: Or getting paid to DoS your own systems
Load Testing with RedLine13: Or getting paid to DoS your own systems
 
Twitter Bootstrap, or why being a PHP Developer is a bad idea
Twitter Bootstrap, or why being a PHP Developer is a bad ideaTwitter Bootstrap, or why being a PHP Developer is a bad idea
Twitter Bootstrap, or why being a PHP Developer is a bad idea
 
Tmux
TmuxTmux
Tmux
 
Load Testing with PHP and RedLine13
Load Testing with PHP and RedLine13Load Testing with PHP and RedLine13
Load Testing with PHP and RedLine13
 
A Presentation on Presenting
A Presentation on PresentingA Presentation on Presenting
A Presentation on Presenting
 
ADHD in Adults
ADHD in AdultsADHD in Adults
ADHD in Adults
 
Social Media and ADHD – Turning Distractions Into Directions
Social Media and ADHD – Turning Distractions Into DirectionsSocial Media and ADHD – Turning Distractions Into Directions
Social Media and ADHD – Turning Distractions Into Directions
 
Getting Things Done - Tips from someone with ADHD and OCD
Getting Things Done - Tips from someone with ADHD and OCDGetting Things Done - Tips from someone with ADHD and OCD
Getting Things Done - Tips from someone with ADHD and OCD
 

Similar to Requirejs

Intro to JavaScript Testing
Intro to JavaScript TestingIntro to JavaScript Testing
Intro to JavaScript TestingRan Mizrahi
 
RailsAdmin - Overview and Best practices
RailsAdmin - Overview and Best practicesRailsAdmin - Overview and Best practices
RailsAdmin - Overview and Best practicesBenoit Bénézech
 
mDevCamp - The Best from Google IO
mDevCamp - The Best from Google IOmDevCamp - The Best from Google IO
mDevCamp - The Best from Google IOondraz
 
Beyond DOMReady: Ultra High-Performance Javascript
Beyond DOMReady: Ultra High-Performance JavascriptBeyond DOMReady: Ultra High-Performance Javascript
Beyond DOMReady: Ultra High-Performance Javascriptaglemann
 
Building Next-Gen Web Applications with the Spring 3 Web Stack
Building Next-Gen Web Applications with the Spring 3 Web StackBuilding Next-Gen Web Applications with the Spring 3 Web Stack
Building Next-Gen Web Applications with the Spring 3 Web StackJeremy Grelle
 
jQuery Mobile Deep Dive
jQuery Mobile Deep DivejQuery Mobile Deep Dive
jQuery Mobile Deep DiveTroy Miles
 
Happy Content Creators
Happy Content CreatorsHappy Content Creators
Happy Content CreatorsEric Aitala
 
Beautiful Maintainable ModularJavascript Codebase with RequireJS - HelsinkiJ...
 Beautiful Maintainable ModularJavascript Codebase with RequireJS - HelsinkiJ... Beautiful Maintainable ModularJavascript Codebase with RequireJS - HelsinkiJ...
Beautiful Maintainable ModularJavascript Codebase with RequireJS - HelsinkiJ...Mikko Ohtamaa
 
MVC way to introduce Sails.js - node.js framework
MVC way to introduce Sails.js - node.js frameworkMVC way to introduce Sails.js - node.js framework
MVC way to introduce Sails.js - node.js frameworkCaesar Chi
 
Kharkivpy#3: Javascript and Python backend
Kharkivpy#3: Javascript and Python backendKharkivpy#3: Javascript and Python backend
Kharkivpy#3: Javascript and Python backendMax Klymyshyn
 
7 tips for javascript rich ajax websites
7 tips for javascript rich ajax websites7 tips for javascript rich ajax websites
7 tips for javascript rich ajax websitesoazabir
 
Implementing Quality on Java projects
Implementing Quality on Java projectsImplementing Quality on Java projects
Implementing Quality on Java projectsVincent Massol
 
Using RequireJS for Modular JavaScript Code
Using RequireJS for Modular JavaScript CodeUsing RequireJS for Modular JavaScript Code
Using RequireJS for Modular JavaScript CodeThomas Lundström
 
JavaScript Modules Done Right
JavaScript Modules Done RightJavaScript Modules Done Right
JavaScript Modules Done RightMariusz Nowak
 
Arquitetura de Front-end em Aplicações de Larga Escala
Arquitetura de Front-end em Aplicações de Larga EscalaArquitetura de Front-end em Aplicações de Larga Escala
Arquitetura de Front-end em Aplicações de Larga EscalaEduardo Shiota Yasuda
 
eSynergy Andy Hawkins - Enabling DevOps through next generation configuration...
eSynergy Andy Hawkins - Enabling DevOps through next generation configuration...eSynergy Andy Hawkins - Enabling DevOps through next generation configuration...
eSynergy Andy Hawkins - Enabling DevOps through next generation configuration...PatrickCrompton
 
Architecting non-trivial browser applications (Jazoon 2012)
Architecting non-trivial browser applications (Jazoon 2012)Architecting non-trivial browser applications (Jazoon 2012)
Architecting non-trivial browser applications (Jazoon 2012)Marc Bächinger
 

Similar to Requirejs (20)

Intro to JavaScript Testing
Intro to JavaScript TestingIntro to JavaScript Testing
Intro to JavaScript Testing
 
RailsAdmin - Overview and Best practices
RailsAdmin - Overview and Best practicesRailsAdmin - Overview and Best practices
RailsAdmin - Overview and Best practices
 
mDevCamp - The Best from Google IO
mDevCamp - The Best from Google IOmDevCamp - The Best from Google IO
mDevCamp - The Best from Google IO
 
Beyond DOMReady: Ultra High-Performance Javascript
Beyond DOMReady: Ultra High-Performance JavascriptBeyond DOMReady: Ultra High-Performance Javascript
Beyond DOMReady: Ultra High-Performance Javascript
 
Building Next-Gen Web Applications with the Spring 3 Web Stack
Building Next-Gen Web Applications with the Spring 3 Web StackBuilding Next-Gen Web Applications with the Spring 3 Web Stack
Building Next-Gen Web Applications with the Spring 3 Web Stack
 
jQuery Mobile Deep Dive
jQuery Mobile Deep DivejQuery Mobile Deep Dive
jQuery Mobile Deep Dive
 
Happy Content Creators
Happy Content CreatorsHappy Content Creators
Happy Content Creators
 
Beautiful Maintainable ModularJavascript Codebase with RequireJS - HelsinkiJ...
 Beautiful Maintainable ModularJavascript Codebase with RequireJS - HelsinkiJ... Beautiful Maintainable ModularJavascript Codebase with RequireJS - HelsinkiJ...
Beautiful Maintainable ModularJavascript Codebase with RequireJS - HelsinkiJ...
 
MVC way to introduce Sails.js - node.js framework
MVC way to introduce Sails.js - node.js frameworkMVC way to introduce Sails.js - node.js framework
MVC way to introduce Sails.js - node.js framework
 
Single Page Applications
Single Page ApplicationsSingle Page Applications
Single Page Applications
 
Kharkivpy#3: Javascript and Python backend
Kharkivpy#3: Javascript and Python backendKharkivpy#3: Javascript and Python backend
Kharkivpy#3: Javascript and Python backend
 
7 tips for javascript rich ajax websites
7 tips for javascript rich ajax websites7 tips for javascript rich ajax websites
7 tips for javascript rich ajax websites
 
How we're building Wercker
How we're building WerckerHow we're building Wercker
How we're building Wercker
 
Implementing Quality on Java projects
Implementing Quality on Java projectsImplementing Quality on Java projects
Implementing Quality on Java projects
 
Using RequireJS for Modular JavaScript Code
Using RequireJS for Modular JavaScript CodeUsing RequireJS for Modular JavaScript Code
Using RequireJS for Modular JavaScript Code
 
Základy GWT
Základy GWTZáklady GWT
Základy GWT
 
JavaScript Modules Done Right
JavaScript Modules Done RightJavaScript Modules Done Right
JavaScript Modules Done Right
 
Arquitetura de Front-end em Aplicações de Larga Escala
Arquitetura de Front-end em Aplicações de Larga EscalaArquitetura de Front-end em Aplicações de Larga Escala
Arquitetura de Front-end em Aplicações de Larga Escala
 
eSynergy Andy Hawkins - Enabling DevOps through next generation configuration...
eSynergy Andy Hawkins - Enabling DevOps through next generation configuration...eSynergy Andy Hawkins - Enabling DevOps through next generation configuration...
eSynergy Andy Hawkins - Enabling DevOps through next generation configuration...
 
Architecting non-trivial browser applications (Jazoon 2012)
Architecting non-trivial browser applications (Jazoon 2012)Architecting non-trivial browser applications (Jazoon 2012)
Architecting non-trivial browser applications (Jazoon 2012)
 

Requirejs

  • 1. require.js a keynote information loader about a javascript module loader Wednesday, March 27, 13
  • 2. what is requires • a javascript module loader Wednesday, March 27, 13
  • 3. where to get it? • http://requirejs.org Wednesday, March 27, 13
  • 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.js Wednesday, March 27, 13
  • 5. why do I need it? Wednesday, March 27, 13
  • 6. why do I need it? • Web sites are turning into Web apps Wednesday, March 27, 13
  • 7. why do I need it? • Web sites are turning into Web apps • Code complexity grows as the site gets bigger Wednesday, March 27, 13
  • 8. why do I need it? • Web sites are turning into Web apps • Code complexity grows as the site gets bigger • Assembly gets harder Wednesday, March 27, 13
  • 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/modules Wednesday, March 27, 13
  • 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 calls Wednesday, March 27, 13
  • 11. how does it solve this? Wednesday, March 27, 13
  • 12. how does it solve this? • Some sort of #include/import/require Wednesday, March 27, 13
  • 13. how does it solve this? • Some sort of #include/import/require • ability to load nested dependencies Wednesday, March 27, 13
  • 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 deployment Wednesday, March 27, 13
  • 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 //util's dependencies have loaded, and the util argument will hold //the module value for "helper/util". }); Wednesday, March 27, 13
  • 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 //util's dependencies have loaded, and the util argument will hold //the module value for "helper/util". }); Wednesday, March 27, 13
  • 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 //util's dependencies have loaded, and the util argument will hold //the module value for "helper/util". }); Wednesday, March 27, 13
  • 18. writing a module, today (function ($) { function Foo() { // do stuff here! } new Foo(); }(jQuery)); Wednesday, March 27, 13
  • 19. writing a module, today var $ = require('jquery'); exports.myExample = function () { // do stuff here! }; Wednesday, March 27, 13
  • 20. writing a module, today++: AMD define('mod',function(){ return function() { this.boom = function () { alert( 'Boom' ); }; } } ); Wednesday, March 27, 13
  • 21. What is AMD? • Asynchronous Module Definition Wednesday, March 27, 13
  • 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. why is this good? • Easy to test, because modules are compartmentalized • Dependency Injection Wednesday, March 27, 13
  • 24. amd still handles this (function () { this.myGlobal = function () {}; }()); Wednesday, March 27, 13
  • 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. It’s easy! • http://requirejs.org/docs/why.html Wednesday, March 27, 13
  • 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 today Wednesday, March 27, 13
  • 28. Can run... • In the browser • In Node • In Rhino Wednesday, March 27, 13
  • 29. Using Closure Compiler • Means uses Java • Means using Rhino • r.js Wednesday, March 27, 13
  • 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 $1 Wednesday, March 27, 13
  • 31. Getting the Compiler • http://requirejs.org/docs/download.html#rjs Wednesday, March 27, 13
  • 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 $1 Wednesday, March 27, 13
  • 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 $1 Wednesday, March 27, 13
  • 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 $1 Wednesday, March 27, 13
  • 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 $1 Wednesday, March 27, 13
  • 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 $1 Wednesday, March 27, 13
  • 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 $1 Wednesday, March 27, 13
  • 38. How to compile? • jscompile path/to/app.build.js Wednesday, March 27, 13
  • 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. Alright stop... Let’s make sense of all these options by establishing our surroundings, namely, our project structure Wednesday, March 27, 13
  • 41. Our sample directory structure Wednesday, March 27, 13
  • 42. Our sample directory structure • r.js Wednesday, March 27, 13
  • 43. Our sample directory structure • r.js • webapp/ Wednesday, March 27, 13
  • 44. Our sample directory structure • r.js • webapp/ • app.html Wednesday, March 27, 13
  • 45. Our sample directory structure • r.js • webapp/ • app.html • scripts/ Wednesday, March 27, 13
  • 46. Our sample directory structure • r.js • webapp/ • app.html • scripts/ • app.build.js Wednesday, March 27, 13
  • 47. Our sample directory structure • r.js • webapp/ • app.html • scripts/ • app.build.js • app.build.dev.js Wednesday, March 27, 13
  • 48. Our sample directory structure • r.js • webapp/ • app.html • scripts/ • app.build.js • app.build.dev.js • main.js Wednesday, March 27, 13
  • 49. Our sample directory structure • r.js • webapp/ • app.html • scripts/ • app.build.js • app.build.dev.js • main.js • mod.js Wednesday, March 27, 13
  • 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. the module define('mod',function(){ return function() { this.boom = function () { alert( 'Boom' ); }; } } ); Wednesday, March 27, 13
  • 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. Compiled! whee! Wednesday, March 27, 13
  • 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.map Wednesday, March 27, 13
  • 55. Compiled with Source Maps closure: { CompilerOptions: {}, CompilationLevel: 'SIMPLE_OPTIMIZATIONS', loggingLevel: 'WARNING' }, generateSourceMaps: true, preserveLicenseComments: false Wednesday, March 27, 13
  • 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. testing define( 'mod', ['Profile'], function ( Profile ) { function mod() { this.boom = function () { return (new Profile()).mockTrueLol(); }; } return mod; } ); Wednesday, March 27, 13
  • 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.js Wednesday, March 27, 13
  • 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.js Wednesday, March 27, 13
  • 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.js Wednesday, March 27, 13
  • 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.js Wednesday, March 27, 13
  • 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. 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. (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. (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. (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. (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. (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. 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. 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. 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. PHPStorm Code and Compile Example They all worked before, honest! Wednesday, March 27, 13