Loadrunner Dependency Management,      Script Loader
An Introduction
EventsEvery JavaScript developer is familiar withEvents."When X happens, do Y"X.bind(happens, function() {    Y();});
DependenciesA Dependency says:"Wait for X before doing Y"
Yes, ok,that sounds the same.
Wait for X before doing YTwo key differences:   1. Y only gets fired once.   2. If X has already happened, Y fires      imme...
Script LoadingScript loading is a type of DependencyProblem.For example,"Wait for jQuery before doing Ajax"This could be r...
usingLoadrunner specifies dependencies with theusing function:using(/lib/jquery.js,   function() {     $.ajax({ … });   });
using(multiple)We can depend on multiple scripts this way:using(   /lib/jquery.js,   ‘plugin.js’,   function() {     $.aja...
using(sequence)We can also require that scripts are loadingin sequence, by passing an array.eg., Load jQuery, then jQuery ...
AsynchronousSince Loadrunner has to wait for thedependencies to be fulfilled, the "using"function makes your code asynchron...
[Asynchronous]Unless the scripts have already been loaded.using(/lib/jquery.1.7.js,   function() {     console.log(1);    ...
Awesome?This script dependency loader is awesome,but we can see two problems with it.1. Scripts must load into the global ...
For example, if ‘api.js’ is:using(/lib/jquery.1.7.js,  function() {     window.api = {};     api.wizardry = function() {  ...
API readyBesides script loading, there are lots ofreasons why the API might take time to beready:•   Creating DOM nodes, l...
ModulesWe can solve these problems by wrappingour scripts as Loadrunner "modules".To create a module, we wrap our script i...
For example:provide(function(exports) {  using(/lib/jquery.1.7.js,    function() {      var api = {};      api.wizardry = ...
We can now depend on the result of thismodule in our using statement:using.path = /js;using(api, function(api) {  api.wiza...
WinModules make life really easy.using(‘sizzle’,api,‘animation’,   function($, api, anim) {     anim($(‘#thing’), api.text...
Collecting paramsIf you like, you can collect parametersusing(‘sizzle’,api,‘animation’)  .as(     function(all) {       al...
Collecting paramsOr mix techniquesusing(‘sizzle’,api,‘animation’)  .as(     function(all, $, api, anim) {       all.animat...
Module-ifyScripts like jQuery aren’t provided asmodules, but we can make a module thattakes advantage of their noConflict m...
FoldersModules can make our JS folder readable.>lsloadrunner.jslib/jquery.jsimports/jquery.jsapi/api.jsapi/iframe_loader.j...
HTMLLoadrunner can be loaded with dataattributes.<script src=”loadrunner.js” data-path=”/js” data-main=”main.js” />Path is...
Summary
• Use Loadrunner modules as much as you  can.• Only export your module when it’s ready.• Watch out for asynchronous functi...
Go forth and load.
Upcoming SlideShare
Loading in …5
×

Loadrunner

3,062 views

Published on

Work in progress.

Not HP Loadrunner, not Mercury Loadrunner.
This Loadrunner: https://github.com/danwrong/loadrunner

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

  • Be the first to like this

No Downloads
Views
Total views
3,062
On SlideShare
0
From Embeds
0
Number of Embeds
774
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Loadrunner

  1. 1. Loadrunner Dependency Management, Script Loader
  2. 2. An Introduction
  3. 3. EventsEvery JavaScript developer is familiar withEvents."When X happens, do Y"X.bind(happens, function() { Y();});
  4. 4. DependenciesA Dependency says:"Wait for X before doing Y"
  5. 5. Yes, ok,that sounds the same.
  6. 6. Wait for X before doing YTwo key differences: 1. Y only gets fired once. 2. If X has already happened, Y fires immediately.You are already familiar with this behaviourfor “document ready”.
  7. 7. Script LoadingScript loading is a type of DependencyProblem.For example,"Wait for jQuery before doing Ajax"This could be rephrased as:"using jQuery, do Ajax"
  8. 8. usingLoadrunner specifies dependencies with theusing function:using(/lib/jquery.js, function() { $.ajax({ … }); });
  9. 9. using(multiple)We can depend on multiple scripts this way:using( /lib/jquery.js, ‘plugin.js’, function() { $.ajax({ … }); });
  10. 10. using(sequence)We can also require that scripts are loadingin sequence, by passing an array.eg., Load jQuery, then jQuery UI.using([ /lib/jquery.js, ‘/lib/jquery.ui.js‘ ], function() { $.ajax({ … }); });
  11. 11. AsynchronousSince Loadrunner has to wait for thedependencies to be fulfilled, the "using"function makes your code asynchronous.console.log(1);using(/lib/jquery.1.7.js, function() { console.log(2); });console.log(3);// => 1, 3, 2
  12. 12. [Asynchronous]Unless the scripts have already been loaded.using(/lib/jquery.1.7.js, function() { console.log(1); using(/lib/jquery.1.7.js, function() { console.log(2); } console.log(3); });// => 1, 2, 3
  13. 13. Awesome?This script dependency loader is awesome,but we can see two problems with it.1. Scripts must load into the global scope.2. It waits for the script to load, but does not wait for the functions to be ready.
  14. 14. For example, if ‘api.js’ is:using(/lib/jquery.1.7.js, function() { window.api = {}; api.wizardry = function() { alert(Wahoo); }; })});The ‘api’ won’t be ready when we want it:using(/js/api.js, function() { api.wizardry();});“ReferenceError: api is not defined”
  15. 15. API readyBesides script loading, there are lots ofreasons why the API might take time to beready:• Creating DOM nodes, like iframes.• Ajax communications• setTimeouts• Animation
  16. 16. ModulesWe can solve these problems by wrappingour scripts as Loadrunner "modules".To create a module, we wrap our script in aprovide function.
  17. 17. For example:provide(function(exports) { using(/lib/jquery.1.7.js, function() { var api = {}; api.wizardry = function() { alert(Wahoo); }; exports(api); }); });});The provide function uses exports to declarewhen it is ready, and return the object itcreated.
  18. 18. We can now depend on the result of thismodule in our using statement:using.path = /js;using(api, function(api) { api.wizardry();});We state the dependency in a different way:we leave off the ".js" extension to tellLoadrunner that we want a module.The callback function receives a parameterapi that contains the result of the modulesexports object.
  19. 19. WinModules make life really easy.using(‘sizzle’,api,‘animation’, function($, api, anim) { anim($(‘#thing’), api.text); });
  20. 20. Collecting paramsIf you like, you can collect parametersusing(‘sizzle’,api,‘animation’) .as( function(all) { all.animation(all.api.text); } );
  21. 21. Collecting paramsOr mix techniquesusing(‘sizzle’,api,‘animation’) .as( function(all, $, api, anim) { all.animation(api.text); } );
  22. 22. Module-ifyScripts like jQuery aren’t provided asmodules, but we can make a module thattakes advantage of their noConflict mode.provide(function(exports) { using(‘/lib/jquery.js’, function() { exports(jQuery.noConflict()); } );});
  23. 23. FoldersModules can make our JS folder readable.>lsloadrunner.jslib/jquery.jsimports/jquery.jsapi/api.jsapi/iframe_loader.jsanim/animation.js
  24. 24. HTMLLoadrunner can be loaded with dataattributes.<script src=”loadrunner.js” data-path=”/js” data-main=”main.js” />Path is the folder of your Loadrunnermodules (defaults to path containingloadrunner.js).Main is the first script to execute.
  25. 25. Summary
  26. 26. • Use Loadrunner modules as much as you can.• Only export your module when it’s ready.• Watch out for asynchronous functions.
  27. 27. Go forth and load.

×