Successfully reported this slideshow.
Building Cross Platform Mobile Apps:
An Introduction to Appcelerator Titanium
Adam Paxton

Barcamp Cancun July 31, 2014
Overview
• What is Appcelerator Titanium?
• Why use it?
• Pros
• Cons
• Tools Walkthrough
Hello
• Freelance Mobile Developer, 

Polanco Media, LLC
• 4+ years working with Titanium
• TCAD, TCMD certified
• Titanium...
We are:
• Web developers
• Companies with existing developer resources
• Startups
• Someone with an idea
We want to build:
• App for our client
• App for our enterprise
• App for ourselves
What do we use?
• iOS - Objective C / Swift
• Android - Java
• Mobile Web - HTML5
• Blackberry - Java, BB10 - C++
• Window...
Another Option: Appcelerator Titanium
• Appcelerator, Inc - Based in Mountain View, CA
• Titanium - Free version for anyon...
Titanium
• Cross platform development environment for creating native mobile apps
• Program with JavaScript
• Free and ope...
How does it work?
How does it work?
• Write your code in JavaScript

• Code is minified and packaged with with
Titanium APIs and JavaScript i...
Pros
• Maintain a single code base across multiple platforms
• 60% to 90% code re-use across platforms
• Use your or your ...
Cons
• Does not cover entire API for all platforms
• Over 5000 APIs are supported
• You can extend the API to access any a...
The Tools
• Titanium SDK
• Titanium Studio
• Titanium CLI
• Cloud Services
• Alloy MVC Framework
Titanium SDK
• Everything uses the SDK
• Updates usually released monthly
• Current version: 3.3.0
Titanium Studio
• IDE used to build, test, package and
publish mobile applications across
platforms

• Free, based on Ecli...
Titanium Command Line Interface	
• Node.js-based command-line tool for managing, building, and deploying
Titanium projects...
Cloud Services
• Collection of pre-built services for handling
Mobile Backend requirements

• Node.js hosting

• API build...
The Code - Titanium ‘Classic’
• Original syntax for Titanium code

• All UI, data, logic defined in js code

• Directly acc...
The Code - Titanium Alloy
• MVC Framework — Model, View, Controller

• Recommended for new projects

• Structure code into...
Alloy
• Keeps your code cleaner, enabling re-use
• Can still use CommonJS libraries with Alloy. Popular libraries undersco...
One more thing: Games
• Build games with Titanium + Lanica Platino
• Platino game engine to build 2D and 2.5D mobile games...
Final Notes
• Use Titanium for faster mobile development
• Use Alloy for faster Titanium development :)
• Start downloadin...
Upcoming SlideShare
Loading in …5
×

Introduction to Appcelerator Titanium

1,444 views

Published on

An brief overview of cross platform mobile application development with Appcelerator Titanium. BarCamp Cancun 2014

Published in: Technology

Introduction to Appcelerator Titanium

  1. 1. Building Cross Platform Mobile Apps: An Introduction to Appcelerator Titanium Adam Paxton Barcamp Cancun July 31, 2014
  2. 2. Overview • What is Appcelerator Titanium? • Why use it? • Pros • Cons • Tools Walkthrough
  3. 3. Hello • Freelance Mobile Developer, 
 Polanco Media, LLC • 4+ years working with Titanium • TCAD, TCMD certified • Titanium Titan User Group • Co-organizer Titanium Cancun Meetup github.com/adampax
 @adampax Titanium Meetup: bit.ly/ticancun
  4. 4. We are: • Web developers • Companies with existing developer resources • Startups • Someone with an idea
  5. 5. We want to build: • App for our client • App for our enterprise • App for ourselves
  6. 6. What do we use? • iOS - Objective C / Swift • Android - Java • Mobile Web - HTML5 • Blackberry - Java, BB10 - C++ • Windows 8 Mobile - C# / JavaScript
  7. 7. Another Option: Appcelerator Titanium • Appcelerator, Inc - Based in Mountain View, CA • Titanium - Free version for anyone to use • Appcelerator Platform - Paid version with additional features for enterprises • Cloud Services - Mobile Backend, both free and paid versions
  8. 8. Titanium • Cross platform development environment for creating native mobile apps • Program with JavaScript • Free and open source • Not a webview wrapper or app generator - builds native apps • Builds with platform SDKs • Android SDK toolset required for Android apps • Xcode (and a Mac) required for iOS Apps
  9. 9. How does it work?
  10. 10. How does it work? • Write your code in JavaScript • Code is minified and packaged with with Titanium APIs and JavaScript interpreter (JavaScriptCore for iOS, V8 for Android) • Ti SDK uses native SDK (Xcode, Android, etc) to package it all up • JavaScript interpreter executes your code and builds connections to native objects using the Titanium APIs appcelerator.com/titanium/titanium-sdk/
  11. 11. Pros • Maintain a single code base across multiple platforms • 60% to 90% code re-use across platforms • Use your or your team’s existing JavaScript skills • Faster ramp up with JavaScript for new developers • Native interface, native controls, native experience appcelerator.com/titanium/titanium-sdk/
  12. 12. Cons • Does not cover entire API for all platforms • Over 5000 APIs are supported • You can extend the API to access any additional APIs you need • Extra layer of abstraction means more to manage • New feature release / bug fix in iOS / Android — must wait until supported / fixed in Titanium (This is getting faster, often same day as iOS release) • Potential for bugs in Titanium appcelerator.com/titanium/titanium-sdk/
  13. 13. The Tools • Titanium SDK • Titanium Studio • Titanium CLI • Cloud Services • Alloy MVC Framework
  14. 14. Titanium SDK • Everything uses the SDK • Updates usually released monthly • Current version: 3.3.0
  15. 15. Titanium Studio • IDE used to build, test, package and publish mobile applications across platforms • Free, based on Eclipse • Runs on Mac, Windows, Linux • Code completion, debugger and breakpoints • Wizards for configuring native SDKs, creating new app projects • Cloud Services integration
  16. 16. Titanium Command Line Interface • Node.js-based command-line tool for managing, building, and deploying Titanium projects • Don’t want to use Eclipse/Studio? Use the CLI with your favorite editor • SublimeText, Atom VIM, etc. • titanium build --platform android docs.appcelerator.com/titanium/latest/#!/guide/Titanium_Command-Line_Interface_Reference
  17. 17. Cloud Services • Collection of pre-built services for handling Mobile Backend requirements • Node.js hosting • API builder (new) • Integration with Titanium Studio, CLI • Free version has generous limits for API calls, push notifications. docs.appcelerator.com/cloud/latest/
  18. 18. The Code - Titanium ‘Classic’ • Original syntax for Titanium code • All UI, data, logic defined in js code • Directly access Titanium API • CommonJS modules var win = Titanium.UI.createWindow({ title: ‘My Window’, backgroundColor: ‘#fff’ }); ! win.open();
  19. 19. The Code - Titanium Alloy • MVC Framework — Model, View, Controller • Recommended for new projects • Structure code into separate sections for data, UI, logic • Models— represent database records, API queries, etc. Based on Backbone.js • Views — XML to define UI objects, TSS (like CSS) to style them • Controllers - JavaScript containing logic — what happens when a button is clicked? etc.
  20. 20. Alloy • Keeps your code cleaner, enabling re-use • Can still use CommonJS libraries with Alloy. Popular libraries underscore.js, moment.js already included • Built-ins for conditional code • TSS styling similar to CSS, easy to setup and re-use styling • A lot more features
  21. 21. One more thing: Games • Build games with Titanium + Lanica Platino • Platino game engine to build 2D and 2.5D mobile games • iOS and Android • Free to try • lanica.co
  22. 22. Final Notes • Use Titanium for faster mobile development • Use Alloy for faster Titanium development :) • Start downloading here: www.appcelerator.com/developers/ • Documentation: docs.appcelerator.com • Help: developer.appcelerator.com/questions/ • Learn more at Cancun Titanium meetup: bit.ly/ticancun

×