1. Building Cross Platform Mobile Apps:
An Introduction to Appcelerator Titanium
Adam Paxton
Code for Ft Lauderdale / Appcelerator Meetup
August 26, 2015

2. Overview
• What is Appcelerator Titanium?
• Why use it?
• Pros
• Cons
• Tools Walkthrough
• Code Demo

3. Hello
• Mobile App Development
Polanco Media, LLC (We’re hiring)
• 5 years working with Titanium
• TCAD, TCMD certified
• Titanium Titan User Group
• Co-organizer Titanium Cancun Meetup
• South Florida Titanium Meetup
github.com/adampax
@adampax
Titanium Meetup: http://bit.ly/tisofla

4. We are:
• Web developers
• Companies with existing developer teams
• Startups
• Someone with an idea

5. We want to build:
• App for ourselves (or our community)
• App for our client
• App for our enterprise

6. What do we use?
• iOS - Objective C / Swift
• Android - Java
• Mobile Web - HTML5
• Windows Phone - C# / JavaScript

7. Another Option: Appcelerator Titanium
• Appcelerator, Inc - Based in Mountain View, CA
• Open Source
• Titanium SDK and CLI
• Alloy MVC Framework
• Paid (Free to try)
• Appcelerator Studio IDE
• Arrow - Mobile backend storage, push notifications, API builder

8. 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

9. How does it work?

10. 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/product/

11. 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/

12. 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
• As of version 4.0.0 (Spring 2015) Licensing of the tools (free vs OSS) is a bit of a pain

13. The Tools
• Titanium SDK
• Appcelerator Studio*
• Titanium CLI
• Arrow Cloud Services*
• Alloy MVC Framework
*Paid

14. Titanium SDK
• Everything uses the SDK
• Updates usually released monthly
• Current version: 4.1.0.GA

15. Appcelerator Studio
• IDE used to build, test, package and
publish mobile applications across
platforms
• Based on Eclipse
• Requires subscription
• Runs on Mac, Windows, Linux
• Code completion, debugger and
breakpoints
• Wizards for configuring native SDKs,
creating new app projects

16. 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/platform/latest/#!/guide/Titanium_Command-Line_Interface_Reference

17. Use Your Own IDE with Titanium
• Sublime: https://github.com/MattTuttle/sublime-ti-build
• Atom:
• Package: https://github.com/yomybaby/atom-titanium
• Guide: https://github.com/m1ga/titanium_with_atom
• IntelliJ IDEA, NetBeans: https://github.com/navinpeiris/jsca2js
h/t @FokkeZB

18. Arrow Cloud and API Builder
• Collection of pre-built services for handling
Mobile Backend requirements
• Node.js hosting
• API builder
• ArrowDB, schema-less data store
• Integration with Studio, CLI
• Push notifications
• DB Connectors for Azure, Salesforce,
MSSQL, MySQL, MongoDB
appcelerator.com/product/arrow/

19. 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();

20. 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.

21. 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

22. Community Tools
• TiShadow - tishadow.yydigital.com - Rapid testing for Titanium, very useful!
• Platino - platino.io - build 2D and 2.5D mobile games with Titanium (Free to try)
• TiSlack Chat - topener.nl/tislack
• Gittio - gitt.io - search engine for Titanium modules and Alloy Widgets
• Ticons - http://ticons.fokkezb.nl/ - Generate app icons and splash screens for
iOS and Android
• Material Palatte - materialpalette.com - Generate Material theme for Android
(check the demo app for example)

23. Final Notes
• Use Titanium for faster mobile development
• Use Alloy for faster Titanium development :)
• Start downloading here: http://www.appcelerator.com/signup/
• Documentation: docs.appcelerator.com
• Help: community.appcelerator.com

24. Future South Florida Titanium Meetups
• Meeting monthly on a Tuesday or Thursday?
• Call for Speakers, ideas:
• Share a new process, library, module
• App walkthrough
• Discuss more at South Florida Titanium meetup page: bit.ly/tisofla

25. Thanks
• Thanks Rob and Code For FTL Team
• Thanks Sebastian @ Axis Space
• Thanks Appcelerator for the Pizza
Show some code: github.com/adampax/TiCodeForFTL