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

Better Faster Stronger: how Alloy daftpunks your Titanium projects

Xavier Lacot
February 24, 2013

Better Faster Stronger: how Alloy daftpunks your Titanium projects

This is a general introduction to Alloy that I presented at TiConf 2013 in Valencia. Alloy is the new MVC RAD framework built on top of Appcelerator Titanium, which allows to build in a productive way efficient, performant native mobile applications.

Xavier Lacot

February 24, 2013
Tweet

More Decks by Xavier Lacot

Other Decks in Programming

Transcript

  1. Better Faster Stronger
    How Alloy daftpunks your Titanium projects
    TiConf 2013 – Xavier Lacot – JoliCode

    View full-size slide

  2. 2
    Better Faster Stronger: How Alloy daftpunks your Titanium projects
    TiConf | Xavier Lacot | february 2013
    Hello world
    Xavier Lacot
    ■ Web- and Mobile- expert at JoliCode – http://jolicode.com
    ■ Contributor to several Open Source projects
    ■ In PHP, the Symfony framework
    ■ Titanium developer since 2009
    ■ Speaker at CodeStrong 2011
    ■ Web frameworks expert
    ■ Several conferences – Symfony Live, Forum PHP, Symfony Day, etc.
    ■ Ex-President of the French Association of PHP Users (afup.org)
    ■ http://twitter.com/xavierlacot

    View full-size slide

  3. 3
    Better Faster Stronger: How Alloy daftpunks your Titanium projects
    TiConf | Xavier Lacot | february 2013
    Summary
    ■ Development with Titanium
    ■ The lack of a RAD framework
    ■ Alloy, a unifying framework
    ■ Goals
    ■ Presentation of the architecture
    ■ View, Controllers, Models, Widgets, Styles
    ■ Better Faster Stronger with alloy

    View full-size slide

  4. 4
    Better Faster Stronger: How Alloy daftpunks your Titanium projects
    TiConf | Xavier Lacot | february 2013
    Three good reasons to adopt Titanium
    ■ Very popular web languages
    ■ Easy to learn
    ■ Widespread
    ■ Open Standards
    ■ Cross platform
    ■ Code once, deploy several times!
    ■ Really native applications
    ■ Blazing fast
    ■ Offline capabilities
    ■ Access to hardware features
    ■ Active in background

    View full-size slide

  5. 5
    Better Faster Stronger: How Alloy daftpunks your Titanium projects
    TiConf | Xavier Lacot | february 2013
    The productivity is limited...
    ■ Some limits to Titanium:
    ■ For the developer, Titanium is « only » a plateform
    ■ Not a RAD / MVC framework
    ■ Writing a UI in JS = ouch
    ■ Wonderful platform but:
    ■ Unconstrained
    ■ Good practices: depends on the developer
    ■ Many pseudo-MVC frameworks
    ■ Lack of standardization of skills
    ■ Heterogeneous contributions

    View full-size slide

  6. 6
    Better Faster Stronger: How Alloy daftpunks your Titanium projects
    TiConf | Xavier Lacot | february 2013
    Coding Horror Show...
    ■ Ti.include() fiesta
    ■ 200+ files inclusion at app startup
    ■ Multiple code duplication
    ■ No tests
    ■ Almost only procedural code

    View full-size slide

  7. 7
    Better Faster Stronger: How Alloy daftpunks your Titanium projects
    TiConf | Xavier Lacot | february 2013
    The existing frameworks...
    ■ IQ SDK - https://github.com/dev-ique/iqsdk
    ■ EnJS + Joose + custom classes
    ■ No community
    ■ Extanium – http://extanium.org
    ■ Extjs in Titanium
    ■ V 0.2.1, nothing since june 2011. No community
    ■ TiMVC - http://timvc.com/
    ■ Ti.include(), no use of CommonJS
    ■ No community
    ■ Kranium - http://kraniumjs.com/
    ■ Libraries assembled
    ■ V 0.1.3, nothing since september 2011. No community

    View full-size slide

  8. 8
    Better Faster Stronger: How Alloy daftpunks your Titanium projects
    TiConf | Xavier Lacot | february 2013
    The existing frameworks...
    ■ IQ SDK - https://github.com/dev-ique/iqsdk
    ■ EnJS + Joose + custom classes
    ■ No community
    ■ Extanium – http://extanium.org
    ■ Extjs in Titanium
    ■ V 0.2.1, nothing since june 2011. No community
    ■ TiMVC - http://timvc.com/
    ■ Ti.include(), no use of CommonJS
    ■ No community
    ■ Kranium - http://kraniumjs.com/
    ■ Libraries assembled
    ■ V 0.1.3, nothing since september 2011. No community
    Seriously.
    WTF???

    View full-size slide

  9. 9
    Better Faster Stronger: How Alloy daftpunks your Titanium projects
    TiConf | Xavier Lacot | february 2013
    Alloy
    ■ Alloy
    ■ Open Source, lead by Appcelerator
    ■ Appeared in spring 2012 (first beta in june)
    ■ Uses open components (third party projects)
    ■ Built on top of node.js, available through npm
    ■ Rather well documented
    ■ GitHub: 400+ stars, 179 forks
    ■ Test it: http://projects.appcelerator.com/alloy/docs/Alloy-bootstrap/index.html

    View full-size slide

  10. 10
    Better Faster Stronger: How Alloy daftpunks your Titanium projects
    TiConf | Xavier Lacot | february 2013
    Goals
    ■ Productivity
    ■ Develop faster;
    ■ Build reusabled libraries;
    ■ Generate code
    ■ Force to use good practices
    ■ Bye bye global variables, Ti.include() nightmares loading 200+ files
    during the bootstrap of your applications!
    ■ Improve the maintenability
    ■ Today: 1 developer = 1 coding-style
    ■ Target: uniform application architectures = better reversibility

    View full-size slide

  11. 11
    Better Faster Stronger: How Alloy daftpunks your Titanium projects
    TiConf | Xavier Lacot | february 2013
    Install alloy
    ■ Pre-requisite before playing:
    ■ node.js 0.6.3 or newer
    ■ Titanium SDK >= 3.0.x
    ■ Install the stuff:
    … or let Titanium Studio install it for you!
    $ sudo npm install alloy -g

    View full-size slide

  12. 12
    Better Faster Stronger: How Alloy daftpunks your Titanium projects
    TiConf | Xavier Lacot | february 2013
    Toolsbox
    ■ A command line tool:
    ■ new: initializes a new alloy
    project
    ■ compile: compiles the
    project
    ■ run: runs the application
    (like « $ titanium build »)
    ■ generate: generates code
    controller / model / widget

    View full-size slide

  13. 13
    Better Faster Stronger: How Alloy daftpunks your Titanium projects
    TiConf | Xavier Lacot | february 2013
    Architecture of an alloy project
    Alloy code directory
    Usual Titanium folders
    and files
    app/
    build/
    i18n/
    modules/
    plugins/
    Resources/
    manifest
    tiapp.xml
    Do not write code in Resources, it will be overwritten

    View full-size slide

  14. 14
    Better Faster Stronger: How Alloy daftpunks your Titanium projects
    TiConf | Xavier Lacot | february 2013
    Architecture of an alloy project
    assets (images, sounds,
    etc.) of your project.
    Copied in Resources/
    during compilation
    app/
    assets/
    controllers/
    lib/
    migrations/
    models/
    styles/
    views/
    widgets/
    alloy.jmk
    README
    config.json

    View full-size slide

  15. 15
    Better Faster Stronger: How Alloy daftpunks your Titanium projects
    TiConf | Xavier Lacot | february 2013
    Architecture of an alloy project
    Controllers, ie. the joints of
    your application
    app/
    assets/
    controllers/
    lib/
    migrations/
    models/
    styles/
    views/
    widgets/
    alloy.jmk
    README
    config.json

    View full-size slide

  16. 16
    Better Faster Stronger: How Alloy daftpunks your Titanium projects
    TiConf | Xavier Lacot | february 2013
    Architecture of an alloy project
    CommonJS librairies:
    ■ Business classes / librairies
    ■ External libraries (lib/vendor)
    Create this folder by hand
    Loading with:
    require('LIBRARY_NAME')
    app/
    assets/
    controllers/
    lib/
    migrations/
    models/
    styles/
    views/
    widgets/
    alloy.jmk
    README
    config.json

    View full-size slide

  17. 17
    Better Faster Stronger: How Alloy daftpunks your Titanium projects
    TiConf | Xavier Lacot | february 2013
    Architecture of an alloy project
    Migration classes for your
    data models.
    Create this folder by hand
    app/
    assets/
    controllers/
    lib/
    migrations/
    models/
    styles/
    views/
    widgets/
    alloy.jmk
    README
    config.json

    View full-size slide

  18. 18
    Better Faster Stronger: How Alloy daftpunks your Titanium projects
    TiConf | Xavier Lacot | february 2013
    Architecture of an alloy project
    Classes of the data models.
    app/
    assets/
    controllers/
    lib/
    migrations/
    models/
    styles/
    views/
    widgets/
    alloy.jmk
    README
    config.json

    View full-size slide

  19. 19
    Better Faster Stronger: How Alloy daftpunks your Titanium projects
    TiConf | Xavier Lacot | february 2013
    Architecture of an alloy project
    Styles associated with the
    views. *.tss files (Titanium
    StyleSheet)
    Syntax similar to CSS
    app/
    assets/
    controllers/
    lib/
    migrations/
    models/
    styles/
    views/
    widgets/
    alloy.jmk
    README
    config.json

    View full-size slide

  20. 20
    Better Faster Stronger: How Alloy daftpunks your Titanium projects
    TiConf | Xavier Lacot | february 2013
    Architecture of an alloy project
    Views of the application:
    templates in XML format
    No need for Ti.UI.create*
    anymore
    app/
    assets/
    controllers/
    lib/
    migrations/
    models/
    styles/
    views/
    widgets/
    alloy.jmk
    README
    config.json

    View full-size slide

  21. 21
    Better Faster Stronger: How Alloy daftpunks your Titanium projects
    TiConf | Xavier Lacot | february 2013
    Architecture of an alloy project
    Widgets specific to your
    application (ie., not bundled
    in alloy).
    Widgets are graphical /
    functional components used
    to build the app.
    Create this folder by hand.
    app/
    assets/
    controllers/
    lib/
    migrations/
    models/
    styles/
    views/
    widgets/
    alloy.jmk
    README
    config.json

    View full-size slide

  22. 22
    Better Faster Stronger: How Alloy daftpunks your Titanium projects
    TiConf | Xavier Lacot | february 2013
    Architecture of an alloy project
    Makefile-style file, for
    defining pre- et post-
    compilation operations:
    ■ Change the configuration
    ■ Log informations
    ■ Deploy on a server
    ■ etc.
    app/
    assets/
    controllers/
    lib/
    migrations/
    models/
    styles/
    views/
    widgets/
    alloy.jmk
    README
    config.json

    View full-size slide

  23. 23
    Better Faster Stronger: How Alloy daftpunks your Titanium projects
    TiConf | Xavier Lacot | february 2013
    Architecture of an alloy project
    Litterature
    app/
    assets/
    controllers/
    lib/
    migrations/
    models/
    styles/
    views/
    widgets/
    alloy.jmk
    README
    config.json

    View full-size slide

  24. 24
    Better Faster Stronger: How Alloy daftpunks your Titanium projects
    TiConf | Xavier Lacot | february 2013
    Architecture of an alloy project
    Declaration of constants and
    execution parameters (urls,
    variables, etc.).
    Declaration of the widgets
    dependancies of the
    application.
    app/
    assets/
    controllers/
    lib/
    migrations/
    models/
    styles/
    views/
    widgets/
    alloy.jmk
    README
    config.json

    View full-size slide

  25. 25
    Better Faster Stronger: How Alloy daftpunks your Titanium projects
    TiConf | Xavier Lacot | february 2013
    Architecture of an alloy project
    « app/ » is your new
    sandbox.
    « Resources/ » is no more
    shown in Titanium Studio

    View full-size slide

  26. 26
    Better Faster Stronger: How Alloy daftpunks your Titanium projects
    TiConf | Xavier Lacot | february 2013
    How does it work?
    Code written for alloy « Standard » Titanium Code
    run / compile

    View full-size slide

  27. 27
    Better Faster Stronger: How Alloy daftpunks your Titanium projects
    TiConf | Xavier Lacot | february 2013
    How does it work?
    Code written for alloy « Standard » Titanium Code
    run / compile
    alloy is a compiler which turns structured, reusable
    and modern code into « Titanium code » with
    good practices
    alloy does not replace Titanium, it complements it.

    View full-size slide

  28. 28
    Better Faster Stronger: How Alloy daftpunks your Titanium projects
    TiConf | Xavier Lacot | february 2013
    Architecture of an alloy application
    View
    Model
    Controller
    Styles
    execution
    Third party
    libraries
    Widgets
    decorates animates
    uses
    Requires loads

    View full-size slide

  29. 29
    Better Faster Stronger: How Alloy daftpunks your Titanium projects
    TiConf | Xavier Lacot | february 2013
    Views management
    ■ Views are XML files
    ■ At least one view (the first « screen ») :
    index.xml
    ■ Views do not define the look and feel of the
    application, but only its organization
    ■ .tss styles allow to decorate the views
    (similar to HTML and CSS)

    View full-size slide

  30. 30
    Better Faster Stronger: How Alloy daftpunks your Titanium projects
    TiConf | Xavier Lacot | february 2013
    Views management
    ■ Example of the main view:


    Hello, World


    : container of the
    application
    : Prefixed with Ti.UI.
    Attribute ns="..."

    View full-size slide

  31. 31
    Better Faster Stronger: How Alloy daftpunks your Titanium projects
    TiConf | Xavier Lacot | february 2013
    Views management
    ■ Example of the main view:


    Hello, World


    Support for classes
    and identifiers
    Possible to
    handle events

    View full-size slide

  32. 32
    Better Faster Stronger: How Alloy daftpunks your Titanium projects
    TiConf | Xavier Lacot | february 2013
    Composition of views
    ■ Inclusion of views
    ■ « Require » keyword
    ■ Possible to divide views into smaller parts
    ■ Hierarchical approach
    ■ Reuse partial views





    View full-size slide

  33. 33
    Better Faster Stronger: How Alloy daftpunks your Titanium projects
    TiConf | Xavier Lacot | february 2013
    Associate styles to a view
    ■ Styles are defined in .tss files
    ■ name_of_view.xml ↔ name_of_view.tss

    Hello


    app/views/toto.xml
    "#a" : {
    "backgroundColor": "red",
    "height": "100"
    },
    "#b" : {
    "height": Ti.UI.SIZE
    },
    "#t" : {
    "color": "black"
    }
    app/styles/toto.tss

    View full-size slide

  34. 34
    Better Faster Stronger: How Alloy daftpunks your Titanium projects
    TiConf | Xavier Lacot | february 2013
    Controllers, some activity in the view...
    ■ Same principle for controllers:
    ■ name_of_view.xml ↔ name_of_view.js

    Hello
    Batman

    app/views/toto.xml
    $.a.backgroundColor = 'blue';
    $.b.addEventListener('click', function(e){
    $.t.text = 'Robin';
    });
    function doClick(e) {
    $.t.color = 'green';
    }
    app/controllers/toto.js

    View full-size slide

  35. 35
    Better Faster Stronger: How Alloy daftpunks your Titanium projects
    TiConf | Xavier Lacot | february 2013
    Controllers, some activity in the view...
    ■ Same principle for controllers:
    ■ name_of_view.xml ↔ name_of_view.js

    Hello
    Batman

    app/views/toto.xml
    $.a.backgroundColor = 'blue';
    $.b.addEventListener('click', function(e){
    $.t.text = 'Robin';
    });
    function doClick(e) {
    $.t.color = 'green';
    }
    app/controllers/toto.js
    Add a behavior with an
    event listener
    Add a behavior in the
    View

    View full-size slide

  36. 36
    Better Faster Stronger: How Alloy daftpunks your Titanium projects
    TiConf | Xavier Lacot | february 2013
    Data management
    ■ Your applications manage data
    ■ These data are stored through Models
    ■ alloy manages models by using:
    ■ backbone
    ■ adaptors for storing the data
    Application
    (controller)
    Models (extend
    Backbone.Model)
    Adaptors
    provided by
    alloy
    storage

    View full-size slide

  37. 37
    Better Faster Stronger: How Alloy daftpunks your Titanium projects
    TiConf | Xavier Lacot | february 2013
    Several adaptors available
    ■ sql
    ■ SQLite database
    ■ (iOS and Android targets only)
    ■ localStorage
    ■ HTML5 localStorage
    ■ (« MobileWeb » target only)
    ■ localDefault
    ■ SQLite or localStorage depending on the plateform
    ■ properties : uses Ti.API.Properties (yuck)

    View full-size slide

  38. 39
    Better Faster Stronger: How Alloy daftpunks your Titanium projects
    TiConf | Xavier Lacot | february 2013
    How to create a data model
    ■ alloy does the job:
    $ alloy generate model photo sql name:string url:string
    is_enabled:boolean
    .__ .__
    _____ | | | | ____ ___.__.
    \__ \ | | | | / _ < | |
    / __ \| |_| |_( <_> )___ |
    (____ /____/____/\____// ____|
    \/ \/
    Alloy by Appcelerator. The MVC app framework for Titanium.
    [INFO] Generated model description named photo
    [INFO] Generated migration named 201208161505184_photo.js

    View full-size slide

  39. 40
    Better Faster Stronger: How Alloy daftpunks your Titanium projects
    TiConf | Xavier Lacot | february 2013
    $ alloy generate model photo sql name:string url:string
    is_enabled:boolean
    .__ .__
    _____ | | | | ____ ___.__.
    $ alloy generate model photo sql name:string url:string
    is_enabled:boolean
    Model creation command
    Name of the file to create
    Adaptor to use
    List of the fields (except
    for localStorage)
    ■ Generates:
    ■ The definition of the model in app/models/photo.js
    ■ A migration in app/migrations

    View full-size slide

  40. 41
    Better Faster Stronger: How Alloy daftpunks your Titanium projects
    TiConf | Xavier Lacot | february 2013
    // app/models/photo.js
    exports.definition = {
    config: {
    columns: {
    "name": "string",
    "url": "string",
    "is_enabled": "boolean"
    },
    adapter: {
    type: "sql",
    collection_name: "photo"
    }
    },
    extendModel: function(Model) {
    _.extend(Model.prototype, {
    // extended functions and properties go here
    });
    return Model;
    },
    extendCollection: function(Collection) {
    _.extend(Collection.prototype, {
    // extended functions and properties go here
    });
    return Collection;
    }
    }
    Enhance a data model

    View full-size slide

  41. 42
    Better Faster Stronger: How Alloy daftpunks your Titanium projects
    TiConf | Xavier Lacot | february 2013
    // app/models/photo.js
    exports.definition = {
    config: {
    columns: {
    "name": "string",
    "url": "string",
    "is_enabled": "boolean"
    },
    adapter: {
    type: "sql",
    collection_name: "photo"
    }
    },
    extendModel: function(Model) {
    _.extend(Model.prototype, {
    // extended functions and properties go here
    });
    return Model;
    },
    extendCollection: function(Collection) {
    _.extend(Collection.prototype, {
    // extended functions and properties go here
    });
    return Collection;
    }
    }
    Enhance a data model
    Model configuration

    View full-size slide

  42. 43
    Better Faster Stronger: How Alloy daftpunks your Titanium projects
    TiConf | Xavier Lacot | february 2013
    // app/models/photo.js
    exports.definition = {
    config: {
    columns: {
    "name": "string",
    "url": "string",
    "is_enabled": "boolean"
    },
    adapter: {
    type: "sql",
    collection_name: "photo"
    }
    },
    extendModel: function(Model) {
    _.extend(Model.prototype, {
    // extended functions and properties go here
    });
    return Model;
    },
    extendCollection: function(Collection) {
    _.extend(Collection.prototype, {
    // extended functions and properties go here
    });
    return Collection;
    }
    }
    Enhance a data model
    Business methods
    associated to model
    instances

    View full-size slide

  43. 44
    Better Faster Stronger: How Alloy daftpunks your Titanium projects
    TiConf | Xavier Lacot | february 2013
    // app/models/photo.js
    exports.definition = {
    config: {
    columns: {
    "name": "string",
    "url": "string",
    "is_enabled": "boolean"
    },
    adapter: {
    type: "sql",
    collection_name: "photo"
    }
    },
    extendModel: function(Model) {
    _.extend(Model.prototype, {
    // extended functions and properties go here
    });
    return Model;
    },
    extendCollection: function(Collection) {
    _.extend(Collection.prototype, {
    // extended functions and properties go here
    });
    return Collection;
    }
    }
    Enhance a data model
    Business methods
    associated to the model
    collections
    - Mass operations
    - Specific selections
    - filtering

    View full-size slide

  44. 45
    Better Faster Stronger: How Alloy daftpunks your Titanium projects
    TiConf | Xavier Lacot | february 2013
    Usage of a data model (1/2)
    ■ Once the model is defined, we can use it in
    the controllers:
    var photos = Alloy.createCollection('Photos');
    // create a new Photo
    var photo = Alloy.createModel('Photo', {
    name:"HOTLINE",
    url:"http://picmybox.fr/media/large/photos/hotline.jpg",
    is_enabled: true
    });
    // add it to the photos collection
    photos.add(photo);

    View full-size slide

  45. 46
    Better Faster Stronger: How Alloy daftpunks your Titanium projects
    TiConf | Xavier Lacot | february 2013
    Usage of a data model (2/2)
    ■ Models extend Backbone.Model!
    ■ cf. http://backbonejs.org/
    // create and fetch the collection
    var photos = Alloy.createCollection('Photos');
    photos.fetch();
    // retrieve only the enabled photos
    var enabled_photos = photos.where({is_enabled: true});
    // update a view element when photos are fetched from the
    storage
    photos.on("fetch", function() {
    $.table.updateContent(photos);
    });

    View full-size slide

  46. 47
    Better Faster Stronger: How Alloy daftpunks your Titanium projects
    TiConf | Xavier Lacot | february 2013
    Widgets, for a sprinkle of reusability
    ■ A widget is a module with its own MVC
    logic
    ■ A widget is a reusable package, autonomous,
    which can be imported in every application
    ■ A widget can bring views, or simply
    functionalities

    View full-size slide

  47. 48
    Better Faster Stronger: How Alloy daftpunks your Titanium projects
    TiConf | Xavier Lacot | february 2013
    Widgets, for a sprinkle of reusability
    ■ Every « generic » part of an application should be developed as
    a widget
    ■ Datepicker
    ■ Oauth connection form
    ■ etc.
    ■ Creating a widget is simple:
    $ alloy generate widget com.picmybox.hellobutton
    .__ .__
    _____ | | | | ____ ___.__.
    \__ \ | | | | / _ < | |
    / __ \| |_| |_( <_> )___ |
    (____ /____/____/\____// ____|
    \/ \/
    Alloy by Appcelerator. The MVC app framework for Titanium.
    [INFO] Generated widget named com.picmybox.hellobutton

    View full-size slide

  48. 49
    Better Faster Stronger: How Alloy daftpunks your Titanium projects
    TiConf | Xavier Lacot | february 2013
    Structure of a Widget
    ■ The code is generated in app/widgets/XXX
    ■ A widget is like an whole application
    ■ Views
    ■ Controller
    ■ Models
    ■ Librairies
    ■ widget.json which describes the widget

    View full-size slide

  49. 50
    Better Faster Stronger: How Alloy daftpunks your Titanium projects
    TiConf | Xavier Lacot | february 2013
    Using a Widget
    ■ You can use widgets in views:
    ■ A widget comes with its own logic
    ■ May be overriden locally in the application
    ■ If present, assets will be copied in Resource/ at
    compile time





    View full-size slide

  50. 51
    Better Faster Stronger: How Alloy daftpunks your Titanium projects
    TiConf | Xavier Lacot | february 2013
    Widgets configurability
    ■ A widget may expose a public API for the
    application :
    ■ Widgets are therefore configurable!
    // widget.js controller file
    exports.doSomething = function()
    {
    alert('Hello pony');
    }
    // application controller
    $.foo.doSomething();
    exports keyword: defines a
    public API (kisses CommonJS)
    Call to the method through the
    name of the Widget
    // application controller
    $.foo.init({title: 'Hello pony'});

    View full-size slide

  51. 52
    Better Faster Stronger: How Alloy daftpunks your Titanium projects
    TiConf | Xavier Lacot | february 2013
    Some words about widgets...
    ■ Appcelerator wants to ease up the distribution
    of widgets – in the Marketplace?
    ■ At the moment, no packaging of widgets as an
    archive (possible in a near future?)

    View full-size slide

  52. 53
    Better Faster Stronger: How Alloy daftpunks your Titanium projects
    TiConf | Xavier Lacot | february 2013
    Debugging applications
    ■ Debug (and also compilation / distribution) is
    done in Titanium Studio, just like usually with
    Ti apps
    ■ The precompilation « alloy → Titanium » can
    detect some trivial errors. For example:
    [INFO] [index.xml] view processing...
    [INFO] style: "index.tss"
    [INFO] view: "index.xml"
    [ERROR] Error parsing XML document
    [ERROR] end tag name: Window is not match the current start tagName:Windo
    [ERROR] Alloy compile failed

    View full-size slide

  53. 54
    Better Faster Stronger: How Alloy daftpunks your Titanium projects
    TiConf | Xavier Lacot | february 2013

    View full-size slide

  54. 55
    Better Faster Stronger: How Alloy daftpunks your Titanium projects
    TiConf | Xavier Lacot | february 2013
    Better
    ■ MVC <3
    ■ Built on top of quality js components
    ■ Adapted syntax for views
    ■ Re-use is possible / easier
    ■ No need to know the tip and tricks of the
    platform

    View full-size slide

  55. 56
    Better Faster Stronger: How Alloy daftpunks your Titanium projects
    TiConf | Xavier Lacot | february 2013
    Faster
    ■ Re-use existing widgets
    ■ Focus on your app, not on the recurring
    misleading bugs
    ■ Tools are possible (see Visual UI by Grant
    Smith)
    ■ A standardized way to develop
    → more efficiency in teams

    View full-size slide

  56. 57
    Better Faster Stronger: How Alloy daftpunks your Titanium projects
    TiConf | Xavier Lacot | february 2013
    Stronger
    ■ Focus on quality, not on building
    ■ Use unit-test libraries
    ■ Use deploy scripts
    ■ Regularly upgrade the vendors
    ■ alloy
    ■ helps to be more professional
    ■ helps to focus on apps robustness

    View full-size slide

  57. 58
    Better Faster Stronger: How Alloy daftpunks your Titanium projects
    TiConf | Xavier Lacot | february 2013
    Conclusion

    View full-size slide

  58. 59
    Better Faster Stronger: How Alloy daftpunks your Titanium projects
    TiConf | Xavier Lacot | february 2013
    As a conclusion...
    alloy:
    ■ A great tool to strongly structure the development with
    Titanium;
    ■ brings an answer to those who do not know how to start
    (well) a Ti project;
    ■ eases the use of quality js libraries.
    alloy is a stable solution
    ■ Pre-release phase is completed, 1.0.0 is out;
    ■ Go use it! NOW!

    View full-size slide

  59. 60
    Better Faster Stronger: How Alloy daftpunks your Titanium projects
    TiConf | Xavier Lacot | february 2013

    View full-size slide

  60. Questions ?
    Contact
    Xavier Lacot
    [email protected]
    +33 6 51 48 59 73
    http://jolicode.com
    Twitter : @JoliCode

    View full-size slide