Skip to content
Logo Theodo

How to prototype mobile apps with Titanium, Alloy, Coffescript & Tishadow!

valentinb5 min read

To reduce the amount of time lost during Titanium deployment process, I am going to present you a set of tools that will help you to accelerate your developments:

Finally I will show you how everything can work together

Titanium

Titanium is a framework to build mobile applications in javascript. It’s a great tool allowing to work with ONE WEB language (javascript) on a SINGLE codebase. The titanium motto is “We handle device and OS compatibility. You build rich native apps”.

However if you want to test your UI on many devices, platforms, versions, the process is pretty long because you need to build the entire application, package it and install it on every device.

Fortunately for us, there are great tools out there to accelerate development and testing of your app.

A classic Titanium workflow contains the following steps:

  1. Install nodeJS
  2. Install titanium
  3. Login/Setup titanium
  4. Install titanium SDK
  5. Install android SDK
  6. Install Xcode
  7. Start a fresh new app
  8. Build the app for both platform
  9. Test the UI on different devices

Repeat step 8 & 9 until your application is sexy enough. This is approximatively 1 minute per platform and per device to push the newly built app.
At the end of the day and if you push new code to test every 10 min on 2 devices (iphone/android), you just have spent 96min looking at your beloved terminal.
Moreover, if you don’t use a Mac to develop, you will have to transfer and launch the build on an other workstation :O.

We absolutely need to reduce the time between written code and eyes on the result, that’s where Tishadow comes.

Tishadow

Tishadow is a toolset allowing us to push our code via websockets to a client application which interpretes it on the run.

/!\ Tishadow is only meant to ease development and not for production /!\

By using Tishadow, the titanium SDK is not mandatory anymore.
You just have to build and install Tishadow like an usual titanium app.

The workflow is then reduced to this:

  1. Install nodeJS
  2. Install tishadow
  3. Run the server : tishadow server
  4. Install tishadow application on Iphone/Android
  5. Run the client application on every device and connect to the server
  6. Start a fresh new app
  7. Deploy the application : tishadow run

You can then watch the result on every connected device, modify something, run tishadow run and wait 5 seconds :)

Tishadow also includes a test engine that you can access by typing the tishadow spec command.
This command will run all the tests directly on every connected devices, saving some precious time once again.

Alloy

Alloy is an MVC framework on top of titanium which allows you to split your code logic into :

The entire directory structure is placed in app, and built back into titanium (in Resources) using alloy compile.

Coffeescript / Jade

For those out there who love coffeescript, and I know there are many, we can push the fun on step deeper and compile coffeescript into javascript just before alloy compilation.

This job can be done with a simple task in a configuration file.

I’m in the javascript world for some time now, playing with nodejs, backbone, angularjs and I fell in love not only with javascript and coffeescript but with the jade template engine too.

Jade is a language which will compile into html and by extension xml. You only need to declare the opening of your tag and indent the content right after it.

I have developed an alloy task to pre-compile coffeescript and jade into js/xml/tss, available on github => vbrajon/alloy-preformatter

Everything together

The goal of the entire article is to get an application and to be able to work fast!

I believe we are able to develop great applications faster when:

Don’t forget to keep it stupid simple - KISS.

A simple app looks like this: vbrajon/alloy-skeleton

controllers/index.coffee
----------
$.replace.text = 'Hello Titanium/Alloy World!'
$.window.open()

styles/index.tss.coffee
----------
tss =
Label:
color: "#656565"
".container":
backgroundColor: "#cecece"

view/index.jade
----------
Alloy
Window#window.container
Label#replace Hey, replace me dude!

You can get it running with:

git clone https://github.com/vbrajon/alloy-skeleton.git
cd alloy-skeleton
alloy compile
tishadow run

I encourage you to have a look at the generated files in Resources/alloy/controllers/index.js and the bundle sent by tishadow at build/tishadow/dist/#NAME#.zip

valentinb

valentinb

Web Developer at Theodo

Theodo France

Liked this article?