Slide 1
Slide 1 text
Getting Started with Titanium & Alloy
January 6, 2016
Slide 2
Slide 2 text
Fokke Zandbergen
Developer Evangelist
Appcelerator
@FokkeZB
Pierre van de Velde
CTO
TheSmiths
@PierreVdeV
Slide 3
Slide 3 text
Nice to meet you!
Slide 4
Slide 4 text
Program
!"
1. The Big Picture
2. Signup & Setup
!
3. Titanium
!
4. Alloy
!
5. Ten More Things (we wish we’d known)
!
Slide 5
Slide 5 text
The Big Picture
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
Signup & Setup
Slide 11
Slide 11 text
www.appcelerator.org
Slide 12
Slide 12 text
• 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
Slide 13
Slide 13 text
www.appcelerator.com/signup
Slide 14
Slide 14 text
web.appcelerator.com
Slide 15
Slide 15 text
Prerequisites
Slide 16
Slide 16 text
Break
Slide 17
Slide 17 text
Titanium
Slide 18
Slide 18 text
NO!
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
HTML apps
#
Slide 21
Slide 21 text
JS2Native
Slide 22
Slide 22 text
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
Slide 23
Slide 23 text
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
Slide 24
Slide 24 text
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
Slide 25
Slide 25 text
docs.appcelerator.com
Slide 26
Slide 26 text
File Structure
▾ Resources
▾ images
logo.png
app.js
main.js
utils.js
tiapp.xml config
code
Slide 27
Slide 27 text
DEMO
Slide 28
Slide 28 text
Break
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
Alloy MVC
Slide 31
Slide 31 text
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
Slide 32
Slide 32 text
Hello World
”Window”: {
backgroundColor: “white”
}
function open() {
alert(“Hello World”);
}
$.index.open();
index.xml
index.tss
index.js
Alloy
Slide 33
Slide 33 text
▸ 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
Slide 34
Slide 34 text
Pro Tip: Unhide Resources
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
What happens to your XML and TSS?
“#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”
});
Slide 37
Slide 37 text
app
controllers
views
styles
assets
widgets
controllers
views
styles
assets
themes
styles
assets
Themes & Widgets
Slide 38
Slide 38 text
‘
COLLECTION
SYNC ADAPTER
STORAGE BINDINGS VIEWS
Ti.UI
⚡
EVENTS
Slide 39
Slide 39 text
Data binding
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
Slide 40
Slide 40 text
DEMO
Slide 41
Slide 41 text
Break
Slide 42
Slide 42 text
Ten More Things
(we wish we’d known)
Slide 43
Slide 43 text
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
Slide 44
Slide 44 text
Share/Re-Use Images
assets/iphone/images/[email protected]
assets/iphone/images/[email protected]
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
Slide 45
Slide 45 text
Use the Alloy CLI
$ [appc] alloy generate controller foo
$ alloy copy foo bar/zoo
$ alloy move foo bar/zoo
$ alloy remove bar/zoo
Slide 46
Slide 46 text
Use Conditional Code
iOS, Windows
Handheld
iOS 8
”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
Slide 47
Slide 47 text
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
Slide 48
Slide 48 text
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
Slide 49
Slide 49 text
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
Slide 50
Slide 50 text
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
view.xml
Slide 51
Slide 51 text
Platform specifics
Phones are not fixed size, use layouts
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
Slide 52
Slide 52 text
No content
Slide 53
Slide 53 text
www.tislack.org