Titanium Workflow: Maximize your productivity
Original post date Jul29th, 2013
In a previous post, I discussed setting up Sublime Text, IntelliJ IDEA and MakeTi for a Titanium development workflow to be used as an alternative to Titanium Studio. With the release of Titanium 3.0, MakeTi is no longer needed as you can now use the Titanium CLI for creating, building and packaging apps.
Now that I’ve moved over to the CLI, I thought others might be interested in a workflow using the CLI along with some additional tools to increase productivity with Titanium development. Namely, TiShadow, Ti Inspector, and b2i. I’ll revisit the set up on IntelliJ IDEA and Sublime Text since a few things have changed.
Terminal Set Up
If you are going to use the CLI it helps to have a good terminal setup. I’ve found that iTerm2 with Z Shell and the oh-my-zsh framework is a nice way to go. iTerm2 is a better terminal than the built-in Mac version (profiles alone make that true) and oh-my-zsh gives you a good way to manage your Z Shell config with a rich set of plugins and a bunch of themes to customize the look and feel.
iTerm2 with Z Shell and oh-my-zsh
iTerm2 defaults to Bash shell, so to launch with Z Shell, simply change the command in profile preferences as pictured:
To install oh-my-zsh just follow the github readme and you should be good to go.
Note: Without the -i flag, opening terminals can be a bit sluggish as the default is a login shell. This speeds things up significantly.
To increase productivity with iTerm, you can take advantage of the profiles feature. Profiles allows saving connection and custom settings for each terminal which can be quickly accessed with a keyboard shortcut. This is super useful for regularly connecting to multiple servers on a daily basis. Bonus points: Go the extra mile and set up public/private keys for every remote server and never again waste time logging in.
Titanium CLI
Follow the instruction here to get the Titanium CLI installed.
One of the nice things about the Titanium CLI is that it helps break the dependency on Titanium Studio if you prefer other tools. This is because in addition to building, deploying and distributing apps, the CLI supports creating and scaffolding out new apps along with providing a means to download and manage Titanium SDK versions, modules and plugins. So you can now do almost everything in the app lifecycle (minus debugging and coding) via the command line. Which for me, lends itself to much faster workflow.
There are a lot of flags with the CLI so some of the commands can get a bit long. To maximize productivity and make things easier, I recommend creating aliases for repetitive tasks to help you fly thru the CLI. As a simple example I can quickly start coding a new Alloy app with a couple of aliases and a few keystrokes.
With these aliases in my .zshrc file I can execute the following:
tica NameOfApp <enter>
(enter app ID when prompted)
cd NameOfApp <enter>
aln <enter>
And a new Alloy app is created and ready to go. Since I’m already in the project root I can just type: subl . and the project opens in Sublime Text and I’m coding. From zero to coding a new Alloy project in about 10 seconds and my hands never left the keyboard! This may not seem like a big deal shaving a few keystrokes, but when you’re saving time with every task throughout the day it adds up.
TiShadow
Now that a project has been streamlined, I want to keep this momentum flowing. Repetitively stoping and starting the simulator or re-syncing thru iTunes to view changes is going to kill a productive flow. This is where TiShadow from @davidbankier saves us from the save/rebuild/deploy madness. TiShadow is a toolset for rapid deployment of Titanium (and Alloy) apps. When changes are made to a running app those changes get pushed instantly! This works for the simulator or multiple connected devices.
TiShadow comes with a bunch of cool features documented on the TiShadow site. But one that I want to call attention to is the the appify feature. Appify allows realtime changes to be pushed to devices that are not connected to the local machine. This means you can push changes and bug fixes live to your testers devices without having to push out another build. TiShadow very quickly became a tool that I can’t live without. It is a MUST have tool for developing and testing Titanium apps.
Ti Inspector
When you choose to forsake Titanium Studio for other tools you do lose one important feature that can keep you from completely turning your back. Debugging. That problem is now solved (iOS only for now) with an awesome new tool called Ti Inspector. This tool allows you to debug a running Titanium app using Chrome DevTools! Once you have Ti Inspector running you can start setting breakpoints, performing variable and call stack inspections, step operations, watch expressions, console logging and more, all thru the Chrome DevTools browser interface. Setting up Ti Inspector is super easy. Check out this blog post by @olivier_morandi for all the details and demo video.
b2i
Getting an Android app onto a device is a relatively quick process, however getting that app onto an iOS device is a more timely procedure. This is because you have to go thru iTunes and then re-sync the device each time. b2i by @sophrinix is a small script that allows deploying of an iOS app directly to a connected device completely bypassing iTunes. So now you can quickly get your app on the device and let TiShadow take care of the rest. No time wasted!
Editor Set Up — Revisited
My editor setup includes both IntelliJ IDEA (or WebStorm IDE if you don’t need Java support) and Sublime Text, so having them both set up for Titanium development works well for me.
Sublime Text
It’s trivial now to add Titanium support to Sublime Text with the sublime-ti-build plugin. Just install the plug-in with Sublime Package Control and you’re good to go with building and running your Titanium applications. I installed this on ST3 and it worked perfectly right of the box. Love when that happens! It has built in code completion for the traditional Titanium API’s and supports Alloy TSS highlighting.
IntelliJ IDEA/WebStorm
For the IntelliJ IDEA/WebStorm set up you will need to pull down the latest version of the SDK JSON file and run it thru jsca2js. This process will produce a JSDoc annotated JavaScript file that needs to be set as a global JavaScript library:
Then make sure that new titanium global JavaScript library is selected in the JavaScript > Libraries settings (by default it will not be selected):
This set up will give you code completion for all the traditional Titanium API’s.
Code completion for Alloy specific API’s is something that still needs to be worked out. The Alloy Markup files are just XML files so they will instantly benefit from the all the built in XML support. To make coding with Alloy more comfortable I added some syntax color for Alloy TSS files.
To add syntax color to TSS files create a new file type in the File Types section of settings:
Then edit the new file type and specify the keywords that you want to associate with each custom keyword color tab.
Here I’ve assigned the keyword Ti.UI to the custom color keyword1. Each tab in Edit File Type dialog screen matches a defined custom keyword color in the Editor > Colors & Fonts > Custom settings section, and you can add as many keywords as you want to each of the 4 tabs.
More info on creating custom file types can found here.
Additional Help with Alloy
To make Alloy coding more productive, you can setup completions in Sublime Text and LiveTemplates in IntelliJ/WebStorm for creating Alloy Controllers, Models, Collections and anything that you have to type out regularly. This will allow you have tab triggers for quickly creating Titanium Objects and will drastically cut down your keystrokes.
Here is an example LiveTemplate for creating an Alloy Controller.
Just click on the + to add a new template and give it an Abbriveation, Description and fill in the Template text:
Then to add dynamic arguments use the Edit variables button and assign each argument a Name, choose an Expression that suits the argument and a default value:
Lastly make sure you set the application context to JavaScript:
With this LiveTemplate in place, typing alc and hitting tab creates a new Alloy Controller with the cursor smartly placed on the fist argument and autosuggest activated for you to complete the first arg. Tab will jump you to the next arg with autosuggest activated once again. As you can see I have several of these set up for most of the common Titanium proxy objects. Creating a Window proxy is a simple a typing cw and hitting tab. These templates are huge time savers.
You can do the same for Sublime Text by creating an alloy.sublime-completions file in the user packages directory.
The completions file is nothing more than a JSON file with an object array of triggers. I have a few listed out here but you can create as many as you want in this single file.
Conclusion
Creating a comfortable development environment that allows you to flow is essential to being a productive developer. If you’re fighting your way through repetitive tasks, waiting for builds and fumbling around with the mouse it is going to be difficult to be productive. Hopefully some of these tips will help save you some time and make your Titanium development more enjoyable.
