Overview of the Alloy MVC framework for Appcelerator's Titanium platform, delivered at the Dutch Mobile Conference 2013 in Amsterdam from June 6 - 8th.

1. June 8th, 2013
www.fokkezb.nl
Titanium Alloy
FOKKE
ZANDBERGEN

3. • Recap
• Titanium
• Appcelerator
• Alloy
• Components
• Benefits
• Compiler
• Compared
• Highlights
• Q&A
Titanium Alloy

4. Titanium
!= HTML
JavaScript
UI
output
Machine
compilation
Objective-C / Java
interpretation
100%
NATIVE

5. Titanium
!= HTML
JavaScript
UI
output
Machine
compilation
Objective-C / Java
interpretation
input
Objective-C / Java
Machine
compilation
output
UI
HTML/JS/CSS
?

6. Appcelerator
Platform
Titanium
Alloy
Appcelerator
Mobile first platform
Test
Analytics
Cloud
FREE
Support

8. Alloy
Components

9. Alloy
Benefits
• Write up to 50% less code
• Re-style apps using themes
• Re-use code using widgets
• Bind abstracted data models
• Separate concerns, e.g. design
• Fully integrated in Studio
• Widget marketplace coming

10. Alloy
Compiler
TSS
XML
Views
+
=
Definition
=
Models Controllers
Assets

11. Alloy
Compiler
Definition
=
Models ControllersCommonJS
Assets

12. Alloy
Compiler
Collections
Sync
Store
Models ControllersCommonJS
Assets

13. Alloy
Compiler
Collections
Sync
Store
Models ControllersCommonJS
Assets

14. Alloy
Compiler
Collections
Sync
Store
Models ControllersCommonJS
Assets

15. Alloy
Code compared
var window = Ti.UI.createWindow({
backgroundColor: “white”
});
var label = Ti.UI.createLabel({
color: “black”
});
label.addEventListener(“click”,
function() {
require(“windowTwo”);
}
);
window.add(label);
window.open();

16. Alloy
Code compared
<Alloy>
<Window>
<Label onClick=”open”>Hello World</Label>
</Window>
</Alloy>
“Window”: {
backgroundColor: “white”
}
“Label”: {
color: “black”
}
function open() {
require(“windowTwo”);
}
$.index.open();
views/index.xml
controllers/index.jsstyles/index.tss

17. Alloy
Structure compared
> Resources
app.js
> images
appicon.png
> tiapp.xml
> app
> assets
> images
appicon.png
> controllers
index.js
> models
> styles
index.tss
> views
index.xml
> widgets
alloy.js
config.json
> tiapp.xml

18. Alloy
Conditional code
<Alloy>
<Window>
<Label platform=”ios” formFactor=”tablet”>Hi!</Label>
</Window>
</Alloy>
“Window[platform=ios]”:{
backgroundColor: “white”
}
“Label[formFactor=tablet]”:{
color: “black”
}
if (ENV_TEST) {
alert(“Bye!”);
}
$.index.open();
views/index.xml
controllers/android/index.jsstyles/index.tss

19. Alloy
Classes & IDs
<Alloy>
<Window>
<Label class=”text”>Hello</Label>
<Label class=”text” id=”world”>World</Label>
</Window>
</Alloy> views/index.xml
“.text”:{
shadowColor: “#000”
}
“#world”:{
color: “green”
}
$.world.text = “DMC13”
$.index.open();
controllers/index.jsstyles/index.tss

20. Alloy
Themes
“Label”: {
color: “black”
}
styles/index.tss
“Label”: {
color: “red”
}
themes/demo/styles/index.tss
“Label”: {
color: “green”
}
themes/demo/styles/app.tss

21. Alloy
Require & Widgets
<Alloy>
<Window>
<Require src=”hello” />
<Widget src=”bye” />
</Window>
</Alloy> views/index.xml
<Alloy>
<Label onClick=”open”>Hello World</Label>
</Alloy>
views/hello.xml
<Alloy>
<Label onClick=”close”>Bye World</Label>
</Alloy>
widgets/bye/views/widget.xml

22. Alloy
Models
exports.definition = {
config: {
columns: {
"title": "String",
"subject": "String"
},
adapter: {
"type": "sql",
"collection_name": "books"
}
}
} models/book.js
controllers/index.js
var books = Alloy.Collections.instance(“book”);

23. Alloy
Data binding
<Alloy>
<Collection src=”book” />
<Window>
<TableView dataCollection=”book” dataFilter=”filter”>
<TableViewRow title=”{title}” />
</TableView>
</Window>
</Alloy> views/index.xml
function filter(collection) {
return collection.where({subject:”Alloy”});
}
$.index.open();
controllers/index.js

24. How to get Alloy?
1.Install Titanium Studio 3.x
2.Go File > New > Mobile Project
3.Select an Alloy project template
4.Go Run > Run
5.Read the Alloy docs:
http://bit.ly/alloydocs
6.Read the BackBone 0.9.2 docs:
http://bit.ly/bb092

25. Questions?
mail@FokkeZB.nl
www.FokkeZB.nl
@FokkeZB

26. www.amsterdam-titanium.nl
meeting every 2 months
talks • discussion • beer