Recent Tweets @davetownsend

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.  

Set up the Titanium CLI

Follow the instruction here to get the Titanium CLI installed.

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:

image

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

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.

image

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>

image

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. 

InteliJ 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:

image

Then make sure that new titanium global JavaScript library is selected in the JavaScript > Libraries settings (by default it will not be selected):

image

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:

image

Then edit the new file type and specify the keywords that you want to associate with each custom keyword color tab.

image

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.

image

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 IntellJ/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:

image

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:

image

Lastly make sure you set the application context to JavaScript:

image

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. 

image

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

The Spring framework has made it trivial to consume RESTful resources by using their RestTemplate. I’ve been using the RestTemplate on a recent project and came accross a cool way to run unit tests by mocking out a REST server service. This is accomplished with a little help from the spring-test-mvc project. Currently, the compiled production version of this library existis the in the Spring Social project.  

Read More

There is a nice feature in IntelliJ IDEA called “Surround With” (activated with cmd+option+t) that will wrap the current section with something.  There are a few default surround with commands already, but the one I wanted was the ability to wrap the selection in quotes (double and single). Here’s how you can quickly add a live template command to do just that. 

Read More

Just spent the last week at Appcelerator building mobile web apps in beautiful Mountain View, CA for two 2-day certification training courses. They have a sweet product. But I’m not a fan of their IDE Titanium Studio, which is built on Eclipse and Aptana (who they recently acquired).  It was really slowing me down when working through the labs.  I’m a Sublime Text 2 (ST2) and Intellij IDEA user so I was in serious need of a more responsive tool and agile work flow.  But, I did not want to lose code completion, nor the ability to build/deploy from my tool of choice.  So I spent some time and got things working how I wanted. Here’s the steps I took to set up ST2 and Intellij IDEA for Titanium mobile development.

Read More

Spending time on the command line is something that I do a lot of.  So anything that can save me keystrokes is a welcome productivity tip. I came across these command line tips in my twitter feed from the guys over at Command Line Magic @climagic. These commands are to be used when you are simply typing on the command line and not specific to any editor.

Read More

I’ve always sort-of known that Chrome was a faster browser and less of a memory hog than Firefox.  But there were features that I love in Firefox that Chrome did not have and so I’ve clung to it religiously. But, basically with the help a few Chrome extensions and the killer developer tools that Chrome now has I’ve made a successful conversion. And I haven’t looked back.  Here are some of things I’ve done to get

Read More