Ricardo AlcocerPlatform Evangelist @ Appcelerator, Inc.

@ricardoalcocer ralcocer@appcelerator.com

Appcelerator® Deep Dive

tiTokyoFebruary 16, 2013

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

Download Titanium Studio

• Download Titanium Studio from appcelerator.com

• Make sure you install and configure the necessary SDKs from Apple and Android

Two flavors of Titanium?

Very simple App in Titanium Classic

Files organized by directories

App.JS

Different versions of ApplicationWindow.js

FirstView.js

Enter the MVC Pattern

Model

ControllerView

User

Routing, decision making

Business logic, data manipulation, etc

What the user sees

.JS Files.XML + .TSS Files

What is Appcelerator® Alloy™?

• Official MVC Framework for Titanium• Free and Open Source• Declarative UI• Widgets• Themes

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

Same App built on Alloy

Dramatic reduction of required files

Write less code!

Alloy provides advanced ways of interacting with XML from Javascript

Basic Folder Structure

App Logic

User Interface Definition

App styling (colors, positioning, etc)

User Interface Definition

User Interface Definition

Menu Definition

User Interface Definition

Main View Definition

User Interface Definition

Main View Definition

Open and Close the menu using Javascript : index.js

Live Demo

Change the look-and-feel and layout of your App using Themes

Let’s add Themes to our App

Themes

Live Demo

Reuse code by creating Widgets

Let’s build a Widget for the Menu functionality

Widgets are like “mini-apps”

• Similar folder structure

• Instead of an “index” file, you have a “widget” file

Widget.json

• Contains meta-data about the Widget

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

Live Demo

Adding data to your app

With Alloy you can use backbone.js to create data-bound controls

• Model creation is built into Titanium Studio

The “model file”

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

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

Data can be added dynamically

• Reference data elements from within your XML

Live Demo

There’s much more!

• Sync Adapters• Migrations• Underscore.js functionalities• Command-Line Interface (CLI)• Appcelerator Cloud Services (ACS)

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

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

Code

• All code samples in this presentation can be found at:

http://github.com/ricardoalcocer

Thank you

Ricardo Alcocerralcocer@appcelerator.com

Follow me on Twitter @ricardoalcocer