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.addEv...
CoffeeScriptbutton = Titanium.UI.createButton  title: I am a Button  height: 40  width: 200  top: 10button.addEventListene...
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 = Titaniu...
// jsvar buttonOne = Titanium.UI.createButton({  id: "buttonOne",  className: "button"});var buttonTwo = Titanium.UI.creat...
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: .....
#buttonOne  title: I am a Button  width: 200  height: 40  top: 10#buttonTwo  title: I am also a Button  image: ../images/c...
=button  height: 40  width: 200#buttonOne  +button  title: I am a Button  top: 10#buttonTwo  +button  title: I am also a B...
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...
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
Accelerated Native Mobile Development with the Ti gem
Accelerated Native Mobile Development with the Ti gem
Accelerated Native Mobile Development with the Ti gem
Accelerated Native Mobile Development with the Ti gem
Accelerated Native Mobile Development with the Ti gem
Accelerated Native Mobile Development with the Ti gem
Accelerated Native Mobile Development with the Ti gem
Accelerated Native Mobile Development with the Ti gem
Accelerated Native Mobile Development with the Ti gem
Accelerated Native Mobile Development with the Ti gem
Accelerated Native Mobile Development with the Ti gem
Accelerated Native Mobile Development with the Ti gem
Accelerated Native Mobile Development with the Ti gem
Accelerated Native Mobile Development with the Ti gem
Upcoming SlideShare
Loading in...5
×

Accelerated Native Mobile Development with the Ti gem

2,534

Published on

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

Published in: Technology, Business
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,534
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
17
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Accelerated Native Mobile Development with the Ti gem

  1. 1. Accelerated MOBILE APP DEVELOPMENT WITH Ti WYNNNETHERLAND
  2. 2. Doh! Sorry, will have to blind you with science.
  3. 3. Isn’t she Sassy, folks?GETTHEBOOK.
  4. 4. Save 40% and get early access! sass40Sadly, sass100 is not a valid code.
  5. 5. And you are?
  6. 6. So you wanna build a mobile app?
  7. 7. Native vs. Web
  8. 8. Why native?
  9. 9. Obj C Java
  10. 10. Titanium
  11. 11. SINGLE JAVASCRIPT API
  12. 12. COMPILES TO NATIVE CODE
  13. 13. OPEN SOURCE!http://github.com/appcelerator/titanium_mobile
  14. 14. Development options
  15. 15. After fleeing .NET for the joys of Ruby I’d rather not use your IDE.
  16. 16. Fortunately, there’s a CLI.
  17. 17. A quickDEMO
  18. 18. Fortunately, there’s a CLI.Unfortunately, it’s written in Python.
  19. 19. I’m a RubyistWhy should I care?
  20. 20. Youll still need a server API Rails, Sinatra, etc.
  21. 21. Embrace your inner polyglot.
  22. 22. COFFEESCRIPT
  23. 23. var foo = function () { foo = () ->} I’d rather write this.
  24. 24. 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!");});
  25. 25. CoffeeScriptbutton = Titanium.UI.createButton title: I am a Button height: 40 width: 200 top: 10button.addEventListener click, (e) -> alert "Oooh, that tickles!"
  26. 26. JavaScript Frameworks
  27. 27. Underscore.jshttps://github.com/documentcloud/underscore
  28. 28. STYLESHEETS
  29. 29. 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});
  30. 30. // 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;}
  31. 31. JSS work like CSS.
  32. 32. But I dont even like CSS.
  33. 33. Fortunately, theresSASS & COMPASS
  34. 34. #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;}
  35. 35. #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
  36. 36. =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
  37. 37. Oh yeah, and theres Ruby
  38. 38. CODE DEEP DIVE
  39. 39. Ti GEM
  40. 40. gem install ti
  41. 41. Generate.
  42. 42. ti new <name> <id> <platform>
  43. 43. ti new lsrc com.lonestarrubyconf.v iphone
  44. 44. ├── 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
  45. 45. ti generate <model/controller/view> <name>
  46. 46. Golf.Views.GamePlay.createScoreCardView = (options) -> view = Ti.UI.createView (options) view
  47. 47. ti scaffold <window/tabgroup/view> <domain> <name>
  48. 48. Compile.
  49. 49. ti compile <all/coffee/sass>
  50. 50. Build.
  51. 51. ti build <all/iphone/android/ipad/desktop/>
  52. 52. Ti GEM@revans @baldrailers @rupakg
  53. 53. Get involved!
  54. 54. Testing.
  55. 55. Jasmine
  56. 56. Jasminehttps://github.com/akahigeg/jasmine-titanium
  57. 57. XIB
  58. 58. xib2jshttps://github.com/daoki2/xib2js
  59. 59. js2coffeehttp://ricostacruz.com/js2coffee/
  60. 60. QUESTIONS?
  61. 61. @pengwynn
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×