Give your Titanium App a Turbo Boost — Part 1
Add more power to your mobile apps by tapping into custom code
Titanium Mobile is one of the first and most mature cross-platform native solutions for building mobile apps. There are several different frameworks that can be used 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 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!
What tools do I use to build my 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
- Titanium Alloy — The open-source MVC framework for use with Titanium.
- Appcelerator CLI — A bundle that includes both Titanium and Alloy and allows access to paid modules. This tool does requires you to authenticate.
npm install -g appcelerator
So how would I go about using something custom?
Let’s start with a simple example. Say you are using the open-source Titanium CLI or the Appcelerator CLI to build a mobile app, 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
Now here is 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 locally install 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 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 of this series, I will give you a concrete (and very cool!) example of using this technique to add more functionality to app and more power to your mobile development team!