Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Getting Started with Titanium & Alloy

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.

Fokke Zandbergen

January 06, 2016
Tweet

More Decks by Fokke Zandbergen

Other Decks in Technology

Transcript

  1. Program !" 1. The Big Picture 2. Signup & Setup

    ! 3. Titanium ! 4. Alloy ! 5. Ten More Things (we wish we’d known) !
  2. • 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
  3. NO!

  4. 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
  5. 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
  6. 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
  7. 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
  8. <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
  9. ▸ 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
  10. 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”
 });
  11. 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
  12. 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
  13. Use the Alloy CLI $ [appc] alloy generate controller foo

    $ alloy copy foo bar/zoo $ alloy move foo bar/zoo $ alloy remove bar/zoo
  14. 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
  15. 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
  16. 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
  17. 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
  18. 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
  19. 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