Presentation of the Appcelerator Alloy MVC framework at Digital World 2015 in Dhaka, Bangladesh on Feb 10th, 2015.

1. Appcelerator Alloy MVC
tiConf Dhaka, Bangladesh
Feb 10th, 2015
Fokke Zandbergen
@FokkeZB

2. Show your hand if you know
a programming language
✌

3. Show your hand if you've used
HTML & CSS
✌

4. Show your hand if you’ve used
JavaScript
✌

5. Show your hand if you’ve used
Titanium
✌

6. Classic app.js
var window = Ti.UI.createWindow({
backgroundColor: “white"
});
var label = Ti.UI.createLabel({
text: “Hello World”
});
label.addEventListener(“click”,
function open() {
alert(“Hello World”);
}
);
window.add(label);
window.open();
style
logic
markup
logic
markupmarkup

7. spaghetti code
© Sira Hanchana

8. Alloy
<Alloy>
<Window>
<Label onClick=”open”>Hello World</Label>
</Window>
</Alloy>
”Window”: {
backgroundColor: “white”
}
function open() {
alert(“Hello World”);
}
$.index.open();
index.xml
index.tss
index.js

9. Familiar
• HTML-like XML
• CSS-like TSS
• JavaScript
• No HTML UI
• No overhead
• Compiles to Classic
…but better

10. Compiled simplified
module.exports = function Controller() {
var $ = this;
$.index = Ti.UI.createWindow({
backgroundColor: “white”
});
$.__alloyId1 = Ti.UI.createLabel({
text: “Hello World”
});
$.__alloyId1.addEventListener(“click”, open);
$.index.add($.__alloyId1);
function open() {
alert(“Hello World”);
}
$.index.open();
};
index.tss
index.xml
index.js

11. Structure simplified
▾ app
▾ assets
▾ images
logo.png
▾ controllers
index.js
▾ lib
utils.js
▾ styles
index.tss
▾ views
index.xml
▾ widgets
alloy.js
config.json
tiapp.xml
▸ app
▾ Resources
▾ alloy
▾ controllers
index.js
backbone.js
CFG.js
underscore.js
▾ images
logo.png
alloy.js
app.js
utils.js
tiapp.xml
▾ Resources
▾ images
logo.png
app.js
main.js
utils.js
tiapp.xml

12. deep dive
© Melissa

13. Classes, ids and tags
<Alloy>
<Window>
<Label id=”lbl” class=”red big”>Hello</Label>
</Window>
</Alloy>
index.xml
”Window”: { backgroundColor: “white” }
”#lbl”: { backgroundColor: “green” }
”.red”: { color: “red” }
”.big”: { font: { fontSize: 20 }
”.bold”: { font: { fontWeight: ”bold” }
$.index.open();
$.lbl.text = “bye”;
$.addClass($.lbl, “bold”);
index.tss
index.js

14. Conditional code
<Alloy>
<Label platform=”ios,!android”>iOS, Windows</Label>
<Label formFactor=”handheld”>Handheld</Label>
<Label if=”Alloy.Globals.iOS8”>iOS 8</Label>
</Alloy>
”Label[platform=ios,!android formFactor=tablet]”: {
color: “red”
}
”Label[if=Alloy.Globals.iOS8]”: {
backgroundColor: “green”
}
if (OS_IOS && ENV_PRODUCTION && DIST_STORE) {
alert(“iOS App Store, not Ad Hoc”);
}
index.xml
index.tss
index.js

15. if (OS_IOS && ENV_TEST && Alloy.CFG.foo !== 7) {
alert(“Wrong!”);
}
Conditional config
{
"global": {"foo":1},
"env:development": {"foo":2},
"env:test":{"foo":3},
"env:production":{"foo":4},
"os:ios env:production": {"foo":5},
"os:ios env:development": {"foo":6},
"os:ios env:test": {"foo":7},
"os:android":{"foo":8},
"os:mobileweb":{"foo":9},
"dependencies": {
“com.foo.widget":"1.0"
}
}
config.json > CFG.js
index.js

16. Global namespace
var uuid = Ti.Platform.createUUID(); // wrong
(function(global) {
var version = Ti.Platform.version; // safe
Alloy.Globals.iOS8 = version.split(“.”)[0] === ”8”;
global.started = Ti.Platform.createUUID(); // avoid
Alloy.Globals.seed = Ti.Platform.createUUID(); // better
})(this);
alloy.js > app.js
module.exports = {
seed: Ti.Platform.createUUID(); // best
};
utils.js

17. Data binding
<Alloy>
<Collection src=”album” />
<TableView dataCollection=”album”
dataTransform=”transformer”
dataFilter=”filter”>
<TableViewRow title=”{title} by {artist}” />
</TableView>
</Alloy>
index.xml
function filter(collection) {
return collection.where({artist:”Beatles”});
}
function transformer(model) {
var tf = model.toJSON();
tf.title = tf.title.toUpperCase();
return tf;
}
index.js

18. Themes
• Set in config.json
• Overwrites assets
• Merges styles
• Merges config
▾ app
▾ assets
▾ images
logo.png
▸ controllers
▾ styles
index.tss
▸ views
▾ themes
▾ green
▾ assets
logo.png
▾ styles
index.tss
config.json
config.json
whitelabelapps

19. Widgets
▾ app
▸ assets
▸ lib
▸ controllers
▸ styles
▸ views
▾ widgets
▸ mine
▸ assets
▸ lib
▾ controllers
widget.tss
▸ styles
▸ views
widget.json
config.json
<Alloy>
<Require src=”foo” />
<Widget src=”mine” />
<Widget src=”mine” name=”bar” />
</Alloy>
• apps in apps
• 400+ open source
• theme-able!

20. what’s coming?
© Ron Jones

21. Alloy 1.6.0 (Q1)
• Support for Windows Phone
• Support for promises in sync adapters
• Upgrade Backbone 0.9.2 > 1.1.2
• Upgrade Underscore 1.4.4 > 1.6.0
• Support for two-way-data-binding via Nano
• More than 25 other fixes/improvements

22. © Saint Bernadine Mission Communications Inc.
Q

23. If you know JS, HTML & CSS
You can build native apps with Alloy