Appcelerator Alloy MVC

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

Transcript

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