MOBILE APP DEVELOPMENT WITH TiAccelerated
WYNNNETHERLAND
D'oh! Sorry, will have to blind you with science.
Isn’t she Sassy, folks?
GETTHEBOOK.
sass40Save 40% and get early access!
Sadly, sass100 is not a valid code.
And you are?
So you wanna build a mobile app?
Native vs. Web
Why native?
Obj C Java
Titanium
SINGLE JAVASCRIPT API
COMPILES TO NATIVE CODE
OPEN SOURCE!http://github.com/appcelerator/titanium_mobile
Development options
I’d rather not use your IDE.After fleeing .NET for the joys of Ruby
Fortunately, there’s a CLI.
DEMOA quick
Fortunately, there’s a CLI.Unfortunately, it’s written in Python.
Why should I care?I’m a Rubyist
You'll still need a server APIRails, Sinatra, etc.
Embrace your inner polyglot.
COFFEESCRIPT
var foo = function () {
}foo = () ->
I’d rather write this.
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
button = Titanium.UI.createButton title: 'I am a Button' height: 40 width: 200 top: 10
button.addEventListener 'click', (e) -> alert "Oooh, that tickles!"
CoffeeScript
JavaScript Frameworks
Underscore.jshttps://github.com/documentcloud/underscore
STYLESHEETS
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});
// 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;}
JSS work like CSS.
But I don't even like CSS.
SASS & COMPASSFortunately, there's
#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;}
#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
=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
RubyOh yeah, and there's
CODE DEEP DIVE
Ti GEM
gem install ti
Generate.
ti new <name> <id> <platform>
ti new lsrc com.lonestarrubyconf.v iphone
├── 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
ti generate <model/controller/view> <name>
Golf.Views.GamePlay.createScoreCardView = (options) -> view = Ti.UI.createView (options) view
ti scaffold <window/tabgroup/view> <domain> <name>
Compile.
ti compile <all/coffee/sass>
Build.
ti build <all/iphone/android/ipad/desktop/>
Ti GEM
@revans @baldrailers
@rupakg
Get involved!
Testing.
Jasmine
Jasminehttps://github.com/akahigeg/jasmine-titanium
XIB
xib2jshttps://github.com/daoki2/xib2js
js2coffeehttp://ricostacruz.com/js2coffee/
QUESTIONS?
@pengwynn