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. Getting Started with Titanium & Alloy
    January 6, 2016

    View Slide

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

    View Slide

  3. Nice to meet you!

    View Slide

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

    View Slide

  5. The Big Picture

    View Slide

  6. View Slide

  7. View Slide

  8. View Slide

  9. View Slide

  10. Signup & Setup

    View Slide

  11. www.appcelerator.org

    View Slide

  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

    View Slide

  13. www.appcelerator.com/signup

    View Slide

  14. web.appcelerator.com

    View Slide

  15. Prerequisites

    View Slide

  16. Break

    View Slide

  17. Titanium

    View Slide

  18. NO!

    View Slide

  19. View Slide

  20. HTML apps

    #

    View Slide

  21. JS2Native

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  25. docs.appcelerator.com

    View Slide

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

    View Slide

  27. DEMO

    View Slide

  28. Break

    View Slide

  29. View Slide

  30. Alloy MVC

    View Slide

  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

    View Slide



  32. Hello World


    ”Window”: {
    backgroundColor: “white”
    }
    function open() {
    alert(“Hello World”);
    }
    $.index.open();
    index.xml
    index.tss
    index.js
    Alloy

    View Slide

  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

    View Slide

  34. Pro Tip: Unhide Resources

    View Slide

  35. View Slide

  36. 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”

    });

    View Slide

  37. app

    controllers
    views
    styles
    assets
    widgets
    controllers
    views
    styles
    assets
    themes
    styles
    assets
    Themes & Widgets

    View Slide


  38. COLLECTION
    SYNC ADAPTER
    STORAGE BINDINGS VIEWS
    Ti.UI

    EVENTS

    View Slide

  39. Data binding


    dataTransform=”transformer”
    dataFilter=”filter”>



    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

    View Slide

  40. DEMO

    View Slide

  41. Break

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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
    view.xml

    View Slide

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

    View Slide

  52. View Slide

  53. www.tislack.org

    View Slide