Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Appcelerator Alloy MVC

Appcelerator Alloy MVC

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

Fokke Zandbergen

February 10, 2015
Tweet

More Decks by Fokke Zandbergen

Other Decks in Technology

Transcript

  1. 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
  2. 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
  3. Familiar • HTML-like XML • CSS-like TSS • JavaScript •

    No HTML UI • No overhead • Compiles to Classic …but better
  4. 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
  5. 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
  6. 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
  7. 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
  8. 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
  9. 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
  10. 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
  11. 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
  12. 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!
  13. 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