Slides for my presentation at tiTokyo 2013

1. Appcelerator® Deep Dive
tiTokyo
February 16, 2013
Ricardo Alcocer
Platform Evangelist @ Appcelerator, Inc.
@ricardoalcocer ralcocer@appcelerator.com

2. About me
• Currently work as Appcelerator Platform
Evangelist in the Silicon Valley Area
• Have been developing Apps with Titanium
since 2009
• Former Titanium trainer in the Caribbean
and Latin America
• Hacker in constant training

3. Download Titanium Studio
• Download Titanium Studio from
appcelerator.com
• Make sure you install and configure the
necessary SDKs from Apple and Android

4. Two flavors of Titanium?

5. Very simple App in Titanium
Classic

6. Files organized by directories

7. App.JS

8. Different versions of
ApplicationWindow.js

9. FirstView.js

10. Enter the MVC Pattern
Business logic, data
Model manipulation, etc
What the user Routing, decision
sees
View Controller making
.XML + .TSS Files .JS Files
User

11. What is Appcelerator® Alloy™?
• Official MVC Framework for Titanium
• Free and Open Source
• Declarative UI
• Widgets
• Themes

12. Why build an MVC Framework?
• Help developers build scalable apps
• Provide a basis for best practices on Titanium
development
• Simplify development of Titanium apps
• Make Titanium more approachable to web
developers and designers (use of XML, CSS)
• Reduce the amount of code written
• Set the foundation for widget/ component/
sample libraries

13. Same App built on Alloy

14. Dramatic reduction of required
files

15. Write less code!

16. Alloy provides advanced ways of
interacting with XML from
Javascript

17. Basic Folder Structure
App Logic
App styling (colors, positioning, etc)
User Interface Definition

18. User Interface Definition

19. User Interface Definition
Menu Definition

20. User Interface Definition
Main View Definition

21. User Interface Definition
Main View Definition

22. Open and Close the menu using
Javascript : index.js

23. Live Demo

24. Change the look-and-feel and
layout of your App using Themes
Let’s add Themes to our App

25. Themes

26. Live Demo

27. Reuse code by creating
Widgets
Let’s build a Widget for the Menu functionality

28. Widgets are like “mini-apps”
• Similar folder structure
• Instead of an “index”
file, you have a “widget”
file

29. Widget.json
• Contains meta-data about the Widget

30. To use the Widget
• Define it as a
dependency on your
“config.json” file
• Use the “Require” tag
to include it in your
XML file

31. Live Demo

32. Adding data to your app

33. With Alloy you can use backbone.js
to create data-bound controls
• Model creation is built into Titanium Studio

34. The “model file”
• The generated
“model file” defines
a data structure and
a data store

35. Bind your model to a UI control
• The “Collection” Tag allows you to define a
data collection based on your model, and
bind it to your TableView

36. Data can be added dynamically
• Reference data elements from within your
XML

37. Live Demo

38. There’s much more!
• Sync Adapters
• Migrations
• Underscore.js functionalities
• Command-Line Interface (CLI)
• Appcelerator Cloud Services (ACS)

39. Alloy 1.0 is out! Here’s what
new:
• Only works with Ti SDK 3.0 and later
• Android fastdev
• New SQL Adapter inline with our updated
adapter model
• Content Assist in Studio: it will be officially
released in 3.1.0 but it is already available
in the nightly stream

40. What’s next with Alloy?
• Debugging of Alloy apps in Studio (coming
in 3.1.0)
• Dynamic Styling of Apps
• Adapter framework
• Widget models and themes
• Finalizing model-view binding

41. Code
• All code samples in this presentation can
be found at:
http://github.com/ricardoalcocer

42. Thank you
Ricardo Alcocer
ralcocer@appcelerator.com
Follow me on Twitter @ricardoalcocer