Accelerated Native Mobile Development with the Ti gem

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