Slide deck for a presentation during a JavaScript meetup in Atlanta, GA. This is an intro into titanium with a twist being that I focused on explaining some of the power titanium gives developers by allowing them to easily create their own UI versus using native graphics.

1. Anarchist Guide to
Titanium UI
AN INTRODUCTION TO TITANIUM &
PROTOTYPING
Wednesday, June 22, 2011

2. Vince Baskerville
Co-Founder of TripLingo
VP of Production
TripLingo
@whoisvince
Wednesday, June 22, 2011

3. TOPICS
What is Titanium
Requirements
Tools
Quick Peek
Q&A
Wednesday, June 22, 2011

4. What is Titanium
Wednesday, June 22, 2011

5. It’s a bad-ass framework
It’s a rapid application
development platform
Use your base source to develop to
multiple platforms & devices
iOS & Android currently for mobile
Wednesday, June 22, 2011

6. What’s inside?
300+ APIs
Full filesystem access
Internal SQLite database access
Built-in analytics
Use JavaScript, HTML5 & CSS3
Objective-C for modules
* more...
Wednesday, June 22, 2011

7. How does it work?
Pre-compiler
Optimizes your .js code
Front-end compiler
Generates platform-specific native code
Platform compiler & packager
Packaged for runing on the native simulator, device &/or
distribution
Wednesday, June 22, 2011

8. Requirements
Titanium Developer sdk
http://www.appcelerator.com/products/download/
iOS sdk & Xcode
http://developer.apple.com/
Java SDK & Android SDK
http://developer.android.com/sdk/index.html
Wednesday, June 22, 2011

9. Tools
Kitchen Sink (sample app)
https://github.com/appcelerator/kitchensink
API References
http://developer.appcelerator.com/apidoc/
mobile/latest
Community Q&A
http://developer.appcelerator.com/
questions/newest
AppU Training
http://training.appcelerator.com/
Wednesday, June 22, 2011

10. I <3 Coda
My
http://panic.com/coda/
Tower (git gui)
Workflow
http://www.git-tower.com/
CodaSet.com
http://codaset.com/
Wednesday, June 22, 2011

11. Quick Peek
Wednesday, June 22, 2011

12. Project Structure
build
iphone
Info.plist
Resources
app.js
anotherView.js
manifest
tiapp.xml
Wednesday, June 22, 2011

13. Project Structure
build Build directory
iphone per platform
Info.plist
Resources
app.js
anotherView.js
manifest
tiapp.xml
Wednesday, June 22, 2011

14. Project Structure
build
iphone
Info.plist Resource files;
actual js code,
Resources
images, db files, etc
app.js
anotherView.js
manifest
tiapp.xml
Wednesday, June 22, 2011

15. Project Structure
build
iphone
Info.plist
Resources
app.js Project files
anotherView.js
manifest
tiapp.xml
Wednesday, June 22, 2011

16. Code Interface
Module
Titanium.UI
Object
Titanium.UI.Label
Object Factory
Titanium.UI.createLabel({})
Properties / Methods
...({ top: 0, left: 44, text: ‘Spanish’ });
Event Handling
Button.addEventListener(click)
Wednesday, June 22, 2011

17. JSS vs Inline
Each method ends
with a semi-colon;
Each except the last
Words are
ends with a comma,
seperated with a
dash, ie:
words are not
background-image:
seperated, ie:
backgroundImage:
file name needs to
match .js document
and be in same dir
Wednesday, June 22, 2011

18. Sooo... about that title
Wednesday, June 22, 2011

19. Titanium does a great job at giving you access
to native buttons, tabs, etc; but you don’t have
to use them
Wednesday, June 22, 2011

20. Break the rules*
Use the native controls for prototyping. Then if
you can, create your own UI. Go crazy!
*okay, so not really.. instead, you can bend & cheat some though.
Wednesday, June 22, 2011

21. TripLingo
“This doesn't seem like it
would function better than an
app designed with apples ios
guidelines in mind”
“I love this app! Very
intuitive and beautiful. Very
cool idea. Good job”
Wednesday, June 22, 2011

22. Drilldown
95% custom UI
Prototype developed in 2 days
MVP in 2 weeks
v1.0 in 4 months
Possible because of Titanium (and
a bad-ass team!)
Wednesday, June 22, 2011

23. Code Demo
Wednesday, June 22, 2011

24. Questions?
Wednesday, June 22, 2011

25. Merci Beaucoup
By: Vince Baskerville
http://vincentjordan.com
Wednesday, June 22, 2011