Discussion and demonstration of Alloy, Appcelerator Titanium's MVC framework. Topics included upcoming functionality in version 1.2.0, advanced Alloy usage, and the future of Alloy. Learn how to make bad ass cross-platform mobile applications with XML and Javascript.

1. ALLOYDEEP DIVE, BELOW THE SURFACE, AND OTHER
NAUTICAL METAPHORS
TiConf US
June 28-29 2013
Tremont Hotel in Baltimore
#ticonf

2. TONY LUKASAVAGE
Alloy Lead Engineer @ Appcelerator
@tonylukasavage
tlukasavage@appcelerator.com

3. CRASH COURSE
Alloy is an MVC framework for Appcelerator's Titanium
SDK built with Node.js. Through a compilation process it
aims to produce highly optimized, cross-platform
Javascript code.

4. from on .
CODESTRONG 2012 Breakout session - Alloy (MVC)
Application Framework Overview
Appcelerator Video Channel Vimeo

5. Models | Views | Controllers | Styles

6. 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();

7. 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>

8. 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
}

9. CONTROLLERS
var 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();
}

10. MODELS
exports.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;
}
}

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

13. SYNC ADAPTERS
Alloy + Backbone.js
Data persistence abstraction
Adapters:
SQLite
REST
ACS
CouchDB

14. BUILTINS
Backbone.js
Underscore.js
Moment.js
Titanium-specific libraries
var moment = require('alloy/moment');

15. BEST PRACTICES

16. * Standarize coding practices *
* Embedding Expertise *
* CommonJS *
* Parity Issues *
* Optimizations *

17. FASTER DEVELOPMENT

18. HIGH QUALITY APPS

19. H TO THE IZZO

20. 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

21. DYNAMIC STYLING*
Modify and apply styles at runtime
New APIs
Alloy.createStyle()
Alloy.UI.create()
Alloy.addClass()
Alloy.removeClass()
Alloy.resetClass()
*available in Alloy 1.2.0

22. LISTVIEW MARKUP*
High performance lists
iOS & Android
Transition made easier with Alloy
Data binding support
*available in Alloy 1.2.0

23. NATIVE MODULES
IN MARKUP*
<Module id="paint" module="ti.paint"
method="createPaintView" platform="ios,android"/>
*available in Alloy 1.2.0

24. DEVICE OPTIMIZATIONS
Device Queries
Compiler Conditionals
Conditional Configurations

25. ALLOY.JMK
pre/post processing
Modify, beautify, minify, etc...
Even or , if you're into that sort of
thing
coffeescript Jade

26. OVERRIDES
NOTHING IS SACRED
...unless it breaks something
Alloy namespace functions
Backbone.js, Underscore.js, etc...
Even the core runtime library (alloy.js)

27. CONTROLLER
EVENTING
Alloy controllers have Backbone eventing
Lightweight, yet powerful
Loose coupling

28. VIEW MODEL BINDING
dataCollection
dataTransform
dataFilter
<TableView id="todoTable" dataCollection="todo"
dataFilter="whereFunction" dataTransform="transformFunction">
<Require src="row"/>
</TableView>

29. SOURCE MAPS
Maps generated code to source, and vice versa
Enables debugging, exceptions, and code processor
config.json toggling
{
"sourcemap": false
}

30. alloylove.com

31. COMMUNITY
All-Stars
Fokke Zandenberg ( )
David Bankier ( )
Aaron Saunders ( )
Jason Kneen ( )
Mads Moller ( )
Josh Jensen ( )
Twitter at
@fokkezb
@davidbankier
@aaronksaunders
@jasonkneen
@nappdev
@joshj
#tialloy
Q&A "alloy" tag
Alloy Google Group

32. THE FUTURE

33. DYNAMIC THEMES
→

34. LIGHTER, MORE
POWERFUL MODELING
Peel back the Alloy layer
Develop abstract model interface
Leverage Alloy's and framework of choice's features

35. NATIVE FORMATS
iOS Nib
Android XML
Native formatting optimizations

36. PACKAGE
MANAGEMENT
meets
Iterative development independent of Alloy releases
Same conventions, same results
alloylove.com npm
# Install a widget. Package manifest would determine that it's a widget
tpm install someCoolAssWidget
# Install a sync adapter.
tmp install syncToMyToaster

37. RESOURCES
Official Alloy Documentation
Q&A
Alloy Google Group
Alloy source code
Alloy test app collection

38. FIND ME
@tonylukasavage
tlukasavage@appcelerator.com
...or drinking whiskey in the next few minutes