Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Scaling Titanium Mobile (in Japanese)

Scaling Titanium Mobile (in Japanese)

at Android Bazaar and Conference 2012 Spring.
http://about.qnyp.com/

Junya Ogura

March 24, 2012
Tweet

Transcript

  1. Scaling Titanium Mobile at Android Bazaar and Conference 2012 Spring

    http://bit.ly/scale-ti Saturday, March 24, 12
  2. from JavaScript to iOS to Android It’s OpenSource! Community License

    => Free Indie License => $49/month Saturday, March 24, 12
  3. iOS 4.0.X - Android 2.2 (API 7) - Titanium Compatibility

    Matrix - Documentation & Guides - Appcelerator Wiki https://wiki.appcelerator.org/display/guides/Titanium+Compatibility+Matrix ࠷৽൛ͷλʔήοτ؀ڥ Saturday, March 24, 12
  4. var win = Ti.UI.createWindow({ title: 'github/appcelerator' }); var tableView =

    Ti.UI.createTableView(); win.add(tableView); var tabGroup = Ti.UI.createTabGroup(); var tab = Ti.UI.createTab({ icon: 'KS_nav_ui.png', title: 'Repos', window: win }); tabGroup.addTab(tab); tabGroup.setActiveTab(tab); tabGroup.open(); var xhr = Ti.Network.createHTTPClient(); var url = 'https://api.github.com/orgs/appcelerator/repos?type=public'; xhr.open('GET', url); xhr.onload = function() { var res = JSON.parse(this.responseText); tableView.setData(res.map(function(repo) { return Ti.UI.createTableViewRow({ title: repo.name }); }));; }; xhr.send(); Saturday, March 24, 12
  5. var win = Ti.UI.createWindow({ title: 'github/appcelerator' }); var tableView =

    Ti.UI.createTableView(); win.add(tableView); var tabGroup = Ti.UI.createTabGroup(); var tab = Ti.UI.createTab({ icon: 'KS_nav_ui.png', title: 'Repos', window: win }); tabGroup.addTab(tab); tabGroup.setActiveTab(tab); tabGroup.open(); var xhr = Ti.Network.createHTTPClient(); var url = 'https://api.github.com/orgs/appcelerator/repos?type=public'; xhr.open('GET', url); xhr.onload = function() { var res = JSON.parse(this.responseText); tableView.setData(res.map(function(repo) { return Ti.UI.createTableViewRow({ title: repo.name }); }));; }; xhr.send(); ߦ Saturday, March 24, 12
  6. var win = Ti.UI.createWindow({ title: 'github/appcelerator' }); var tableView =

    Ti.UI.createTableView(); win.add(tableView); var tabGroup = Ti.UI.createTabGroup(); var tab = Ti.UI.createTab({ icon: 'KS_nav_ui.png', title: 'Repos', window: win }); tabGroup.addTab(tab); tabGroup.setActiveTab(tab); tabGroup.open(); var xhr = Ti.Network.createHTTPClient(); var url = 'https://api.github.com/orgs/appcelerator/repos?type=public'; xhr.open('GET', url); xhr.onload = function() { var res = JSON.parse(this.responseText); tableView.setData(res.map(function(repo) { return Ti.UI.createTableViewRow({ title: repo.name }); }));; }; xhr.send(); ߦ Saturday, March 24, 12
  7. var win = Ti.UI.createWindow({ title: 'github/appcelerator' }); var tableView =

    Ti.UI.createTableView(); win.add(tableView); var tabGroup = Ti.UI.createTabGroup(); var tab = Ti.UI.createTab({ icon: 'KS_nav_ui.png', title: 'Repos', window: win }); tabGroup.addTab(tab); tabGroup.setActiveTab(tab); tabGroup.open(); var xhr = Ti.Network.createHTTPClient(); var url = 'https://api.github.com/orgs/appcelerator/repos?type=public'; xhr.open('GET', url); xhr.onload = function() { var res = JSON.parse(this.responseText); tableView.setData(res.map(function(repo) { return Ti.UI.createTableViewRow({ title: repo.name }); }));; }; xhr.send(); ߦ Saturday, March 24, 12
  8. MogSnap Zaim GetGlue Welcome to NIFTY-Serve Built with Appcelerator Titanium

    / http://www.builtwithtitanium.com/ Saturday, March 24, 12
  9. // app.js var win = Ti.UI.createWindow({ backgroundColor: '#fff' }); var

    button = Ti.UI.createButton(); button.addEventListener(‘click’, function(e) { alert(‘Button Clicked’); }); win.add(button); win.open(); ؆୯ͳΞϓϦɻ Saturday, March 24, 12
  10. // app.js var win = Ti.UI.createWindow({ backgroundColor: '#fff' }); var

    button = Ti.UI.createButton(); button.addEventListener(‘click’, function(e) { alert(‘Button Clicked’); }); win.add(button); win.open(); ΢Οϯυ΢ͷੜ੒ɻ Saturday, March 24, 12
  11. // app.js var win = Ti.UI.createWindow({ backgroundColor: '#fff' }); var

    button = Ti.UI.createButton(); button.addEventListener(‘click’, function(e) { alert(‘Button Clicked’); }); win.add(button); win.open(); Ϙλϯͷੜ੒ͱΫϦοΫ࣌ͷॲཧઃఆɻ Saturday, March 24, 12
  12. // app.js var win = Ti.UI.createWindow({ backgroundColor: '#fff' }); var

    button = Ti.UI.createButton(); button.addEventListener(‘click’, function(e) { alert(‘Button Clicked’); }); win.add(button); win.open(); ΢Οϯυ΢ͷΦʔϓϯɻ Saturday, March 24, 12
  13. // app.js var win = Ti.UI.createWindow({ backgroundColor: '#fff', url: 'window.js'

    }); win.open(); // window.js var win = Ti.UI.currentWindow; var button = Ti.UI.createButton(); button.addEventListener(‘click’, function(e) { alert(‘Button Clicked’); }); win.add(button); Saturday, March 24, 12
  14. // app.js var name = 'Foo'; var win = Ti.UI.createWindow({

    backgroundColor: '#fff', name: name }); Ti.include('window.js'); win.open(); // window.js var label = Ti.UI.createLabel({text: win.name}); label.addEventListener('click', function(e) { alert(name + ' Clicked'); }); win.add(label); Saturday, March 24, 12
  15. var name = 'Foo'; var win = Ti.UI.createWindow({ backgroundColor: '#fff',

    name: name }); var label = Ti.UI.createLabel({text: win.name}); label.addEventListener('click', function(e) { alert(name + ' Clicked'); }); win.add(label); win.open(); ࣮ࡍʹ͸ͭͷϑΝΠϧʹ݁߹͞Ε࣮ͯߦ͞ΕΔɻ Saturday, March 24, 12
  16. // app.js var name = 'Foo'; var window = require('window');

    var win = window.myWindow(name); win.open(); alert('label = ' + label); // label͸ݟ͑ͳ͍ // window.js exports.myWindow = function(name) { var win = Ti.UI.createWindow({ backgroundColor: '#fff' }); var label = Ti.UI.createLabel({text: name}); label.addEventListener('click', function(e) { alert(name + ' Clicked'); }); win.add(label); return win; }; Saturday, March 24, 12
  17. function FirstView() { var self = Ti.UI.createView(); var label =

    Ti.UI.createLabel({ color:'#000000', text:String.format(L('welcome'),'Titanium'), height:'auto', width:'auto' }); self.add(label); label.addEventListener('click', function(e) { alert(e.source.text); }); return self; } module.exports = FirstView; ui/FirstView.js Saturday, March 24, 12
  18. function ApplicationWindow() { var FirstView = require('ui/FirstView'); var self =

    Ti.UI.createWindow({ backgroundColor:'#ffffff', navBarHidden:true, exitOnClose:true }); var firstView = new FirstView(); self.add(firstView); return self; } module.exports = ApplicationWindow; ui/ApplicationWindow.js Saturday, March 24, 12
  19. var Window; if (globals.osname === 'ipad') { Window = require('ui/ipad/iPadWindow');

    } else if (globals.osname === 'iphone') { Window = require('ui/iphone/iPhoneWindow'); } else { Window = require('ui/android/AndroidWindow'); } new Window().open(); σόΠεʹԠͨ͡6*ͷಡΈࠐΈɻ Saturday, March 24, 12
  20. +40/Λ6*༻ͷσʔλʹ੔ܗɾม׵ɻ var items = JSON.parse(responseText); var itemNames = _(items).chain() .uniq(false,

    function(item) { return item.id; }) .select(function(item) { return item.available; }) .sortBy(function(item) { return item.name; }) .name(); Saturday, March 24, 12
  21. +40/Λ6*༻ͷσʔλʹ੔ܗɾม׵ɻ var items = JSON.parse(responseText); var itemNames = _(items).chain() .uniq(false,

    function(item) { return item.id; }) .select(function(item) { return item.available; }) .sortBy(function(item) { return item.name; }) .name(); Saturday, March 24, 12
  22. +40/Λ6*༻ͷσʔλʹ੔ܗɾม׵ɻ var items = JSON.parse(responseText); var itemNames = _(items).chain() .uniq(false,

    function(item) { return item.id; }) .select(function(item) { return item.available; }) .sortBy(function(item) { return item.name; }) .name(); Saturday, March 24, 12
  23. +40/Λ6*༻ͷσʔλʹ੔ܗɾม׵ɻ var items = JSON.parse(responseText); var itemNames = _(items).chain() .uniq(false,

    function(item) { return item.id; }) .select(function(item) { return item.available; }) .sortBy(function(item) { return item.name; }) .name(); Saturday, March 24, 12
  24. +40/Λ6*༻ͷσʔλʹ੔ܗɾม׵ɻ var items = JSON.parse(responseText); var itemNames = _(items).chain() .uniq(false,

    function(item) { return item.id; }) .select(function(item) { return item.available; }) .sortBy(function(item) { return item.name; }) .name(); Saturday, March 24, 12
  25. +40/Λ6*༻ͷσʔλʹ੔ܗɾม׵ɻ var items = JSON.parse(responseText); var itemNames = _(items).chain() .uniq(false,

    function(item) { return item.id; }) .select(function(item) { return item.available; }) .sortBy(function(item) { return item.name; }) .name(); Saturday, March 24, 12
  26. ύϥϝʔλهड़͕؆ܿʹɻ // JavaScript var win = Ti.UI.createWindow({ title: 'github' });

    var tab = Ti.UI.createTab({ icon: 'KS_nav_ui.png', title: 'Repos', window: win }); # CoffeeScript win = Ti.UI.createWindow(title: 'github') tab = Ti.UI.createTab icon: 'KS_nav_ui.png' title: 'Repos' window: win Saturday, March 24, 12
  27. ίʔϧόοΫهड़͕؆ܿʹɻ // JavaScript button.addEventListener('click', function(e) { Ti.API.debug('button clicked'); }); #

    CoffeeScript button.addEventListener 'click', (e) -> Ti.API.debug('button clicked') Saturday, March 24, 12
  28. ϧʔϓ͕γϯϓϧʹɻ // JavaScript var rows = []; for (var i

    = 0; i < items.length; i++) { var item = items[i]; if (item.isPublic()) rows.push(createTableRow(items[i])); } var tableView = Ti.UI.createTableView({ data: rows }); # CoffeeScript rows = [] for item in items when item.public() rows.push(createTableRow(item)) tableView = Ti.UI.createTableView(data: rows) Saturday, March 24, 12
  29. ޙஔJGͰϓϥοτϑΥʔϜຖͷ ৔߹෼͚Λγϯϓϧʹɻ # CoffeeScript Ti.UI.iPhone.appBadge = 10 if Ti.Platform.osname is

    “iphone” # JavaScript if (Ti.Platform.osname === “iphone”) { Ti.UI.iPhone.appBadge = 10; } Saturday, March 24, 12
  30. Ϋϥεϕʔεʹઃܭ͠΍͍͢ɻ # CustomView.coffee class CustomView view: null constructor: -> @initView()

    @initEvents() initView: -> @view = Ti.UI.createView() initEvents: -> @view.addEventListener 'click', (e) -> alert('clicked') module.exports = CustomView # app.coffee CustomView = require('CustomView') view = new CustomView() Saturday, March 24, 12
  31. Auto Compile with Guard $ brew install nodejs $ curl

    http://npmjs.org/install.sh | sh $ npm install -g coffee-script $ gem install guard-coffeescript $ gem install rb-fsevent # Guardfile guard 'coffeescript', :input => 'coffee', :output => 'Resources', :bare => true $ guard Saturday, March 24, 12
  32. J04ͱ"OESPJEͰ৔߹෼͚͢Δίʔυɻ if (Ti.Platform.osname === "android") { var picker1 = Ti.UI.createPicker({type:Ti.UI.PICKER_TYPE_DATE});

    var picker2 = Ti.UI.createPicker({type:Ti.UI.PICKER_TYPE_TIME}); picker1.addEventListener('change', callback); picker2.addEventListener('change', callback); win.add(picker); win.add(picker2); } else { var picker = Ti.UI.createPicker({ type:Ti.UI.PICKER_TYPE_DATE_AND_TIME }); picker.addEventListener('change', callback); win.add(picker); } Saturday, March 24, 12
  33. ෼ذॲཧΛϥοϓͯ͠Ӆณɻ var calendarWindow = function(callback) { var win = Ti.UI.createWindow();

    if (Ti.Platform.osname === "android") { var picker1 = Ti.UI.createPicker({type:Ti.UI.PICKER_TYPE_DATE}); var picker2 = Ti.UI.createPicker({type:Ti.UI.PICKER_TYPE_TIME}); picker1.addEventListener('change', callback); picker2.addEventListener('change', callback); win.add(picker1); win.add(picker2); } else { var picker = Ti.UI.createPicker({ type:Ti.UI.PICKER_TYPE_DATE_AND_TIME }); picker.addEventListener('change', callback); win.add(picker); } return win; }; Saturday, March 24, 12
  34. ϞδϡʔϧԽͯ͠࠶ར༻ɻ // utils.js exports.createCalendarWindow = function(callback) { ... }; //

    app.js var utils = require('/utils'); var win = utils.createCalendarWindow(function(e) { ... }); Saturday, March 24, 12
  35. // ϝϞ࡞੒ addButton.addEventListener('click', function(e) { Ti.App.fireEvent('memoWillCreate', { id: memo.id, title:

    memo.id, body: memo.body }); }); ϝϞ࡞੒ͷࡍʹ͸ɺσʔλอଘ΍ϝϞҰཡͷߋ৽ʹ͸ؔ༩͠ͳ͍ɻ Saturday, March 24, 12
  36. // dataManager Ti.App.addEventListener('memoWillCreate', function(memo) { if (insertMemo(memo)) { Ti.App.fireEvent('memoDidCreated', memo);

    } else { // Τϥʔॲཧ } }); σʔλอଘࣦഊ࣌ʹ͸࣍ͷΠϕϯτΛൃੜͤ͞ͳ͍ɻ Saturday, March 24, 12
  37. ஫ҙ ΞϓϦέʔγϣϯϨϕϧͷΠϕϯτϋϯυϥ಺ Ͱੜ੒ͨ͠ΦϒδΣΫτ͸ɺϋϯυϥΛ໌ࣔత ʹ࡟আ͢Δ·ͰϝϞϦʹ࢒Δɻ Managing Memory and Finding Leaks -

    Documentation & Guides https://wiki.appcelerator.org/display/guides/Managing+Memory+and+Finding+Leaks Saturday, March 24, 12
  38. var doSomething = function() { var foo = new Foo();

    // ϋϯυϥΛ࡟আ͢Δ·Ͱ࢒Γଓ͚Δ }; Ti.App.addEventListener(‘doSomething’, doSomething); // ෆཁʹͳͬͨλΠϛϯάͰϋϯυϥΛ࡟আ͢Δ Ti.App.removeEventListener(‘doSomething’, doSomething); Saturday, March 24, 12
  39. var win = Ti.UI.createWindow(); win.addEventListener('userLoggedIn', function(user) { updateAvatar(user.avatar); }); win.open();

    var button = Ti.UI.createButton(); button.addEventListener(‘click’, function(e) { win.fireEvent(‘userLoggedIn’, { avatar: ‘...’ }); }); άϩʔόϧͳείʔϓ͕ෆཁͳΒ͹ɺ ϏϡʔΦϒδΣΫτʹΧελϜΠϕϯτΛઃఆ͢Δ͜ͱ΋Մೳɻ Saturday, March 24, 12