Your SlideShare is downloading. ×
Alloy: Deep Dive, Below The Surface, and Other Nautical Metaphors
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

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

3,234
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 …

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

0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,234
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
106
Comments
0
Likes
5
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. ALLOYDEEP DIVE, BELOW THE SURFACE, AND OTHER NAUTICAL METAPHORS TiConf US June 28-29 2013 Tremont Hotel in Baltimore #ticonf
  • 2. TONY LUKASAVAGE Alloy Lead Engineer @ Appcelerator @tonylukasavage tlukasavage@appcelerator.com
  • 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. from on . CODESTRONG 2012 Breakout session - Alloy (MVC) Application Framework Overview Appcelerator Video Channel Vimeo
  • 5. Models | Views | Controllers | Styles
  • 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. 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. 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. 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. 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. WIDGETS http://www.danielsefton.com/2012/10/ios-slider-menu-widget-for-titanium-alloy
  • 12. SYNC ADAPTERS Alloy + Backbone.js Data persistence abstraction Adapters: SQLite REST ACS CouchDB
  • 13. BUILTINS Backbone.js Underscore.js Moment.js Titanium-specific libraries var moment = require('alloy/moment');
  • 14. BEST PRACTICES
  • 15. * Standarize coding practices * * Embedding Expertise * * CommonJS * * Parity Issues * * Optimizations *
  • 16. FASTER DEVELOPMENT
  • 17. HIGH QUALITY APPS
  • 18. H TO THE IZZO
  • 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. 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. LISTVIEW MARKUP* High performance lists iOS & Android Transition made easier with Alloy Data binding support *available in Alloy 1.2.0
  • 22. NATIVE MODULES IN MARKUP* <Module id="paint" module="ti.paint" method="createPaintView" platform="ios,android"/> *available in Alloy 1.2.0
  • 23. DEVICE OPTIMIZATIONS Device Queries Compiler Conditionals Conditional Configurations
  • 24. ALLOY.JMK pre/post processing Modify, beautify, minify, etc... Even or , if you're into that sort of thing coffeescript Jade
  • 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. CONTROLLER EVENTING Alloy controllers have Backbone eventing Lightweight, yet powerful Loose coupling
  • 27. VIEW MODEL BINDING dataCollection dataTransform dataFilter <TableView id="todoTable" dataCollection="todo" dataFilter="whereFunction" dataTransform="transformFunction"> <Require src="row"/> </TableView>
  • 28. SOURCE MAPS Maps generated code to source, and vice versa Enables debugging, exceptions, and code processor config.json toggling { "sourcemap": false }
  • 29. alloylove.com
  • 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. THE FUTURE
  • 32. DYNAMIC THEMES →
  • 33. LIGHTER, MORE POWERFUL MODELING Peel back the Alloy layer Develop abstract model interface Leverage Alloy's and framework of choice's features
  • 34. NATIVE FORMATS iOS Nib Android XML Native formatting optimizations
  • 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. RESOURCES Official Alloy Documentation Q&A Alloy Google Group Alloy source code Alloy test app collection
  • 37. FIND ME @tonylukasavage tlukasavage@appcelerator.com ...or drinking whiskey in the next few minutes