<commit_before>---
layout: default
title: Deliteful Tutorial Part 8
---
#Deliteful Tutorial (Part 8) - Building the Application for Production

We finished the development part of our example by adding a [settings view](Part7SettingsView.md).

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, and, even better, building the application itself.

##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](Part1GettingStarted.md) 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 functionnally 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. 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 (the dependency manager) that we want to use build versions,
not source versions. For this, we simply change `deliteful` into `deliteful-build` in the `bower.json` file:

```js
{
	...
	"dependencies": {
		"deliteful-build": "0.3.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 `js/app.js`,
wrap the existing `require` call inside another `require` call that loads the deliteful layer:

```js
require(["deliteful-build/boot"], function () {
	require([
		"delite/register", ...
	], function (register, ...) {
        ...
    });
});
```

Finally, modify `index.html` to change the path of a stylesheet that we load directly from the `delite` package:

```html
    <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:
[Deliteful Tutorial - Part 8.1](http://ibm-js.github.io/deliteful-tutorial/runnable/part8-1/index.html)

##Building the Application Into a Single Layer
<commit_msg>minor rephrasing<commit_after>---
layout: default
title: Deliteful Tutorial Part 8
---
#Deliteful Tutorial (Part 8) - Building the Application for Production

We finished the development part of our example by adding a [settings view](Part7SettingsView.md).

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.

##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](Part1GettingStarted.md) 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 functionnally 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 aboce. 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:

```js
{
	...
	"dependencies": {
		"deliteful-build": "0.3.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 `js/app.js`,
wrap the existing `require` call inside another `require` call that loads the deliteful layer:

```js
require(["deliteful-build/boot"], function () {
	require([
		"delite/register", ...
	], function (register, ...) {
        ...
    });
});
```

Finally, modify `index.html` to change the path of the `defaultapp.css` stylesheet that we load directly from the
`delite` package:

```html
    <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:
[Deliteful Tutorial - Part 8.1](http://ibm-js.github.io/deliteful-tutorial/runnable/part8-1/index.html)

##Building the Application Into a Single Layer

{'fraction_non_alphanumeric': 0.08438287153652393, 'fraction_numerical': 0.005037783375314861, 'mean_word_length': 4.18189233278956, 'pattern_counts': {'":': 4, '<': 5, '<?xml version=': 0, '>': 7, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6930429', 'n_tokens_mistral': 1788, 'n_tokens_neox': 1710, 'n_words': 895}