Titanium For New Developers
-
Upload
kevin-whinnery -
Category
Technology
-
view
9.383 -
download
1
description
Transcript of Titanium For New Developers
![Page 1: Titanium For New Developers](https://reader035.fdocuments.net/reader035/viewer/2022062405/554f50e8b4c905b9508b4d8d/html5/thumbnails/1.jpg)
1http://www.appcelerator.com | @appcelerator
Welcome To Titanium!Welcome To Titanium!Kevin Whinnery
Engineer / Platform Evangelist
@kevinwhinnery
![Page 2: Titanium For New Developers](https://reader035.fdocuments.net/reader035/viewer/2022062405/554f50e8b4c905b9508b4d8d/html5/thumbnails/2.jpg)
2http://www.appcelerator.com | @appcelerator
Agenda
• Titanium Mobile Overview• Hello World and Project
Walkthrough• Building Titanium Apps:
Fundamentals• Where To Go From Here• Questions and Answers
![Page 3: Titanium For New Developers](https://reader035.fdocuments.net/reader035/viewer/2022062405/554f50e8b4c905b9508b4d8d/html5/thumbnails/3.jpg)
3http://www.appcelerator.com | @appcelerator
About Me
Kevin WhinneryEngineer/Platform Evangelist
http://kevinwhinnery.com
Twitter: @kevinwhinnery
E-Mail: [email protected]
Web developer by trade and training, lover of JavaScript and open web technologies in general
![Page 4: Titanium For New Developers](https://reader035.fdocuments.net/reader035/viewer/2022062405/554f50e8b4c905b9508b4d8d/html5/thumbnails/4.jpg)
4http://www.appcelerator.com | @appcelerator
About Appcelerator•Open Source
Software Company based in Mountain View, CA
•Developing Titanium over two years
•Enabling deployment of web technology in native applications across multiple screens
![Page 5: Titanium For New Developers](https://reader035.fdocuments.net/reader035/viewer/2022062405/554f50e8b4c905b9508b4d8d/html5/thumbnails/5.jpg)
5http://www.appcelerator.com | @appcelerator
About You
• Web developers• Flash developers• Designers• Desktop, iOS, Android, or Blackberry app developers• Targeting top mobile platforms (plus desktop)
![Page 6: Titanium For New Developers](https://reader035.fdocuments.net/reader035/viewer/2022062405/554f50e8b4c905b9508b4d8d/html5/thumbnails/6.jpg)
6http://www.appcelerator.com | @appcelerator
Build Native?
•Which platforms do you choose?•How many codebases do you want to (or
even can you) support?•How long will it take to build native on N
platforms?•How much effort will be duplicated?•What if you bet on the wrong platform?•Who writes the code? Hire out?
Retrain/retool yourself or your devs?
![Page 7: Titanium For New Developers](https://reader035.fdocuments.net/reader035/viewer/2022062405/554f50e8b4c905b9508b4d8d/html5/thumbnails/7.jpg)
7http://www.appcelerator.com | @appcelerator
The Web is an option...•...and a darn good one - should
often be targeted first•Mobile browsers are progressing
fast and converging around WebKit
•But there are limitations•Native apps are inherently more
capable than web apps•Native apps run faster and
smoother on resource constrained devices
![Page 8: Titanium For New Developers](https://reader035.fdocuments.net/reader035/viewer/2022062405/554f50e8b4c905b9508b4d8d/html5/thumbnails/8.jpg)
8http://www.appcelerator.com | @appcelerator
Ideally, we want to build cross-platform native apps.
![Page 9: Titanium For New Developers](https://reader035.fdocuments.net/reader035/viewer/2022062405/554f50e8b4c905b9508b4d8d/html5/thumbnails/9.jpg)
9http://www.appcelerator.com | @appcelerator
...but we don’t want to “write once, suck
everywhere”*
*Loren Brichter, creator “Twitter for iPhone”/Tweetie
![Page 10: Titanium For New Developers](https://reader035.fdocuments.net/reader035/viewer/2022062405/554f50e8b4c905b9508b4d8d/html5/thumbnails/10.jpg)
10
http://www.appcelerator.com | @appcelerator
Doing Cross-Platform Right•Target multiple platforms from a single
codebase•Apps must look and feel like they belong on
the platform, meet user expectations•Apps need to perform like native•Bonus: Open source and extensible•Bonus: Use skills we already have
![Page 11: Titanium For New Developers](https://reader035.fdocuments.net/reader035/viewer/2022062405/554f50e8b4c905b9508b4d8d/html5/thumbnails/11.jpg)
11
http://www.appcelerator.com | @appcelerator
Enter Titanium
Titanium is an open source framework for building native mobile or desktop
applications using open web technologies (JavaScript, HTML and CSS)
![Page 12: Titanium For New Developers](https://reader035.fdocuments.net/reader035/viewer/2022062405/554f50e8b4c905b9508b4d8d/html5/thumbnails/12.jpg)
12
http://www.appcelerator.com | @appcelerator
Titanium Key Facts•Open Source (Apache 2.0)•Professional Services, SLA
Support, Training, and Analytics available from Appcelerator
Titanium Platforms• Desktop: Win32, OS X, Linux• Mobile: iOS, Android,
BlackBerry
![Page 13: Titanium For New Developers](https://reader035.fdocuments.net/reader035/viewer/2022062405/554f50e8b4c905b9508b4d8d/html5/thumbnails/13.jpg)
13
http://www.appcelerator.com | @appcelerator
Titanium Projects
•Titanium Developer (1.2.2)•Titanium Mobile SDK (1.5.1)•Titanium Desktop SDK (1.1.0)•Versioned separately,
different release schedules
![Page 14: Titanium For New Developers](https://reader035.fdocuments.net/reader035/viewer/2022062405/554f50e8b4c905b9508b4d8d/html5/thumbnails/14.jpg)
14
http://www.appcelerator.com | @appcelerator
Platform FeaturesNative UI
Location APIs
Local and Remote Data
Social APIs
Rich Media APIs
Open Source and Extensible
Integrated Analytics
Development Tools
Real native tables, tabs, sliders,and views
Native Maps, Compass, and Geolocation
Local SQL Database, LightweightKey/Value Store, XHR
Integrated Facebook Connectand YQL
Local and streaming audio andvideo, media recording
Extend Titanium with custommodules in native code
Baked-in analytics APIs to measureresults and behavior
Develop and distribute your app formultiple platforms from a single tool
![Page 15: Titanium For New Developers](https://reader035.fdocuments.net/reader035/viewer/2022062405/554f50e8b4c905b9508b4d8d/html5/thumbnails/15.jpg)
15
http://www.appcelerator.com | @appcelerator
Who Uses Titanium?
• NBC Universal• eBay/PayPal•Anheuser-Busch
• MTV• Computer Sciences Corporation• 1000s of apps per month to the stores
![Page 16: Titanium For New Developers](https://reader035.fdocuments.net/reader035/viewer/2022062405/554f50e8b4c905b9508b4d8d/html5/thumbnails/16.jpg)
16
http://www.appcelerator.com | @appcelerator
Titanium Architecture
• Desktop is HTML focused
• Can use other scripting languages
• Mobile: JavaScript interpreted at runtime
• JavaScript API >> native APIs
![Page 17: Titanium For New Developers](https://reader035.fdocuments.net/reader035/viewer/2022062405/554f50e8b4c905b9508b4d8d/html5/thumbnails/17.jpg)
17
http://www.appcelerator.com | @appcelerator
Desktop App Composition• HTML/CSS inside native window chrome• All HTML/CSS/JS libraries in play• Ruby, Python, PHP access• Ajax Client
![Page 18: Titanium For New Developers](https://reader035.fdocuments.net/reader035/viewer/2022062405/554f50e8b4c905b9508b4d8d/html5/thumbnails/18.jpg)
18
http://www.appcelerator.com | @appcelerator
Demo: Hello World• Create a new Desktop App• Launch for current platform• Project structure
![Page 19: Titanium For New Developers](https://reader035.fdocuments.net/reader035/viewer/2022062405/554f50e8b4c905b9508b4d8d/html5/thumbnails/19.jpg)
19
http://www.appcelerator.com | @appcelerator
Okay, so Desktop is mostly a single-page HTML app
running inside a supercharged Webkit browser. What does a mobile app look like?
![Page 20: Titanium For New Developers](https://reader035.fdocuments.net/reader035/viewer/2022062405/554f50e8b4c905b9508b4d8d/html5/thumbnails/20.jpg)
20
http://www.appcelerator.com | @appcelerator
A Simple Mobile App
• Native UI widgets constructed via JavaScript• iOS-style view hierarchy (.add())• 60% of code is UI construction, 20% event handling, 20% biz logic
![Page 21: Titanium For New Developers](https://reader035.fdocuments.net/reader035/viewer/2022062405/554f50e8b4c905b9508b4d8d/html5/thumbnails/21.jpg)
21
http://www.appcelerator.com | @appcelerator
Typical App Composition•“Windows”
vs. “Views”•App types:
–Tab Group–Single Window
–Window Stack
•Windows are like ‘pages’, views like ‘div’s
![Page 22: Titanium For New Developers](https://reader035.fdocuments.net/reader035/viewer/2022062405/554f50e8b4c905b9508b4d8d/html5/thumbnails/22.jpg)
22
http://www.appcelerator.com | @appcelerator
Demo: Hello World!•Creating a mobile project•Mobile project structure•Editing code, adding UI
widgets to the app•Deploy to simulator
![Page 23: Titanium For New Developers](https://reader035.fdocuments.net/reader035/viewer/2022062405/554f50e8b4c905b9508b4d8d/html5/thumbnails/23.jpg)
23
http://www.appcelerator.com | @appcelerator
Demo: Kitchen Sink• Example Code• Living Reference Document• Demonstrates API coverage• github.com/appcelerator/
KitchenSink
![Page 24: Titanium For New Developers](https://reader035.fdocuments.net/reader035/viewer/2022062405/554f50e8b4c905b9508b4d8d/html5/thumbnails/24.jpg)
24
http://www.appcelerator.com | @appcelerator
Where To Next?
• Developer Resources– API docs, User Guides– Community Q&A– vimeo.com/appcelerator– IRC: #titanium_app (kwhinnery/cauld/fusion94) on irc.freenode.net
• Pro Services– SLA Support– Full lifecycle development or partner matching
![Page 25: Titanium For New Developers](https://reader035.fdocuments.net/reader035/viewer/2022062405/554f50e8b4c905b9508b4d8d/html5/thumbnails/25.jpg)
25
http://www.appcelerator.com | @appcelerator
Stay Up To Date
• Follow @appcelerator• Fan Us - facebook.com/appcelerator• Developer Blog• Corporate Blog• Appcelerator Crew:– @jhaynie, @donthorp, @marshall_law, @billdawson, @fusion94, @kevinwhinnery, @chadauld, @clinttredway, @tyrusaurus... (too many to count now!)
![Page 26: Titanium For New Developers](https://reader035.fdocuments.net/reader035/viewer/2022062405/554f50e8b4c905b9508b4d8d/html5/thumbnails/26.jpg)
26
http://www.appcelerator.com | @appcelerator
Questions?