Getting Started with Titanium & Alloy

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.

Transcript

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. ‘ COLLECTION SYNC ADAPTER STORAGE 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