Bundling UX (Polymer 3)

Still here? If you're ready for yet another serving, I admire your appetite! In my previous articles, we explored the concepts, built a simple UX application, and extended it with new fields, buttons, dialogs, toasts, and ways to manipulate records. This time, we'll discuss why you should bundle your custom UX apps, and how to bundle your UX view into a single component file.

Tip: What is UX? The standard definition of "UX" is user experience. But for simplicity, I'll refer to the TRIRIGA UX framework as "UX".
Note: For more about Polymer 3, see the Polymer website at www.polymer-project.org. For more about Node.js, see the NPM website at www.npmjs.com.

Contents

Bundling UX (Polymer 3): Packaging your UX view into a single component file

By Jay Manaloto

I. Why should we bundle our UX apps?

A typical IBM TRIRIGA UX app might initially load hundreds of resource files which translate to the same number of HTTP requests from the server to the browser. This remains true in successive requests of these resources even if they are already cached by the browser. The browser still makes the same number of HTTP requests to the server, then waits for the server response to either load it from the cache or from the latest version from the server. This high number of HTTP requests can be costly and can negatively impact the performance of your UX app.

One way to cut down this cost is to concatenate or "bundle" these web resources into a single production file. For Polymer 1, we used the tri-vulcanize tool. But for Polymer 3, we're using the tri-bundler tool.

Note: The tri-bundler tool is designed specifically for Polymer 3. To be clear, our UX framework supports both Polymer 1 and Polymer 3 UX apps. Both types of UX apps can coexist together in the same environment. But if you're interested in converting your own custom UX apps from Polymer 1 to Polymer 3, see the tri-polymer-upgrade tool. Be aware that this tool is not officially supported at this time.

II. How do we get the NPM and TRIRIGA tools?

Contact your IBM TRIRIGA representative or business partner if you cannot access the download location of the Node.js Package Manager (NPM) tool. This NPM tool is used to install several TRIRIGA tools which allow you to populate the JavaScript (JS) files in your view metadata, preview your JS changes, and sync (deploy) your JS changes with the JS files in your TRIRIGA environment. Be aware that these tools are not officially supported at this time.

Download and install the Node/NPM file. For example: node-v8.12.0-x64.msi.

Next, open your command prompt. Run the following NPM commands to install the following TRIRIGA tools.

If you see any NPM-related warnings (optional, unsupported, or deprecated), you can ignore them.

a. TRIRIGA Tools

Tool Description
tri-pull
npm install @tririga/tri-pull -g
This command installs the tri-pull tool.
tri-pull
This is a simple tool that pulls UX views from a TRIRIGA server. It updates the UX view files in the executed local directory with the files from the server. This tool resembles the WebViewSync pull command. If you're curious, feel free to check out the tri-pull options and details.
tri-bundler
npm install @tririga/tri-bundler -g
This command installs the tri-bundler tool.
tri-bundler

This is a simple tool that bundles a TRIRIGA UX view in Polymer 3 into a single output component file. This tool resembles the tri-vulcanize tool in Polymer 1. If you're curious, feel free to check out the tri-bundler options and details.

The tri-bundler tool is designed specifically for Polymer 3.

b. NPM > Install TRIRIGA Tool

Example of installing the TRIRIGA tools

c. NPM > tri-bundler

Example of using tri-polymer-upgrade

III. How do we use tri-bundler?

Step 1: Pull your view from the server

First, open your command prompt.

To pull your view files from the server, run the following tri-pull command: tri-pull -u username -p password --url http://[hostname:port][/context_path] -v view-exposed-name where -u applies your TRIRIGA username, -p applies your TRIRIGA password, --url defines the server URL, -v defines your view, and view-exposed-name is the exposed name of your view (with the dash).

Step 2: Bundle your view into a single JS file

Next, in your command prompt, change directory to the folder of the pulled view files that you want to bundle.

To bundle your view files from this folder, run the following tri-bundler command: tri-bundler -u username -p password --url http://[hostname:port][/context_path] -v view-exposed-name --component view-exposed-name-dev.js --output view-exposed-name.js where -u applies your TRIRIGA username, -p applies your TRIRIGA password, --url defines the server URL, -v defines your view, view-exposed-name is the exposed name of your view (with the dash), --component defines the root component filename of your view, and --output defines the output component filename that is generated for your view.

Step 3: Deploy your view to the server

Next, return to the command prompt in the same folder of the pulled and bundled view files.

To deploy (or push) your view files to the server, run the following tri-deploy command: tri-deploy -t http://[hostname:port][/context_path] -u username -p password -v view-exposed-name where -t targets the server URL, -u applies your TRIRIGA username, -p applies your TRIRIGA password, -v defines your view, and view-exposed-name is the exposed name of your view (with the dash).

Note: If your environment implements a firewall, the tri-deploy command must include 2 additional options and their values, where --basicuser applies the username for basic authentication, and --basicpassword applies the password for basic authentication. Feel free to check out the tri-deploy options and details.

IV. Still confused or curious?

If you have any questions about UX that weren't answered in this article, feel free to reach out to your IBM TRIRIGA representative or business partner. Or if you want, I'll go ask the team.