Loading presentation...

Present Remotely

Send the link below via email or IM


Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.


Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Titanium 3 ecosystem

A brief description about the Appcelerator Titanium ecosystem, including modules, Alloy, ACS and Titanium itself

Javier Rayon

on 8 November 2012

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Titanium 3 ecosystem

the old days... Today: a whole mobile ecosystem Native UI Modules &
Marketplace Appcelerator
Cloud Services
& Analytics Titanium Studio
& CLI Titanium SDK Titanium SDK Deploy to: Titanium SDK NATIVE LAYER TITANIUM SDK JAVASCRIPT CODE mobile 2013... Titanium SDK Exposes most part of native APIs Documentation Community Titanium SDK First steps... and further Learn javascript
Learn Titanium API
Learn Titanium Studio
Learn platform specifics
Learn commonJS
New! Learn alloy Titanium SDK Samples http://www.builtwithtitanium.com/ see more at Titanium SDK Training & Certification http://www.appcelerator.com/thinkmobile/showcase Advantages:
- Development times up to 70% faster (compared to native development)
- UI performance and look&feel close to native
- Debug tools (new: debug on device, bye bye android emulator)
- Same SDK for multi-platform development
- JavaScript Extend the SDK functionality Modules NATIVE LAYER TITANIUM SDK JAVASCRIPT CODE native modules commonjs modules Sometimes Titanium SDK does not support a native API
or we want to package our own functions, APIs and resources.

Modules are the solution. Modules Extend the SDK functionality
Tons of great modules available in GitHub and the Appcelerator Marketplace Appcelerator Cloud Services Analytics Who’s using my app?
What application features are they using most?
How is my user base growing over time?
How does mobile application usage evolve? FALSE Disadvantages:
- "Memory leaks": most memory leaks are, in fact, caused by javascript bad practices

- "Documentation": greatly improved since first versions, now is constantly updated and improved
Suitable for:
- Most kind of apps, except those with an intensive usage of big data or binary data (advanced audio/video manipulation, 3D engines...) Weak points compared to native sdk:
- Native API not covered at 100% --> Use modules!
- Performance on *stressful* tasks
- No GUI builder... by now ACS Cloud.Users.create({
email: 'test@mycompany.com',
username: 'testname',
first_name: 'test_firstname',
last_name: 'test_lastname',
password: 'test_password',
password_confirmation: 'test_password'
}, function (e) {
}); Cloud.Photos.create({
photo: photo, //blob format
collection_id: collectionID,
'photo_sync_sizes[]': 'small_240'
}, function (e) {
if (e.success) {

} else {
// oops
}); Cloud.Objects.create({
classname: 'cars',
fields: {
make: 'nissan',
color: 'blue',
year: 2005
photo: car.photo
}, function (e) {
if (e.success) {
var car = e.cars[0];
alert('Success:\\n' +
'id: ' + car.id + '\\n' +
'make: ' + car.make + '\\n' +
'created_at: ' + car.created_at);
} else {
alert('Error:\\n' +
((e.error && e.message) || JSON.stringify(e)));
}); Cloud.Objects.query({
classname: 'cars',
page: 1,
per_page: 10,
where: {
color: 'blue'
}, function (e) {
if (e.success) {
alert('Success:\\n' + 'Count: ' + e.cars.length);
for (var i = 0; i < e.cars.length; i++) {
var car = e.cars[i];
Ti.API.info('id: ' + cars.id + '\\n' +
'make: ' + car.make + '\\n' +
'color: ' + car.color + '\\n' +
'year: ' + car.year + '\\n' +
'created_at: ' + car.created_at);
} else {
}); Cloud.PushNotifications.subscribe({
channel: 'friend_request',
device_token: myPushDeviceToken
}, function (e) {
if (e.success) {
} else {
alert('Error:\\n' + ((e.error && e.message) || JSON.stringify(e)));
}); Cloud.PushNotifications.notify({
channel: 'friend_request',
to_ids: usersIDs,
payload: message
}, function (e) {
if (e.success) {
} else {
alert('Error:\\n' +
((e.error && e.message) || JSON.stringify(e)));
}); var Cloud = require('ti.cloud'); //Titanium integration! Available for iOS, android, actionScript, JavaScript and Titanium Prices Analytics and ACS The future of Titanium A real MVC framework integrated with Titanium tools prices at 06/11/2012, from appcelerator.com

Define UI with XML tags and JSON styles
Create controllers in JavaScript
Manage Models and abstract them from databases and device
And much more! Alloy 1. Provides a convenient separation of user interface and business logic. <Alloy>
<Label id="mylabel">Hello, World!</Label>
</Alloy> "Window": {
backgroundColor: '#fff'
"#mylabel": {
color: '#000',
font: {
fontSize: '18dp',
fontWeight: 'bold'
height: Ti.UI.SIZE,
width: Ti.UI.SIZE
} // open the window from markup

// alert the text of the label
alert($.mylabel.text); var index = Ti.UI.createWindow({
backgroundColor: '#fff'

var myLabel = Ti.UI.createLabel({
color: '#000',
font: {
fontSize: '18dp',
fontWeight: 'bold'
height: Ti.UI.SIZE,
width: Ti.UI.SIZE,
text: "Hello, World!"



alert(myLabel.text); "the old Ti style" With Alloy... index.xml index.js index.tss designer friendly Alloy 2. New mechanisms to create reusable code: Widgets and Builtin Libraries Application Widgets Builtin Libraries
Alloy 3. Models provides an abstraction layer between code and data source Support for device properties, local storage and SQL lite adapters.

Provides CRUD interface for data models, access from controller and capture fetch events, such as change:anyfield to bind components. https://github.com/appcelerator/alloy use app.tss for global styles!! Alloy And much more... Themes http://vimeo.com/52765325 index.js: $.index.open(); //1 line of code! Titanium 3.0 A whole mobile ecosystem Javier Rayon - @jrayon
http://www.criteriastudio.com Titanium 3.0 A whole mobile ecosystem Javier Rayon - @jrayon
javier@criteriastudio.com http://2013.ticonf.eu Resources http://www.criteriastudio.com/category/blog http://www.appcelerator.com http://developer.appcelerator.com/apidoc/mobile/latest https://github.com/appcelerator/alloy http://cloud.appcelerator.com/docs/ tutoriales en español download Titanium documentation, APIs and Titanium guides Alloy Appcelerator Cloud Services Documentation http://2013.ticonf.eu Titanium European Conference (ticonf) Self contained reusable components

Contains UI and logic

Work in any Alloy app Animation
String Code optimization Error catching on compilation Global styles
UI Platform parity Platform specific UI controls a few samples Plus non-UI API as: media, accelerometer, contacts, Network, Filesystem, geo-localization, Facebook integration...
Full transcript