Appcelerator Alloy MVC

Appcelerator Alloy MVC

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

C056051a062fb1054cb45d98177384aa?s=128

Fokke Zandbergen

February 10, 2015
Tweet

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