Commanding 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, for convenience, we'll repeat how to get the NPM and TRIRIGA tools, and we'll list all of the NPM-based tools in one place.

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

Commanding UX (Polymer 3): Managing your UX view with NPM-based tools

By Jay Manaloto

I. 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-template
npm install @tririga/tri-template -g
This command installs the tri-template tool.
tri-template

This is a simple tool that generates UX view skeletons from available templates. This tool resembles the WebViewSync addview -s starter view command. If you're curious, feel free to check out the tri-template options and details.

See: https://www.npmjs.com/package/@tririga/tri-template

tri-proxy
npm install @tririga/tri-proxy -g
This command installs the tri-proxy tool.
tri-proxy

This is a simple tool that serves UX views from your local file system and proxies all other view files and calls to a TRIRIGA server. This tool resembles the WebViewSync sync -a command, but provides a continuous preview (after each file save) without permanent changes. If you're curious, feel free to check out the tri-proxy options and details.

See: https://www.npmjs.com/package/@tririga/tri-proxy

tri-deploy
npm install @tririga/tri-deploy -g
This command installs the tri-deploy tool.
tri-deploy

This is a simple tool that deploys UX views to a TRIRIGA server. It updates the UX view files on the server with the files from the specified local directory, and deletes any files on the server that does not exist in the local directory. This tool resembles the WebViewSync push or sync -a command, but provides a one-time action (not continuous) with permanent changes. If you're curious, feel free to check out the tri-deploy options and details.

See: https://www.npmjs.com/package/@tririga/tri-deploy

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.

See: https://www.npmjs.com/package/@tririga/tri-pull

tri-polymer-upgrade
npm install @tririga/tri-polymer-upgrade -g
This command installs the tri-polymer-upgrade tool.
tri-polymer-upgrade

This is a simple tool that automatically converts TRIRIGA UX views, UX components, and UX apps from Polymer 1 to Polymer 3. If you're curious, feel free to check out the tri-polymer-upgrade options and details.

See: https://www.npmjs.com/package/@tririga/tri-polymer-upgrade

tri-vulcanize
npm install @tririga/tri-vulcanize -g
This command installs the tri-vulcanize tool.
tri-vulcanize

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

See: tri-vulcanize

The tri-vulcanize tool is designed specifically for Polymer 1 only.

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.

See: https://www.npmjs.com/package/@tririga/tri-bundler

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

II. 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.