Accelerated Native Mobile Development with the Ti gem

Accelerated MOBILE APP DEVELOPMENT WITH Ti WYNNNETHERLAND

Doh! Sorry, will have to blind you with science.

Isn’t she Sassy, folks?GETTHEBOOK.

Save 40% and get early access! sass40Sadly, 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

After fleeing .NET for the joys of Ruby I’d rather not use your IDE.

Fortunately, there’s a CLI.

A quickDEMO

Fortunately, there’s a CLI.Unfortunately, it’s written in Python.

I’m a RubyistWhy should I care?

Youll still need a server API Rails, Sinatra, etc.

Embrace your inner polyglot.

COFFEESCRIPT

var foo = function () { foo = () ->} I’d rather write this.

JavaScriptvar button = Titanium.UI.createButton({ title: I am a Button, height: 40, width: 200, top: 10});button.addEventListener(click, function(e) { alert("Oooh, that tickles!");});

CoffeeScriptbutton = Titanium.UI.createButton title: I am a Button height: 40 width: 200 top: 10button.addEventListener click, (e) -> alert "Oooh, that tickles!"

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 dont even like CSS.

Fortunately, theresSASS & COMPASS

#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

Oh yeah, and theres Ruby

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

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

xib2jshttps://github.com/daoki2/xib2js

js2coffeehttp://ricostacruz.com/js2coffee/

QUESTIONS?

@pengwynn

http://speakerrate.com	74
http://lanyrd.com	49
https://twitter.com	3
http://twitter.com	2
http://us-w1.rockmelt.com	1
https://si0.twimg.com	1
https://abs.twimg.com	1

Accelerated Native Mobile Development with the Ti gem

by Wynn Netherland

Accessibility

Categories

Upload Details

Usage Rights

7 Embeds 131

Statistics

Accelerated Native Mobile Development with the Ti gem Presentation Transcript