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

Show your hand if you know a programming language ✌ 

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

Show your hand if you’ve used JavaScript ✌ 

Show your hand if you’ve used Titanium ✌ 

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

spaghetti code © Sira Hanchana 

Alloy Hello World ”Window”: { backgroundColor: “white” } function open() { alert(“Hello World”); } $.index.open(); index.xml index.tss index.js 

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

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 

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 

deep dive © Melissa 

Classes, ids and tags Hello 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 

Conditional code iOS, Windows Handheld iOS 8 ”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 

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 

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 

Data binding 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 

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 white label apps 

Widgets ▾ app ▸ assets ▸ lib ▸ controllers ▸ styles ▸ views ▾ widgets ▸ mine ▸ assets ▸ lib ▾ controllers widget.tss ▸ styles ▸ views widget.json config.json • apps in apps • 400+ open source • theme-able! 

what’s coming? © Ron Jones 

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 

© Saint Bernadine Mission Communications Inc. Q 

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