Tweet
Tweet

Slide 1

Slide 1 text

Ricardo Alcocer Platform Evangelist @ Appcelerator, Inc. @ricardoalcocer [email protected] Appcelerator® Deep Dive tiTokyo February 16, 2013

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Two flavors of Titanium?

Slide 5

Slide 5 text

Very simple App in Titanium Classic

Slide 6

Slide 6 text

Files organized by directories

Slide 7

Slide 7 text

App.JS

Slide 8

Slide 8 text

Different versions of ApplicationWindow.js

Slide 9

Slide 9 text

FirstView.js

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Same App built on Alloy

Slide 14

Slide 14 text

Dramatic reduction of required files

Slide 15

Slide 15 text

Write less code!

Slide 16

Slide 16 text

Alloy provides advanced ways of interacting with XML from Javascript

Slide 17

Slide 17 text

Basic Folder Structure App  Logic   User  Interface  Defini7on   App  styling  (colors,  posi7oning,  etc)  

Slide 18

Slide 18 text

User Interface Definition

Slide 19

Slide 19 text

User Interface Definition Menu  Defini7on  

Slide 20

Slide 20 text

User Interface Definition Main  View  Defini7on  

Slide 21

Slide 21 text

User Interface Definition Main  View  Defini7on  

Slide 22

Slide 22 text

Open and Close the menu using Javascript : index.js

Slide 23

Slide 23 text

Live Demo

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

emes

Slide 26

Slide 26 text

Live Demo

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

Widget.json •  Contains meta-data about the Widget

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

Live Demo

Slide 32

Slide 32 text

Adding data to your app

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

Live Demo

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

Thank you Ricardo Alcocer [email protected] Follow me on Twitter @ricardoalcocer