Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Building Cross Platform Mobile Apps:
An Introduction to Appcelerator Titanium
Adam Paxton

Code for Ft Lauderdale / Appcel...
Overview
• What is Appcelerator Titanium?
• Why use it?
• Pros
• Cons
• Tools Walkthrough
• Code Demo
Hello
• Mobile App Development

Polanco Media, LLC (We’re hiring)
• 5 years working with Titanium
• TCAD, TCMD certified
• ...
We are:
• Web developers
• Companies with existing developer teams
• Startups
• Someone with an idea
We want to build:
• App for ourselves (or our community)
• App for our client
• App for our enterprise
What do we use?
• iOS - Objective C / Swift
• Android - Java
• Mobile Web - HTML5
• Windows Phone - C# / JavaScript
Another Option: Appcelerator Titanium
• Appcelerator, Inc - Based in Mountain View, CA
• Open Source
• Titanium SDK and CL...
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
• Appcelerator Studio*
• Titanium CLI
• Arrow Cloud Services*
• Alloy MVC Framework
*Paid
Titanium SDK
• Everything uses the SDK
• Updates usually released monthly
• Current version: 4.1.0.GA
Appcelerator Studio
• IDE used to build, test, package and
publish mobile applications across
platforms

• Based on Eclips...
Titanium Command Line Interface	
• Node.js-based command-line tool for managing, building, and deploying
Titanium projects...
Use Your Own IDE with Titanium
• Sublime: https://github.com/MattTuttle/sublime-ti-build
• Atom:
• Package: https://github...
Arrow Cloud and API Builder
• Collection of pre-built services for handling
Mobile Backend requirements

• Node.js hosting...
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...
Community Tools
• TiShadow - tishadow.yydigital.com - Rapid testing for Titanium, very useful!
• Platino - platino.io - bu...
Final Notes
• Use Titanium for faster mobile development
• Use Alloy for faster Titanium development :)
• Start downloadin...
Future South Florida Titanium Meetups
• Meeting monthly on a Tuesday or Thursday?
• Call for Speakers, ideas:
• Share a ne...
Thanks
• Thanks Rob and Code For FTL Team
• Thanks Sebastian @ Axis Space
• Thanks Appcelerator for the Pizza







Show ...
Upcoming SlideShare
Loading in …5
×

Intro to Appcelerator Titanium - Code for Fort Lauderdale 2015

1,019 views

Published on

Introduction to cross platform mobile development with Appcelerator Titanium for the Code for America: Fort Lauderdale meetup held on August 26, 2015 at Axis Space.

Published in: Technology
  • Be the first to comment

Intro to Appcelerator Titanium - Code for Fort Lauderdale 2015

  1. 1. Building Cross Platform Mobile Apps: An Introduction to Appcelerator Titanium Adam Paxton Code for Ft Lauderdale / Appcelerator Meetup August 26, 2015
  2. 2. Overview • What is Appcelerator Titanium? • Why use it? • Pros • Cons • Tools Walkthrough • Code Demo
  3. 3. Hello • Mobile App Development
 Polanco Media, LLC (We’re hiring) • 5 years working with Titanium • TCAD, TCMD certified • Titanium Titan User Group • Co-organizer Titanium Cancun Meetup • South Florida Titanium Meetup github.com/adampax
 @adampax Titanium Meetup: http://bit.ly/tisofla
  4. 4. We are: • Web developers • Companies with existing developer teams • Startups • Someone with an idea
  5. 5. We want to build: • App for ourselves (or our community) • App for our client • App for our enterprise
  6. 6. What do we use? • iOS - Objective C / Swift • Android - Java • Mobile Web - HTML5 • Windows Phone - C# / JavaScript
  7. 7. Another Option: Appcelerator Titanium • Appcelerator, Inc - Based in Mountain View, CA • Open Source • Titanium SDK and CLI • Alloy MVC Framework • Paid (Free to try) • Appcelerator Studio IDE • Arrow - Mobile backend storage, push notifications, API builder
  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/product/
  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 • As of version 4.0.0 (Spring 2015) Licensing of the tools (free vs OSS) is a bit of a pain
  13. 13. The Tools • Titanium SDK • Appcelerator Studio* • Titanium CLI • Arrow Cloud Services* • Alloy MVC Framework *Paid
  14. 14. Titanium SDK • Everything uses the SDK • Updates usually released monthly • Current version: 4.1.0.GA
  15. 15. Appcelerator Studio • IDE used to build, test, package and publish mobile applications across platforms • Based on Eclipse • Requires subscription • Runs on Mac, Windows, Linux • Code completion, debugger and breakpoints • Wizards for configuring native SDKs, creating new app projects
  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/platform/latest/#!/guide/Titanium_Command-Line_Interface_Reference
  17. 17. Use Your Own IDE with Titanium • Sublime: https://github.com/MattTuttle/sublime-ti-build • Atom: • Package: https://github.com/yomybaby/atom-titanium • Guide: https://github.com/m1ga/titanium_with_atom • IntelliJ IDEA, NetBeans: https://github.com/navinpeiris/jsca2js h/t @FokkeZB
  18. 18. Arrow Cloud and API Builder • Collection of pre-built services for handling Mobile Backend requirements • Node.js hosting • API builder • ArrowDB, schema-less data store • Integration with Studio, CLI • Push notifications • DB Connectors for Azure, Salesforce, MSSQL, MySQL, MongoDB appcelerator.com/product/arrow/
  19. 19. 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();
  20. 20. 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.
  21. 21. 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
  22. 22. Community Tools • TiShadow - tishadow.yydigital.com - Rapid testing for Titanium, very useful! • Platino - platino.io - build 2D and 2.5D mobile games with Titanium (Free to try) • TiSlack Chat - topener.nl/tislack • Gittio - gitt.io - search engine for Titanium modules and Alloy Widgets • Ticons - http://ticons.fokkezb.nl/ - Generate app icons and splash screens for iOS and Android • Material Palatte - materialpalette.com - Generate Material theme for Android (check the demo app for example)
  23. 23. Final Notes • Use Titanium for faster mobile development • Use Alloy for faster Titanium development :) • Start downloading here: http://www.appcelerator.com/signup/ • Documentation: docs.appcelerator.com • Help: community.appcelerator.com
  24. 24. Future South Florida Titanium Meetups • Meeting monthly on a Tuesday or Thursday? • Call for Speakers, ideas: • Share a new process, library, module • App walkthrough • Discuss more at South Florida Titanium meetup page: bit.ly/tisofla
  25. 25. Thanks • Thanks Rob and Code For FTL Team • Thanks Sebastian @ Axis Space • Thanks Appcelerator for the Pizza
 
 
 
 Show some code: github.com/adampax/TiCodeForFTL

×