Building Cross Platform Mobile Apps: An Introduction to Appcelerator Titanium

Adam PaxtonBarcamp Cancun July 31, 2014

Overview

• What is Appcelerator Titanium?

• Why use it?

• Pros

• Cons

• Tools Walkthrough

Hello

• Freelance Mobile Developer, Polanco Media, LLC

• 4+ years working with Titanium

• TCAD, TCMD certified

• Titanium Titan User Group

• Co-organizer Titanium Cancun Meetup

github.com/adampax@adampax

Titanium Meetup: bit.ly/ticancun

We are:

• Web developers

• Companies with existing developer resources

• Startups

• Someone with an idea

We want to build:

• App for our client

• App for our enterprise

• App for ourselves

What do we use?

• iOS - Objective C / Swift

• Android - Java

• Mobile Web - HTML5

• Blackberry - Java, BB10 - C++

• Windows 8 Mobile - C# / JavaScript

Another Option: Appcelerator Titanium

• Appcelerator, Inc - Based in Mountain View, CA

• Titanium - Free version for anyone to use

• Appcelerator Platform - Paid version with additional features for enterprises

• Cloud Services - Mobile Backend, both free and paid versions

Titanium

• Cross platform development environment for creating native mobile apps

• Program with JavaScript

• Free and open source

• Not a webview wrapper or app generator - builds native apps

• Builds with platform SDKs

• Android SDK toolset required for Android apps

• Xcode (and a Mac) required for iOS Apps

How does it work?

How does it work?• Write your code in JavaScript

• Code is minified and packaged with with Titanium APIs and JavaScript interpreter (JavaScriptCore for iOS, V8 for Android)

• Ti SDK uses native SDK (Xcode, Android, etc) to package it all up

• JavaScript interpreter executes your code and builds connections to native objects using the Titanium APIs

appcelerator.com/titanium/titanium-sdk/

Pros

• Maintain a single code base across multiple platforms

• 60% to 90% code re-use across platforms

• Use your or your team’s existing JavaScript skills

• Faster ramp up with JavaScript for new developers

• Native interface, native controls, native experience

appcelerator.com/titanium/titanium-sdk/

Cons

• Does not cover entire API for all platforms

• Over 5000 APIs are supported

• You can extend the API to access any additional APIs you need

• Extra layer of abstraction means more to manage

• New feature release / bug fix in iOS / Android — must wait until supported /fixed in Titanium (This is getting faster, often same day as iOS release)

• Potential for bugs in Titanium

appcelerator.com/titanium/titanium-sdk/

The Tools

• Titanium SDK

• Titanium Studio

• Titanium CLI

• Cloud Services

• Alloy MVC Framework

Titanium SDK

• Everything uses the SDK

• Updates usually released monthly

• Current version: 3.3.0

Titanium Studio• IDE used to build, test, package and

publish mobile applications across platforms

• Free, based on Eclipse

• Runs on Mac, Windows, Linux

• Code completion, debugger and breakpoints

• Wizards for configuring native SDKs, creating new app projects

• Cloud Services integration

Titanium Command Line Interface

• Node.js-based command-line tool for managing, building, and deploying Titanium projects

• Don’t want to use Eclipse/Studio? Use the CLI with your favorite editor

• SublimeText, Atom VIM, etc.

• titanium build --platform android

docs.appcelerator.com/titanium/latest/#!/guide/Titanium_Command-Line_Interface_Reference

Cloud Services• Collection of pre-built services for handling

Mobile Backend requirements

• Node.js hosting

• API builder (new)

• Integration with Titanium Studio, CLI

• Free version has generous limits for API calls, push notifications.

docs.appcelerator.com/cloud/latest/

The Code - Titanium ‘Classic’• Original syntax for Titanium code

• All UI, data, logic defined in js code

• Directly access Titanium API

• CommonJS modules

var win = Titanium.UI.createWindow({ title: ‘My Window’, backgroundColor: ‘#fff’});!win.open();

The Code - Titanium Alloy• MVC Framework — Model, View, Controller

• Recommended for new projects

• Structure code into separate sections for data, UI, logic

• Models— represent database records, API queries, etc. Based on Backbone.js

• Views — XML to define UI objects, TSS (like CSS) to style them

• Controllers - JavaScript containing logic — what happens when a button is clicked? etc.

Alloy

• Keeps your code cleaner, enabling re-use

• Can still use CommonJS libraries with Alloy. Popular libraries underscore.js, moment.js already included

• Built-ins for conditional code

• TSS styling similar to CSS, easy to setup and re-use styling

• A lot more features

One more thing: Games

• Build games with Titanium + Lanica Platino

• Platino game engine to build 2D and 2.5D mobile games

• iOS and Android

• Free to try

• lanica.co

Final Notes

• Use Titanium for faster mobile development

• Use Alloy for faster Titanium development :)

• Start downloading here: www.appcelerator.com/developers/

• Documentation: docs.appcelerator.com

• Help: developer.appcelerator.com/questions/

• Learn more at Cancun Titanium meetup: bit.ly/ticancun