Your SlideShare is downloading. ×
  • Like
Accelerated Native Mobile Development with the Ti gem
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Accelerated Native Mobile Development with the Ti gem

  • 2,439 views
Published

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.

Published in Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,439
On SlideShare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
17
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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