• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Accelerated Native Mobile Development with the Ti gem
 

Accelerated Native Mobile Development with the Ti gem

on

  • 2,665 views

The Ti gem lets you build Titanium mobile apps better, using Ruby to stich together a polyglot approach using CoffeeScript, Compass, and Sass.

The Ti gem lets you build Titanium mobile apps better, using Ruby to stich together a polyglot approach using CoffeeScript, Compass, and Sass.

Statistics

Views

Total Views
2,665
Views on SlideShare
2,530
Embed Views
135

Actions

Likes
2
Downloads
16
Comments
0

7 Embeds 135

http://speakerrate.com 75
http://lanyrd.com 52
https://twitter.com 3
http://twitter.com 2
http://us-w1.rockmelt.com 1
https://si0.twimg.com 1
https://abs.twimg.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Accelerated Native Mobile Development with the Ti gem Accelerated Native Mobile Development with the Ti gem Presentation Transcript

    • 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
    • XIB
    • xib2jshttps://github.com/daoki2/xib2js
    • js2coffeehttp://ricostacruz.com/js2coffee/
    • QUESTIONS?
    • @pengwynn