Alloy: Deep Dive, Below The Surface, and Other Nautical Metaphors
-
Upload
tony-lukasavage -
Category
Technology
-
view
3.454 -
download
3
description
Transcript of Alloy: Deep Dive, Below The Surface, and Other Nautical Metaphors
ALLOYDEEP DIVE, BELOW THE SURFACE, AND OTHER
NAUTICAL METAPHORS
TiConf US June 28-29 2013
Tremont Hotel in Baltimore #ticonf
TONY LUKASAVAGEAlloy Lead Engineer @
Appcelerator
@tonylukasavage
CRASH COURSE
Alloy is an MVC framework for Appcelerator's TitaniumSDK built with Node.js. Through a compilation process it
aims to produce highly optimized, cross-platformJavascript code.
from on .
CODESTRONG 2012 Breakout session - Alloy (MVC)Application Framework OverviewAppcelerator Video Channel Vimeo
Models | Views | Controllers | Styles
var tabGroup = Titanium.UI.createTabGroup();var win1 = Titanium.UI.createWindow({ title:'tab 1', backgroundColor:'#fff'});var tab1 = Titanium.UI.createTab({ title:'tab 1', window:win1});var label1 = Titanium.UI.createLabel({ text:'tab 1'});win1.add(label1);win1.addEventListener('click',function(e){/* ... */});var win2 = Titanium.UI.createWindow({ title:'tab 2', backgroundColor:'#fff'});var tab2 = Titanium.UI.createTab({ title:'tab 2', window:win2});var label2 = Titanium.UI.createLabel({ text:'tab 2'});win2.add(label2);tabGroup.addTab(tab1); tabGroup.addTab(tab2); tabGroup.open();
DECLARATIVE UI<Alloy> <TabGroup> <Tab title="tab1"> <Window title="tab1" backgroundColor="#fff"> <Label>tab 1</Label> </Window> </Tab> <Tab title="tab2"> <Window title="tab2" backgroundColor="#fff"> <Label>tab 2</Label> </Window> </Tab> </TabGroup></Alloy>
TSS'Window': { backgroundColor: '#fff', navBarHidden: true}
'Label': { text: L('theString'), color: '#222', height: Ti.UI.SIZE, font: { fontSize: 18, fontWeight: 'normal' }}
'.shadow': { shadowColor: Alloy.CFG.shadowColor, shadowOffset: {x:1,y:2}}
'#index[platform=android]': { exitOnClose: true}
CONTROLLERSvar memory = ['magic show', 'wear $6000 suit'];function forgetMeNow() { memory.push('took forget-me-now'); setTimeout(function() { memory.pop() }, 1000 * 60 * 60 * 12); }
exports.isNude = function() { return false;}
exports.isThereMoney = function(location) { return location === 'banana stand';}
try { $.someWindow.open();} catch (e) { memory.push("I've made a huge mistake"); forgetMeNow();}
MODELSexports.definition = { config: { columns: { item: "text", done: "integer", date_completed: "text" }, adapter: { type: "sql", collection_name: "todo" } }, extendModel : function(Model) { _.extend(Model.prototype, { validate : function(attrs) { /* ... */ } }); return Model; }, extendCollection : function(Collection) { _.extend(Collection.prototype, { comparator: function(todo) { return todo.get('done'); } }); return Collection; }}
WIDGETS
http://www.danielsefton.com/2012/10/ios-slider-menu-widget-for-titanium-alloy
SYNC ADAPTERSAlloy + Backbone.jsData persistence abstractionAdapters:
SQLiteRESTACSCouchDB
BUILTINSBackbone.jsUnderscore.jsMoment.jsTitanium-specific libraries
var moment = require('alloy/moment');
BEST PRACTICES
* Standarize coding practices *
* Embedding Expertise *
* CommonJS *
* Parity Issues *
* Optimizations *
FASTER DEVELOPMENT
HIGH QUALITY APPS
H TO THE IZZO
INSTALLING ALLOY
# latest stable[sudo] npm install -g alloy
# by version[sudo] npm install -g [email protected]
# straight from github[sudo] npm install -g git://github.com/appcelerator/alloy.git
DYNAMIC STYLING*
Modify and apply styles at runtimeNew APIs
Alloy.createStyle()Alloy.UI.create()Alloy.addClass()Alloy.removeClass()Alloy.resetClass()
*available in Alloy 1.2.0
LISTVIEW MARKUP*
High performance listsiOS & AndroidTransition made easier with AlloyData binding support
*available in Alloy 1.2.0
NATIVE MODULESIN MARKUP*
<Module id="paint" module="ti.paint" method="createPaintView" platform="ios,android"/>
*available in Alloy 1.2.0
DEVICE OPTIMIZATIONSDevice QueriesCompiler ConditionalsConditional Configurations
ALLOY.JMKpre/post processingModify, beautify, minify, etc...Even or , if you're into that sort ofthing
coffeescript Jade
OVERRIDESNOTHING IS SACRED
...unless it breaks something
Alloy namespace functionsBackbone.js, Underscore.js, etc...Even the core runtime library (alloy.js)
CONTROLLEREVENTING
Alloy controllers have Backbone eventingLightweight, yet powerfulLoose coupling
VIEW MODEL BINDINGdataCollectiondataTransformdataFilter
<TableView id="todoTable" dataCollection="todo" dataFilter="whereFunction" dataTransform="transformFunction"> <Require src="row"/></TableView>
SOURCE MAPSMaps generated code to source, and vice versaEnables debugging, exceptions, and code processorconfig.json toggling{ "sourcemap": false}
alloylove.com
COMMUNITYAll-Stars
Fokke Zandenberg ( )David Bankier ( )Aaron Saunders ( )Jason Kneen ( )Mads Moller ( )Josh Jensen ( )
Twitter at
@fokkezb@davidbankier
@aaronksaunders@jasonkneen
@nappdev@joshj
#tialloyQ&A "alloy" tagAlloy Google Group
THE FUTURE
DYNAMIC THEMES
→
LIGHTER, MOREPOWERFUL MODELING
Peel back the Alloy layerDevelop abstract model interfaceLeverage Alloy's and framework of choice's features
NATIVE FORMATSiOS NibAndroid XMLNative formatting optimizations
PACKAGEMANAGEMENT
meets Iterative development independent of Alloy releasesSame conventions, same results
alloylove.com npm
# Install a widget. Package manifest would determine that it's a widgettpm install someCoolAssWidget
# Install a sync adapter.tmp install syncToMyToaster
RESOURCESOfficial Alloy DocumentationQ&AAlloy Google GroupAlloy source codeAlloy test app collection