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.

Transcript

1. June 8th, 2013 www.fokkezb.nl Titanium Alloy FOKKE ZANDBERGEN
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
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