This document discusses Alloy, an Appcelerator framework that allows developers to build cross-platform mobile apps using JavaScript and XML. It describes key aspects of Alloy including views, controllers, models, libraries, widgets, and optimization. Alloy uses CommonJS modules and allows developers to write code once that runs on both iOS and Android by abstracting platforms and handling device differences. The document provides examples of how to use Alloy's components and configuration to build mobile apps.

1. Fokke Zandbergen
app imagineer

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

4. ALLOY
28 januari 2012

5. Where’s alloy?
JavaScript
Native
Titanium
Alloy

6. “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?

7. What’s in Alloy?

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

9. Views
Libs
Widgets
JS definition
=
Models Controllers
Alloy.CFGconfig.json
How does Alloy work?

10. Libs
Widgets
JS definition
=
Models ControllersCommonJS
Alloy.CFGconfig.json
How does Alloy work?

11. Libs
Widgets
JS definition
=
Models ControllersCommonJS
Alloy.CFG
How does Alloy work?

12. Collections
syncs
Stores
Libs
Widgets
Models ControllersCommonJS
Alloy.CFG
How does Alloy work?

13. optimization
Collections
syncs
Stores
Libs
Widgets
Models ControllersCommonJS
Alloy.CFG
How does Alloy work?

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

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

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

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

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

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

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

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

22. Q&A

23. Fokke Zandbergen
app imagineer
www.fokkezb.nl
mail@fokkezb.nl
@fokkezb