Why not using Titanium’s own IDE?
Titanium’s IDE is based on Eclipse, a Java IDE known for its flexibility and for being a powerful tool with so many options you’ll never end up knowing half of them. That flexiblity and its Java foundation come at a price, it is very slow and sluggish.
I have been a Sublime Text user for quite a while and totally love its speed, flexibility in letting you decide what it has to have and what you don’t need and the ability to build for almost everything with just a little effort in setting it up.
We will first install Node.js. We will not discuss the utility of Node.js here as it’s out of the scope of this tutorial, but its installation package includes a command-line utility we will use later: npm. Installing Node.js is probably the easiest way to get npm on a Mac computer.
But we have to be aware of something, later versions of Node.js cause some issues when building for Appcelerator Titanium so we have to double check we are getting version 8.22. The link to a direct download is here.
I recently discovered that statement wasn’t true, changing Node version could cause some issues with Titanium Studio, but reinstalling the whole SDK fixes any issues if they happen to pop for you. So I’m now linking to the latest and greates version of it, wich you can find here.
Node.js installs as a common .pkg file for Mac: double-click – next – next – ready to go!
Installing Titanium’s CLI
Don’t fear the Terminal.app! Now it’s time for us to install the Command Line Interface (CLI) for Appcelerator Titanium. We will use it to update our Titanium SDK and build from Sublime Text without ever having the need to open Titanium’s IDE.
We will use our recently installed npm from the Terminal.app to install Titanium’s CLI. Just open Terminal.app and type the following command:
Right after the process finishes we have to install the latest SDK with the next command:
There are lots of useful commands for Titanium’s CLI here but for now we only want to know how to update it when a new version of the SDK comes out, we will do that with this command:
Now we have all Titanium’s functionality accessible from the terminal, that doesn’t mean we have to use it from there, but other software as Sublime Text, will be able to launch commands to it and create our builds without having to leave our favourite editor.
Having npm installed, installing Alloy couldn’t be easier, just throw a new command to the terminal:
At this stage we have our Titanium’s setup ready to go. I consider learning how to load an external module would be great for this tutorial as later on working with Sublime will make us do some small things in a different way. So the next step…
Adding an external module to Titanium
To add an external module to Titanium and have it available for as many projects as we could want, we have to store the module folder in a special location, the Application Support folder for Titanium wich is located into our Mac’s Library folder.
The trick is the Library is hidden in Mac OS-X Lion/Mountain Lion and to get there the easiest way is following these simple steps:
- Click the desktop and make sure your Mac’s top bar shows Finder as the current app in use.
- Click Go on the top bar.
- Hold the Alt/Option key on your keyboard, notice that the Library link only appears when you are holding that key.
- Click Library
Even if my computer is in spanish, I think this screenshot will help make it clear:
Now from there you just have to navigate through folders following this:
- Application Support
Once you get on your iphone or android folder, depending on wich os are you installing the module for, you can drop the module folder there.
For those curious about how I managed to make a screenshot of that if having the Alt/Option key down doesn’t allow to create screenshots, there goes an additional candy, just use your terminal and type a command to make a delayed screenshot (5 seconds in this case):
Installing Sublime Text
Installing Package Control for Sublime
At this stage you can already test Sublime Text and code a little with it to learn how sweet this editor is with its split views, integrated console and lightning fast speed. You can also start learning tricks like multiselection of word instances with Cmd-D and lots more. But as we just installed it, it’s not ready to fully replace Titanium’s IDE as we don’t have code completion or building features.
To get those we are going to install the most essential plugin for Sublime, Package Control. This plugin will allow us to comfortably install or remove other plugins from Sublime itself and to install it, we have to follow the next steps:
- Having Sublime in use, go to the menu bar and click View.
- Click Show Console.
- Copy the following command and press Enter.
Done! After restarting Sublime, we have Package Control online and we can press Cmd + Shift + P to start using it. As it can be a little confusing the first time, we are going to see how to install the needed packages step by step in the next section.
Installing packages for Titanium development
Depending on our personal preferences we may be interested in more or less packages for our coding sessions. There is a fair amount of packages available, for many coding languages and uses, even to launch searches on various sites like Stack Overflow, for example.
For the purpose of this tutorial we should install the next packages:
- SublimeCodeIntel: Support for basic code completion.
- SublimeLinter: An ego killer, live syntax error detection without concessions. It really helps to write better code.
- Tita: Code completion for Titanium’s API.
- Titanium Build: Project builder/compiler for Titanium.
Installing a package is done by calling Sublime’s command prompt with Cmd + Shift + P and start typing Package install. We’ll see that it soon will point to Package Control: Install Package and if we press Enter at that point Package Control will fetch all available packages from the internets and show us a list to choose from. We can start typing the name of every package we need and press Enter to install it.
Creating a new Titanium project
Ok, this is the point where all this workflow could break apart… but hopefully it won’t.
Creating a new Titanium project with this setup means creating lots of files, folders and subfolders manually, something that’s not productive at all. I recommend at least once, creating an empty project from Titanium’s IDE and storing it as a folder we will copy-paste for all our future developments.
Another option could be opening Titanium’s IDE to create every new project we are going to work on, wich is not too traumathic either.
Adding an external module without Titanium’s IDE
To close the circle about things done differently working with Sublime vs Titanium’s IDE we need to know how to attach the module we previously stored in our Mac’s Library and tell our code we want to use it.
With Titanium’s IDE we can graphically load a module into a project editing the tiapp.xml file. Titanium masks what this file really is with a graphical interface by default, but working with Sublime, what we will have is a raw .xml file. So to add our module into the newly created project we have to search for the modules section into the file and put the exact name of the module there.
As an example I’m attaching a the modules section form one of my tiapp.xml files. There is where you have to put the name of the module you want to use.
Building from Sublime
The final step will be telling Sublime to use the builder we installed as a package before with this project. To achieve that go to the menu bar and follow the path:
- Build System
That will do! Now to build and test your projects from Sublime you just have to press Cmd + B and select your target: Device, Simulator, iOS, Android… to build it and launch it wherever you need.
Since the latest version of Titanium CLI, last used iOS simulator is no more saved for next build and this process always launches iPad Retina or iPhone Retina as default, to correct this I’ve made some tweaks on the Titanium Build plugin. Here’s what you have to do to have this useful extended menu when you choose building for iOS Simulator…
First access your Sublime packages folder with Sublime’s menu link…
This will open the folder where all Sublime packages are stored, now enter the folder Titanium Build and replace Titanium.py file with my tweaked version wich you can download from here.
That’s it! you don’t even have to restart Sublime to see the changes in action, just build as usual!
Please notice this file has been updated today (08/08/2013) and now also includes a section to DEBUG when invoked from Sublime and selecting iOS: SIMULATOR-DEBUG. We will get into this at the end of this tutorial.
Another thing annoying people quite a bit is they are getting this error when building from Sublime on some versions of Titanium SDK:
Unfortunately I don’t have such a comfortable solution as before for this, but you can workaround the error by starting Sublime from the Terminal.app. If I stumble upon a better solution I will update this post with it so we don’t even have to do that.
Now Let’s Debug
Now I’m going to show you how to solve debugging with an awesome tool from Olivier Morandi, that is Ti-Inspector
Next step will be installing Ti-Inspector from the Terminal, we will do it with this command:
Once the installation is complete the only thing we will need to be able to debug our projects will be navigating to our project’s root folder (the one containing tiapp.xml). And launching this command from there:
We will have to leave that Terminal running as long as we want to be able to debug so if you need the Terminal to work on other things, please open a new one and don’t close that.
Debug with Google Chrome
With Ti-Inspector running and waiting for our app to shoot a debug session, we will open Chrome and navigate to the following url:
We will see our app appearing there, but won’t be able to do anything with it yet. Last step is easy, use my extended Titanium Build for Sublime building as usual but following this path:
- choose your target device
If we refresh the webpage Chrome is at now, we will see a link there, that is our debug session! just click it and let the fun start, put breakpoints wherever you want and check your variables values as if you were on Titanium Studio but yeah, without being in it! 🙂
Even if this process is quite long, the speed improvements you’ll acquire for your future developments will be quite noticeable and if you come to love Sublime as much as I do you will find it totally worth it. In any case I hope you enjoyed the read and find something useful in it.