In this talk, Leonardo Farias will give an introduction to Appcelerator’s Titanium. Titanium allows you to create native, hybrid, or mobile web apps across all platforms from a single JavaScript code base. The content of this talk will focus on what is Titanium, and how to start using it.

1. BUILD NATIVE
MOBILEAPPS
WITH JAVASCRIPT
LeoFarias

2. ABOUT ME
CO-FOUNDER
LEO FARIAS
http://about.me/leofarias

3. WHAT DOYOU USETO BUILD
MOBILEAPPS?

4. ATWOOD’S LAW
any application that can be written in JavaScript, will
eventually be written in JavaScript.
- Jeff Atwood - 2007
(Stack Overflow & Coding Horror)
The Rule of least Power
http://www.w3.org/2001/tag/doc/leastPower.html

5. !=

6. • Titanium is a platform to build native iOS,
Android, and Windows
• Titanium apps are written in Javascript.
• Created by Appcelerator
• Alloy (MVC Framework)
• Open Source
WHAT ISTITANIUM?

7. ABSTRACTION LAYER
• A way of hiding the implementation details of a
particular set of functionality
• Assertions
• There is a core of mobile development APIs which
can be normalized across platforms. These areas
should be targeted for code reuse.
• There are platform-specific APIs, UI conventions,
and features which developers should incorporate
when developing for that platform. Platform-specific
code should exist for these use cases to provide
the best possible experience.

8. Native APIs
Native-JavaScript Bridge (Kroll)
JavaScript runtime (JavaScriptCore, V8)
Application Code -
JavaScript
Titanium API, Custom
Modules
OS SDK
HOW DOES ITWORK?
Crossing the Bridge

9. Native APIs
Native-JavaScript Bridge (Kroll)
JavaScript runtime (JavaScriptCore, V8)
Application Code -
JavaScript
Titanium API, Custom
Modules
OS SDK
HOW DOES ITWORK?
Crossing the Bridge

10. ACCESS NATIVE SDK
• Geolocation
• Camera
• In-App Purchases
• Calendar
• Contact
• Media / Photo Gallery
• Gesture / Accelerometer
• Maps
• Notifications
• TouchID / WatchOS
• Custom Modules

11. DEV ENVIRONMENT
Studio
• Use any IDE with Titanium SDK Node-based CLI
• Appcelerator Studio is fully integrated Eclipse-based
IDE with code profiler, debugger and analyzer
• iOS Simulator / Genymotion / Devices
• LiveView - Allows to see changes near real time in
native platform. TiShadow Open Source Equivalent.
Sublime Text

12. MVC FRAMEWORK
View
Model
Controller
.xml
.tss
.js
.js

13. VIEWS & STYLES

14. CONTROLLERS

15. MODELS
• Inherits from Backbone
• Keep models in memory & synced to a store
• Easily extend BackboneJS classes
• Local storage sync adapters
• Migrations
• Model-View binding

16. BUILT INTOALLOY
• Underscore.js
• Moment.js
• Common.js Modules*
• Widgets
• Themes
• Free and Open Source

17. CODE REUSE
• 100% of non-UI code is reusable
• 80-85% of UI code (Alloy) is reusable
• The more experience, the more code reuse
(experience and patterns)

18. ADVANTAGES / PROS
• Smaller learning curve for JS Devs
• Native Interface Controls
• Reduce Maintenance for multiple platform apps
• Easier and faster development because of
normalization of APIs and environment.
• Community Support
• Great Documentation

19. NOTWRITE ONCE RUNANYWHERE!
WRITE ONCE
ADAPTANYWHERE
LEARN ONCE,
WRITEANYWHERE
OR

20. DISADVANTAGES / CONS
• Not 100% API Coverage
• New feature & bug fix delays
• Hard to troubleshoot Titanium SDK bugs
• Performance?

21. PERFORMANCE
• JavaScript is not thread safe.
• Single threaded execution
• Crossing the bridge takes a “toll”. When a
Titanium.* element is called in JS
• Follow best practices

22. APPCELERATOR PLATFORM
• Appcelerator University
• Mobile Analytics / Insights
• Push Notifications
• Arrow (MBaas)
• Arrow Builder (Build APIs)
• Arrow Cloud (Elastic cloud service)
• App Preview (AdHoc App Deployments)
• App Designer (drag-and-drop UI
Designer for Studio)
• Hyperloop

23. HYPERLOOP
• 100% Native API coverage
• Converts JavaScript code into Native code / Compiler
• Created to speed up Appcelerator Titanium
Development / 4th Generation
• Made available to community as preview (labs)
• Use within Titanium

24. HYPERLOOPAPPLETOUCH ID EXAMPLE

25. WHAT’S NEXT?
• http://www.appcelerator.com/
• http://tidev.io - Titanium Community News Site
• http://gitt.io - NPM for Titanium Modules and Widgets
• TiSlack - Titanium Slack Community

26. THANKYOU!
QUESTIONS?
AND SWAG