There are various technologies available which enable you to do mobile app development. Of course you have the native solutions on iOS and Android, but there are also hybrid solutions like PhoneGap, Apache Cordova, Xamarin or Titanium which support multiple platforms using the same codebase. PhoneGap and Cordova rely on strategy of converting HTML / CSS and JavaScript into an app that uses a Webview to enable interaction. Simply said, it means you have a website in a container. Xamarin is build around Mono, the .NET framework compatible C# implementation. While coding C#, you can build ‘near’ native apps for iOS and Android.
But because we didn’t want to learn a new language, we chose Titanium as our platform of use. It has the same ‘near’ native experience and doesn’t suffer from the container strategy that PhoneGap/Cordova uses.
Prerequisites
For iOS development you need to have XCode, or better said a Mac with XCode installed. For Android development you need to install to Android SDK and GenyMotion on your system. You could live without GenyMotion as emulator, but from a performance perspective you can’t! It’s just way faster then the emulator packaged with the Android SDK.
Development stack
Appcelerator has built it’s own IDE named Titanium Studio. I absolutely believe that using that product has it’s advantages, but they also deliver a CLI tool which is the main engine. I prefer to use the CLI tools direct and leave it at that. So to get you started do the following:
- Install the base tooling as found here
-
(sudo) npm install -g titanium
-
(sudo) npm install -g alloy
-
titanium sdk install <latest GA release> (now 3.4.0.GA)
After this your able to start your development, but hold on, as we are still in the shell execute the following tasks as well which will help you during your development.
-
(sudo) npm install -g tishadow
TiShadow brings you the JIT experience you have with a scripting language. Normally working on mobile apps also adds a lot of coffee time to your day. TiShadow creates the ability to do live development on the simulator or your device. We need to thank @davidbankier for his efforts and you can find more info on the TiShadow website
-
(sudo) npm install -g ti-inspector
The Titanium Studio IDE creates the ability to debug your application. Choosing not to use it, will make you loose a debugger. Luckily on OS X there is Ti-Inspector which works with Chrome. A detailed explanation about the usage of ti-inspector can be found on this blog.
-
(sudo) npm install -g stss
@RonaldTreur is the man to thank for STSS. STSS is the tool which will make your life easier on creating a maintainable look & feel for your app. STSS is a 4 stage process which changes Sass like syntax into Titanium Style Sheets (TSS), preventing you to have to learn the exact TSS syntax. More information can be found on this blogpost.
-
(sudo) npm install -g ticons
If you are new to Titanium development, which I expect when you are reading this article, start following @FokkeZB on Twitter. Ticons is just one of his many tools that he shares with the world. Using ticons you can generate all those splashscreens and icons for all those different device formats with just 2 commands! A must use!
-
(sudo) npm install -g tn
One more tool from @FokkeZB his hand is TiNy. This tool will let you hook into the titanium CLI tool by creating shortcuts for any action you’d like to execute. If you have to feeling that you need to type commands over and over again, create a shorter version using TiNy.
-
(sudo) npm install -g gittio
Almost every serious language has a package manager these days. Titanium didn’t have one yet, so @FokkeZB invested some time and there is gittio! Gittio uses gitt.io as it’s basis which scrapes Github for new widgets and modules for Titanium. The tool needs some more love, but has a lot of potential!
Integrated Development Environment
While we choose not to use Titanium Studio, we loose the auto complete functionality which comes with every IDE. Luckily there is a another way as well. A lot of users love the IDE’s that Jetbrains builds for languages like Java, PHP or Python. That IDE can easily be extended with the your own autocomplete libraries.
jsca2js delivers the possibility to convert the Appcelerator JSCA formatted files into JSON files which you can drop into your PHPStorm, Webstorm or IntelliJ IDE to add auto completion to your project.
To activate this do the following:
- On the jsca2js Github repository, download the latest titanium mobile and alloy JSON files.
- Go into your IDE and select Preferences
- In the project section select Javascript > Libraries
- Start adding a new library by clicking the ‘Add’ button
- Provide a name, select the 2 downloaded files and tick ‘Global’ visibility
- After this you have the ability to activate your Titanium and Alloy auto completion in any other project!
Get going…
I hope that using these tools you can kickstart your own Titanium development. They certainly helped us when we started developing apps!
