Alloy MVC in Appcelerator Titanium

Presented at London Titanium on July 23rd 2013, this presentation provides an overview to Alloy mobile development in Appcelerator Titanium. Alloy is Appcelerator's open source MVC framework for cross-platform mobile development. Covered in this deck are core concepts of Views, Styles and Controllers, as well a brief introduction to how "Classic" Titanium development compares with Alloy.

Transcript

1. MVC in Titanium Or: How I Learned to Stop Worrying and Love Alloy
2. What is Alloy? Appcelerator’s MVC framework for Titanium Open Source Built on Node.js Code apps faster and more scalable Keep more of your hair! X
3. What is MVC? Model - View - Controller Separates Logic from UI from Data Change look-and-feel without affecting logic Change data without touching UI Model - logical data structure View - UI and all its elements Controller - logic connecting model to view
4. Classic Titanium Development Everything in one place - spaghetti code Roll-your-own abstraction Everybody rolls differently, no standards Harder to maintain, not easily scalable
5. Classic Titanium Development Create Window Create Label Add Event Listener Add Label to Window Open Window
6. Alloy: Views Represents the UI of the app XML defines structure of controls Parameters assign ID, class, style properties, arguments, event listeners and platform Easy to visualize the layout of UI elements with app and relationships to one another Easier to add, remove or change UI elements without breaking app
7. Alloy: Styles TSS: CSS-like structure familiar for web developers Keeps all styling separate from logic and layout Allows for platform specific styling making cross- platform development easier
8. Alloy: Controllers Javascript code handling the business logic Interact with UI element declared in XML Access view elements with $.[id] Platform Specific OS_IOS, OS_ANDROID, OS_MOBILEWEB Environment Specific ENV_DEV, ENV_TEST, ENV_PRODUCTION Handle arguments var args = arguments[0] || {};
9. Alloy Development Classic Ti Images, App Icons, etc Controllers Styles Views
10. Alloy Development Window Styling Label Styling
11. Alloy Development Open Window Event Listener Function Simples!
12. Alloy.CFG (config.json) JSON config file resides in app directory Hard coded values needed in the app Facebook ID, API keys, XHR urls, etc. Environment specific values "env:development": {}, "env:production": {} Platform specific values "os:ios": {}, "os:android": {}
13. Alloy.Globals Standardized global variable namespace Alloy.Globals.myObject Alloy.Globals.myString Accessible anywhere in the app Keeps global scope clean
14. Global Styles (app.tss) TSS file resides in app/styles directory Styles defined are accessible from anywhere in the app Class and UI element global styling .classid for classes (eg “.redText”) ElementName for Ti.UI elements (eg “Label”) Does not override non-global styles or attributes in view’s XML
15. Conditional Code Conditional code can be in Views, Styles and Controllers Views <View ns="Ti.Map" platform="ios" id="map" /> <View ns="Alloy.Globals.Map" platform="android" id="map" /> Styles "#map[platform=ios]": { mapType: Ti.Map.STANDARD_TYPE } "#map[platform=android]": { mapType: Alloy.Globals.Map.NORMAL_TYPE } Controllers if (OS_IOS) { // some ios specific code } else if (OS_ANDROID) { // some android specific code } if (ENV_DEV) { // dev environment code } else if (ENV_PRODUCTION) { // production environment code }
16. Getting Started Alloy Quick Start Guide http://docs.appcelerator.com/titanium/latest/#!/guide/Alloy_Quick_Start Alloy Google Group https://groups.google.com/forum/?fromgroups=#!forum/appc-ti-alloy Alloy on Github https://github.com/appcelerator/alloy
17. Julian Fraser jfraser@goodlime.com @movilmobil