Titanium

Titanium 101: Building Native Apps with JavaScript


Note: This post was originally published on Medium. Rene Pot is an Appcelerator Titan, long time member of the Titanium community, and runs the Slack Titanium Channel @Ti_Slack. For more, you can follow him on Medium and Twitter.

So, you want to build mobile apps? JavaScript and the idea of wrapping a website in a mobile app doesn’t sound attractive to you? This, I completely understand.

You also don’t really feel like learning Swift/Java to build mobile apps, let alone both, so you can release an app cross platform. This, I also fully understand.

So, there are multiple options out there for you. I won’t start a comparison blogpost as there are plenty of resources out there. Instead I’ll focus on, in my opinion, the most mature platform out there: Titanium.

Some Background Information

Titanium is a fully open source platform developed by a company called Appcelerator, which is now part of Axway. You can find the source code on GitHub. With Titanium, and its CLI, you can build native mobile apps using just JavaScript.

Installing

For installing everything, I recommend creating a free Axway Appcelerator account (you’ll get some benefits over the open source variant) and downloading Appcelerator Studio. Studio will then proceed to install everything you need including the Android SDK.

For iOS development, you’re required to download Xcode. You can do so from the Mac App Store when you’re ready to go.

How It Works

The first layer is JavaScript, which talks to the Titanium SDK. The Titanium SDK in turn is built with Objective C (or Java in case of Android) and that in turn will create the native components which you are initiating. The result will be a 100% native window component on screen. It will behave like a native window, and will look like a native window. Because it actually is. The underlying code was purely there for creating it.

Keep in mind, the JavaScript will be compiled with the app, so the initial package of an app is bigger than you will have it natively. This has no effect whatsoever on performance of the app.

Simple Example

So, let’s look at a simple example. In Appcelerator Studio, I created a new “classic” project. It starts with some code but I’ve removed everything inside it as I want to demonstrate the ease of building an app. Inside app.js I write the following code:


var window = Ti.UI.createWindow({
    backgroundColor: '#cccccc' // Light gray
});
window.open();

And then, I start compiling the app. The result (iOS):

As you see, it is a grey window with nothing in it. But we’ve got an app! We’re missing the default TitleBar though, which we can introduce by making the main component a NavigationWindow instead. Let’s adjust the code to represent a NavigationWindow.


var window = Ti.UI.createWindow({
    backgroundColor: '#cccccc'
});
var navWin = Ti.UI.iOS.createNavigationWindow({
    window: window
});
navWin.open();

As you can see, we’re using a component which is in the iOS namespace. That is because we’re developing an iOS app in this situation. The result is the expected navigation bar on top:

NavigationWindow is actually one of the few exceptions in cross-platform development with Titanium. So, let’s just explain how to fix this for Android. We will slightly adjust the code, so we check whether the app is iOS or Android. You can do this easily by checking if the iOS namespace exists. The resulting code is this:


var window = Ti.UI.createWindow({
    backgroundColor: '#cccccc'
});
var mainWindow = window;
if (Ti.UI.iOS){
    mainWindow = Ti.UI.iOS.createNavigationWindow({
        window: window
    });
}
mainWindow.open();

Of course, we’d now like to set a Title for the Window. We can do this easily too! Just add the property title in the createWindow method:


var window = Ti.UI.createWindow({
    backgroundColor: '#cccccc',
    title: 'Hi there!'
});

The result is as expected, on both platforms.

Conclusion

So, developing cross-platform apps is really really simple, and incredibly useful for JavaScript developers. And as shown in the simple example, you can see that cross-platform apps aren’t always “write once, run everywhere”. This simply isn’t possible when developing for multiple platforms. You always have to keep the target platform in mind when developing apps!

Next Steps

New tutorials in this series will appear soon. Until then, I recommend browsing the documentation of Titanium so you can see the huge list of APIs that are supported. And when you encounter any problems while developing apps, you can always post your question on StackOverflow or join us on the community-run Slack channel all about Titanium.