ALLOYDEEP DIVE, BELOW THE SURFACE, AND OTHER

NAUTICAL METAPHORS

TiConf US June 28-29 2013

Tremont Hotel in Baltimore #ticonf

TONY LUKASAVAGEAlloy Lead Engineer @

Appcelerator

@tonylukasavage

tlukasavage@appcelerator.com

CRASH COURSE

Alloy is an MVC framework for Appcelerator's TitaniumSDK built with Node.js. Through a compilation process it

aims to produce highly optimized, cross-platformJavascript code.

from on .

CODESTRONG 2012 Breakout session - Alloy (MVC)Application Framework OverviewAppcelerator Video Channel Vimeo

Models | Views | Controllers | Styles

var tabGroup = Titanium.UI.createTabGroup();var win1 = Titanium.UI.createWindow({ title:'tab 1', backgroundColor:'#fff'});var tab1 = Titanium.UI.createTab({ title:'tab 1', window:win1});var label1 = Titanium.UI.createLabel({ text:'tab 1'});win1.add(label1);win1.addEventListener('click',function(e){/* ... */});var win2 = Titanium.UI.createWindow({ title:'tab 2', backgroundColor:'#fff'});var tab2 = Titanium.UI.createTab({ title:'tab 2', window:win2});var label2 = Titanium.UI.createLabel({ text:'tab 2'});win2.add(label2);tabGroup.addTab(tab1); tabGroup.addTab(tab2); tabGroup.open();

DECLARATIVE UI<Alloy> <TabGroup> <Tab title="tab1"> <Window title="tab1" backgroundColor="#fff"> <Label>tab 1</Label> </Window> </Tab> <Tab title="tab2"> <Window title="tab2" backgroundColor="#fff"> <Label>tab 2</Label> </Window> </Tab> </TabGroup></Alloy>

TSS'Window': { backgroundColor: '#fff', navBarHidden: true}

'Label': { text: L('theString'), color: '#222', height: Ti.UI.SIZE, font: { fontSize: 18, fontWeight: 'normal' }}

'.shadow': { shadowColor: Alloy.CFG.shadowColor, shadowOffset: {x:1,y:2}}

'#index[platform=android]': { exitOnClose: true}

CONTROLLERSvar memory = ['magic show', 'wear $6000 suit'];function forgetMeNow() { memory.push('took forget-me-now'); setTimeout(function() { memory.pop() }, 1000 * 60 * 60 * 12); }

exports.isNude = function() { return false;}

exports.isThereMoney = function(location) { return location === 'banana stand';}

try { $.someWindow.open();} catch (e) { memory.push("I've made a huge mistake"); forgetMeNow();}

MODELSexports.definition = { config: { columns: { item: "text", done: "integer", date_completed: "text" }, adapter: { type: "sql", collection_name: "todo" } }, extendModel : function(Model) { _.extend(Model.prototype, { validate : function(attrs) { /* ... */ } }); return Model; }, extendCollection : function(Collection) { _.extend(Collection.prototype, { comparator: function(todo) { return todo.get('done'); } }); return Collection; }}

WIDGETS

http://www.danielsefton.com/2012/10/ios-slider-menu-widget-for-titanium-alloy

SYNC ADAPTERSAlloy + Backbone.jsData persistence abstractionAdapters:

SQLiteRESTACSCouchDB

BUILTINSBackbone.jsUnderscore.jsMoment.jsTitanium-specific libraries

var moment = require('alloy/moment');

BEST PRACTICES

* Standarize coding practices *

* Embedding Expertise *

* CommonJS *

* Parity Issues *

* Optimizations *

FASTER DEVELOPMENT

HIGH QUALITY APPS

H TO THE IZZO

INSTALLING ALLOY

# latest stable[sudo] npm install -g alloy

# by version[sudo] npm install -g alloy@1.1.3

# straight from github[sudo] npm install -g git://github.com/appcelerator/alloy.git

DYNAMIC STYLING*

Modify and apply styles at runtimeNew APIs

Alloy.createStyle()Alloy.UI.create()Alloy.addClass()Alloy.removeClass()Alloy.resetClass()

*available in Alloy 1.2.0

LISTVIEW MARKUP*

High performance listsiOS & AndroidTransition made easier with AlloyData binding support

*available in Alloy 1.2.0

NATIVE MODULESIN MARKUP*

<Module id="paint" module="ti.paint" method="createPaintView" platform="ios,android"/>

*available in Alloy 1.2.0

DEVICE OPTIMIZATIONSDevice QueriesCompiler ConditionalsConditional Configurations

ALLOY.JMKpre/post processingModify, beautify, minify, etc...Even or , if you're into that sort ofthing

coffeescript Jade

OVERRIDESNOTHING IS SACRED

...unless it breaks something

Alloy namespace functionsBackbone.js, Underscore.js, etc...Even the core runtime library (alloy.js)

CONTROLLEREVENTING

Alloy controllers have Backbone eventingLightweight, yet powerfulLoose coupling

VIEW MODEL BINDINGdataCollectiondataTransformdataFilter

<TableView id="todoTable" dataCollection="todo" dataFilter="whereFunction" dataTransform="transformFunction"> <Require src="row"/></TableView>

SOURCE MAPSMaps generated code to source, and vice versaEnables debugging, exceptions, and code processorconfig.json toggling{ "sourcemap": false}

alloylove.com

COMMUNITYAll-Stars

Fokke Zandenberg ( )David Bankier ( )Aaron Saunders ( )Jason Kneen ( )Mads Moller ( )Josh Jensen ( )

Twitter at

@fokkezb@davidbankier

@aaronksaunders@jasonkneen

@nappdev@joshj

#tialloyQ&A "alloy" tagAlloy Google Group

THE FUTURE

DYNAMIC THEMES

→

LIGHTER, MOREPOWERFUL MODELING

Peel back the Alloy layerDevelop abstract model interfaceLeverage Alloy's and framework of choice's features

NATIVE FORMATSiOS NibAndroid XMLNative formatting optimizations

PACKAGEMANAGEMENT

meets Iterative development independent of Alloy releasesSame conventions, same results

alloylove.com npm

# Install a widget. Package manifest would determine that it's a widgettpm install someCoolAssWidget

# Install a sync adapter.tmp install syncToMyToaster

RESOURCESOfficial Alloy DocumentationQ&AAlloy Google GroupAlloy source codeAlloy test app collection

FIND ME

@tonylukasavage

tlukasavage@appcelerator.com...or drinking whiskey in the next few minutes