DC Titanium User Group Meetup: Appcelerator Titanium Alloy jan2013

DC Area Appcelerator Titanium Meetup

Aaron K. SaundersCEO Clearly Innovative Inc

January 2013

Tonight’s Topics

• Who we are & what we do• Appcelerator Alloy Book• Appcelerator Overview• Alloy• Appcelerator Cloud Services• Node.ACS

Who Am I

• CEO Clearly Innovative Inc. mobile development agency specializing in HTML5, javascript & nodejs

• Appcelerator Platform Evangelist• 2+ years of Appcelerator blogging • Working on book with Appcelerator Cloud

Services and Alloy for Wiley & Sons

Why Cross-Platform Mobile Development

• Ability to provide mobile solutions to multiple platforms efficiently– Reduce Time To Market– Reduce Total Project Cost– Reduce Total Project Maintenance

About Appcelerator

• Open source cross-platform framework• Generates Native UI Components• IOS, Android and Mobile Web/HTML 5

Support from same code base• Blackberry 10 Support in Beta Preview• Windows 8 Phone 2nd half 2013 release

About Appcelerator: Tools

• Eclipse Based IDE• Code Assist• Integrated Debugger• On device debugging• Integrated device deployment• Integrated cloud services access• Alloy code generation

About Alloy

Alloy is a new application framework by Appcelerator for Titanium. It provides a MVC framework for developers that are building

Titanium apps.http://docs.appcelerator.com/titanium/latest/#!/guide/Alloy_Framework

Alloy Benefits

• Alloy comes with a clean well defined XML UI markup, style sheets, and reusable widget components.

• Built-in Backbone.js and Underscore.js support

Backbone.js gives structure to web applications by providing models with key-value binding

and custom events, collections with a rich API of enumerable functions, views with

declarative event handling, and connects it all to your existing API over a RESTful JSON

interface.

Simple Alloy Application

Here is the XML for the View

Here is the code for the Controller

Backbone In Alloy

• Models– Keep track of your data

• Collections– Manage lists/arrays of your data

• Sync Adapter(s)– Local Storage, SQL, Properties, extendable

Alloy: Other Features

• Platform specific markup & inline events view files

• Separation of style files in .tss, similar to .css files

• Localization support• Migration support for changes in schema• Customizable parsers

Alloy Models & Collections

• Models inherit from Backbone.Model. NOTE: if the first character of a model is lower case, it will be automatically converted to uppercase for referencing the Model class.

• Collections inherit from Backbone.Collections.• Created a simple Javascript object and it is persisted as an model

Alloy Data-Binding

• Binds model or collection objects to UI Elements

• All elements are not currently supported, but should be by 1.0GA release

• Binding Supports– Filtering– Data Transformation– Global or Local Model & Collection

Alloy Sync Adapter

• Support for persisting application content• Based on common REST verbs– GET > READ– PUT > UPDATE– POST > CREATE– DELETE > DELETE

• Can be integrated with local or remote data stores

Node.ACS

• Built using NodeJS, ExpressJS under the covers• Build and host custom services to extend

Appcelerator Cloud Services (ACS)• Host your existing node.js app/service on the

Appcelerator Cloud• Create Node.ACS apps directly from TiStudio

http://nodeacs.cloud.appcelerator.com/guides/quickstart

Appcelerator Cloud Services

Appcelerator Cloud Services: Pricing

Downloads for Getting Started with Alloy

• Official Appcelerator Alloy Documentation– http://docs.appcelerator.com/titanium/latest/#!/guide/

Alloy_Framework

• Quick Start: bit.ly/alloyqs

• TiStudio/TiSDK 3.0– http://preview.appcelerator.com/studio/

• More Information– Wiki docs: bit.ly/alloy_docs– Google Groups: bit.ly/alloy_group– Github: github.com/appcelerator/alloy

Appcelerator TCAD Example

https://github.com/aaronksaunders/alloy_fugitive/

LOOK AT SOME CODE?

Appcelerator & Kinvey Integration

https://github.com/aaronksaunders/todolist.alloy.kinvey

LOOK AT SOME CODE?

Aaron K SaundersTwitter: @aaronksaundersblog: http://blog.clearlyinnovative.comFacebook: https://www.facebook.com/ClearlyInnovativeIncGithub : https://github.com/aaronksaunders/SlideShare: http://www.slideshare.net/aaronksaunders/

1706 R Street, NWWashington, DC 20009

www.clearlyinnovative.com