Slide 1

Slide 1 text

Fokke Zandbergen app imagineer

Slide 2

Slide 2 text

im·ag·i·neer “to both imagine and create something that is new”

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

ALLOY 28 januari 2012

Slide 5

Slide 5 text

Where’s alloy? JavaScript Native Titanium Alloy

Slide 6

Slide 6 text

“An alloy is a mixture or metallic solid solution composed of two or more elements” “Alloys usually have different properties from those of the component elements.” What’s an alloy?

Slide 7

Slide 7 text

What’s in Alloy?

Slide 8

Slide 8 text

TSS XML Views + = Libs Widgets JS definition = Models Controllers Alloy.CFG config.json How does Alloy work?

Slide 9

Slide 9 text

Views Libs Widgets JS definition = Models Controllers Alloy.CFG config.json How does Alloy work?

Slide 10

Slide 10 text

Libs Widgets JS definition = Models Controllers CommonJS Alloy.CFG config.json How does Alloy work?

Slide 11

Slide 11 text

Libs Widgets JS definition = Models Controllers CommonJS Alloy.CFG How does Alloy work?

Slide 12

Slide 12 text

Collections syncs Stores Libs Widgets Models Controllers CommonJS Alloy.CFG How does Alloy work?

Slide 13

Slide 13 text

optimization Collections syncs Stores Libs Widgets Models Controllers CommonJS Alloy.CFG How does Alloy work?

Slide 14

Slide 14 text

Alloy Views · Markup • XML elements corresponds to Ti.UI objects • Require other views and widgets • id for access from controller • platform and formFactor conditions • platform specific folders • bind events to controller methods • bind markup to models via generated controller code DEMO

Slide 15

Slide 15 text

Alloy Controllers • $.someID to access view elements • exports.baseController to inherit a parent controller • platform (OS_) and environment (ENV_) constants • Passing arguments: var args = arguments[0] || {}; • Alloy.Globals namespace • Require libraries from ‘lib’ folder DEMO

Slide 16

Slide 16 text

Alloy Models • Abstracted BackboneJS, but still a must-read • “Collections keep models in memory & synced to a store” • Database > Connection > Result > Row • Easily extend BackboneJS classes • SQL, properties and localStorage sync adapters • Migrations • Model-View binding DEMO

Slide 17

Slide 17 text

Alloy Views · Styles • CSS like JSON style • #ID over .class over element • Titanium constants like Ti.UI.TEXT_ALIGNMENT_LEFT • Alloy.Globals and Alloy.CFG for expressions etc. • platform and formFactor conditions • platform specific folders DEMO

Slide 18

Slide 18 text

Alloy Views · Themes • Overwrite assets • Overrule styles • Global app.tss • platform and density specific (asset) folders • config.json environment/platform dependent selection DEMO

Slide 19

Slide 19 text

Alloy Widgets • Self-contained Alloy components almost like mini-apps • controllers, views, styles, assets, libs • models and theming coming • Require like views or use • Use widgets in widgets • Marketplace and NPM-like distribution coming DEMO

Slide 20

Slide 20 text

Alloy Optimization • From app to Resources folder • Platform specific folders, conditional styles, conditional JS unused libraries and builtins all stripped out! • UglifyJS for optimal speed and compactness • Build configuration file for pre and post compile tasks DEMO

Slide 21

Slide 21 text

How to get started with Alloy? • Get Titanium Studio 3.x from www.appcelerator.com • Follow me @FokkeZB or fokkezb.nl for upcoming: • Slides • Code shown today • Alloy Quick Start and links to various resources

Slide 22

Slide 22 text

Q&A

Slide 23

Slide 23 text

Fokke Zandbergen app imagineer www.fokkezb.nl [email protected] @fokkezb