This document summarizes Jeff Haynie's presentation at iPhone/iPad Dev Con 2010. He discusses Appcelerator, which allows developers to build native iOS apps using JavaScript. Key points include that Appcelerator has over 72,000 developers and 4,750 apps in stores. It exposes native iOS capabilities while still requiring use of the iOS SDK. The Titanium platform provides APIs for common tasks like media, networking, and UI and allows both simple and complex animations. It also supports new iOS4 features like backgrounding and local notifications.

1. iPhone/iPad Dev Con 2010
San Diego, CA ~ September 28

2. About Me
Jeff Haynie
@jhaynie
http://blog.jeffhaynie.us
http://github.com/jhaynie
http://slideshare.net/jhaynie
Serial Entrepreneur & Silicon Valley geek
Objective-C hacker
Co-founder and CEO, Appcelerator
All around good guy

3. Massive Business Problem offers Significant Opportunity

4. Appcelerator
We empower web developers by giving them
the ability to create native iOS applications
using JavaScript.
Speed, Skills, Infrastructure, Processes, Tools,
Libraries, Reusability...

5. Appcelerator by the numbers
72,000 Developers
4,750 Apps in Stores
1,100 New Apps/Mo

6. Not write once, run crappy everywhere
Appcelerator isn’t a write once, run
everywhere. This isn’t possible (if you want
create application experiences for each
device).
Not a replacement for terrible UI design.
Not a replacement for great developers.
JavaScript FTW!

7. Appcelerator is native iOS
Exposed native capabilities
Optimization of your JS code
Generation of native binding code (Obj-C)
Compile your application using iOS SDK.

8. Appcelerator is native
✓ You still need a Mac and OSX
✓ You still need iOS SDK
✓ You still need provisioning profiles (ugh!)
✓ You still need Apple
You still need a good app design and ...
common sense.
If your app is a bad idea or has bad design,
Apple will still reject it.

9. Appcelerator Basic
APIs are self-declarative
Titanium.Media
Titanium.UI
Titanium.Network

10. Appcelerator Basics
We use a factory pattern:
var media=Ti.UI.createVideoPlayer();
window.add(media);
media.play();

11. Properties
var m = Ti.Media.createVideoPlayer
( {
url: “foo.mpg”
});
m.url = “bar.mpg”;

12. Garbage Collection
We’ll handle retain/release cycles for you
based on your JS references.
Some objects allow you to help us, help you.
media.destroy();

13. UI Framework
Titanium exposes native UI through model/
view paradigm.
Windows
Views
Widgets

14. Window / View / Widget relationships
Windows are Views
Widgets are Views
Views are hierarchical
Views contain views
Windows can be opened or closed
Windows can points to a local url

15. Layout
Relative positioning / CSS-like
top, left, right, bottom
width: “50%”, height: “200”
layout: “vertical”, “horizontal”
zIndex: 199

16. JSS
Like CSS, adapted for Titanium
#foo {
title: “Hello world”;
width: 200px;
height:40px;
}
var button = Ti.UI.createButton({
id:”foo”
});

17. Common Properties
A lot of the common CSS properties you’d
expect:
borderWidth
borderColor
backgroundImage
fontFamily

18. Simple Example
var win = Ti.UI.createWindow();
var b = Ti.UI.createButton({
title: “hello world”,
width:200,
height: 80
});
win.add(b);
win.open();

19. Make the button go “quack”
b.addEventListener(‘click’,function(
){
var m = Ti.Media.createSound({
url:”cricket.wav”
});
m.play();
});

20. Simple Animations
Grow the width over 3 seconds
view.animate({
duration:3000,
width:200
});

21. Complex 2D and 3D Animations
Using matrix transforms
var
t=Ti.UI.create2DMatrix().rotate(20).
scale(1.5);
var a=Ti.UI.createAnimation();
a.transform = t;
a.duration = 3000;
view.animate(a);

22. Major API sets
Media - audio, video
Network - networking (sockets, web services)
UI - user interface
Database - database
Geolocation - location services
Utils - common utilities like md5, base64
XML - native XML
Map - native maps

23. Web Services
var xhr = Ti.Network.createHTTPClient();
xhr.onload = function() {
Ti.API.info('in utf-8 onload for POST');
};
xhr.open("POST","http://api.appcelerator.net/
p/v1/echo");
xhr.send({"a":"€ ", "b":"aöbäcüd"});

24. Web Services with Complex Data (Image from Photo Gallery)
Ti.Media.openPhotoGallery({
success:function(event)
{
xhr.send({media:event.media});
}
});

25. iOS4 Backgrounding (new in upcoming 1.5)
Ti.App.registerBackgroundService({
url:'bg.js'
});

26. iOS4 Local Notifications (new in upcoming 1.5)
Ti.App.scheduleLocalNotification({
alertBody:"Are you sure?",
alertAction:"Launch!",
userInfo:{"hello":"world"},
sound:"pop.caf",
date:new Date(new Date().getTime()
+ 3000)
});

27. What can you not do with Titanium?
It’s not great for 3D immersive games. Plenty
of casual / 2D games being built.
For anything else, we have the Module SDK.
Package your Titanium extension and
distribute it.
Great for extending and third-party APIs.

28. More new stuff in upcoming 1.5
Localizations
L(“my_string”)
Ti.Locale.getString(“my_string”)
Due out in October

29. How about iPad?
Split Views
Popovers
Nav Controllers (also in iPhone)

30. iPad SplitView example
var sv =
Ti.UI.iPad.createSplitWindow({
masterView:masterNav,
detailView:detailNav,
});
sv.open();

31. Can I hack on Appcelerator?
Code is on github.com/appcelerator
Licensed under Apache Public License (v2)
developer.appcelerator.com

32. Other Appcelerator Products
Titanium Analytics
Web-based product that enables
companies to understand their
application usage, scenarios and users.
Titanium+Geo
Web-based product that enables geo-
spatial analytics as well as integration
into first-party and third-party data
sources. Enables companies to apply
location context to their analysis and
forecasting.