Your SlideShare is downloading. ×
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
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
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
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
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
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
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Accelerated Native Mobile Development with the Ti gem

2,484

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.

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,484
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
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

×