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

Alloy #DMC13

Alloy #DMC13

Overview of the Alloy MVC framework for Appcelerator's Titanium platform, delivered at the Dutch Mobile Conference 2013 in Amsterdam from June 6 - 8th.

Fokke Zandbergen

June 08, 2013
Tweet

More Decks by Fokke Zandbergen

Other Decks in Technology

Transcript

  1. June 8th, 2013
    www.fokkezb.nl
    Titanium Alloy
    FOKKE
    ZANDBERGEN

    View Slide

  2. View Slide

  3. • Recap
    • Titanium
    • Appcelerator
    • Alloy
    • Components
    • Benefits
    • Compiler
    • Compared
    • Highlights
    • Q&A
    Titanium Alloy

    View Slide

  4. Titanium
    != HTML
    JavaScript
    UI
    output
    Machine
    compilation
    Objective-C / Java
    interpretation
    100%
    NATIVE

    View Slide

  5. Titanium
    != HTML
    JavaScript
    UI
    output
    Machine
    compilation
    Objective-C / Java
    interpretation
    input
    Objective-C / Java
    Machine
    compilation
    output
    UI
    HTML/JS/CSS
    ?

    View Slide

  6. Appcelerator
    Platform
    Titanium
    Alloy
    Appcelerator
    Mobile first platform
    Test
    Analytics
    Cloud
    FREE
    Support

    View Slide

  7. View Slide

  8. Alloy
    Components

    View Slide

  9. Alloy
    Benefits
    • Write up to 50% less code
    • Re-style apps using themes
    • Re-use code using widgets
    • Bind abstracted data models
    • Separate concerns, e.g. design
    • Fully integrated in Studio
    • Widget marketplace coming

    View Slide

  10. Alloy
    Compiler
    TSS
    XML
    Views
    +
    =
    Definition
    =
    Models Controllers
    Assets

    View Slide

  11. Alloy
    Compiler
    Definition
    =
    Models Controllers
    CommonJS
    Assets

    View Slide

  12. Alloy
    Compiler
    Collections
    Sync
    Store
    Models Controllers
    CommonJS
    Assets

    View Slide

  13. Alloy
    Compiler
    Collections
    Sync
    Store
    Models Controllers
    CommonJS
    Assets

    View Slide

  14. Alloy
    Compiler
    Collections
    Sync
    Store
    Models Controllers
    CommonJS
    Assets

    View Slide

  15. Alloy
    Code compared
    var window = Ti.UI.createWindow({
    backgroundColor: “white”
    });
    var label = Ti.UI.createLabel({
    color: “black”
    });
    label.addEventListener(“click”,
    function() {
    require(“windowTwo”);
    }
    );
    window.add(label);
    window.open();

    View Slide

  16. Alloy
    Code compared


    Hello World


    “Window”: {
    backgroundColor: “white”
    }
    “Label”: {
    color: “black”
    }
    function open() {
    require(“windowTwo”);
    }
    $.index.open();
    views/index.xml
    controllers/index.js
    styles/index.tss

    View Slide

  17. Alloy
    Structure compared
    > Resources
    app.js
    > images
    appicon.png
    > tiapp.xml
    > app
    > assets
    > images
    appicon.png
    > controllers
    index.js
    > models
    > styles
    index.tss
    > views
    index.xml
    > widgets
    alloy.js
    config.json
    > tiapp.xml

    View Slide

  18. Alloy
    Conditional code


    Hi!


    “Window[platform=ios]”:{
    backgroundColor: “white”
    }
    “Label[formFactor=tablet]”:{
    color: “black”
    }
    if (ENV_TEST) {
    alert(“Bye!”);
    }
    $.index.open();
    views/index.xml
    controllers/android/index.js
    styles/index.tss

    View Slide

  19. Alloy
    Classes & IDs


    Hello
    World

    views/index.xml
    “.text”:{
    shadowColor: “#000”
    }
    “#world”:{
    color: “green”
    }
    $.world.text = “DMC13”
    $.index.open();
    controllers/index.js
    styles/index.tss

    View Slide

  20. Alloy
    Themes
    “Label”: {
    color: “black”
    }
    styles/index.tss
    “Label”: {
    color: “red”
    }
    themes/demo/styles/index.tss
    “Label”: {
    color: “green”
    }
    themes/demo/styles/app.tss

    View Slide

  21. Alloy
    Require & Widgets





    views/index.xml

    Hello World

    views/hello.xml

    Bye World

    widgets/bye/views/widget.xml

    View Slide

  22. Alloy
    Models
    exports.definition = {
    config: {
    columns: {
    "title": "String",
    "subject": "String"
    },
    adapter: {
    "type": "sql",
    "collection_name": "books"
    }
    }
    } models/book.js
    controllers/index.js
    var books = Alloy.Collections.instance(“book”);

    View Slide

  23. Alloy
    Data binding







    views/index.xml
    function filter(collection) {
    return collection.where({subject:”Alloy”});
    }
    $.index.open();
    controllers/index.js

    View Slide

  24. How to get Alloy?
    1.Install Titanium Studio 3.x
    2.Go File > New > Mobile Project
    3.Select an Alloy project template
    4.Go Run > Run
    5.Read the Alloy docs:
    http://bit.ly/alloydocs
    6.Read the BackBone 0.9.2 docs:
    http://bit.ly/bb092

    View Slide

  25. Questions?
    [email protected]
    www.FokkeZB.nl
    @FokkeZB

    View Slide

  26. www.amsterdam-titanium.nl
    meeting every 2 months
    talks • discussion • beer

    View Slide