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