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

alloy, a MVC framework for Appcelerator Titanium mobile

Xavier Lacot
September 27, 2012

alloy, a MVC framework for Appcelerator Titanium mobile

This is the english translation of the slides presented during the 2nd meetup of the Paris Titanium Users Group, held on september 27th, 2012.

This presentation introduces alloy, the new MVC-oriented framework created by the Appcelerator guys, which is a sort of great revolution in the Titanium developement world. Alloy greatly improves the way Titanium mobile applications are build: backbone js as a model management layer, MVC approach, widgets for reusability. I would bet that alloy will greatly improve the industrialisation of Titanium applications!

Xavier Lacot

September 27, 2012
Tweet

More Decks by Xavier Lacot

Other Decks in Programming

Transcript

  1. Alloy, a MVC framework
    for Appcelerator Titanium
    Initially presented at the Meetup Paris Titanium n° 2 – September 27th, 2012
    Xavier Lacot – JoliCode

    View full-size slide

  2. 2
    Alloy, a MVC framework for Appcelerator Titanium
    Meetup Paris Titanium | Xavier Lacot | September 27th, 2012
    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.
    ■ President of the French Association of PHP Users (afup.org)
    ■ http://twitter.com/xavierlacot

    View full-size slide

  3. 3
    Alloy, a MVC framework for Appcelerator Titanium
    Meetup Paris Titanium | Xavier Lacot | September 27th, 2012
    Summary
    ■ Developement with Titanium
    ■ Short reminder
    ■ An optimizable process: the lack of a RAD framework
    ■ Alloy, a unifying framework
    ■ Goals
    ■ Simple example
    ■ Presentation of the architecture
    ■ View
    ■ Controllers
    ■ Models
    ■ Widgets
    ■ Styles

    View full-size slide

  4. 4
    Alloy, a MVC framework for Appcelerator Titanium
    Meetup Paris Titanium | Xavier Lacot | September 27th, 2012
    A large panel of available solutions

    View full-size slide

  5. 5
    Alloy, a MVC framework for Appcelerator Titanium
    Meetup Paris Titanium | Xavier Lacot | September 27th, 2012
    What is Titanium ?
    « Titanium is an open source framework for building
    native desktop and mobile applications using open web
    technologies (HTML, CSS, and JavaScript) »

    View full-size slide

  6. 6
    Alloy, a MVC framework for Appcelerator Titanium
    Meetup Paris Titanium | Xavier Lacot | September 27th, 2012
    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

  7. 7
    Alloy, a MVC framework for Appcelerator Titanium
    Meetup Paris Titanium | Xavier Lacot | September 27th, 2012
    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

  8. 8
    Alloy, a MVC framework for Appcelerator Titanium
    Meetup Paris Titanium | Xavier Lacot | September 27th, 2012
    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

  9. 9
    Alloy, a MVC framework for Appcelerator Titanium
    Meetup Paris Titanium | Xavier Lacot | September 27th, 2012
    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

  10. 10
    Alloy, a MVC framework for Appcelerator Titanium
    Meetup Paris Titanium | Xavier Lacot | September 27th, 2012
    Alloy
    ■ Alloy
    ■ Open Source, lead by Appcelerator
    ■ Apparead in spring 2012 (first beta in june)
    ■ Uses open components (third party projects)
    ■ Built on top of node.js, available through npm
    ■ Already well documented
    ■ GitHub: 250 stars, 49 forks
    ■ Test it: http://projects.appcelerator.com/alloy/docs/Alloy-bootstrap/index.html

    View full-size slide

  11. 11
    Alloy, a MVC framework for Appcelerator Titanium
    Meetup Paris Titanium | Xavier Lacot | September 27th, 2012
    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

  12. 12
    Alloy, a MVC framework for Appcelerator Titanium
    Meetup Paris Titanium | Xavier Lacot | September 27th, 2012
    Demo time
    http://projects.appcelerator.com/alloy/docs/Alloy-bootstrap/index.html

    View full-size slide

  13. 13
    Alloy, a MVC framework for Appcelerator Titanium
    Meetup Paris Titanium | Xavier Lacot | September 27th, 2012

    View full-size slide

  14. 14
    Alloy, a MVC framework for Appcelerator Titanium
    Meetup Paris Titanium | Xavier Lacot | September 27th, 2012
    Install alloy
    ■ Pre-requisite before playing:
    ■ node.js 0.6.3 or newer
    ■ Titanium SDK + Studio >= 2.1
    ■ OSX 10.6 or Linux (not windows at the moment)
    ■ Install the stuff:
    $ sudo npm install alloy -g

    View full-size slide

  15. 15
    Alloy, a MVC framework for Appcelerator Titanium
    Meetup Paris Titanium | Xavier Lacot | September 27th, 2012
    Toolsbox
    ■ A command line tool:
    ■ new: initializes a new
    alloy project
    ■ compile: compiles the
    project for the
    « webapp » target
    ■ run: runs the application
    ■ generate: generates code
    (controller / model)

    View full-size slide

  16. 16
    Alloy, a MVC framework for Appcelerator Titanium
    Meetup Paris Titanium | Xavier Lacot | September 27th, 2012
    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

  17. 17
    Alloy, a MVC framework for Appcelerator Titanium
    Meetup Paris Titanium | Xavier Lacot | September 27th, 2012
    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

  18. 18
    Alloy, a MVC framework for Appcelerator Titanium
    Meetup Paris Titanium | Xavier Lacot | September 27th, 2012
    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

  19. 19
    Alloy, a MVC framework for Appcelerator Titanium
    Meetup Paris Titanium | Xavier Lacot | September 27th, 2012
    Architecture of an alloy project
    CommonJS librairies:
    ■ Business classes librairies
    ■ External libraries (lib/vendor)
    Create this folder by hand
    Loading with:
    require('library')
    app/
    assets/
    controllers/
    lib/
    migrations/
    models/
    styles/
    views/
    widgets/
    alloy.jmk
    README
    config.json

    View full-size slide

  20. 20
    Alloy, a MVC framework for Appcelerator Titanium
    Meetup Paris Titanium | Xavier Lacot | September 27th, 2012
    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

  21. 21
    Alloy, a MVC framework for Appcelerator Titanium
    Meetup Paris Titanium | Xavier Lacot | September 27th, 2012
    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

  22. 22
    Alloy, a MVC framework for Appcelerator Titanium
    Meetup Paris Titanium | Xavier Lacot | September 27th, 2012
    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

  23. 23
    Alloy, a MVC framework for Appcelerator Titanium
    Meetup Paris Titanium | Xavier Lacot | September 27th, 2012
    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

  24. 24
    Alloy, a MVC framework for Appcelerator Titanium
    Meetup Paris Titanium | Xavier Lacot | September 27th, 2012
    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

  25. 25
    Alloy, a MVC framework for Appcelerator Titanium
    Meetup Paris Titanium | Xavier Lacot | September 27th, 2012
    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

  26. 26
    Alloy, a MVC framework for Appcelerator Titanium
    Meetup Paris Titanium | Xavier Lacot | September 27th, 2012
    Architecture of an alloy project
    Litterature
    app/
    assets/
    controllers/
    lib/
    migrations/
    models/
    styles/
    views/
    widgets/
    alloy.jmk
    README
    config.json

    View full-size slide

  27. 27
    Alloy, a MVC framework for Appcelerator Titanium
    Meetup Paris Titanium | Xavier Lacot | September 27th, 2012
    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

  28. 28
    Alloy, a MVC framework for Appcelerator Titanium
    Meetup Paris Titanium | Xavier Lacot | September 27th, 2012
    How does it work?
    Code written for alloy « Standard » Titanium Code
    run / compile

    View full-size slide

  29. 29
    Alloy, a MVC framework for Appcelerator Titanium
    Meetup Paris Titanium | Xavier Lacot | September 27th, 2012
    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

  30. 30
    Alloy, a MVC framework for Appcelerator Titanium
    Meetup Paris Titanium | Xavier Lacot | September 27th, 2012
    Architecture of an alloy application
    View
    Model
    Controller
    Styles
    execution
    Third party
    libraries
    Widgets
    decorates animates
    uses
    Requires loads

    View full-size slide

  31. 31
    Alloy, a MVC framework for Appcelerator Titanium
    Meetup Paris Titanium | Xavier Lacot | September 27th, 2012
    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

  32. 32
    Alloy, a MVC framework for Appcelerator Titanium
    Meetup Paris Titanium | Xavier Lacot | September 27th, 2012
    Views management
    ■ Example of the main view:


    Hello, World


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

    View full-size slide

  33. 33
    Alloy, a MVC framework for Appcelerator Titanium
    Meetup Paris Titanium | Xavier Lacot | September 27th, 2012
    Views management
    ■ Example of the main view:


    Hello, World


    Support for classes
    and identifiers
    Possible to
    handle events

    View full-size slide

  34. 34
    Alloy, a MVC framework for Appcelerator Titanium
    Meetup Paris Titanium | Xavier Lacot | September 27th, 2012
    Composition of views
    ■ Inclusion of views
    ■ « Require » keyword
    ■ Possible to divide views into smaller parts
    ■ Hierarchical approach
    ■ Reuse partial views





    View full-size slide

  35. 35
    Alloy, a MVC framework for Appcelerator Titanium
    Meetup Paris Titanium | Xavier Lacot | September 27th, 2012
    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

  36. 36
    Alloy, a MVC framework for Appcelerator Titanium
    Meetup Paris Titanium | Xavier Lacot | September 27th, 2012
    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

  37. 37
    Alloy, a MVC framework for Appcelerator Titanium
    Meetup Paris Titanium | Xavier Lacot | September 27th, 2012
    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

  38. 38
    Alloy, a MVC framework for Appcelerator Titanium
    Meetup Paris Titanium | Xavier Lacot | September 27th, 2012
    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

  39. 39
    Alloy, a MVC framework for Appcelerator Titanium
    Meetup Paris Titanium | Xavier Lacot | September 27th, 2012
    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

  40. 41
    Alloy, a MVC framework for Appcelerator Titanium
    Meetup Paris Titanium | Xavier Lacot | September 27th, 2012
    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

  41. 42
    Alloy, a MVC framework for Appcelerator Titanium
    Meetup Paris Titanium | Xavier Lacot | September 27th, 2012
    $ 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

  42. 43
    Alloy, a MVC framework for Appcelerator Titanium
    Meetup Paris Titanium | Xavier Lacot | September 27th, 2012
    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

  43. 44
    Alloy, a MVC framework for Appcelerator Titanium
    Meetup Paris Titanium | Xavier Lacot | September 27th, 2012
    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

  44. 45
    Alloy, a MVC framework for Appcelerator Titanium
    Meetup Paris Titanium | Xavier Lacot | September 27th, 2012
    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

  45. 46
    Alloy, a MVC framework for Appcelerator Titanium
    Meetup Paris Titanium | Xavier Lacot | September 27th, 2012
    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

  46. 47
    Alloy, a MVC framework for Appcelerator Titanium
    Meetup Paris Titanium | Xavier Lacot | September 27th, 2012
    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

  47. 48
    Alloy, a MVC framework for Appcelerator Titanium
    Meetup Paris Titanium | Xavier Lacot | September 27th, 2012
    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

  48. 49
    Alloy, a MVC framework for Appcelerator Titanium
    Meetup Paris Titanium | Xavier Lacot | September 27th, 2012
    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?)
    ■ A widget may expose a public API for the application :
    // 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

    View full-size slide

  49. 50
    Alloy, a MVC framework for Appcelerator Titanium
    Meetup Paris Titanium | Xavier Lacot | September 27th, 2012
    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

  50. 51
    Alloy, a MVC framework for Appcelerator Titanium
    Meetup Paris Titanium | Xavier Lacot | September 27th, 2012
    As a conclusion...
    alloy:
    ■ A great tool to strongly structure the
    developement 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 still in pre-release
    ■ Hey, it works quite well;
    ■ If you like playing, go ahead and give it
    a try!

    View full-size slide

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

    View full-size slide