My experience developing mobile apps with Appcelerator Titanium

If you are a webapp developer like me, you know how hard the struggle is to keep yourself up to date with the latest technologies regarding both frontend and backend programming. Even more, these days, you have probably heard this “meme” about a new JavaScript framework coming out every week. It’s like you don’t even begin to understand AngularJS factories and everyone else is talking about Redux, React, ES6 and JSX.

In this scenario, you also probably thought about developing a mobile app; a side project or maybe a freelance oportunity. Then, the inevitable question arises: what should I learn? Objective C? No, actually they are using Swift now, right? Java? (never). You don’t even want to think about having to master both platforms natively. So, PhoneGap then. But you also heard about the lag, and not using the native UI components, etc.

Introducing Appcelerator

I was introduced to Appcelerator Titanium last year, by a friend of mine who works in Global Logic. He told me how easy it was to develop mobile applications that feel native (they actually were native) for both major platforms (iOS and Android), sharing approximately from 60% to 90% of the codebase, in the same project, and compiling to each operative system. And even more, you write JavaScript.

I kept this reference in mind, but payed no further attention to it until I came across the opportunity to develop a side project that was supposed to work natively for iOS and Android. I have strong JavaScript experience and I knew from my friend that it was (supposed to be) easy, so I jumped in the project without even trying Titanium first. Risky.

Long story short, the results were outstanding. I was finally creating mobile applications for multiple operative systems, using native UI components and functionalities (maps, notifications, etc) and without having to learn any of those **horrible** programming languajes. But seriously, have you ever stumbled upon an Objective C code snippet?

NSString *temp = [NSString alloc];
[temp stringwithString:@"http://192.168.1.2x0/pic/LC.jpg"]
temp=[(NSString *)CFURLCreateStringByAddingPercentEscapes(
    nil,
    (CFStringRef)temp,
    NULL,
    NULL,
    kCFStringEncodingUTF8)
autorelease];

Sorry, I don’t mean to offend any Objective C fans, but I just can’t take it.

How it works

Appcelerator Titanium is an open-source framework written in native code. It includes a JavaScript engine to process your application code and also serves as an API to the underlaying operative system. For Android, the JavaScript engine is Mozilla Rhino, and for iOS it is Apple Javascriptcore. Its core features include[1]: * A cross-platform API for accessing native UI components such as navigation bars, menus, and dialog boxes and native device functionality including the file system, network, geolocation, accelerometer, and maps. * Transparent access to native functionality not already covered by the API.

To help separate concerns within your code, it includes Appcelerator Alloy, which is an MVC framework that allows you to write your views in XML (it’s actually easier than it sounds), style it with a CSS-like syntax called TSS and code your interactions inside a controller corresponding to each application window. Also, don’t worry about bloated controllers. You can use a “lib” folder for your core/business JS files that can be easily included in each controller, because you write them using the Asynchronous Module Definition (AMD) API for JavaScript modules.

Further more, Appcelerator provides a cloud platform for services like push notifications, distributed database, analytics and more.

Disadvantages

Like any framework or technology in the world, it ships with a couple of disadvantages. Regarding performance, I’ve never had any speed issues, but my apps were really simple so I can’t really tell. But, to me, the biggest disadvantage was Appcelerator Studio. I felt like when I was 20 years old, compiling Java in NetBeans or Eclipse. Heck, it’s built on top of Eclipse. Also, the syntax highlighting breaks in large files, which can be really annoying.

Hello world

Alright, enough words, it’s time to see it in action. I personally dislike “hello world” apps because they are extremely simple and demonstrate pretty much nothing about a given technology, so I’ll try to take it a little bit further.

First of all, you need to download Appcelerator Studio. Appelerator ships with an android simulator, but I strongly recommend you use Genymotion.

Once installed, create a new project. File > New > Mobile App Project. In the dialog, select Alloy and Default Alloy Project. Next, enter the project name and all the requested details and click the finish button. Give it a few seconds as it may take a while to create all the files.

Once the project is created, you will see a folder tree on the left and a text editor on the right. The most important folders for this demo are:

controllers
styles
views

For this demonstration, I wanted to include a webview that loaded the Deviget blog, with a title on top and an alert popping-up on start.

views/index.xml

<Alloy>
    <Window class="container" title="Not a hello world">
        <View class="header">
            <Label class="title" id="title" onClick="switchPage()">Deviget Blog</Label>
        </View>
        <WebView id="webview" url="http://blog.deviget.com/" />
    </Window>
</Alloy>

As I said, it’s XML but not that horrible, right? We define the current window, a view (which is a generic container), a label and a webview. You can also see that we can assign IDs and classnames to the XML nodes. You use the IDs and classes for styling and the also the IDs to reference UI components.

controllers/index.js

Not much to see.

$.index.open(); opens the window
switchPage is the function binded to the onClick event of the label.
alert, like JS alerts.

styles/index.tss

".container": {
    backgroundColor:"#9a9a9a",
    layout: 'vertical'
},
".header": {
    top: 20,
    width: '100%',
    height: 25
},
".title": {
    fontSize: 15,
    top: 5,
    color: 'black'
},
"#webview": {
    top: 20,
    height: Ti.UI.FILL
}

The TSS file is just a mix between json and a CSS file. Most of the properties that can be set are equal to the essentials CSS properties, so you can start playing with it right away. The only two special keywords of this file are:

layout: you can choose between a vertical or a composite layout. It determines how Appcelerator places the elements inside a view or window.
Ti.UI.FILL: you tell Alloy that you want your element height to be equal to the available space in the view or window.