The rdbhost_bootstrapper.js file, what is it for?

Each boilerplate bundle, for the modern JavaScript library, on RdbHost contains two JavaScript files, an app.js file and an rdbhost_bootstrapper.js file.

This post is a discussion of the latter.

Included here is the full text, a few lines at a time, with discussion:

 (function(undefined) {
  function hasPromises() {
     var e = window;
     return "Promise" in e &&
         "resolve" in e.Promise && "reject" in e.Promise &&
         "all" in e.Promise && "race" in e.Promise &&
         function () {
             var n; new e.Promise(function (e) { n = e });
             return "function" == typeof n;
         }()
  }
  function hasFetch() {
      return "fetch" in window;
  }

The first line is the beginning of an encapsulating self-executing-function. The next few lines are feature detection for Promises and fetch.

Note most paths represented here have been shortened for presentation. The actual file contains full paths, with http(s)://

  var $L = $LAB;

  if ( !hasPromises() )
       $L = $L.script('/es6-promises/dist/es6-promise.js').wait();
 if ( !hasFetch() )
       $L = $L.script('/fetch.js').wait();

The next few lines use the feature detection to conditionally load polyfills. These provide fetch or Promises to browsers that may not support them internally. Such browsers include notorious brands IE/Edge but also Firefox.

Notice the .wait() method call there. LABJS will load all requested scripts, as quickly as possible with parallel requests, but will execute them in a blocking order. The .wait() method tells LABJS to hold off executing later-named scripts until the previously named one has completed execution, even if the later-named scripts arrive earlier. In our case, we do not want the Promise dependent scripts running before the Promise is available.

function _init() {
    Rdbhost.connect(/*HOST_NAME*/'www.rdbhost.com',  
                    /*ACCOUNT_NUMBER*/1866);
    Rdbhost.use_labjs_loader($LAB);
};
if ( !window.Rdbhost || !window.Rdbhost.preauth ) {     
  $L = $L.script('/rdbhost/2.2/lib/js/util-bundle;rdbhost.js')
         .wait(_init);
} else {
  _init();
}

We test whether the Rdbhost module itself has been loaded, and load it if not. Either way, we then initialize the Rdbhost module with the correct server domain and user account. We also set $LABJS as the dynamic script loader; see more down this post.

 // -- uncomment these if you need them
 // if (!Rdbhost.Email)
 //   $L = $L.script('/rdbhost/2.2/lib/js/rdb2-emailing.js');
 // if (!Rdbhost.Authenticate)
 //   $L = $L.script('/rdbhost/2.2/lib/js/rdb2-authenticate.js');
 // if (!Rdbhost.Charge)
 //   $L = $L.script('/rdbhost/2.2/lib/js/rdb2-charge.js');

These RdbHost modules support emailing, credit-cards, and user authentication.

 // $L = $L.script('https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js');
 // $L = $L.script('https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js');
 // $L = $L.script('https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js');
 // $L = $L.script('https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js');
 $L = $L.script('https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js');
 $L = $L.script('https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js');
 // $L = $L.script('');

The next few lines include commonly used JavaScript libraries from their CDN homes. Uncomment those relevant to you.

 $L = $L.script('/rdbhost/2.2/lib/js/rdb2-livereload.js')
        .wait(function() {
           var preauth_for_reloader = Rdbhost.preauth();
           Rdbhost.activate_reloader(preauth_for_reloader);
     });    

This line includes RdbHost's own hot-reload feature, and initializes it by sending an SQL query to the server. Comment out if development is complete or you otherwise do not wish to use this.

 $L = $L.script('js/app.js').wait(function() {
       run();
    });

})();

Lastly, we load the script containing the actual app, and run it's run function.

Dynamic Loading

When we called the .use_labjs_loader() method, we enabled the dynamic-loading of scripts. If you have scripts that are rarely used in your app, you can leave them out of this file and your html script tags, and just load them when you need them. Usage would be like:

Rdbhost.loader('js/rarely_used.js', function() {
   var pi = window.Rarely.calculate_pi_100_digits();
});

The 'rarely_used.js' module would get loaded, and the anonymous function called. There is no coupling between the script and the function, it is assumed that the script will create (or augment) a global with new methods, that the anon function can call.

Bundling

The Rdbhost.Email section above includes tests, so the module loading only
happens if the test passes; if this 'rdbhost_bootstrapper.js' file is expected to load everything, why are we testing for prior loading?

Well, the server supports bundling, and your front-end build system, if you use one, can bundle as well. It is performant to bundle resources from a given server, so they download in one request; the overhead of an http network request is significant.

You could use a script tag like (without the line breaks):

<script src="https://www.rdbhost.com/vendor/labjs/LAB.js
    +/vendor/rdbhost/2.2/lib/rdbhost;util-bundle
    ;rdb2-emailing;rdbhost-bootstrapper.js"></script>

and five modules would be bundled and sent as one. When the bootstrapper file executes the rdbhost and rdb2-emailing module would already be loaded, and the tests would avoid reloading what's already there.

Minification

The source has lots of comments. You might be tempted to edit them out for efficiency. Don't bother, as there is also a server-side minifier. Just request the script with the 'min.js' extension, and it will be stripped of comments, excess whitespace, and other space wasters before sending.

<script src="https://www.rdbhost.com/vendor
    /rdbhost/2.2/lib/rdbhost-bootstrapper.min.js"></script>

You could also minify the bundled name in the section above, by use of '.min.js' at the end of the aggregated name, so it ends with 'mailing;bootstrapper.min.js">'.

Minifying and Bundling

comments powered by Disqus