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
  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
  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
  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
  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
  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
  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
  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???
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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.
  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
  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)
  30. 30 Better Faster Stronger: How Alloy daftpunks your Titanium projects

    TiConf | Xavier Lacot | february 2013 Views management ▪ Example of the main view: <Alloy> <Window class="container"> <Label id="label" onClick="doClick">Hello, World</Label> </Window> </Alloy> <Alloy> : container of the application <Window> : Prefixed with Ti.UI. Attribute ns="..."
  31. 31 Better Faster Stronger: How Alloy daftpunks your Titanium projects

    TiConf | Xavier Lacot | february 2013 Views management ▪ Example of the main view: <Alloy> <Window class="container"> <Label id="label" onClick="doClick">Hello, World</Label> </Window> </Alloy> Support for classes and identifiers Possible to handle events
  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 <Alloy> <Require src="header" id="header"/> <Require src="home" id="content"/> <Require src="menu" id="menu"/> </Alloy>
  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 <View id="a"> <Button id="b">Hello</Button> <Label id="t"></Label> </View> app/views/toto.xml "#a" : { "backgroundColor": "red", "height": "100" }, "#b" : { "height": Ti.UI.SIZE }, "#t" : { "color": "black" } app/styles/toto.tss
  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 <View id="a"> <Button id="b">Hello</Button> <Label id="t" onClick="doClick">Batman</Label> </View> 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
  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 <View id="a"> <Button id="b">Hello</Button> <Label id="t" onClick="doClick">Batman</Label> </View> 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
  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
  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)
  38. None
  39. 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
  40. 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
  41. 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
  42. 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
  43. 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
  44. 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
  45. 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);
  46. 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); });
  47. 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
  48. 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
  49. 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
  50. 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 <Alloy> <Window id="hello"> <Require type="widget" src="com.picmybox.helloButton" id="pony"/> </Window> </Alloy>
  51. 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'});
  52. 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?)
  53. 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
  54. 54 Better Faster Stronger: How Alloy daftpunks your Titanium projects

    TiConf | Xavier Lacot | february 2013
  55. 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
  56. 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
  57. 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
  58. 58 Better Faster Stronger: How Alloy daftpunks your Titanium projects

    TiConf | Xavier Lacot | february 2013 Conclusion
  59. 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!
  60. 60 Better Faster Stronger: How Alloy daftpunks your Titanium projects

    TiConf | Xavier Lacot | february 2013
  61. Questions ? Contact Xavier Lacot xlacot@jolicode.com +33 6 51 48

    59 73 http://jolicode.com Twitter : @JoliCode
  62. None