Axway AMPLIFY Blogs

The Leading Resource for All THings Mobile & Data Integration

Titanium Tip: Secret Way to Add New Features to Titanium

12 Flares 12 Flares ×

This guest post was written by Brenton House. Brenton is a Senior Mobile Architect for Shockoe with over 20 years experience in mobile, API, and web development. He is active in the Titanium community and has worked with clients across various industries, including broadcasting, advertising, retail, financial services, transportation, and publishing. You can find more from him on the Slack Titanium Channel, Medium and Twitter. He also hosts the Titanium Fort Worth Meetup group – next meetup is Sep 14, 2017. This is the first in a series of tips Brenton plans to do for cross-platform native mobile app developers using Axway Titanium.

Time to step up your game with these hidden Titanium features!

There are all kinds of cool things that you can do with Axway Titanium and Alloy once you start using it a bit. One thing that just got a whole lot easier with a recent update to Alloy is the ability to hook into Alloy’s use of Babel (a JavaScript compiler). There are TONS of Babel plugins and presets out there, and it is also fairly easy to write your own.

NOTE: This feature does require using Alloy 1.10+. At the time of this publication, that version is not yet included in the Appcelerator bundle but can be installed using: npm install -g alloy@1.10.3

UPDATE: I’ve changed the JavaScript code for alloy.jmk to use ES5 code. You can use ES6+ code in alloy.jmk (and other Node.js scripts) if you are using Node.js 6.x+

To get things started lets try using Babel to do something that Babel is pretty popular for…

Adding ES2016/ES2017 support to your app

Say, for example, you wanted to use ES6/ES2016/ES2017 in your code today. Full ES6 support is coming soon to Titanium but you can get started using it today with these easy steps:

UPDATE: The latest versions of Titanium and Alloy fully support ES6. Future versions of Studio will add ES6 support to LiveView

  1. Create a file called alloy.jmk in your app directory (if that file doesn’t already exist).
  2. Add the following code to alloy.jmk:
    
    var sourceMapper = require('./sourceMapper');
    var paths = require('global-paths');
    var projectDirectory;
    var logger;
    
    function resolver(moduleName) {
    	return require(require('resolve').sync(moduleName, {
    		basedir: projectDirectory,
    		paths:   paths(),
    	}));
    }
    
    task('pre:load', (event, alloyLogger) => {
    	logger = alloyLogger;
    	projectDirectory = event.dir.project;
    
    	sourceMapper.OPTIONS_OUTPUT.presets = sourceMapper.OPTIONS_OUTPUT.presets || [];
    	sourceMapper.OPTIONS_OUTPUT.presets.push(resolver('babel-preset-env'));
    
    });
    
  3. In the root of your project, run: npm install babel-preset-env
  4. Run your project and enjoy!

Well, that was easy! Let’s try something a little more interesting…

Allowing controller arguments to be used as parameters to child views/controllers.

So say now you want to do something like this in your controller xml:


<Alloy>
	<Label id="label" text="$.args.title" />
</Alloy>

Which generates JavaScript similar to this:


$.__views.label = Ti.UI.createLabel({ id: "label", text: "$.args.title" });

But what you REALLY want is code like this:


$.__views.label = Ti.UI.createLabel({ id: "label", text: $.args.title});

Sooo… we go back to our alloy.jmk file and add this call:


	sourceMapper.OPTIONS_OUTPUT.presets.push({
		plugins: [
			[ resolver('babel-plugin-titanium-controller-args') ],
		],
	});

We also add this plugin to our project: npm install babel-plugin-titanium-controller-args

BAM!

The babel plugin: titanium-controller-args (written by yours truly) converts the string literals in your parameters that start with “$.args.” and converts them to variables.

Our generated code now looks like we wanted it to:


$.__views.label = Ti.UI.createLabel({ id: "label", text: $.args.title});

Now you can pass in the title to your controller with code like this:


var myController = Alloy.createController("index", { title: "This is so awesome!" });

You may have noticed that we wrapped our plugin in a preset object. We need to do this for now but keep your eyes on this feature: (https://jira.appcelerator.org/browse/TIMOB-24980) because once it is implemented, this whole process will get even easier!!

But wait! There’s more!!

Ideas are now materializing in your head. But can I do _____? Why yes! You can!

What if I want to remove all the console statements out of my code?

You can add this plugin! https://www.npmjs.com/package/babel-plugin-transform-remove-console

If you need more ideas, take a look at some of the Babel plugins already written or better yet, try writing one of your own! The source code for babel-plugin-titanium-controller-args (try saying that 5 times real fast!) is located here: https://github.com/brentonhouse/babel-plugin-titanium-controller-args

OK. I’ve been Babel-ing on long enough…

Stay tuned for more exciting mobile development tips!

12 Flares Twitter 0 Facebook 0 Google+ 0 LinkedIn 12 Email -- 12 Flares ×

4 Comments

  1. B

    Well i guess most of this stuff is not something that developers should hack into titanium themselves but it should have become part of titanium 3 years ago.

    Personally I havent considered using Babel yet because I’m unsure of the implications for the build-time and overall development time

    • I wouldn’t really consider it “hacking” since it uses extensibility points created by Axway to allow hooking into the build process.

      And you should really look into Babel!! This is a HUGE feature that Axway has already integrated into the build process and opens the door for so many features! If you are using the latest Alloy, you are already benefiting from them upgrading the old parser (uglifyjs) and replacing it with babel!

  2. thank you for sharing and narration.

  3. It is really powerful all that stuff.

    I will probably wait for native Ti ES6 support (I’m not in a hurry), but all the other possibilities… are great!

Comments are closed.

computer and tablet showing Appcelerator software
Start free, grow from there.
12 Flares Twitter 0 Facebook 0 Google+ 0 LinkedIn 12 Email -- 12 Flares ×