Titanium

Give your Titanium App a Turbo Boost – Part 1

Add more power to your mobile apps by tapping into custom code.

Titanium is one of the first cross-platform native solutions for building mobile apps. There are several different frameworks that can be used with Titanium and a bonus way – that you may not have known about before.

  • Classic Titanium
  • Titanium Alloy
  • Titanium + Angular
  • Titanium + Vue
  • B.Y.O.F (Bring Your Own Framework)

Classic Titanium

Classic Titanium is the core JavaScript framework that is supported out-of-the-box by the Titanium SDK. This is also what all the other frameworks are built upon.

Titanium Alloy

Titanium Alloy came next, adding an MVC framework and a lot of helpers to make building Titanium apps even easier.

Angular and Vue

Next, we had Titanium+Angular as well as Titanium+Vue. These two frameworks were added last year and allow you to use the popular Angular and Vue JavaScript frameworks to create native mobile apps with Titanium.

All of the previous frameworks are running on top of Titanium and were built by the Axway Engineering Teams. But as you know, these are all open-source projects and can be used, modified, and extended! Titanium provides hooks into the build process to allow you to use existing plugins or create your own!

B.Y.O.F. (Bring Your Own Framework)

So, how would I go about using something custom? Let’s start with a simple example. Say you are using one of these tools to build your Titanium app:

  • Titanium CLI – The open-source tool for creating cross-platform native apps. This tool does not require a login.
    npm install -g titanium

     

  • Appcelerator CLI –  The bundle that includes both Titanium and Alloy and allows access to paid modules. This tool does requires you to authenticate.
    npm install -g appcelerator

But, you have a need to use a specific version of Alloy with your project. By default, Titanium CLI uses the globally installed Alloy and Appcelerator CLI uses the version of Alloy bundled with it.

  1. Inside your project directory, run this to use npm to create a default package.json file.
    npm init --yes

     

  2. Next, let’s install a plugin that tells Titanium to use a locally installed version of Alloy. This plugin is installed as node module via npm.

    NOTE: It is safe to have this plugin installed even if you don’t have a local version of Alloy installed. It will use the default Alloy install if a local version is not found.

    npm install --save-dev @titanium/plugin-alloy-local

     

  3. Now, let’s install Titanium Alloy locally. For this example, we are going to install the latest version:
    npm install --save-dev alloy

    But, you could just as easily install a specific version of Titanium Alloy locally:

    npm install --save-dev alloy@1.13.7

Here’s where it gets even more fun! Suppose you have forked a version of Alloy that is customized for you. Instead of installing one of the published versions (as seen in the above step), we can use npm to install from a GitHub repo:

npm install --save-dev brentonhouse/alloy

This is a GitHub fork of Alloy (https://github.com/brentonhouse/alloy) that doesn’t do anything extra but you get the idea.

The nice thing about using a locally installed Alloy is that it will work with your Continuous Integration (CI) servers as well, since you are specifying the version of Titanium Alloy and are not dependent on a globally installed Alloy or bound to the version of Alloy that is included with the Appcelerator CLI tool.

Your options are now limitless as you can use existing frameworks, build upon those libraries, or create and use your own framework! Let your imagination run wild and let us know what awesome ideas you come up with!

In Part 2, I’ll give you a concrete (and very cool!) example of using this technique to add more functionality to an app and more power to your mobile development team!