cross-platform mobile development with titanium
DESCRIPTION
Develop full-featured native iPhone and Android apps from a single codebase using Appcelerator's Titanium mobile development platform. Titanium uses a developer-friendly javascript syntax with custom APIs and methods that get translated and cross-compiled to native Objective-C and Java. These apps are not HTML/CSS web views wrapped in a "native" package - they are real native apps with native UI components.You will be introduced to Titanium, what it is, how it works, what the code looks like, pros and cons of the platform, and just how easy it is to make mobile applications with it with a few live demonstrations. My first experience with Titanium took me from being brand new to the platform to built and submitted Android and iPhone apps with identical functionality in 2 weeks.TRANSCRIPT
Vance Lucas (@vlucas) http://brightb.it
Cross-Platform Mobile
Development with Titanium
DevTeach - June 1, 2011
Tuesday, May 31, 2011
Vance Lucas (@vlucas) http://brightb.it
Who Am I?Vance Lucas
http://vancelucas.com
@vlucas
Brightbit
http://brightb.it
Mobile apps, PHP, Javascript/jQuery, Rails, Training, Consulting
2
Tuesday, May 31, 2011
Vance Lucas (@vlucas) http://brightb.it
Titanium?Open-Source native application development toolkit created by Appcelerator.
Goal: Web Technologies for Native Apps
Desktop (OSX / Windows / Linux)
HTML / CSS / JS - Webkit
Mobile (iOS / Android / Blackberry (beta))
Pure Javascript translated to native code (kinda)
3
Tuesday, May 31, 2011
Vance Lucas (@vlucas) http://brightb.it
The Titanium PromiseFulfilling the original promise of Java
“Write once, run anywhere”
... not “write once, suck everywhere”
Single codebase => multiple platforms
Apps must look and feel like they belong on the platform and be consistent with user expectations
Apps need to perform like native apps
4
Tuesday, May 31, 2011
Vance Lucas (@vlucas) http://brightb.it
What Does It Cost?NOTHING! The whole Titanium platform itself and all the tools required to build an app are free and open source: https://github.com/appcelerator
What’s the Catch?
Appcelerator sells support and premium modules to use in your app
They also do custom development on their own platform
5
Tuesday, May 31, 2011
Vance Lucas (@vlucas) http://brightb.it
How Does it Work?Pre-Compiler
Optimize, Analyze & Find Dependencies
Front End Compiler
Native code, project, other specific compile code, copy in native modules, package JS interpreter
Platform Compiler
Compile with native tools (Xcode, Android SDK)
6
Tuesday, May 31, 2011
Vance Lucas (@vlucas) http://brightb.it
Titanium Environment
7
Tuesday, May 31, 2011
Vance Lucas (@vlucas) http://brightb.it
Mobile DevelopmentPure Javascript with custom APIs
UI, Network, Map, Geo-location, Gestures, Accelerometer, Database, Filesystem, Media, etc.
Javascript API calls mapped to native APIs
JSON-like property description
8
Tuesday, May 31, 2011
Vance Lucas (@vlucas) http://brightb.it
Native UI ControlsControls and UI elements are native to the platform
9
Tuesday, May 31, 2011
Vance Lucas (@vlucas) http://brightb.it
Code CompositionView-based and event-driven
Fits Javascript perfectly
iOS-style layered view hierarchy
~60% UI Construction
~20% Event Handling
~20% Business Logic
10
Tuesday, May 31, 2011
Vance Lucas (@vlucas) http://brightb.it
Windows & Application Flow
Navigating your App
Tuesday, May 31, 2011
Vance Lucas (@vlucas) http://brightb.it
Project StructureResources directory hasthe “meat” of your project
app.js is the “bootstrap”file - always the first loaded
Do whatever you want after that!
12
Tuesday, May 31, 2011
Vance Lucas (@vlucas) http://brightb.it
Platform-SpecificsSpecial iphone and android folders will be used on respective platforms & moved at compile time
13
Tuesday, May 31, 2011
Vance Lucas (@vlucas) http://brightb.it
Screen DensitiesiOS / iPhone (3GS vs Retina)
Android (Cluster*@^#)
14
Tuesday, May 31, 2011
Vance Lucas (@vlucas) http://brightb.it
WindowsBase UI structure that other views and UI widgets and components are placed on
Controlled programmatically with a single JS file
JS file then creates UI components and adds them to itself in layers (button here, text here, etc.)
15
Tuesday, May 31, 2011
Vance Lucas (@vlucas) http://brightb.it 16
Code Execution Context
Tuesday, May 31, 2011
Vance Lucas (@vlucas) http://brightb.it
IncludesIncludes are the primary way to use global variables across different contexts and windows
Configuration, database, JS framework, etc.
17
Tuesday, May 31, 2011
Vance Lucas (@vlucas) http://brightb.it
TabsTab-based apps are most common and the easiest to make
Window transitions/navigation are built-in and automatic
One window per tab
Can open window within tab (shows “Back” button in iOS)
18
Tuesday, May 31, 2011
Vance Lucas (@vlucas) http://brightb.it
Tabs Code Example
19
Tuesday, May 31, 2011
Vance Lucas (@vlucas) http://brightb.it 20
Tuesday, May 31, 2011
Vance Lucas (@vlucas) http://brightb.it
Sometimes have to account for platform differences
iOS has title with tabs, Android does not
21
Tuesday, May 31, 2011
Vance Lucas (@vlucas) http://brightb.it
Custom UIMuch more more difficult, but very possible
Have to create a stack of views and keep track of position (esp. previous for “back” button)
Have to do everything by hand
Listen for “back” button (Android)
Transition animations
etc...
22
Tuesday, May 31, 2011
Vance Lucas (@vlucas) http://brightb.it
Tweetanium Mobile
23
Tuesday, May 31, 2011
Vance Lucas (@vlucas) http://brightb.it
ViewsThe DIVs of Native UIs
Tuesday, May 31, 2011
Vance Lucas (@vlucas) http://brightb.it
View & UI PositioningViews are Stackable & Nestable
Similar to absolute-positioned HTML/CSS elements
Left, top coordinate system (0,0 = top left)
Smart defaults:
Center position, 100% of parent size
Transparent until BG color or image specified
25
Tuesday, May 31, 2011
Vance Lucas (@vlucas) http://brightb.it 26
Tuesday, May 31, 2011
Vance Lucas (@vlucas) http://brightb.it
Stacking Views
27
Tuesday, May 31, 2011
Vance Lucas (@vlucas) http://brightb.it
UI Controls & Widgets
Buttons and Tables and Pickers, oh my!
Tuesday, May 31, 2011
Vance Lucas (@vlucas) http://brightb.it
Titanium.UI ModuleBridge to native UI components
Everything you SEE in an app
Animations, dialogs, buttons, images, labels, date/time pickers, scroll views, search bars, sliders, switches, tabs, tables, text & input fields, toolbars, view, webviews, windows, and more...
29
Tuesday, May 31, 2011
Vance Lucas (@vlucas) http://brightb.it 30
Tuesday, May 31, 2011
Vance Lucas (@vlucas) http://brightb.it
JSS - JS Style SheetsJSON-style properties for object creation are nice, but can be repetitive when used across an entire app UI
Separate styles from UI component code with JSS
Two ways to use:
global.jss - Applied to ALL UI components
<window>.jss - Overrides for <window>.js only
31
Tuesday, May 31, 2011
Vance Lucas (@vlucas) http://brightb.it
JSS ExampleAssign “id” to UI component and reference by id
Reference by type
Window-specific rules override global ones
32
Tuesday, May 31, 2011
Vance Lucas (@vlucas) http://brightb.it
EventsWhat to do & When to do it
Tuesday, May 31, 2011
Vance Lucas (@vlucas) http://brightb.it
Events and Callbacks“Do X when Y happens”
Syntax is just like native Javascript
UI controls have their own events you can listen to
click, blur, focus, change, scroll, etc.
Custom events supported - “app_customevent”
Extremely useful for triggering activity in other parts of your app from anywhere else in the app
34
Tuesday, May 31, 2011
Vance Lucas (@vlucas) http://brightb.it 35
Event Contexts
Tuesday, May 31, 2011
Vance Lucas (@vlucas) http://brightb.it
Handling Button Clicks
36
Tuesday, May 31, 2011
Vance Lucas (@vlucas) http://brightb.it
Ti.APITI.API
log /info / debug / warn / error
addEventListener / removeEventListener
global context for custom events
fireEvent - Trigger named event from anywhere
37
Tuesday, May 31, 2011
Vance Lucas (@vlucas) http://brightb.it
domains/list.jsTable view lists domains in local database
Event updates active domain on table row click
Passes row title (domain) with e.rowData.title
38
Tuesday, May 31, 2011
Vance Lucas (@vlucas) http://brightb.it
app.js - Defined Event
39
Tuesday, May 31, 2011
Vance Lucas (@vlucas) http://brightb.it
domains/social.jsEvent “st_social_fetchAll” fires all fetch events...
...which then update individual counts via events
40
Tuesday, May 31, 2011
Vance Lucas (@vlucas) http://brightb.it
Many Levels Deep...
41
Tuesday, May 31, 2011
Vance Lucas (@vlucas) http://brightb.it
SEMTab SEO Pro
42
Tuesday, May 31, 2011
Vance Lucas (@vlucas) http://brightb.it
APIsThe Natives are Exposed
Tuesday, May 31, 2011
Vance Lucas (@vlucas) http://brightb.it
Hardware & ExtrasAccelerometer, Geo-location, Locale, Gestures, Filesystem, Device Orientation, Databases, Contacts, Mapping, Camera & Video, Clipboard, and more...
Two main ways to interact:
Direct APIs with methods
Events with callbacks
44
Tuesday, May 31, 2011
Vance Lucas (@vlucas) http://brightb.it
Ti.AccelerometerGet x, y, z coordinates of the device
Listen to event with callback when fired
Do something with new coordinates
45
Tuesday, May 31, 2011
Vance Lucas (@vlucas) http://brightb.it
Ti.DatabaseDirect API interface to SQLite database
Pre-installed on iOS & Android devices
Create and delete databases
Allows for simple query execution and resultSet traversing
Any query or syntax supported by SQLite
46
Tuesday, May 31, 2011
Vance Lucas (@vlucas) http://brightb.it
Ti.Database SetupOpen named database
Create tables with standard queries
47
Tuesday, May 31, 2011
Vance Lucas (@vlucas) http://brightb.it
Iterate over ResultsCreate TableView and push data into rows. TableView will take care of all display & formatting
48
Tuesday, May 31, 2011
Vance Lucas (@vlucas) http://brightb.it
Ti.NetworkTalk to remote servers!
HTTPClient
Bonjour Service + Browser
TCP Sockets
You will most likely be using HTTPClient a lot...
49
Tuesday, May 31, 2011
Vance Lucas (@vlucas) http://brightb.it
Basic HTTPClient Use
50
Tuesday, May 31, 2011
Vance Lucas (@vlucas) http://brightb.it
AnimationsEasier than you might think
Tuesday, May 31, 2011
Vance Lucas (@vlucas) http://brightb.it
3 ComponentsTransition
Transformation to apply
Duration
Milliseconds
Callback
What happens after animation is complete
52
Tuesday, May 31, 2011
Vance Lucas (@vlucas) http://brightb.it
3 Types of AnimationsBasic
2D Matrix
3D Matrix
53
Tuesday, May 31, 2011
Vance Lucas (@vlucas) http://brightb.it
Basic AnimationSimple property changes over duration
Color, background, size, position, visibility, etc.
54
Tuesday, May 31, 2011
Vance Lucas (@vlucas) http://brightb.it
Basic AnimationChanges view background from red to black to orange over 2 seconds
55
Tuesday, May 31, 2011
Vance Lucas (@vlucas) http://brightb.it
2D MatrixRotate, scale, skew, invert
Oh noes! Maths!
56
Tuesday, May 31, 2011
Vance Lucas (@vlucas) http://brightb.it
Proportional Rotation:
In radians
57
Tuesday, May 31, 2011
Vance Lucas (@vlucas) http://brightb.it
3D MatrixRotate, scale, skew, invert, flip - in 3D space
58
Tuesday, May 31, 2011
Vance Lucas (@vlucas) http://brightb.it
3D TransformationsCombine matrices to achieve transformations
Scaling Distance
Rotation
59
Tuesday, May 31, 2011
Vance Lucas (@vlucas) http://brightb.it 60
Tuesday, May 31, 2011
Vance Lucas (@vlucas) http://brightb.it
2D MatrixLuckily, Titanium has useful helpers...
scale, rotate, invert, multiply, translate
Automatic degree to radian conversion
61
Tuesday, May 31, 2011
Vance Lucas (@vlucas) http://brightb.it
3D Matrix3D Matrices also have helpers...
62
Tuesday, May 31, 2011
Vance Lucas (@vlucas) http://brightb.it
No Math Required!Still should read up on Matrices and how they apply to 3D transformations and game design
Will pay dividends in understanding how matrix transformations work and why
Helps to know what operation to perform to get the desired result
What will inverting do? multiplying?
There is always the “trial & error” method too...
63
Tuesday, May 31, 2011
Vance Lucas (@vlucas) http://brightb.it
ModulesNative Add-Ons
Tuesday, May 31, 2011
Vance Lucas (@vlucas) http://brightb.it
Custom ModulesCreate custom modules with native code that maps to Javascript APIs in Titanium
Android - Java
iOS - Obj-C
BlackBerry - Java
65
Tuesday, May 31, 2011
Vance Lucas (@vlucas) http://brightb.it
Titanium+Plus Modules
66
Tuesday, May 31, 2011
Vance Lucas (@vlucas) http://brightb.it
DrawbacksWatch that First Step...
Tuesday, May 31, 2011
Vance Lucas (@vlucas) http://brightb.it
TestingA lot of testing is “trial and error” style
Some UI components and options are iOS-only, and cause crashes in Android
No warning during compile cycle for using incompatible components
Appcelerator has said improvements are coming
68
Tuesday, May 31, 2011
Vance Lucas (@vlucas) http://brightb.it
DebuggingDebug stack traces from published app crashes are USELESS, because you didn’t write the code
The most you can do is get support from Appcelerator by sending in or posting your stack traces
69
Tuesday, May 31, 2011
Vance Lucas (@vlucas) http://brightb.it
SourcesOpen and Available for Use
Tuesday, May 31, 2011
Vance Lucas (@vlucas) http://brightb.it
SourcesPlatform: http://appcelerator.com
Animation Guide: http://wiki.appcelerator.org/display/guides/Animations+in+Action
API Docs: http://developer.appcelerator.com/apidoc/mobile/latest/Titanium.UI.3DMatrix-object
Animation Images: http://www.eleqtriq.com/2010/05/css-3d-matrix-transformations/
Matrix Images: http://en.wikipedia.org/wiki/Matrix_(mathematics)
Matrix Math: http://gpwiki.org/index.php/Matrix_math
71
Tuesday, May 31, 2011
http://brightb.it
(405) 595-0101
Oklahoma City
Tuesday, May 31, 2011