Best practices for developing an Appcelerator Titanium iOS app

When developing a Titanium mobile app for iOS, learn these best practices so you don’t waste time being frustrated with performance and behavior issues.

Appcelerator Titanium is a popular platform for developing mobile apps for more than one device operating system (OS) from a single JavaScript code base. It offers an SDK that supports iOS,Android, BlackBerry 10, Tizen, and mobile web apps, along with excellent documentation and community resources.

If you’re used to writing dynamic web apps with JavaScript, Titanium might be easy to learn. Certainly, it’s easier to learn than the toolkits, languages, and development environments that support the native OS platforms.

But developing with Titanium is not the same as for the web — there are quirks and issues specific to each OS. If you don’t know these quirks and don’t follow best practices, the end result will likely be disappointing.

This article introduces Titanium’s Mobile Best Practices with a short tutorial on writing an iPhone app that presents a table view with custom rows. I assume you have installed Titanium Studio for the Mac after downloading from the Appcelerator Developers site. Registration is free.

Create the demo project

1. Open Titanium Studio and select New | Mobile Project from the File menu.

2. From the available templates, select Classic (Alloy is the other option) and Default Project.

3. Click Next.

4. For project name enter Demo and for the App Id enter com.mycompany.Demo.

5. Click Finish.

A new, classic Titanium mobile project will be created in your chosen workspace location.

In the Editor window, there should be a Dashboard tab (if not, click the little green shield icon in the lower right corner of the Studio next to your name). Find where it says My Apps and click it; Safari will open Appcelerator’s web portal for your apps. Click the App Details for your Demo.Figure A shows selections for analytics, cloud, and enterprise extensions, as well as details of your free subscription plan.

Figure A

TitaniumFigA112713.png

Go back to Titanium Studio and double-click the tiapp.xml file in the App Explorer window to display the file in the Editor window (Figure B). Tiapp.xml contains the configuration settings for the Demo app.

Figure B

TitaniumFigB112713.png

If you don’t plan to use Appcelerator’s analytics service, you should replace true with false between the analytics tags.

The iphone tags contain the orientation settings for the iPhone and the iPad. If you want to add landscape orientation to the iPhone, copy the left and right landscape orientation tags from the iPad section into the iPhone orientations section.

Don’t pollute the global object

The main controller for the Demo app is the app.js file. Double-click app.js in the App Explorer window to display the file in the Editor window (Figure C).

Figure C

TitaniumFigC112713.png

Replace the default code with the function shown in the figure. A self-calling function is used to start the application window because it makes a closure that doesn’t pollute the global object, available as this in app.js. The function checks the mobile OS name so the application window that has iOS-specific calls to the Titanium SDK is loaded.

Applications should use CommonJS modules

Create the ApplicationWindow.js in the handheld/iphone folder (you may first have to create the handheld and iphone folders). Display the file in the Editor window.  The file shown in Figure Dcontains a module for instantiating an iOS navigation window object. The navigation window’s initial window is loaded from the TableWindow.js file. The module is exposed to the outside world with the exports directive.

Figure D

TitaniumFigD112713.png

The table view

Create the TableWindow.js file in the handheld/iphone folder and display the file in the Editor window.  The file shown in Figures E and F contains a module for instantiating a window containing a table view.

Figure E

TitaniumFigD112713.png

Each row of the table view is created with the createTableViewRow API so it can be customized. For iOS, it is important to explicitly set the row’s height (do not use ‘auto’ or Ti.UI.SIZE) and className properties for all rows that have the same layout.It is also important to create a transparent view that fills the entire row. With the touchEnabled property of the row set to false, the transparent view will capture all single tap events. Otherwise, the table will capture the single tap events and the event will not include the tapped row’s index.

Figure F

TitaniumFigF112713.png

Add a listener for single tap events to the table. Only one listener is needed for all the rows (do not add a listener to each row or the button in each row). Because the table, row, transparent row view, and button each have an objName property, it will be included with the event’s source property. If the objName is ‘button’, a dialog is shown with the button title. Otherwise, the Detail Window is loaded and opened in the navigation window. This window is loaded only when a row is tapped.

The Detail window

Create the DetailWindow.js file in the handheld/iphone folder and display the file in the Editor window. The file shown in Figure G contains a module for instantiating a window with a label that displays the index of the row that was tapped.

Figure G

TitaniumFigG112713.png

Memory

Best practices for managing memory include closing windows, nulling out references to objects, and removing global event handlers when no longer used. It is also easy to create a memory leak by adding an event handler to a UI object (e.g., a table) in a scope other than where the object is declared. For example, it’s bad to declare a table outside of a module’s exported function and add an event handler to the table within that function.

Run the app

Assuming you have the Xcode tools installed and have added a launch configuration for the iPhone simulator to the Demo project, it is easy to run the simulator, or install onto a device, from Titanium Studio.

In the App Explorer window, click the Run icon and select the iPhone simulator launch configuration. The first screen shot below shows the Demo app after the button labeled H is tapped. The second screen shot below shows the detail window after the row is tapped.

TitaniumFigH112713.png
TitaniumFigI112713.png

Conclusion

This simple demo app is hopefully something you can build upon when developing a more complex Titanium mobile app. In addition to the best practices, you should keep up to date with the tips, tricks, and gotchas found in the forums and on developer blogs. Titanium is always improving, and Alloy is the next thing to consider.

iOS Mobile Development. Titanium vs Native, a Dev’s Perspective

I have been developing native iOS applications since 2007, back when the first App Store was introduced, and have only been involved in writing native code (Objective C) mixed with some C/C++ (for usage with libraries and frameworks).

When Objective C meets Javascript.

It wasn’t until a few months ago that I started working with Appcelerator’s Titanium. For those who don’t know what Titanium is, it’s basically a developer environment that allows you to write apps for iOS, Android and web, all using one code base and without ever touching native code.
How it works is that you write these apps using Javascript (a very common language for web developers) and use the Titanium API to do things like network requests, create your UI, respond to touch events, etc.

While Titanium is a great way to do cross-platform mobile applications, it has its pros and cons. However, Titanium allows you to add extra functionality using the Javascript API through the use of modules. These are similar to libraries that are written using native code but work with the Javascript runtime.

If you want to support Android and iOS, then you’ll have to write 2 modules, one for each platform and, since it’s using Javascript, you’ll have to make sure you don’t misspell your variables since Javascript can create variable on the fly without a warning. The general idea about modules is to create the new functionality in native code and then export some functions so that they can work in Javascript, this is a whole different topic that we can cover in the future.

Diving into the depths of Titanium development

The first project I did with Titanium was an app that communicated with Apple’s movie trailers page. It retrieved a JSON file from Apple’s server, parsed it and converted it to useful data and then showed it in a table view.

movie trailers app created in titanium

Movie Trailers app created in Titanium

The way table views are created in Titanium is quite different from native Cocoa Touch. Both have table rows and a table header and footer, but in Titanium you have full control over the elements. Almost the same kind of control you have when manipulating <div>’s in HTML using Javascript.

Cocoa Touch doesn’t offer this kind of control because the behaviour of the table view is done through delegates. You can customize the table view, and the table rows, but it’s a bit limiting and requires you to do subclassing.

Also, the way events are detected, like selecting a row is different. Cocoa Touch offers a delegate method for detecting a selection. In Titanium, since it uses Javascript, you need to add event listeners to the row element, or even the entire table view.

But that’s not all, you can add event listeners to all elements you create, which makes virtually every visual component respond to a specific event. You can’t do that in Cocoa Touch, not for all elements at least. For example, you could add an event listener to a window in Titanium, but in Cocoa you can’t. You would need to add a subview and make that respond to events.

Event triggered when selecting a row

Event triggered when selecting a row

When it comes to handling network requests I must say that Titanium offered a very easy way to do this. As you can see in the image below, the Titanium SDK offers a class to retrieve data from over a network. Since the data I was interested in was in JSON format, and JSON is native to Javascript, I had not much to do with the data I received from the server.

Receiving data from a URL in Titanium

Receiving data from a URL in Titanium

In Cocoa Touch, it used to be a lot harder because you had to implement delegates and for some developers that was confusing and a lot of work. There were quite some delegate methods you needed to implement because many things could happen when you did a network request.

The more recent versions of the iOS SDK offer a simplified way of doing this: just one call, thanks to the blocks feature of the language.

Receiving data from a URL in Cocoa Touch

Receiving data from a URL in Cocoa Touch

The result and final thoughts…

In the end I finished the Movie Trailers application using Cocoa Touch, simply because I’m more familiar with it and because I wanted to add more features which I didn’t know how to do in Titanium. Some of those things include creating a grid view where each cell has rounded corners and has a drop shadow (generated by Core Graphics, an API for iOS) and some cool transition effects.

You can see the final version of the app in the screenshot below.

Final Movie Trailers - done in Cocoa Touch

Final Movie Trailers - done in Cocoa Touch

Like I said in the beginning of this article, Titanium is great for doing cross platform development, but for some other application which require delving deeper into what the OS has to offer you may be better doing it natively. But for general purpose apps Titanium is a great solution and it’s easy to learn.

(http://www.itexico.com/blog/bid/90659/iOS-Mobile-Development-Titanium-vs-Native-a-Dev-s-Perspective)

Appcelerator Titanium Review: No-Hassle Cross-Platform Mobile Development

Recently, we posted a guide helping software developers and tech executives choose the most cost- and time-effective mobile development approach, addressing whether they should go with a native, hybrid or web-based solution. However, there is also an alternative that allows you to make the right choice individually for each particular project, since it handles creating apps across various mobile OSs, as well with hybrid and HTML5 variants. It’s called Appcelerator Titanium.

Here I present an overview of the Appcelerator Titanium mobile development environment, outlining what you should and shouldn’t expect from it, along with general recommendations and comparisons with the following IDEs: PhoneGap, Sencha Touch, jQuery Mobile, and Xamarin.

Appcelerator Titanium overview

Appcelerator Titanium Review

Supported platforms

Titanium, developed by Appcelerator, makes it relatively inexpensive and easy to simultaneously build native apps for various mobile OS platforms. Currently it provides support for Apple iOS, Android, BlackBerry, and mobile web applications; later this year the company plans to add Windows Phone/RT as well.

As of this writing, here are the IDE statistics for the following mobile devices:

  • Android — 123 apps
  • Apple iPad — 99 apps
  • Apple iPhone — 410 apps

Development process

Titanium’s applications are written in JavaScript with the use of a special Titanium SDK that allows access to the required frameworks. It doesn’t offer a screen design tool, and developers create and modify apps through the code only. CSS isn’t used either.

To build an app with Titanium, you first install the official SDK for each mobile platform (Xcode and iOS SDK, Android SDK, etc.) . After a build is completed, the project will be extensively modified by the original SDK so the result becomes 100% native in terms of UI and functionality.

Hiring a team

The major requirement for a Titanium developer is knowledge of JavaScript, although any experience in mobile application development for any platform would certainly be an advantage. Since there are far more JavaScript specialists than mobile developers, choosing Titanium gives you a wider list of candidates to select from for your development team.

Should you choose Titanium?

We have previously covered several aspects to take into consideration when choosing an app type: marketing strategy, development costs, features and design, etc. Choosing an IDE is an important decision as well. We suggest first answering a few simple questions that can help considerably with making the best choice:

  • What functions do you plan to implement?
  • What platforms do you plan to cover?
  • How do you plan to distribute your app: through the platform’s official app store (AppStore, Google Play, etc.), your corporate web site, etc.?
  • What skills do the developers on your team have?

Generally speaking, Titanium is an ideal choice if:

  • your team is proficient with JavaScript; and
  • your business model targets a multitude of mobile platforms.

HTML5 applications with Titanium: Pros and Cons

If your goal is to develop a universal web app rather than a set of native apps for various platforms, Titanium may be the best solution as well. In this case, your app will include a combination of JavaScript, CSS, and HTML5.

A web app built with Titanium has specific advantages that allow you to:

  • use standard UI elements (tables, buttons, etc.) along with animation effects;
  • access network resources via HTML (noting that there are security limitations you should take into consideration and plan on possible ways around);
  • store data locally (with the amount of data limited by the browser);
  • provide support for asynchronous module definition (AMD) and CommonJS;
  • pre-cache resources for faster loading.

However, web apps have several limitations as well, such as:

  • restricted access to certain components of a mobile OS (e.g., Android activities, iOS local notifications, or the Apple iAd service);
  • limited access to device resources (such as the camera;
  • dependence on a browser to run the web app;
  • limited functionality without an Internet connection;
  • restricted use of native UI elements;
  • limited access to calendar and contacts (varies depending on the platform);
  • no support for Titanium Extensions distributed through the Appcelerator Open Mobile Marketplace (the extensions are provided as executable code for each platform and therefore can’t be launched in the browser).

General guidelines for making a choice

  • Keep in mind that the more platforms you plan to cover, the fewer features you may be able to offer.
  • While you save time developing apps with Titanium, you still have to test apps on native platforms. Thus, don’t forget to add in the extra costs to the project budget for the QA team and device testing, and extra time in project scheduling.
  • Even if you don’t plan on building apps for multiple platforms, Titanium still may be a good solution for your team as it makes the development process much easier. There’s no need to solve high-level tasks specific to a particular platform, such as memory management. Therefore, instead of developers needing to focus on OS documentation they can concentrate on adding more features and on design implementation.

Titanium vs. Other IDEs

Here at this point in the overview, I’ll compare Appcelerator Titanium with several other alternative development tools. It’s also worth mentioning that Appcelerator has been recognized by Gartner Research as one of the companies in their Mobile Application Development Visioneers category, along with Sencha and Xamarin.

PhoneGap by Adobe

PhoneGap by Adobe

Adobe’s PhoneGap API exceeds the capabilities of standard web applications by providing access to resources such as the GPS, file system, accelerometer, etc. However, the controls are not native, and the UI is created via HTML5, CSS, and JavaScript. This may considerably increase development costs if you decide to create UI versions for multiple platforms and device types, on account of factors such as provision for numerous display sizes and resolutions, etc.

PhoneGap offers a convenient cloud-based service called Build which allows you to compile applications for several mobile OSs without installing any native SDKs to the developer’s desktop. To compile a project, all you need to do is upload it to the Build site, and when you’re done you’ll get ready-to-run apps for each target platform.

Although Build creates native apps, the original code stays the same and the app is launched via a browser, which does result in lower performance for certain types of apps.

Sencha Touch by Sencha

Sencha Touch by Sencha

Sencha Touch is a framework for web app development (HTML 5, CSS, and JavaScript). It allows access to a rich diversity of resources like control libraries and the UI.

Until recently, Sencha Touch could not build native apps and was often used in conjunction with PhoneGap Build. But now Sencha has a cloud service of its own – which is really convenient.

jQuery Mobile

jQuery Mobile

This jQuery-based framework allows you to create web applications and sites optimized for touchscreen UIs. Just like jQuery itself, jQuery Mobile grants access to a huge library of ready-made components you can use in a project.

Xamarin (previously MonoTouch)

Xamarin (previously MonoTouch)

This IDE allows you to create native apps for iOS, Mac OS X, Android, and Windows Phone. The programming language is C# within a .NET framework.

Here are the examples of applications developed with this IDE; the component catalog is presented here, although the number of components is not very large (somewhere around 100).

The major advantage of this solution is that you can use the original SDK for each platform, thus resulting in 100% native apps. The primary disadvantage is found in the disappointing fact that only some of the code is universal, with a considerable amount needing to be written specifically for each platform – thereby increasing development costs.

While Xamarin does offer an IDE of its own, it also provides support for integration with Microsoft Visual Studio.

Summing Up

In wrapping up this post, I want to remind you that a wide variety of options for mobile development are available nowadays, so it’s totally possible to find the perfect solution for your particular project. Like with any other IDE, Appcelerator Titanium has its strengths and weaknesses. But its ease of use, speed – and ability for the simultaneous creation of native and web apps – make it a great choice for a wide range of projects.