Building native apps with JavaScript: Titanium

Published in

All Titanium

4 min readSep 5, 2017

So you want to build mobile apps. You know JavaScript and the idea of wrapping a website in a mobile app doesn’t sound attracting 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 in turn is 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 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. Once launched at least once you’re ready to go.

How it works

The first layer is your JavaScript which talks to the Titanium SDK. The Titanium SDK in turn is build 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. Just 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 lets 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"
});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. Lets 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 lets 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 a simple demonstration you can already see that it isn’t the “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 (I will update this blogpost when a new one is there!). Until then I recommend browsing the documentation of Titanium so you can see what huge list of API’s 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.

Patreon

Please support me in writing this series of Tutorials by backing me on Patreon. Not only are you helping me write this, but also you help me run the Community Slack, support me in writing new widgets/modules (and maintain already existing ones) and you can request private support from me and get previews and notifications on next posts!

Hope to see you there, even if just for $1! Thanks already.

Patreon Link: https://www.patreon.com/wraldpyk