大規模なギョームシステムにHaxeを採用してみた話
- 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
- 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