Better Faster Stronger: how Alloy daftpunks your Titanium projects

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

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

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

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

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

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

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

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???

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

TiConf | Xavier Lacot | february 2013 Architecture of an alloy project « app/ » is your new sandbox. « Resources/ » is no more shown in Titanium Studio

TiConf | Xavier Lacot | february 2013 How does it work? Code written for alloy « Standard » Titanium Code run / compile

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.

TiConf | Xavier Lacot | february 2013 Architecture of an alloy application View Model Controller Styles execution Third party libraries Widgets decorates animates uses Requires loads

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)

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="..."

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

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>

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

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

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

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

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)

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

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

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

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

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

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

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);

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); });

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

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

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

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>

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'});

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?)

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

TiConf | Xavier Lacot | february 2013

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

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

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

TiConf | Xavier Lacot | february 2013 Conclusion

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!

TiConf | Xavier Lacot | february 2013

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

Better Faster Stronger: how Alloy daftpunks you...

Better Faster Stronger: how Alloy daftpunks your Titanium projects

More Decks by Xavier Lacot

Other Decks in Programming

Featured

Transcript