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!

Transcript

1. Alloy, a MVC framework for Appcelerator Titanium Initially presented at the Meetup Paris Titanium n° 2 – September 27th, 2012 Xavier Lacot – JoliCode
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
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
4. 4 Alloy, a MVC framework for Appcelerator Titanium Meetup Paris Titanium | Xavier Lacot | September 27th, 2012 A large panel of available solutions
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) »
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
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
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
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???
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
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
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
13. 13 Alloy, a MVC framework for Appcelerator Titanium Meetup Paris Titanium | Xavier Lacot | September 27th, 2012
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
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)
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
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
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
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
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
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
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
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
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
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
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
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
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
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.
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
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)
32. 32 Alloy, a MVC framework for Appcelerator Titanium Meetup Paris Titanium | Xavier Lacot | September 27th, 2012 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="..."
33. 33 Alloy, a MVC framework for Appcelerator Titanium Meetup Paris Titanium | Xavier Lacot | September 27th, 2012 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
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 <Alloy> <Require src="header" id="header"/> <Require src="home" id="content"/> <Require src="menu" id="menu"/> </Alloy>
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 <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
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 <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
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 <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
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
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)
41. 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
42. 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
43. 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);
44. 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); });
45. 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
46. 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
47. 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
48. 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 <Alloy> <Window id="hello"> <Require type="widget" src="com.picmybow.helloButton" id="pony"/> </Window> </Alloy>
49. 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
50. 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
51. 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!
52. Questions ? Contact Xavier Lacot xlacot@jolicode.com +33 6 51 48 59 73 http://jolicode.com Twitter : @JoliCode