Ruby Ireland - Titanium

Overview of Titanium for Ruby Ireland

Transcript

1. Appcelerator Titanium @simonrand Ruby Ireland June 18th 2013
2. Me Principal @iorum Web & mobile developers ❤ Ruby & JavaScript I’m a designer & developer @simonrand / iorum.ie
3. @simonrand / iorum.ie Titanium Allows you to write mobile apps in JavaScript, for iOS, Android, Blackberry, Tizen & mobile web Windows Phone coming soon
4. @simonrand / iorum.ie Why We Use It Originally used it for prototyping Found it has value I’m not a total Titanium advocate
5. @simonrand / iorum.ie
6. @simonrand / iorum.ie
7. @simonrand / iorum.ie
8. @simonrand / iorum.ie
9. @simonrand / iorum.ie What Is Titanium? Titanium SDK provides a native bridge/proxy to interpret your JS code, evaluated at runtime Compiles to bytecode so it lets you build native apps, using native APIs Full toolchain (nodejs based CLI or Ti Studio) Over 55,000 Titanium apps available in app stores
10. @simonrand / iorum.ie Licensing Open Source - on Github Free to use Commercial cloud service and support Community (modules/tools)
11. @simonrand / iorum.ie Objective-C (iOS) Java (Android) .NET (Windows Phone) C++ (Blackberry) Rubymotion Titanium (JavaScript) PhoneGap/Mobile Web (HTML/CSS/JavaScript) Harder Easier Perception of difficulty for a web developer (totally unverified) Note: I have omitted a large amount of possible alternatives
12. @simonrand / iorum.ie Objective-C (iOS) Java (Android) .NET (Windows Phone) C++ (Blackberry) Rubymotion Titanium (JavaScript) PhoneGap/Mobile Web (HTML/CSS/JavaScript) Harder Easier Perception of difficulty for a web developer (totally unverified) Note: I have omitted a large amount of possible alternatives Native Cross Platform
13. @simonrand / iorum.ie Building Titanium Apps JavaScript (CoffeeScript) Alloy Framework (Backbone based but there are other approaches)
14. @simonrand / iorum.ie Example Two Tab App
15. @simonrand / iorum.ie Model exports.definition = { config: { "URL": "http://offset.app.s3-website-eu-west-1.amazonaws.com/data/speakers.json", "adapter": { "type": "restapi", // defines the Backbone sync method, can be sql, properties, etc. "collection_name": "speaker" } }, extendModel: function(Model) { _.extend(Model.prototype, {}); return Model; }, extendCollection: function(Collection) { _.extend(Collection.prototype, {}); return Collection; } }
16. @simonrand / iorum.ie Main Window <!-- views/index.xml --> <Alloy> <TabGroup> <Tab title="Tab 1" icon="KS_nav_ui.png"> <Require src="speakers/index"/> <!-- pulls in external file --> </Tab> <Tab title="Tab 2" icon="KS_nav_views.png"> <Window title="Tab 2"> <!-- inline window definition --> <Label>I am Window 2</Label> </Window> </Tab> </TabGroup> </Alloy> // controllers/index.js $.index.open();
17. @simonrand / iorum.ie Speaker List Window <!-- views/speakers/index.xml --> <Alloy> <Collection src="speaker"/> <!-- makes speaker collection available to the view --> <Window title="Tab 1"> <TableView id="tableview" dataCollection="speaker"> <Require src="speakers/row"/> </TableView> </Window> </Alloy> <!-- views/speakers/row.xml --> <Alloy> <TableViewRow title="{name}"> </Alloy> // controllers/speakers/index.js Alloy.Collections.speaker.fetch() $.tableview.addEventListener('click', function(row) { alert(row.rowData.title); });
18. @simonrand / iorum.ie Run
19. @simonrand / iorum.ie Our experiences.. ..have been good Shared core codebases Shared components (HTML based, can do native though)
20. @simonrand / iorum.ie Cross Platform-ness Climote 99% core code the same ~ 75% UI code iOS in 3 months Android port in 3 weeks
21. @simonrand / iorum.ie My Thoughts Cross platform capabilities has huge advantages Great for prototyping Open Source (we’ve forked) It’s native Don’t write it off, even on one platform
22. Thanks Questions? twitter: @simonrand web: iorum.ie