Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

• Recap • Titanium • Appcelerator • Alloy • Components • Benefits • Compiler • Compared • Highlights • Q&A Titanium Alloy

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Titanium != HTML JavaScript UI output Machine compilation Objective-C / Java interpretation input Objective-C / Java Machine compilation output UI HTML/JS/CSS ?

Slide 6

Slide 6 text

Appcelerator Platform Titanium Alloy Appcelerator Mobile first platform Test Analytics Cloud FREE Support

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

Alloy Components

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

Alloy Compiler TSS XML Views + = Definition = Models Controllers Assets

Slide 11

Slide 11 text

Alloy Compiler Definition = Models Controllers CommonJS Assets

Slide 12

Slide 12 text

Alloy Compiler Collections Sync Store Models Controllers CommonJS Assets

Slide 13

Slide 13 text

Alloy Compiler Collections Sync Store Models Controllers CommonJS Assets

Slide 14

Slide 14 text

Alloy Compiler Collections Sync Store Models Controllers CommonJS Assets

Slide 15

Slide 15 text

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();

Slide 16

Slide 16 text

Alloy Code compared Hello World “Window”: { backgroundColor: “white” } “Label”: { color: “black” } function open() { require(“windowTwo”); } $.index.open(); views/index.xml controllers/index.js styles/index.tss

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Alloy Conditional code Hi! “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

Slide 19

Slide 19 text

Alloy Classes & IDs Hello World views/index.xml “.text”:{ shadowColor: “#000” } “#world”:{ color: “green” } $.world.text = “DMC13” $.index.open(); controllers/index.js styles/index.tss

Slide 20

Slide 20 text

Alloy Themes “Label”: { color: “black” } styles/index.tss “Label”: { color: “red” } themes/demo/styles/index.tss “Label”: { color: “green” } themes/demo/styles/app.tss

Slide 21

Slide 21 text

Alloy Require & Widgets views/index.xml Hello World views/hello.xml Bye World widgets/bye/views/widget.xml

Slide 22

Slide 22 text

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”);

Slide 23

Slide 23 text

Alloy Data binding views/index.xml function filter(collection) { return collection.where({subject:”Alloy”}); } $.index.open(); controllers/index.js

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

Questions? [email protected] www.FokkeZB.nl @FokkeZB

Slide 26

Slide 26 text

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