ALLOYDEEP DIVE, BELOW THE SURFACE, AND OTHER
NAUTICAL METAPHORS
TiConf US
June 28-29 2013
Tremont Hotel in Baltimore
#tico...
TONY LUKASAVAGE
Alloy Lead Engineer @ Appcelerator
@tonylukasavage
tlukasavage@appcelerator.com
CRASH COURSE
Alloy is an MVC framework for Appcelerator's Titanium
SDK built with Node.js. Through a compilation process i...
from on .
CODESTRONG 2012 Breakout session - Alloy (MVC)
Application Framework Overview
Appcelerator Video Channel Vimeo
Models | Views | Controllers | Styles
var tabGroup = Titanium.UI.createTabGroup();
var win1 = Titanium.UI.createWindow({
title:'tab 1',
backgroundColor:'#fff'
}...
DECLARATIVE UI
<Alloy>
<TabGroup>
<Tab title="tab1">
<Window title="tab1" backgroundColor="#fff">
<Label>tab 1</Label>
</W...
TSS
'Window': {
backgroundColor: '#fff',
navBarHidden: true
}
'Label': {
text: L('theString'),
color: '#222',
height: Ti.U...
CONTROLLERS
var memory = ['magic show', 'wear $6000 suit'];
function forgetMeNow() {
memory.push('took forget-me-now');
se...
MODELS
exports.definition = {
config: {
columns: {
item: "text",
done: "integer",
date_completed: "text"
},
adapter: {
typ...
WIDGETS
http://www.danielsefton.com/2012/10/ios-slider-menu-widget-for-titanium-alloy
SYNC ADAPTERS
Alloy + Backbone.js
Data persistence abstraction
Adapters:
SQLite
REST
ACS
CouchDB
BUILTINS
Backbone.js
Underscore.js
Moment.js
Titanium-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 alloy@1.1.3
# straight fro...
DYNAMIC STYLING*
Modify and apply styles at runtime
New APIs
Alloy.createStyle()
Alloy.UI.create()
Alloy.addClass()
Alloy....
LISTVIEW MARKUP*
High performance lists
iOS & Android
Transition made easier with Alloy
Data binding support
*available in...
NATIVE MODULES
IN MARKUP*
<Module id="paint" module="ti.paint"
method="createPaintView" platform="ios,android"/>
*availabl...
DEVICE OPTIMIZATIONS
Device Queries
Compiler Conditionals
Conditional Configurations
ALLOY.JMK
pre/post processing
Modify, beautify, minify, etc...
Even or , if you're into that sort of
thing
coffeescript Ja...
OVERRIDES
NOTHING IS SACRED
...unless it breaks something
Alloy namespace functions
Backbone.js, Underscore.js, etc...
Eve...
CONTROLLER
EVENTING
Alloy controllers have Backbone eventing
Lightweight, yet powerful
Loose coupling
VIEW MODEL BINDING
dataCollection
dataTransform
dataFilter
<TableView id="todoTable" dataCollection="todo"
dataFilter="whe...
SOURCE MAPS
Maps generated code to source, and vice versa
Enables debugging, exceptions, and code processor
config.json to...
alloylove.com
COMMUNITY
All-Stars
Fokke Zandenberg ( )
David Bankier ( )
Aaron Saunders ( )
Jason Kneen ( )
Mads Moller ( )
Josh Jensen ...
THE FUTURE
DYNAMIC THEMES
→
LIGHTER, MORE
POWERFUL MODELING
Peel back the Alloy layer
Develop abstract model interface
Leverage Alloy's and framework ...
NATIVE FORMATS
iOS Nib
Android XML
Native formatting optimizations
PACKAGE
MANAGEMENT
meets
Iterative development independent of Alloy releases
Same conventions, same results
alloylove.com ...
RESOURCES
Official Alloy Documentation
Q&A
Alloy Google Group
Alloy source code
Alloy test app collection
FIND ME
@tonylukasavage
tlukasavage@appcelerator.com
...or drinking whiskey in the next few minutes
Alloy: Deep Dive, Below The Surface, and Other Nautical Metaphors
Upcoming SlideShare
Loading in …5
×

Alloy: Deep Dive, Below The Surface, and Other Nautical Metaphors

4,180 views

Published on

Discussion and demonstration of Alloy, Appcelerator Titanium's MVC framework. Topics included upcoming functionality in version 1.2.0, advanced Alloy usage, and the future of Alloy. Learn how to make bad ass cross-platform mobile applications with XML and Javascript.

Published in: Technology

Alloy: Deep Dive, Below The Surface, and Other Nautical Metaphors

  1. 1. ALLOYDEEP DIVE, BELOW THE SURFACE, AND OTHER NAUTICAL METAPHORS TiConf US June 28-29 2013 Tremont Hotel in Baltimore #ticonf
  2. 2. TONY LUKASAVAGE Alloy Lead Engineer @ Appcelerator @tonylukasavage tlukasavage@appcelerator.com
  3. 3. CRASH COURSE Alloy is an MVC framework for Appcelerator's Titanium SDK built with Node.js. Through a compilation process it aims to produce highly optimized, cross-platform Javascript code.
  4. 4. from on . CODESTRONG 2012 Breakout session - Alloy (MVC) Application Framework Overview Appcelerator Video Channel Vimeo
  5. 5. Models | Views | Controllers | Styles
  6. 6. 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();
  7. 7. 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>
  8. 8. 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 }
  9. 9. CONTROLLERS var 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(); }
  10. 10. MODELS exports.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; } }
  11. 11. WIDGETS http://www.danielsefton.com/2012/10/ios-slider-menu-widget-for-titanium-alloy
  12. 12. SYNC ADAPTERS Alloy + Backbone.js Data persistence abstraction Adapters: SQLite REST ACS CouchDB
  13. 13. BUILTINS Backbone.js Underscore.js Moment.js Titanium-specific libraries var moment = require('alloy/moment');
  14. 14. BEST PRACTICES
  15. 15. * Standarize coding practices * * Embedding Expertise * * CommonJS * * Parity Issues * * Optimizations *
  16. 16. FASTER DEVELOPMENT
  17. 17. HIGH QUALITY APPS
  18. 18. H TO THE IZZO
  19. 19. INSTALLING ALLOY # latest stable [sudo] npm install -g alloy # by version [sudo] npm install -g alloy@1.1.3 # straight from github [sudo] npm install -g git://github.com/appcelerator/alloy.git
  20. 20. DYNAMIC STYLING* Modify and apply styles at runtime New APIs Alloy.createStyle() Alloy.UI.create() Alloy.addClass() Alloy.removeClass() Alloy.resetClass() *available in Alloy 1.2.0
  21. 21. LISTVIEW MARKUP* High performance lists iOS & Android Transition made easier with Alloy Data binding support *available in Alloy 1.2.0
  22. 22. NATIVE MODULES IN MARKUP* <Module id="paint" module="ti.paint" method="createPaintView" platform="ios,android"/> *available in Alloy 1.2.0
  23. 23. DEVICE OPTIMIZATIONS Device Queries Compiler Conditionals Conditional Configurations
  24. 24. ALLOY.JMK pre/post processing Modify, beautify, minify, etc... Even or , if you're into that sort of thing coffeescript Jade
  25. 25. OVERRIDES NOTHING IS SACRED ...unless it breaks something Alloy namespace functions Backbone.js, Underscore.js, etc... Even the core runtime library (alloy.js)
  26. 26. CONTROLLER EVENTING Alloy controllers have Backbone eventing Lightweight, yet powerful Loose coupling
  27. 27. VIEW MODEL BINDING dataCollection dataTransform dataFilter <TableView id="todoTable" dataCollection="todo" dataFilter="whereFunction" dataTransform="transformFunction"> <Require src="row"/> </TableView>
  28. 28. SOURCE MAPS Maps generated code to source, and vice versa Enables debugging, exceptions, and code processor config.json toggling { "sourcemap": false }
  29. 29. alloylove.com
  30. 30. COMMUNITY All-Stars Fokke Zandenberg ( ) David Bankier ( ) Aaron Saunders ( ) Jason Kneen ( ) Mads Moller ( ) Josh Jensen ( ) Twitter at @fokkezb @davidbankier @aaronksaunders @jasonkneen @nappdev @joshj #tialloy Q&A "alloy" tag Alloy Google Group
  31. 31. THE FUTURE
  32. 32. DYNAMIC THEMES →
  33. 33. LIGHTER, MORE POWERFUL MODELING Peel back the Alloy layer Develop abstract model interface Leverage Alloy's and framework of choice's features
  34. 34. NATIVE FORMATS iOS Nib Android XML Native formatting optimizations
  35. 35. PACKAGE MANAGEMENT meets Iterative development independent of Alloy releases Same conventions, same results alloylove.com npm # Install a widget. Package manifest would determine that it's a widget tpm install someCoolAssWidget # Install a sync adapter. tmp install syncToMyToaster
  36. 36. RESOURCES Official Alloy Documentation Q&A Alloy Google Group Alloy source code Alloy test app collection
  37. 37. FIND ME @tonylukasavage tlukasavage@appcelerator.com ...or drinking whiskey in the next few minutes

×