Titanium もくもく会 Tokyo #7

1. Titanium もくもく会 Tokyo #7

2. ｻｰｾﾝ
LT とは Long Talk のことである
LT means Long Talk

3. 宮下 竜大郎 @ryugoo_
Web * Developer
Titanium Certified App Developer
Titanium Certified Mobile Developer
Titanium ユーザー会 書記
http://imthinker.net/
http://cocohere.com/

4. 何故、今ここでもう一度
初めての Titanium なのか

5. Titanium に関する誤解増加中

6. HTML / CSS / JS でアプリを作る
Titanium is not PhoneGap, Sencha Touch !

7. Objective-C / Java に変換される
Titanium is not “Meta programming language” !

8. Titanium 1.x 時代に見限っちゃった
Titanium Developer, Studio, Performance, Android, JavaScript…

9. 安定しないプラクティス
Ti.include / CommonJS Modules / Alloy … Enough Already !

10. 競合も増えた!
PhoneGap, Sencha Touch, RubyMotion, MobiRuby, Xamarin…

11. あっ、このままじゃあかん…
Oh…

12. もう一度 Titanium を整理しよう
Adjust “Titanium” again

14. Titanium プラットフォーム
Mobile Cloud Services Market place
Alloy MVC Framework Node.ACS Module, Design

15. Titanium Mobile
Built native apps from JavaScript

16. 
 
JavaScript
Single Code Base


17. Titanium Apps Native Apps
Titanium API
JavaScript 
+
JS Engine

Bridge API

18. Titanium Apps Native Apps
Titanium API
JavaScript 
+
JS Engine

Bridge API

19. JavaScript with Titanium API
= Titanium Classic
Raw Titanium API + CommonJS Modules + Native Modules

20. // UI
var win = Ti.UI.createWindow({
backgroundColor: "#FFFFFF"
});
var label = Ti.UI.createLabel({
text: "Hello, Titanium!"
});
// Logic
label.addEventListener("click", function () {
alert("You clicked label!");
});
// Presentation
win.add(label);
win.open();

21. Titanium Classic
1. シンプル
API 叩くだけ
大規模になってきたら…？
2. 全て JavaScript
ビューもロジックもデータベースも全部 JS を書いて操作
3. まずはここから
千里の Titanium も Classic より始まる

22. Alloy
Titanium MVC Framework

23. Titanium Apps Native Apps
Titanium API
JavaScript 
+
JS Engine

Bridge API

24. Titanium Apps Native Apps
Titanium API

XML
StyleSheet
+
JS Engine

JavaScript
Bridge API

25. Model
JavaScript
Controller
View XML + StyleSheet
= Alloy MVC Framework
Backbone.js based Model, Controller and XML based UI with StyleSheet system

26. // View (index.xml)
<Alloy>
<Window id="index">
<Label id="lbl">Hello, Titanium!</Label>
</Window>
</Alloy>
// StyleSheet (index.tss)
"Window": {
backgroundColor: "#FFFFFF"
}
// Controller (index.js)
$.lbl.addEventListener("click", function () {
alert("You clicked label!");
});
$.index.open();

27. // Create Model (Rails like)
$ alloy generate model todo sql
task:string done:boolean
// Use Model (in Controller)
var todo = Alloy.createModel("todo", {
task: "Something" + Date.now(),
done: false
});
todo.save(); // Save SQLite :-)
// Data binding (in View)
<Collection src="todo" />
<TableView dataCollection="todo">

28. Alloy MVC Framework
1. 分かりやすい構造
ビュー、ロジック、コントローラ、データベースが綺麗に分離する
2. 大規模開発も安心
Convention over Configuration で規約に従った開発
3. Titanium Classic を覚えてから
まずは Titanium API で何ができるかを頭に入れると効果的

29. Titanium プラットフォーム
✓
Mobile
Alloy MVC Framework
Cloud Services
Node.ACS
Market place
Module, Design

30. Titanium Cloud Services
MBaaS - Mobile Backend as a Service

31. Titanium Cloud Services
1. サーバサイド機能を提供
API 叩くだけ, Titanium / iOS / Android / JS / REST
2. 広い無料枠
500 万 API コール, 500 万 Push 通知, 20GB ストレージ
3. Ti Mobile とシームレスに連携
Titanium Mobile 用のモジュール有

32. Backend as a Service
☁
IaaS / VPS BaaS
  1. サーバーを借りて 1. サインアップして
 
2. ミドルウェアを入れて 2. ドキュメント読んで
 3. 設定して 3. API 使って

4. 設計して 4. 動作確認する
 
5. プログラム書いて
6. 展開して
7. 動作確認して
8. 管理する
👤

33. Titanium Cloud Services
1. AWS の上で動作
無料枠の範囲内なら間接的に AWS を無料で使っている事に
2. Node.ACS
ACS 連携の Node.js アプリをホスティング (PaaS)
3. 全て JavaScript で完結
クライアント側からサーバーサイドまで

34. Titanium プラットフォーム
✓
Mobile
Alloy MVC Framework
✓
Cloud Services
Node.ACS
Market place
Module, Design

35. Open Mobile Marketplace
Find Modules and Design parts on official store

36. Open Mobile Marketplace
1. 有料・無料のモジュールを掲載
Instagram のようなモジュールや KeyChain モジュールなど
2. デザインパーツ
モジュール以外にはデザインパーツも置いてある
3. ライセンス形態は多様
一度取得したら無料のものから、月額払いのものなど

37. Titanium プラットフォーム
Titanium Studio
Ecplise based IDE for Titanium
Mobile
Titanium CLI
Cloud Services Market place
Command line tools made by Node.js
Alloy MVC Framework Node.ACS Module, Design

39. Titanium Studio
1. 開発・デバッグ・転送
Titanium Mobile 開発に必要な要素全部入り
2. Alloy の操作も GUI で
モデルの定義やコントローラーの定義も全て GUI 操作可能
3. 強力なコード補完
Titanium API だけでなく、 Alloy や自分で定義した関数も補完

40. Titanium CLI
1. プロジェクト作成や転送
コーディングは好きなテキストエディタで OK
2. 他のツールと連携
Grunt や Jasmine などの他のツールと連携しやすい
3. 上級者向け
自力で問題を解決できる上級者向け

41. Mobile Cloud Services Market place
Alloy MVC Framework Node.ACS Module, Design
Titanium Studio / CLI

42. Titanium Platform
1. クライアントからサーバまで統合
Titanium Mobile から Titanium Cloud Services まで
2. 豊富な公式開発ツール
Eclipse ベースの Studio や Node.js ベースのツール類まで
3. 迷ったらサポート掲示板へ
有志メンバーが頑張ります

43. CODESTRONG!