ギョームの話です

1. 大規模なギョームシステムに
Haxeを採用してみた話
terurou/YAGI.Teruo

2. 自己紹介
2

3. terurouです。
• Web・GUI・分散処理を手広くやってます
– Windows 8（なんとか Style Apps）, Silverlight,
JavaScript, Android, …
– Cassandra, 自作KVS, AWS, …
– DataGridの自作に定評があるらしいです
• フロントエンド寄りのアーキテクチャの設計が
割と得意です
– MVC/MVVM, Client-side Cache, 通信, …
3

4. Haxe/JavaScriptチュートリアル
• http://www.denkiyagi.info/haxe-
javascript-tutorial/
• 最近忙しくて執筆が滞ってますが…
4

5. 忘年会とか主催してます。
• 12/8（土）
– 昼の部 13:15-16:45
– 夜の部 17:30-20:00
• http://events.dstokai.info/ngk2012b
5

6. Haxeとは？
6

7. Haxeとは？
• オブジェクト指向言語
• 静的型付け＋型推論
• コンパイルが速い
• インライン展開やマクロを簡単に使えるので
手動での最適化が容易
• マルチプラットフォーム（当然JavaScriptも）
7

8. ActionScript と C# によく似た言語
• 構文はActionScriptに似ている
• 提供している機能はほぼC#
– enum（パターンマッチ）と構造的部分型を足し、
– LINQとeventとasync/awaitを引く
– メソッドをdelegateとして扱える
• thisのスコープがメソッドにバインドされる
– using mixin = 拡張メソッド
– ラムダ式、レキシカルクロージャ
8

9. Haxeコードの例
package sample;
import haxe.Json;
class Main {
static function main() {
var obj = { name: ‘terurou’, age: 29 };
var str = Json.stringify(obj);
trace(str);
}
}
9

10. なんでギョームシステムに
Haxe採用したん？
10

11. ここから割と泥臭い話になります。
11

12. システムについてざっくりと
• ギョーム系SaaS
– セルフカスタマイズとかもあるよ！
– 画面レイアウト情報を動的に扱う
• HTML5/JavaScript, Ext JS
• Java, PostgreSQL, Cassandra
• IE9～ + モダンブラウザの最新版に対応
12

13. フロントエンドエンジニアに求められるスキル
• 高度なJavaScript実装スキル
– jQueryできます！レベルだと死ぬ
– 少し分野は違うけど、ゲームとか作れるレベル
• API/データフォーマット設計スキル
– 熟練者でもしっかり考えないと破綻する
• フレームワーク設計スキル
– JavaScriptが苦手なプログラマでもある程度は
画面を実装できるように
13

14. プロジェクト中盤になってHaxeを採用した
• 要員確保の問題で、プロジェクト開始時に
JavaScriptスペシャリストを確保できず。
– 某T社系がエンジニアを囲い込んでるらしい…。
– てか、そんなエンジニアはそうそう居ない。
• アーキテクトも不足、サーバ側に注力。
• 私はプロジェクト中盤になってから、
JavaScriptスペシャリストとして参画した。
14

15. フレームワークが破綻したぞ！！！！
• 場当たり的に機能を実装してきていたため、
機能追加・改修が困難な状況に。
– グローバル変数使いまくり
– パフォーマンスもよろしくない
– 「後から作り直すからプロトタイプのつもりで」と
PM指示も出ていたらしい
15

16. まぁ、こりゃ作り直さないと無理だ
• デスマです、本当にありがとうございました
16

17. 既存コードの問題点
• Ext JSのMVCを採用していた
– 自動スクリプトローディングや独自OOPなど、
深く学習しないとコードを読み書きできない。
– 実装者のスキル不足もあり、訳がわからなく…
– 個人的には「この設計思想はないわー」
• データ構造・管理が破綻
– JavaScriptが柔軟（動的）すぎる
– 「このオブジェクトにデータ入れちゃえ！」
17

18. で、どうするか
• Haxeを採用
– 型をキッチリ管理したい
– まともなモジュールシステムが必須
– 数か月学習していたので不安はなかった
• MVCは独自実装に変更
– 既成のMVC Frameworkでは要件に合わない
– システムが少々特殊
– でもExt JSのUIコンポーネントは使いたい
18

19. 最初にデータ構造・プロトコルの整理
• サーバとはJSONでデータをやり取り
• Haxeレベルで型を定義
– typedef/enumをとにかく定義しまくる
– サーバからのデータを信用せずにパースする
• エラーチェック、実装時のバグを検出しやすく
• 矛盾や無駄のある構造を見直し
19

20. typedef/enumの例
enum ComponentType {
コンポーネントの種別を
Text(x : TextDefinition); enumで定義
Number(x : NumberDefinition);
RadioButton(x : RadioDefinition);
}
typedef TextDefinition {
x : Int,
y : Int,
width : Int,
コンポーネントごとに
height : Int, 固有の設定情報
allowChars : TextAllowChars;
maxLength : Int,
}
20

21. 次にMVC・レイアウトマネージャを実装
• MVCはベーシックなObserverパターン
– hxeventsをほぼそのまま利用
– イベントをenumで定義してみた
• フレームワーク内ではイベントを全部管理したい
• パターンマッチで網羅的にコードを書ける
• レイアウトマネージャはほぼExt JSベース
– absoluteレイアウト
– レイアウト情報はサーバから動的に流し込む
21

22. Observer + enumの例
class Text extends Observale<TextEvent> { }
enum TextEvent {
Click;
Change(newValue : String, oldValue : String);
Blur(event : { cancel : Void -> Void });
}
text.observe(function (event : TextEvent) {
switch (event) {
case Blue(x): if (!validate()) x.cancel();
default:
}
});
22

23. 続いて通信・非同期処理回りを実装
• 通信コンポーネントも独自実装
– 通信時にシステム用のidを付けたり、色々と
– 標準のhaxe.Http（ほぼ生XHR）をラップ
– 内部でQueue/簡易フローを実装
• 非同期処理はDeferred（Promiseパターン）
– Haxeから使うにはよいライブラリがなかったので
これも自前実装した
23

24. Deferred（Promise）の例
showLoadingMask();
var http = new HttpClient();
http.send(‘/foo/bar’, ‘get’)
.success(function (data : Dynamic) {
var value = cast(data.value, Int);
trace(value);
})
.fail(function (error : HttpError) {
trace(‘なんかエラーでた’);
})
.done(function () {
clearLoadingMask();
});
24

25. そして結合・細かな機能を実装
• 入力チェックがどうこうとか
– 単純に数が多い
– もう構造が決まっているので誰でも書ける
• プログラマがJavaScriptプラグインで個別の
画面を拡張できるようにAPIを用意
– システムが複雑なのである程度はDSL化
– 「Aを入力→Bを入力可に」とか
25

26. まぁ、まだ開発中なんですが
破滅的な状況からは復帰できた。
まだ忙しいので人材募集中です。
26

27. Haxe使ってみて実際どうなのか
27

28. Haxeのメリット（JavaScriptとの比較）
• 開発効率が明らかに向上
– 爆速コンパイラによる型チェック
– クラス・モジュールシステムが言語機能なのは
やっぱり楽
– 言語仕様が強力（enum, typedef, 型推論...)
– IDEサポートが強力
• リファクタリングが怖くない
• JavaScriptよりも学習が容易
28

29. Haxeの微妙なところ
• インラインJavaScriptがそれなりに必要
– untyped __js__(‘console.log(“hoge”)’);
– JavaScriptとの連携が少し冗長になる
• traitがほしい
– 実装を持てるインタフェース
– using mixin（拡張メソッド）だけでは足りない
29

30. まとめ
30

31. まとめ
• Haxeの方が明らかに仕事が楽になった。
• JavaScript（というかDOM/CSS）の知識は
当然必要だけど。
31

32. ご清聴ありがとうございました
32