Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Bootstrapping Your Web App Front-End Code

DZone's Guide to

Bootstrapping Your Web App Front-End Code

· Web Dev Zone
Free Resource

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

While delivering a one-day workshop about different JavaScript libraries (jQuery, RequireJS, SammyJS, and more), I was asked how to start my web app front-end code. This post will explain the question, and later on will show you a code template that I sometimes use in projects.

Web App Front-End Bootstrapping?

When dealing with Single Page Apps (SPAs), or even just webpages with a lot of JavaScript code, you will have to start your code and sometimes do things like initializing components, modules, views, etc. It’s just like running a main method in a console application. One of the implementations that I see from time to time is just using the jQuery ready function or DOMContentLoaded event handler to handle all the initialization aspects. That means that the callbacks in those functions become very long, bloated, and unmaintainable. Another problem with this implementation is that sometimes we don’t want to wait until the DOM is loaded to run an initialization code.

So what can we do about that? Introduce a bootstrapper object.

Bootstrapper Object Simple Implementation

A bootstrapper object is just a simple JavaScript object that is used to bootstrap code. The following code shows how to define a simple bootstrapper object:

var Bootstrapper = function () {
};

Bootstrapper.prototype.run = function () {                
   // This function is used to run the initialization code
}

As you can see, you create a constructor function and add a run function to its prototype. In the run function, you can run code to bootstrap your front-end. Here is the same template but with some more implementation:

var Bootstrapper = function () {
};

Bootstrapper.prototype.initLogger = function () {
    // init your logger
}

Bootstrapper.prototype.run = function () {                
    this.initLogger();

    /// TODO: if needed run other bootstrapping things here before $(document).ready

    $(document).ready(function () {

        /// TODO: create the bootstrappeing functionality after the DOM was loaded
        app.logger.debug("Start running!");
    });
}

In the previous code, you can see that you can put code before you bind the jQuery ready function in order to avoid waiting for the DOM to be loaded.

A Bootstrapper Object with RequireJS

RequireJS helps to define modules in your app and load module dependencies. For more information about the RequireJS library, you can go to a previous post I wrote. We can use RequireJS to wrap the code we saw earlier into a module in the app, like in the following code sample:

define(['jquery'], function ($) {
    var Bootstrapper = function () {
    };

    Bootstrapper.prototype.initLogger = function () {
        // init your logger
    }

    Bootstrapper.prototype.run = function () {                
        this.initLogger();

        /// TODO: if needed run other bootstrapping things here before the wireup of $(document).ready

        $(document).ready(function () {
            /// TODO: create the bootstrappeing functionality after the DOM was loaded
            app.logger.debug("Start running!");
        });
    }

    return new Bootstrapper();
});

As you can see, you define the bootstrapper object as a module and return a single object instance, as there can only be one bootstrapper in the app. In the file that RequireJS points to as the app starting point, you can write the following code, which assumes that the boostrapper module is located in app/bootstrapper file:

requirejs.config({
    // configure RequireJS
});

require(['app/bootstrapper'], function (bootstrapper) {
    bootstrapper.run();
});

The suggested implementation can also become bloated over time, especially when the app becomes bigger with a lot of initialization code. When that happens, you can divide the bootstrapper object into smaller bootstrap objects. Each of the bootstrap objects will deal with only one aspect of initialization and will be called from a main bootstrap object.

Summary

A bootstrapper object is just a JavaScript object that holds your web app code initialization. Having a bootstrapper object can help you separate the app initialization to a different module, which can be more maintainable and testable. This post showed you a simple implementation for a bootstrap object, and you can find other implementation options on the web.

Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.

Topics:

Published at DZone with permission of Gil Fink, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}