Accelerated Native Mobile Development with the Ti gem
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Accelerated Native Mobile Development with the Ti gem

on

  • 2,737 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,737
Views on SlideShare
2,601
Embed Views
136

Actions

Likes
2
Downloads
16
Comments
0

7 Embeds 136

http://speakerrate.com 75
http://lanyrd.com 53
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 Presentation 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