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.

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?
    mail@FokkeZB.nl
    www.FokkeZB.nl
    @FokkeZB
    

    View Slide

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

    View Slide