Appcelerator Alloy MVCtiConf 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

markupmarkup

spaghetti code

© Sira Hanchana

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

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▾ widgetsalloy.jsconfig.json

tiapp.xml

▸ app▾ Resources ▾ alloy ▾ controllers index.js backbone.js CFG.js underscore.js ▾ images logo.png alloy.js app.js utils.jstiapp.xml

▾ Resources ▾ images logo.png app.js main.js utils.jstiapp.xml

deep dive

© Melissa

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

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

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

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

whi

te la

bel a

pps

Widgets▾ app▸ assets▸ lib ▸ controllers▸ styles▸ views▾ widgets ▸ mine ▸ assets ▸ lib ▾ controllers widget.tss ▸ styles ▸ views widget.jsonconfig.json

<Alloy> <Require src=”foo” /> <Widget src=”mine” /> <Widget src=”mine” name=”bar” /></Alloy>

• 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