Accelerated Native Mobile Development with the Ti gem

Transcript

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