scalin titanium mobile

ScalingTitaniumMobile

at Android Bazaar and Conference 2012 Spring

http://bit.ly/scale-ti

Saturday, March 24, 12





おぐらじゅんや

@junya


合同会社キュニップabout.qnyp.com


Scaling


Scalingチーム開発

機能の追加・削除

対応デバイスの追加


Scalingチーム開発


対応デバイスの追加 }Saturday, March 24, 12

Scalingを容易にする

コードの書き方

チーム開発



What’s Titanium Mobile

最近のTitanium Mobile

コードの分割

underscore.js

CoffeeScript

プラットフォーム依存コードの隠蔽

カスタムイベント

Agenda


What’s

Titanium Mobile?


Titanium Mobileタイタニウム・モバイル


by Appcelerator, Inc.


from JavaScript


from JavaScript

to iOS


from JavaScript

to iOS

to Android


from JavaScript

to iOS

to Android

It’s OpenSource!


from JavaScript

to iOS

to Android

It’s OpenSource!

Community License => Free


from JavaScript

to iOS

to Android

It’s OpenSource!

Community License => Free

Indie License => $49/month


開発環境

Mac OS XWindowsUbuntu Linux


iOS 4.0.X -Android 2.2 (API 7) -

Titanium Compatibility Matrix - Documentation & Guides - Appcelerator Wikihttps://wiki.appcelerator.org/display/guides/Titanium+Compatibility+Matrix

最新版のターゲット環境


https://wiki.appcelerator.org/display/guides/Titanium+Compatibility+Matrix

https://wiki.appcelerator.org/display/guides/Titanium+Compatibility+Matrix

Only Mac OS X

iOS


Code Example


Titanium Mobile製アプリ


MogSnapZaim

GetGlue Welcome to NIFTY-Serve

Built with Appcelerator Titanium / http://www.builtwithtitanium.com/


http://www.builtwithtitanium.com

http://www.builtwithtitanium.com

Titanium Mobile

最近の


Titanium Mobile SDK 1.8.2Feb 29, 2012


1.8系のサービスパック

メモリリーク修正

クラッシュバグ修正

など

http://developer.appcelerator.com/apidoc/mobile/1.8.2/changelog.html




4月に2.0がリリース予定

Cocoafishサービスとの統合

ジオロケーション機能の強化

TableViewのパフォーマンス改善

モジュールAPIの改良




チーム開発



Code Structure

コードの分割


// app.jsvar win = Ti.UI.createWindow({ backgroundColor: '#fff'});

var button = Ti.UI.createButton();button.addEventListener(‘click’, function(e) { alert(‘Button Clicked’);});win.add(button);

win.open();

簡単なアプリ。




win.open();

ウィンドウの生成。




win.open();

ボタンの生成とクリック時の処理設定。




win.open();

ウィンドウのオープン。


1つのapp.jsでは、

すぐに見通しが悪くなる。


チーム開発では分業も困難。


コードを分割する手法。


window.url

Ti.include()

CommonJS


手法によって、

Android対応

テストのしやすさ

保守性

などに大きく影響する。


window.url


ウィンドウ生成時の

urlパラメータを利用。


// app.jsvar win = Ti.UI.createWindow({ backgroundColor: '#fff', url: 'window.js'});win.open();

// window.jsvar win = Ti.UI.currentWindow;var button = Ti.UI.createButton();button.addEventListener(‘click’, function(e) { alert(‘Button Clicked’);});win.add(button);


window.urlスタイルは、

古いサンプルコード、ブログ、記事

などで使われている。


パフォーマンスの問題もあり、

現在は推奨されていないので

使わないこと。


window.url

Ti.include()

CommonJS


Ti.include


Ti.include関数を利用。


// app.jsvar name = 'Foo';var win = Ti.UI.createWindow({ backgroundColor: '#fff', name: name});Ti.include('window.js');win.open();

// window.jsvar label = Ti.UI.createLabel({text: win.name});label.addEventListener('click', function(e) { alert(name + ' Clicked');});win.add(label);


名前の衝突が起こりやすい。


現在はTi.includeも非推奨なので

使わないこと。


window.url

Ti.include()

CommonJS


CommonJS


サーバーサイドJavaScriptにおける

共通仕様 CommonJSの、

モジュール仕様を採用。


コードの分割・再利用の手法として

現在、Appceleratorが推奨。


// app.jsvar name = 'Foo';var window = require('window');var win = window.myWindow(name);win.open();

alert('label = ' + label); // labelは見えない

// window.jsexports.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;};


Titanium Studioで生成される

テンプレートもCommonJS形式。


app.jsui/ApplicationWindow.jsui/FirstView.js


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


var ApplicationWindow = require('ui/ApplicationWindow');new ApplicationWindow().open();

app.js


注意

相対パスを指定した際の挙動が

CommonJSと異なり、Resources/

からの相対指定として認識される。


パフォーマンスの問題がない。

メンテナンス性が高い。

再利用しやすい。

単体テストが行いやすい。


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();

デバイスに応じたUIの読み込み。


window.url

Ti.include()

CommonJS


underscore.js


配列や関数に対する操作を

容易にするライブラリ。


JavaScriptの

ビルトインオブジェクトを

拡張しない。


関数プログラミング由来の

ものを中心とした60ほどの関数。

each, map, reduce,filter, reject, any,max, min, shuffle,union, uniq, ...


It’s CommonJS

var _ = require('underscore')._;


JSONをUI用のデータに整形・変換。

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();


CoffeeScript


JavaScriptに比べて

コードの記述量を削減できる。


バグ、ケアレスミスの削減。


パラメータ記述が簡潔に。// JavaScriptvar win = Ti.UI.createWindow({ title: 'github' });var tab = Ti.UI.createTab({ icon: 'KS_nav_ui.png', title: 'Repos', window: win});

# CoffeeScriptwin = Ti.UI.createWindow(title: 'github')tab = Ti.UI.createTab icon: 'KS_nav_ui.png' title: 'Repos' window: win


コールバック記述が簡潔に。

// JavaScriptbutton.addEventListener('click', function(e) { Ti.API.debug('button clicked');});

# CoffeeScriptbutton.addEventListener 'click', (e) -> Ti.API.debug('button clicked')


ループがシンプルに。// JavaScriptvar 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 });

# CoffeeScriptrows = []for item in items when item.public() rows.push(createTableRow(item))tableView = Ti.UI.createTableView(data: rows)


後置ifでプラットフォーム毎の

場合分けをシンプルに。

# CoffeeScriptTi.UI.iPhone.appBadge = 10 if Ti.Platform.osname is “iphone”

# JavaScriptif (Ti.Platform.osname === “iphone”) { Ti.UI.iPhone.appBadge = 10;}


クラスベースに設計しやすい。

# CustomView.coffeeclass CustomView view: null constructor: -> @initView() @initEvents() initView: -> @view = Ti.UI.createView() initEvents: -> @view.addEventListener 'click', (e) -> alert('clicked')

module.exports = CustomView

# app.coffeeCustomView = require('CustomView')view = new CustomView()


文字列内で変数展開ができる。

name = "Titanium"alert("Hello, #{name}")


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

# Guardfileguard 'coffeescript', :input => 'coffee', :output => 'Resources', :bare => true

$ guard


http://npmjs.org/install.sh

http://npmjs.org/install.sh

Facade

プラットフォーム

依存コードの隠蔽


iOSとAndroidで場合分けするコード。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);}


分岐処理をラップして隠蔽。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;};


分岐処理をラップして隠蔽。

var win = calendarWindow(function(e) { ... });


モジュール化して再利用。

// utils.jsexports.createCalendarWindow = function(callback) { ...};

// app.jsvar utils = require('/utils');var win = utils.createCalendarWindow(function(e) { ...});


Custom Event



イベント


button.addEventListener(‘click’, function (e) {...});window.addEventListener(‘focus’, function (e) {...});

UIウィジェットの操作に伴って発生するもの、


とは限らない。


アプリ内コンポーネントの

連携にもイベントを活用する。


ApplicationLevelEvents


アプリケーションレベルイベント

アプリケーション内でグローバルに有効。

利用にはTi.Appモジュールを使う。

すべてのコンテキスト、関数スコープ、

CommonJSモジュールから参照できる。


Ti.App.addEventListener('settingsUpdated', function(params) { alert('New value: ' + params.newValue);});

Ti.App.fireEvent('settingsUpdated', { newValue: '...'});

ハンドラの設定とイベントの発生


コンポーネント同士がメソッドを呼び合うと、

エラー処理が分散する。

// メモ作成addButton.addEventListener('click', function(e) { if (dataManager.insertMemo(newMemo)) { memoList.append(newMemo); } else { alert('error!'); }});


イベントのやり取りで疎結合に。

メモ作成

Ti.AppdataManager

memoList



メモ作成 fire memoWillCreate

Ti.AppdataManager

memoList




Ti.AppdataManager

memoList

memoWillCreate




Ti.AppdataManager

memoList

memoWillCreate

fire memoDidCreated




Ti.AppdataManager

memoList

memoWillCreate

fire memoDidCreated

memoDidCreated


エラー時はイベントを発生させない。


Ti.AppdataManager

memoList

memoWillCreate

fire memoDidCreated×


// メモ作成addButton.addEventListener('click', function(e) { Ti.App.fireEvent('memoWillCreate', { id: memo.id, title: memo.id, body: memo.body });});

メモ作成の際には、データ保存やメモ一覧の更新には関与しない。


// dataManagerTi.App.addEventListener('memoWillCreate', function(memo) { if (insertMemo(memo)) { Ti.App.fireEvent('memoDidCreated', memo); } else { // エラー処理 }});

データ保存失敗時には次のイベントを発生させない。


// memoListTi.App.addEventListener('memoDidCreated', function(memo) { updateMemoList(memo);});

メモ一覧の更新処理はイベントの発生だけを待っていればよい。


注意

アプリケーションレベルのイベントハンドラ内

で生成したオブジェクトは、ハンドラを明示的

に削除するまでメモリに残る。

Managing Memory and Finding Leaks - Documentation & Guideshttps://wiki.appcelerator.org/display/guides/Managing+Memory+and+Finding+Leaks


https://wiki.appcelerator.org/display/guides/Managing+Memory+and+Finding+Leaks

https://wiki.appcelerator.org/display/guides/Managing+Memory+and+Finding+Leaks

var doSomething = function() { var foo = new Foo(); // ハンドラを削除するまで残り続ける};Ti.App.addEventListener(‘doSomething’, doSomething);

// 不要になったタイミングでハンドラを削除するTi.App.removeEventListener(‘doSomething’, doSomething);


Summary

まとめ




チーム開発



What’s Titanium Mobile

最近のTitanium Mobile

コードの分割

underscore.js

CoffeeScript



Agenda


コードの分割は常にCommonJSスタイル。

モジュール化で分業が容易に。

プロジェクト間でのコード再利用を促進。

CommonJS


underscore.js配列や関数に対する操作を簡潔に記述。

チーム内での配列操作スタイルを統一。


冗長なコードの削減。

JavaScriptの良い部分だけを利用。

チーム内でJavaScriptのコード品質を統一。

CoffeeScript


iOS/Android判定のコードはできるだけ隠蔽。

関数やモジュールに隠す。

再利用できるノウハウを蓄積。

状況が変わった際の対応を容易に。



コンポーネント間の通信はできるだけイベントで。

エラー処理を集約。

シンプルな処理フロー。



Thanks.

@junya







scalin titanium mobile

Documents

community

js coeescript

titanium mobile

js exports

addbutton

documentation

androidits

js var