An introduction the big picture of the Appcelerator Platform and the architecture and principles behind Titanium and Alloy to get you started. Created and presented by myself and Pierre van de Velde at meetup.com/TitaniumNL.

1. Getting Started with Titanium & Alloy
January 6, 2016

2. Fokke Zandbergen
Developer Evangelist
Appcelerator
@FokkeZB
Pierre van de Velde
CTO
TheSmiths
@PierreVdeV

3. Nice to meet you!

4. Program
!"
1. The Big Picture
2. Signup & Setup
!
3. Titanium
!
4. Alloy
!
5. Ten More Things (we wish we’d known)
!

5. The Big Picture

10. Signup & Setup

11. www.appcelerator.org

12. • Titanium CLI
/appcelerator/titanium
[sudo] npm install -g titanium && ti setup
• Titanium SDK *
/appcelerator/titanium_mobile
ti sdk install -b 5_1_X -d
• Alloy CLI
/appcelerator/alloy
[sudo] npm install -g alloy

13. www.appcelerator.com/signup

14. web.appcelerator.com

15. Prerequisites

16. Break

17. Titanium

18. NO!

20. HTML apps
#

21. JS2Native

22. Architecture
Alloy Codebase Development
JavaScript
Package
Run-time
Titanium
Module APIs
Titanium
Core APIs
Hyperloop
APIs
Kroll
(iOS/Android)
HAL
(Windows)
3P APIs OS Device & UI APIs Platform

23. Hello World
var window = Ti.UI.createWindow({
backgroundColor: “white"
});
var label = Ti.UI.createLabel({
text: “Hello World”
});
label.addEventListener(“click”,
function open() {
alert(“Hello World”);
}
);
window.add(label);
window.open();
Ti API

24. Ti.createMyFartApp()
Ti.UI.createX() // Cross-platform UI View factories
Ti.UI.X // The UI View proxy the factory creates
Ti.UI.iOS.createX() // Platform specific UI View factories
Ti.X // Cross-platform device APIs
Ti.Android.X // Platform specific device APIs
require(“ti.map”).X // CommonJS & Titanium Modules

25. docs.appcelerator.com

26. File Structure
▾ Resources
▾ images
logo.png
app.js
main.js
utils.js
tiapp.xml config
code

27. DEMO

28. Break

30. Alloy MVC

31. Classic Spaghetti
var window = Ti.UI.createWindow({
backgroundColor: “white"
});
var label = Ti.UI.createLabel({
text: “Hello World”
});
label.addEventListener(“click”,
function open() {
alert(“Hello World”);
}
);
window.add(label);
window.open();
style
logic
markup

32. <Alloy>
<Window>
<Label onClick=”open”>Hello World</Label>
</Window>
</Alloy>
”Window”: {
backgroundColor: “white”
}
function open() {
alert(“Hello World”);
}
$.index.open();
index.xml
index.tss
index.js
Alloy

33. ▸ app
▾ Resources
▾ alloy
▾ controllers
index.js
backbone.js
CFG.js
underscore.js
▾ images
logo.png
alloy.js
app.js
utils.js
tiapp.xml
▾ Resources
▾ images
logo.png
app.js
main.js
utils.js
tiapp.xml
▾ app
▾ assets
▾ images
logo.png
▾ controllers
index.js
▾ lib
utils.js
▾ styles
index.tss
▾ views
index.xml
▾ widgets
alloy.js
config.json
tiapp.xml
File Structure

34. Pro Tip: Unhide Resources

36. What happens to your XML and TSS?
<Foo>
<Foo ns=“Ti.bar”>
<Foo module=“bar”>
<Require src=“foo”>
<Widget src=“foo”>
<Foo id=“bar”>
<Foo bar=“zoo”>
“#bar”: {
color: “white”
}
Ti.UI.createFoo();
Ti.bar.createFoo();
require(“bar”).createFoo();
Alloy.createController(“foo”)
.getView();
Alloy.createWidget(“foo”)
.getView();
$.bar = Ti.UI.createFoo();
Ti.UI.createFoo({
bar: “zoo”
});
$.bar = Ti.UI.createFoo({
color: “white”
});

37. app
controllers
views
styles
assets
widgets
controllers
views
styles
assets
themes
styles
assets
Themes & Widgets

38. ☁COLLECTIONSYNC ADAPTERSTORAGE BINDINGS VIEWS
Ti.UI
⚡EVENTS

39. Data binding
<Alloy>
<Collection src=”album” />
<TableView dataCollection=”album”
dataTransform=”transformer”
dataFilter=”filter”>
<TableViewRow title=”{title} by {artist}” />
</TableView>
</Alloy>
index.xml
function filter(collection) {
return collection.where({artist:”Beatles”});
}
function transformer(model) {
var transformed = model.toJSON();
transformed.title = transformed.title.toUpperCase();
return transformed;
}
index.js

40. DEMO

41. Break

42. Ten More Things
(we wish we’d known)

43. Protect the Global Scope
var uuid = Ti.Platform.createUUID(); // wrong
(function(global) {
var version = Ti.Platform.version; // safe
Alloy.Globals.iOS8 = version.split(“.”)[0] === ”8”;
global.started = Ti.Platform.createUUID(); // avoid
Alloy.Globals.seed = Ti.Platform.createUUID(); // better
})(this);
alloy.js / app.js
module.exports = {
seed: Ti.Platform.createUUID(); // best
};
utils.js

44. Share/Re-Use Images
assets/iphone/images/image@2x.png
assets/iphone/images/image@3x.png
assets/images/image.png
assets/android/images/res-mdpi/image.png
assets/android/images/res-xhdpi/image.png
assets/android/images/res-xxhdpi/image.png
assets/android/images/res-xhdpi/some.file
platform/android/res/drawable-xhdpi/some.file
platform/android/res/drawable-nl-port-xhdpi/some.file
assets/some_dir/some.file
assets/android/some_dir/some.file
assets/iphone/some_dir/some.file
BEST
PRACTICE

45. Use the Alloy CLI
$ [appc] alloy generate controller foo
$ alloy copy foo bar/zoo
$ alloy move foo bar/zoo
$ alloy remove bar/zoo

46. Use Conditional Code
<Alloy>
<Label platform=”ios,!android”>iOS, Windows</Label>
<Label formFactor=”handheld”>Handheld</Label>
<Label if=”Alloy.Globals.iOS8”>iOS 8</Label>
</Alloy>
”Label[platform=ios,!android formFactor=tablet]”: {
color: “red”
}
”Label[if=Alloy.Globals.iOS8]”: {
backgroundColor: “green”
}
if (OS_IOS && ENV_PRODUCTION && DIST_STORE) {
alert(“iOS App Store, not Ad Hoc”);
}
index.xml
index.tss
index.js

47. Use Conditional Config
{
"global": {"foo":1},
"env:development": {"foo":2},
"env:test":{"foo":3},
"env:production":{"foo":4},
"os:ios env:production": {"foo":5},
"os:ios env:development": {"foo":6},
"os:ios env:test": {"foo":7},
"os:android":{"foo":8},
"os:mobileweb":{"foo":9},
"dependencies": {
“com.foo.widget":"1.0"
}
}
if (OS_IOS && ENV_TEST && Alloy.CFG.foo !== 7) {
alert(“Wrong!”);
}
config.json > CFG.js
index.js

48. Get your code organised
You can organise controllers in subfolders.
Use CommonJS modules
module.exports = {
property: value,
util: function() {}
};
module.js
Drop modules .zip files in root directory

49. Don’t repeat yourself
Use Alloy.CFG to get your config in one place
"global": {
"COLORS": { "WHITE": “#fff" },
"FONTS": { "FONT_FAMILY_LIGHT": “Montserrat-Light" },
"SIZES": { "MARGIN_XSMALL": “5” }
}
config.json
".container": {
top: Alloy.CFG.SIZES.MARGIN_XSMALL,
backgroundColor: Alloy.CFG.COLORS.WHITE
}
style.tss

50. Use global styling
Create Global styling to be applied everywhere
".Compact": { height: Ti.UI.SIZE, width: Ti.UI.SIZE }
".Left" : { left: 0 }
".Top" : { top: 0 }
".Error" : {
backgroundColor: Alloy.CFG.COLORS.WHITE,
color: Alloy.CFG.COLORS.RED,
}
app.tss
<Label class="Bottom Hidden Error" /> view.xml

51. Platform specifics
Phones are not fixed size, use layouts
<View class="container" layout="vertical"> view.xml
Use platform specific styling
"ActivityIndicator[platform=android]":{
style: Ti.UI.ActivityIndicatorStyle.DARK
}
"ActivityIndicator[platform=ios]":{
style: Ti.UI.iPhone.ActivityIndicatorStyle.DARK
}
style.tss
Specifics folders for platform & density

53. www.tislack.org