Deliteful Tutorial (Part 8) - Building the Application for Production

We finished the development part of our example by adding a settings view.

If you open the debugging tools in your browser (usually F12), and look at the network traffic when you load the app, you will see a lot of HTTP requests to load each individual source file (.js, .css, ...). This is OK while developing but when you deploy your application for production you will want to reduce the number and size of the HTTP requests so that your app loads as quickly as possible. We will now learn two alternative ways of doing this: using build versions of the dependency packages, or, even better, building the application code and its dependencies into a single layer file.

Warning: If you want to follow both ways, you should make a backup of the application now to easily revert the changes made for the build.

Using Build Versions of Dependency Packages

If you have chosen to get the tutorial application from the ibm-js/deliteful-tutorial project, switch to the part8-1 branch now: $ git checkout part8-1

In the first step of the tutorial we chose to use the source versions of the dependency packages, since this is usually easier for debugging and looking around in the code:

[?] Do you want to use build version of deliteful package (instead of source version)? No

We could have answered y, in that case the application would use the build version of all packages on which our application depends. Build versions are functionally equivalent but are packed into single layer files, which reduces the number and size of HTTP requests.

Let's change our app to use build versions, as if we had answered y to the question above. If you chose to use build versions from the beginning, you wouldn't need to do this of course.

First, we need to tell bower that we want to use build versions, not source versions. For this, we simply change deliteful into deliteful-build in the bower.json file:

{
    ...
    "dependencies": {
        "deliteful-build": "0.4.x",
        ...
}

Run bower again to load the build packages:

$ bower install

Now we need to slightly modify our code to use the build packages. In index.html, wrap the existing require(["js/app"]) call inside another require call that loads the deliteful layer:

// Load the minified layer.
require(["deliteful-build/layer"], function () {
    // Start the application.
    require(["js/app"]);
});

Finally, change the path of the defaultapp.css stylesheet that we load directly from the delite package:

<link rel="stylesheet" href="bower_components/delite-build/themes/defaultapp.css">

(as the build version of the delite package is now contained in bower_components/delite-build instead of bower_components/delite).

Good, our app now uses build packages. It works the same, except it makes much less HTTP requests and loads faster.

Run the Demo

Click here to see the live demo of the optimized app using build versions of the dependency packages: Deliteful Tutorial - Part 8.1

Building the Application Into a Single Layer

If you have chosen to get the tutorial application from the ibm-js/deliteful-tutorial project, switch to the part8-2 branch now: $ git checkout part8-2

If you followed the steps explained in previous section, you need to restore the application as it was at the end of step 7.

We reduced the load time of our app, that's good, and it may be enough for many apps. But we can do even better by generating a single .js file that will contain all the code of our app plus its dependencies. For this, we will use the ibm-js/grunt-amd-build project, which provides a Grunt plugin that can generate our layer. The grunt-amd-build plugin is really powerful and flexible and provides many options, so to make things really easy, we will use another Yeoman generator, ibm-js/generator-amd-build, that will do the hard work for us.

Note: Because of a known problem with requirejs-dplugins/jquery, you need to add the following map property as a temporary workaround in the config section of index.html:

<script>
    require.config({
        baseUrl: "bower_components",
        ...,
        map: {
            jquery: {
                "jquery/src/selector": "jquery/src/selector-native"     // don't pull in sizzle
            }
        }
    });
    require(["js/app"]);
</script>

So let's install ibm-js/generator-amd-build first:

$ npm install -g generator-amd-build

and run it:

$ yo amd-build

The generator asks some questions, accept all the defaults.

Our generator has created a Gruntfile.js that contains the configuration information for our build.

Let's run Grunt now to actually generate our layer:

$ grunt build

The output of the build is in the build directory, which now contains all the code and dependencies that we need, so we need to modify our index.html as follows:

<script>
    require.config({
        baseUrl: "build/bower_components",
        ...
    });
    require(["js/app"]);
</script>

If you launch the application now and look at the browser's debugger, you should see a minimal set of HTTP requests. Our application is now fully optimized!

Run the Demo

Click here to see the live demo of the fully optimized app: Deliteful Tutorial - Part 8.2

Congratulations!

You have now completed this deliteful tutorial. More documentation and examples are available on the deliteful web site.

Previous Step - The Settings View