The document summarizes cross-platform mobile development using Appcelerator Titanium. It discusses that mobile development landscapes are dominated by iOS and Android, and that an abstraction layer like Titanium allows writing code once that can deploy to multiple platforms, with native interface controls and reduced maintenance. Titanium uses JavaScript to build apps that get compiled to native code, and its advantages include write-once deployment, utilizing existing JavaScript skills, while disadvantages include less granular control and potential delays in changes/bug fixes. The document outlines how to get started with Titanium and its Studio IDE or CLI, and covers Titanium-specific aspects like code organization, styling, platform handling, and using native modules.

1. Cross Platform Mobile
Development with
Appcelerator Titanium
/dev/summer, Cambridge - July 2014

2. Boydlee Pollentine
Author, Appcelerator Titan
Owner, Tipsy & Tumbler
Ltd
Organiser, tiConf.org
Twitter: @boydleep

3. Mobile development is cool.

5. iOS - Objective C & Swift
Android - Java
Mobile Web - HTML 5
Blackberry - Java
Windows 8 Mobile - C# / JavaScript
It’s a wide and varied landscape…

6. Text
…dominated by these two.

7. The Abstraction Layer

8. What's the point of an
abstraction layer?
Less code, quicker development time
Less (and simpler) maintenance
Re-use existing knowledge and libraries
Less training
Easier developer resource management

10. Titanium
Open Source
Code in JavaScript
It is NOT a HTML-5
Container
It is NOT a Generator
Javascript -> Bridge ->
Native

12. Advantages
Write-once
Deploy on multiple platforms
Native interface controls and
elements
Reduce maintenance
Simplify development processess
Utilise and build upon existing
JavaScript skills
Approved by Batman

13. Disadvantages
Less granuler control
Changes/bug fix delays
No paid support plans
for non-enterprise

14. Code Re-use
90-95% of all business logic / NON-UI code is re-
usable
80-85% of all UI code is re-usable
Titanium Alloy (MVC Framework) simplifies this
process
Poor JavaScript coding and developer practices will
lead to a poor app

15. Getting started
Visit www.appcelerator.com
Register a free developer account
Download Titanium Studio, which will attempt to walk
you through the iOS/Android pre-requisites.
These pre-requisites are the SAME as they are for
native developers!

16. Titanium Studio

18. But… Eclipse sucks!

19. Titanium CLI
Use your favourite code editor (Sublime, Atom,
etc)
Build, package, test and debug using the CLI
Built on Node.JS
Use it for scripting, automatic builds and
continuous integration

20. What’s the code look like?

21. Text
Titanium “Classic”
All UI elements, layouts and logic are defined by
code.

22. Text
Titanium Alloy
Projects are split into Controllers (JS), Models
(JS), Views (XML) and Styles (TSS)

23. Titanium Alloy vs “Classic”
Not all or nothing - you can mix and match the classic
UI coding approach with Titanium Alloy
Using Alloy will help you ensure CommonJS
consistency across screens/windows. If you’re unsure
about how to structure an app - use Alloy.
Alloy is essentially just a pre-compiler - do a build and
view the “Resources” folder!

24. Common JS
Standardised format for JavaScript modules and code
re-use
CommonJS patterns fix the “memory issues” often
associated with Titanium (usually by people who can’t
code particularly well)
Re-use in Node projects, package re-usable chunks
into a Titanium Module for multiple projects

25. TSS Styles - similar to CSS
Similar structure (but not the same) as CSS
#idName denotes an ID
.className denotes a class
Use Ti.UI.FILL and Ti.UI.SIZE wherever possible - not
percentages
You can reference global variables (i.e. color names) by
referencing Alloy.Globals (i.e.
Alloy.Globals.myStyles)

26. Conditional Platform
Handling
In code:
if(Titanium.Platform.osname == ‘android’) {
if(OS_IOS) {
if(ENV_DEV || ENV_TEST) {
In TSS:
“#myView[platform=android]” {
width: Ti.UI.FILL,
height: 200
}

27. Conditional Platform Assets
Everything in your assets folder can be broken down into
platform-specific content.
Don’t go copying up @2x and other retina images meant
for iOS into your Android project - use the assets/iphone
folder!
Using font-icons where possible will reduce build size
The main reason Titanium app package sizes are large is
because of ASSETS!

28. Native modules
allow you to
extend the
Titanium Platform
Augmented Reality
Barcode scanning
Third-party services
(VOD, ArcGIS, Video
Chat, etc)

30. Lanica Platino
2D game engine
Javascript
From £48.95 p/a (with a
free trial)
Cross platform - iOS &
Android
Use with Titanium code

31. Appcelerator Cloud
Services
Free MBaaS platform (similar to Kinvey & parse.com)
Generous free limits
Integrated modules for users, places, posts, emailing,
reviews, etc
Built for “social” applications
Push notifications built-in (1 million per month free)

32. Appcelerator Enterprise
Paid support
“Appcelerator Studio” with Liveview, Insights,
Analytics suite and more
Large, scalable Appcelerator Cloud MBaaS
infrastructure
Made for Enterprise

33. tidev.io
ticonf.org
Appcelerator Q&A
Additional Resources
gitt.io
docs.appcelerator.com
Appc. Marketplace

34. Questions?