Accelerated Native Mobile Development with the Ti gem

2,794 views
2,740 views

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,794
On SlideShare
0
From Embeds
0
Number of Embeds
141
Actions
Shares
0
Downloads
18
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

×