大規模なギョームシステムにHaxeを採用してみた話

25,157 views

Published on

ギョームの話です

Published in: Technology
1 Comment
51 Likes
Statistics
Notes
  • 「単にmanagementがよくなかっただけ」
    至極まっとうなご意見でございます。規模感については30人程度の人が関わってますね。
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
25,157
On SlideShare
0
From Embeds
0
Number of Embeds
1,133
Actions
Shares
0
Downloads
49
Comments
1
Likes
51
Embeds 0
No embeds

No notes for slide

大規模なギョームシステムにHaxeを採用してみた話

  1. 1. 大規模なギョームシステムにHaxeを採用してみた話terurou/YAGI.Teruo
  2. 2. 自己紹介 2
  3. 3. terurouです。• Web・GUI・分散処理を手広くやってます – Windows 8(なんとか Style Apps), Silverlight, JavaScript, Android, … – Cassandra, 自作KVS, AWS, … – DataGridの自作に定評があるらしいです• フロントエンド寄りのアーキテクチャの設計が 割と得意です – MVC/MVVM, Client-side Cache, 通信, … 3
  4. 4. Haxe/JavaScriptチュートリアル• http://www.denkiyagi.info/haxe- javascript-tutorial/• 最近忙しくて執筆が滞ってますが… 4
  5. 5. 忘年会とか主催してます。• 12/8(土) – 昼の部 13:15-16:45 – 夜の部 17:30-20:00• http://events.dstokai.info/ngk2012b 5
  6. 6. Haxeとは? 6
  7. 7. Haxeとは?• オブジェクト指向言語• 静的型付け+型推論• コンパイルが速い• インライン展開やマクロを簡単に使えるので 手動での最適化が容易• マルチプラットフォーム(当然JavaScriptも) 7
  8. 8. ActionScript と C# によく似た言語• 構文はActionScriptに似ている• 提供している機能はほぼC# – enum(パターンマッチ)と構造的部分型を足し、 – LINQとeventとasync/awaitを引く – メソッドをdelegateとして扱える • thisのスコープがメソッドにバインドされる – using mixin = 拡張メソッド – ラムダ式、レキシカルクロージャ 8
  9. 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. 10. なんでギョームシステムにHaxe採用したん? 10
  11. 11. ここから割と泥臭い話になります。 11
  12. 12. システムについてざっくりと• ギョーム系SaaS – セルフカスタマイズとかもあるよ! – 画面レイアウト情報を動的に扱う• HTML5/JavaScript, Ext JS• Java, PostgreSQL, Cassandra• IE9~ + モダンブラウザの最新版に対応 12
  13. 13. フロントエンドエンジニアに求められるスキル• 高度なJavaScript実装スキル – jQueryできます!レベルだと死ぬ – 少し分野は違うけど、ゲームとか作れるレベル• API/データフォーマット設計スキル – 熟練者でもしっかり考えないと破綻する• フレームワーク設計スキル – JavaScriptが苦手なプログラマでもある程度は 画面を実装できるように 13
  14. 14. プロジェクト中盤になってHaxeを採用した• 要員確保の問題で、プロジェクト開始時に JavaScriptスペシャリストを確保できず。 – 某T社系がエンジニアを囲い込んでるらしい…。 – てか、そんなエンジニアはそうそう居ない。• アーキテクトも不足、サーバ側に注力。• 私はプロジェクト中盤になってから、 JavaScriptスペシャリストとして参画した。 14
  15. 15. フレームワークが破綻したぞ!!!!• 場当たり的に機能を実装してきていたため、 機能追加・改修が困難な状況に。 – グローバル変数使いまくり – パフォーマンスもよろしくない – 「後から作り直すからプロトタイプのつもりで」と PM指示も出ていたらしい 15
  16. 16. まぁ、こりゃ作り直さないと無理だ• デスマです、本当にありがとうございました 16
  17. 17. 既存コードの問題点• Ext JSのMVCを採用していた – 自動スクリプトローディングや独自OOPなど、 深く学習しないとコードを読み書きできない。 – 実装者のスキル不足もあり、訳がわからなく… – 個人的には「この設計思想はないわー」• データ構造・管理が破綻 – JavaScriptが柔軟(動的)すぎる – 「このオブジェクトにデータ入れちゃえ!」 17
  18. 18. で、どうするか• Haxeを採用 – 型をキッチリ管理したい – まともなモジュールシステムが必須 – 数か月学習していたので不安はなかった• MVCは独自実装に変更 – 既成のMVC Frameworkでは要件に合わない – システムが少々特殊 – でもExt JSのUIコンポーネントは使いたい 18
  19. 19. 最初にデータ構造・プロトコルの整理• サーバとはJSONでデータをやり取り• Haxeレベルで型を定義 – typedef/enumをとにかく定義しまくる – サーバからのデータを信用せずにパースする • エラーチェック、実装時のバグを検出しやすく• 矛盾や無駄のある構造を見直し 19
  20. 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. 21. 次にMVC・レイアウトマネージャを実装• MVCはベーシックなObserverパターン – hxeventsをほぼそのまま利用 – イベントをenumで定義してみた • フレームワーク内ではイベントを全部管理したい • パターンマッチで網羅的にコードを書ける• レイアウトマネージャはほぼExt JSベース – absoluteレイアウト – レイアウト情報はサーバから動的に流し込む 21
  22. 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. 23. 続いて通信・非同期処理回りを実装• 通信コンポーネントも独自実装 – 通信時にシステム用のidを付けたり、色々と – 標準のhaxe.Http(ほぼ生XHR)をラップ – 内部でQueue/簡易フローを実装• 非同期処理はDeferred(Promiseパターン) – Haxeから使うにはよいライブラリがなかったので これも自前実装した 23
  24. 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. 25. そして結合・細かな機能を実装• 入力チェックがどうこうとか – 単純に数が多い – もう構造が決まっているので誰でも書ける• プログラマがJavaScriptプラグインで個別の 画面を拡張できるようにAPIを用意 – システムが複雑なのである程度はDSL化 – 「Aを入力→Bを入力可に」とか 25
  26. 26. まぁ、まだ開発中なんですが 破滅的な状況からは復帰できた。 まだ忙しいので人材募集中です。 26
  27. 27. Haxe使ってみて実際どうなのか 27
  28. 28. Haxeのメリット(JavaScriptとの比較)• 開発効率が明らかに向上 – 爆速コンパイラによる型チェック – クラス・モジュールシステムが言語機能なのは やっぱり楽 – 言語仕様が強力(enum, typedef, 型推論...) – IDEサポートが強力• リファクタリングが怖くない• JavaScriptよりも学習が容易 28
  29. 29. Haxeの微妙なところ• インラインJavaScriptがそれなりに必要 – untyped __js__(‘console.log(“hoge”)’); – JavaScriptとの連携が少し冗長になる• traitがほしい – 実装を持てるインタフェース – using mixin(拡張メソッド)だけでは足りない 29
  30. 30. まとめ 30
  31. 31. まとめ• Haxeの方が明らかに仕事が楽になった。• JavaScript(というかDOM/CSS)の知識は 当然必要だけど。 31
  32. 32. ご清聴ありがとうございました 32

×