accelerated native mobile development with the ti gem
DESCRIPTION
The Ti gem lets you build Titanium mobile apps better, using Ruby to stich together a polyglot approach using CoffeeScript, Compass, and Sass.TRANSCRIPT
![Page 1: Accelerated Native Mobile Development with the Ti gem](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c836dc4a7959aa1e8b45a0/html5/thumbnails/1.jpg)
MOBILE APP DEVELOPMENT WITH TiAccelerated
WYNNNETHERLAND
![Page 2: Accelerated Native Mobile Development with the Ti gem](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c836dc4a7959aa1e8b45a0/html5/thumbnails/2.jpg)
![Page 3: Accelerated Native Mobile Development with the Ti gem](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c836dc4a7959aa1e8b45a0/html5/thumbnails/3.jpg)
D'oh! Sorry, will have to blind you with science.
![Page 4: Accelerated Native Mobile Development with the Ti gem](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c836dc4a7959aa1e8b45a0/html5/thumbnails/4.jpg)
![Page 5: Accelerated Native Mobile Development with the Ti gem](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c836dc4a7959aa1e8b45a0/html5/thumbnails/5.jpg)
Isn’t she Sassy, folks?
GETTHEBOOK.
![Page 6: Accelerated Native Mobile Development with the Ti gem](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c836dc4a7959aa1e8b45a0/html5/thumbnails/6.jpg)
sass40Save 40% and get early access!
Sadly, sass100 is not a valid code.
![Page 7: Accelerated Native Mobile Development with the Ti gem](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c836dc4a7959aa1e8b45a0/html5/thumbnails/7.jpg)
And you are?
![Page 8: Accelerated Native Mobile Development with the Ti gem](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c836dc4a7959aa1e8b45a0/html5/thumbnails/8.jpg)
So you wanna build a mobile app?
![Page 9: Accelerated Native Mobile Development with the Ti gem](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c836dc4a7959aa1e8b45a0/html5/thumbnails/9.jpg)
![Page 10: Accelerated Native Mobile Development with the Ti gem](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c836dc4a7959aa1e8b45a0/html5/thumbnails/10.jpg)
Native vs. Web
![Page 11: Accelerated Native Mobile Development with the Ti gem](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c836dc4a7959aa1e8b45a0/html5/thumbnails/11.jpg)
Why native?
![Page 13: Accelerated Native Mobile Development with the Ti gem](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c836dc4a7959aa1e8b45a0/html5/thumbnails/13.jpg)
![Page 14: Accelerated Native Mobile Development with the Ti gem](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c836dc4a7959aa1e8b45a0/html5/thumbnails/14.jpg)
![Page 15: Accelerated Native Mobile Development with the Ti gem](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c836dc4a7959aa1e8b45a0/html5/thumbnails/15.jpg)
![Page 16: Accelerated Native Mobile Development with the Ti gem](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c836dc4a7959aa1e8b45a0/html5/thumbnails/16.jpg)
![Page 17: Accelerated Native Mobile Development with the Ti gem](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c836dc4a7959aa1e8b45a0/html5/thumbnails/17.jpg)
![Page 18: Accelerated Native Mobile Development with the Ti gem](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c836dc4a7959aa1e8b45a0/html5/thumbnails/18.jpg)
![Page 19: Accelerated Native Mobile Development with the Ti gem](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c836dc4a7959aa1e8b45a0/html5/thumbnails/19.jpg)
Obj C Java
![Page 20: Accelerated Native Mobile Development with the Ti gem](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c836dc4a7959aa1e8b45a0/html5/thumbnails/20.jpg)
Titanium
![Page 21: Accelerated Native Mobile Development with the Ti gem](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c836dc4a7959aa1e8b45a0/html5/thumbnails/21.jpg)
![Page 22: Accelerated Native Mobile Development with the Ti gem](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c836dc4a7959aa1e8b45a0/html5/thumbnails/22.jpg)
SINGLE JAVASCRIPT API
![Page 23: Accelerated Native Mobile Development with the Ti gem](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c836dc4a7959aa1e8b45a0/html5/thumbnails/23.jpg)
COMPILES TO NATIVE CODE
![Page 24: Accelerated Native Mobile Development with the Ti gem](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c836dc4a7959aa1e8b45a0/html5/thumbnails/24.jpg)
![Page 25: Accelerated Native Mobile Development with the Ti gem](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c836dc4a7959aa1e8b45a0/html5/thumbnails/25.jpg)
OPEN SOURCE!http://github.com/appcelerator/titanium_mobile
![Page 26: Accelerated Native Mobile Development with the Ti gem](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c836dc4a7959aa1e8b45a0/html5/thumbnails/26.jpg)
Development options
![Page 27: Accelerated Native Mobile Development with the Ti gem](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c836dc4a7959aa1e8b45a0/html5/thumbnails/27.jpg)
![Page 28: Accelerated Native Mobile Development with the Ti gem](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c836dc4a7959aa1e8b45a0/html5/thumbnails/28.jpg)
I’d rather not use your IDE.After fleeing .NET for the joys of Ruby
![Page 29: Accelerated Native Mobile Development with the Ti gem](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c836dc4a7959aa1e8b45a0/html5/thumbnails/29.jpg)
Fortunately, there’s a CLI.
![Page 30: Accelerated Native Mobile Development with the Ti gem](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c836dc4a7959aa1e8b45a0/html5/thumbnails/30.jpg)
DEMOA quick
![Page 31: Accelerated Native Mobile Development with the Ti gem](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c836dc4a7959aa1e8b45a0/html5/thumbnails/31.jpg)
Fortunately, there’s a CLI.Unfortunately, it’s written in Python.
![Page 32: Accelerated Native Mobile Development with the Ti gem](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c836dc4a7959aa1e8b45a0/html5/thumbnails/32.jpg)
Why should I care?I’m a Rubyist
![Page 33: Accelerated Native Mobile Development with the Ti gem](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c836dc4a7959aa1e8b45a0/html5/thumbnails/33.jpg)
You'll still need a server APIRails, Sinatra, etc.
![Page 34: Accelerated Native Mobile Development with the Ti gem](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c836dc4a7959aa1e8b45a0/html5/thumbnails/34.jpg)
Embrace your inner polyglot.
![Page 35: Accelerated Native Mobile Development with the Ti gem](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c836dc4a7959aa1e8b45a0/html5/thumbnails/35.jpg)
COFFEESCRIPT
![Page 36: Accelerated Native Mobile Development with the Ti gem](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c836dc4a7959aa1e8b45a0/html5/thumbnails/36.jpg)
var foo = function () {
}foo = () ->
I’d rather write this.
![Page 37: Accelerated Native Mobile Development with the Ti gem](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c836dc4a7959aa1e8b45a0/html5/thumbnails/37.jpg)
var button = Titanium.UI.createButton({ title: 'I am a Button', height: 40, width: 200, top: 10});
button.addEventListener('click', function(e) { alert("Oooh, that tickles!");});
JavaScript
![Page 38: Accelerated Native Mobile Development with the Ti gem](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c836dc4a7959aa1e8b45a0/html5/thumbnails/38.jpg)
button = Titanium.UI.createButton title: 'I am a Button' height: 40 width: 200 top: 10
button.addEventListener 'click', (e) -> alert "Oooh, that tickles!"
CoffeeScript
![Page 39: Accelerated Native Mobile Development with the Ti gem](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c836dc4a7959aa1e8b45a0/html5/thumbnails/39.jpg)
JavaScript Frameworks
![Page 40: Accelerated Native Mobile Development with the Ti gem](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c836dc4a7959aa1e8b45a0/html5/thumbnails/40.jpg)
Underscore.jshttps://github.com/documentcloud/underscore
![Page 41: Accelerated Native Mobile Development with the Ti gem](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c836dc4a7959aa1e8b45a0/html5/thumbnails/41.jpg)
STYLESHEETS
![Page 42: Accelerated Native Mobile Development with the Ti gem](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c836dc4a7959aa1e8b45a0/html5/thumbnails/42.jpg)
var buttonOne = Titanium.UI.createButton({ title:'I am a Button', height:40, width:200, top:10});
var buttonTwo = Titanium.UI.createButton({ title:'I am also a Button', image:'../images/chat.png', width:200, height:40, top:60});
![Page 43: Accelerated Native Mobile Development with the Ti gem](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c836dc4a7959aa1e8b45a0/html5/thumbnails/43.jpg)
// jsvar buttonOne = Titanium.UI.createButton({ id: "buttonOne", className: "button"});
var buttonTwo = Titanium.UI.createButton({ id: "buttonTwo", className: "button"});
// jss#buttonOne { title:'I am a Button'; width:200; height:40; top:10}#buttonTwo { title:'I am also a Button'; image:'../images/chat.png'; width:200; height:40; top:60}.button { height: 40; width: 200;}
![Page 44: Accelerated Native Mobile Development with the Ti gem](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c836dc4a7959aa1e8b45a0/html5/thumbnails/44.jpg)
JSS work like CSS.
![Page 45: Accelerated Native Mobile Development with the Ti gem](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c836dc4a7959aa1e8b45a0/html5/thumbnails/45.jpg)
But I don't even like CSS.
![Page 46: Accelerated Native Mobile Development with the Ti gem](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c836dc4a7959aa1e8b45a0/html5/thumbnails/46.jpg)
SASS & COMPASSFortunately, there's
![Page 47: Accelerated Native Mobile Development with the Ti gem](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c836dc4a7959aa1e8b45a0/html5/thumbnails/47.jpg)
#buttonOne { title: 'I am a Button'; width: 200; height: 40; top: 10}#buttonTwo { title: 'I am also a Button'; image: '../images/chat.png'; width: 200; height: 40; top: 60}.button { height: 40; width: 200;}
![Page 48: Accelerated Native Mobile Development with the Ti gem](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c836dc4a7959aa1e8b45a0/html5/thumbnails/48.jpg)
#buttonOne title: 'I am a Button' width: 200 height: 40 top: 10
#buttonTwo title: 'I am also a Button' image: '../images/chat.png' width: 200 height: 40 top: 60
.button height: 40 width: 200
![Page 49: Accelerated Native Mobile Development with the Ti gem](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c836dc4a7959aa1e8b45a0/html5/thumbnails/49.jpg)
=button height: 40 width: 200
#buttonOne +button title: 'I am a Button' top: 10
#buttonTwo +button title: 'I am also a Button' image: '../images/chat.png' top: 60
![Page 50: Accelerated Native Mobile Development with the Ti gem](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c836dc4a7959aa1e8b45a0/html5/thumbnails/50.jpg)
RubyOh yeah, and there's
![Page 51: Accelerated Native Mobile Development with the Ti gem](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c836dc4a7959aa1e8b45a0/html5/thumbnails/51.jpg)
CODE DEEP DIVE
![Page 52: Accelerated Native Mobile Development with the Ti gem](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c836dc4a7959aa1e8b45a0/html5/thumbnails/52.jpg)
Ti GEM
![Page 53: Accelerated Native Mobile Development with the Ti gem](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c836dc4a7959aa1e8b45a0/html5/thumbnails/53.jpg)
gem install ti
![Page 54: Accelerated Native Mobile Development with the Ti gem](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c836dc4a7959aa1e8b45a0/html5/thumbnails/54.jpg)
Generate.
![Page 55: Accelerated Native Mobile Development with the Ti gem](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c836dc4a7959aa1e8b45a0/html5/thumbnails/55.jpg)
ti new <name> <id> <platform>
![Page 56: Accelerated Native Mobile Development with the Ti gem](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c836dc4a7959aa1e8b45a0/html5/thumbnails/56.jpg)
ti new lsrc com.lonestarrubyconf.v iphone
![Page 57: Accelerated Native Mobile Development with the Ti gem](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c836dc4a7959aa1e8b45a0/html5/thumbnails/57.jpg)
├── Coffeefile├── Guardfile├── LICENSE├── Rakefile├── Readme.mkd├── Resources│ ├── app.js│ ├── app.jss│ ├── images│ │ ├── KS_nav_ui.png│ │ └── KS_nav_views.png│ ├── lsrc.js│ └── vendor├── app│ ├── app.coffee│ └── lsrc│ ├── api.coffee│ ├── app.coffee│ ├── helpers│ │ └── application.coffee│ ├── models│ ├── stylesheets│ │ ├── app.sass│ │ └── partials│ └── views├── build├── config│ └── config.rb├── docs├── spec│ ├── app_spec.coffee│ ├── helpers│ ├── models│ └── views
![Page 58: Accelerated Native Mobile Development with the Ti gem](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c836dc4a7959aa1e8b45a0/html5/thumbnails/58.jpg)
ti generate <model/controller/view> <name>
![Page 59: Accelerated Native Mobile Development with the Ti gem](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c836dc4a7959aa1e8b45a0/html5/thumbnails/59.jpg)
Golf.Views.GamePlay.createScoreCardView = (options) -> view = Ti.UI.createView (options) view
![Page 60: Accelerated Native Mobile Development with the Ti gem](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c836dc4a7959aa1e8b45a0/html5/thumbnails/60.jpg)
ti scaffold <window/tabgroup/view> <domain> <name>
![Page 61: Accelerated Native Mobile Development with the Ti gem](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c836dc4a7959aa1e8b45a0/html5/thumbnails/61.jpg)
Compile.
![Page 62: Accelerated Native Mobile Development with the Ti gem](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c836dc4a7959aa1e8b45a0/html5/thumbnails/62.jpg)
ti compile <all/coffee/sass>
![Page 63: Accelerated Native Mobile Development with the Ti gem](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c836dc4a7959aa1e8b45a0/html5/thumbnails/63.jpg)
Build.
![Page 64: Accelerated Native Mobile Development with the Ti gem](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c836dc4a7959aa1e8b45a0/html5/thumbnails/64.jpg)
ti build <all/iphone/android/ipad/desktop/>
![Page 65: Accelerated Native Mobile Development with the Ti gem](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c836dc4a7959aa1e8b45a0/html5/thumbnails/65.jpg)
Ti GEM
@revans @baldrailers
@rupakg
![Page 66: Accelerated Native Mobile Development with the Ti gem](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c836dc4a7959aa1e8b45a0/html5/thumbnails/66.jpg)
Get involved!
![Page 67: Accelerated Native Mobile Development with the Ti gem](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c836dc4a7959aa1e8b45a0/html5/thumbnails/67.jpg)
Testing.
![Page 68: Accelerated Native Mobile Development with the Ti gem](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c836dc4a7959aa1e8b45a0/html5/thumbnails/68.jpg)
Jasmine
![Page 69: Accelerated Native Mobile Development with the Ti gem](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c836dc4a7959aa1e8b45a0/html5/thumbnails/69.jpg)
Jasminehttps://github.com/akahigeg/jasmine-titanium
![Page 70: Accelerated Native Mobile Development with the Ti gem](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c836dc4a7959aa1e8b45a0/html5/thumbnails/70.jpg)
XIB
![Page 71: Accelerated Native Mobile Development with the Ti gem](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c836dc4a7959aa1e8b45a0/html5/thumbnails/71.jpg)
xib2jshttps://github.com/daoki2/xib2js
![Page 72: Accelerated Native Mobile Development with the Ti gem](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c836dc4a7959aa1e8b45a0/html5/thumbnails/72.jpg)
js2coffeehttp://ricostacruz.com/js2coffee/
![Page 73: Accelerated Native Mobile Development with the Ti gem](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c836dc4a7959aa1e8b45a0/html5/thumbnails/73.jpg)
QUESTIONS?
![Page 75: Accelerated Native Mobile Development with the Ti gem](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c836dc4a7959aa1e8b45a0/html5/thumbnails/75.jpg)
@pengwynn