Alloy #DMC13

Alloy #DMC13

Overview of the Alloy MVC framework for Appcelerator's Titanium platform, delivered at the Dutch Mobile Conference 2013 in Amsterdam from June 6 - 8th.

C056051a062fb1054cb45d98177384aa?s=128

Fokke Zandbergen

June 08, 2013
Tweet

Transcript

  1. June 8th, 2013 www.fokkezb.nl Titanium Alloy FOKKE ZANDBERGEN

  2. None
  3. • Recap • Titanium • Appcelerator • Alloy • Components

    • Benefits • Compiler • Compared • Highlights • Q&A Titanium Alloy
  4. Titanium != HTML JavaScript UI output Machine compilation Objective-C /

    Java interpretation 100% NATIVE
  5. Titanium != HTML JavaScript UI output Machine compilation Objective-C /

    Java interpretation input Objective-C / Java Machine compilation output UI HTML/JS/CSS ?
  6. Appcelerator Platform Titanium Alloy Appcelerator Mobile first platform Test Analytics

    Cloud FREE Support
  7. None
  8. Alloy Components

  9. Alloy Benefits • Write up to 50% less code •

    Re-style apps using themes • Re-use code using widgets • Bind abstracted data models • Separate concerns, e.g. design • Fully integrated in Studio • Widget marketplace coming
  10. Alloy Compiler TSS XML Views + = Definition = Models

    Controllers Assets
  11. Alloy Compiler Definition = Models Controllers CommonJS Assets

  12. Alloy Compiler Collections Sync Store Models Controllers CommonJS Assets

  13. Alloy Compiler Collections Sync Store Models Controllers CommonJS Assets

  14. Alloy Compiler Collections Sync Store Models Controllers CommonJS Assets

  15. Alloy Code compared var window = Ti.UI.createWindow({ backgroundColor: “white” });

    var label = Ti.UI.createLabel({ color: “black” }); label.addEventListener(“click”, function() { require(“windowTwo”); } ); window.add(label); window.open();
  16. Alloy Code compared <Alloy> <Window> <Label onClick=”open”>Hello World</Label> </Window> </Alloy>

    “Window”: { backgroundColor: “white” } “Label”: { color: “black” } function open() { require(“windowTwo”); } $.index.open(); views/index.xml controllers/index.js styles/index.tss
  17. Alloy Structure compared > Resources app.js > images appicon.png >

    tiapp.xml > app > assets > images appicon.png > controllers index.js > models > styles index.tss > views index.xml > widgets alloy.js config.json > tiapp.xml
  18. Alloy Conditional code <Alloy> <Window> <Label platform=”ios” formFactor=”tablet”>Hi!</Label> </Window> </Alloy>

    “Window[platform=ios]”:{ backgroundColor: “white” } “Label[formFactor=tablet]”:{ color: “black” } if (ENV_TEST) { alert(“Bye!”); } $.index.open(); views/index.xml controllers/android/index.js styles/index.tss
  19. Alloy Classes & IDs <Alloy> <Window> <Label class=”text”>Hello</Label> <Label class=”text”

    id=”world”>World</Label> </Window> </Alloy> views/index.xml “.text”:{ shadowColor: “#000” } “#world”:{ color: “green” } $.world.text = “DMC13” $.index.open(); controllers/index.js styles/index.tss
  20. Alloy Themes “Label”: { color: “black” } styles/index.tss “Label”: {

    color: “red” } themes/demo/styles/index.tss “Label”: { color: “green” } themes/demo/styles/app.tss
  21. Alloy Require & Widgets <Alloy> <Window> <Require src=”hello” /> <Widget

    src=”bye” /> </Window> </Alloy> views/index.xml <Alloy> <Label onClick=”open”>Hello World</Label> </Alloy> views/hello.xml <Alloy> <Label onClick=”close”>Bye World</Label> </Alloy> widgets/bye/views/widget.xml
  22. Alloy Models exports.definition = { config: { columns: { "title":

    "String", "subject": "String" }, adapter: { "type": "sql", "collection_name": "books" } } } models/book.js controllers/index.js var books = Alloy.Collections.instance(“book”);
  23. Alloy Data binding <Alloy> <Collection src=”book” /> <Window> <TableView dataCollection=”book”

    dataFilter=”filter”> <TableViewRow title=”{title}” /> </TableView> </Window> </Alloy> views/index.xml function filter(collection) { return collection.where({subject:”Alloy”}); } $.index.open(); controllers/index.js
  24. How to get Alloy? 1.Install Titanium Studio 3.x 2.Go File

    > New > Mobile Project 3.Select an Alloy project template 4.Go Run > Run 5.Read the Alloy docs: http://bit.ly/alloydocs 6.Read the BackBone 0.9.2 docs: http://bit.ly/bb092
  25. Questions? mail@FokkeZB.nl www.FokkeZB.nl @FokkeZB

  26. www.amsterdam-titanium.nl meeting every 2 months talks • discussion • beer