Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

25,901 views

Published on

ギョームの話です

Published in: Technology
  • 「単にmanagementがよくなかっただけ」
    至極まっとうなご意見でございます。規模感については30人程度の人が関わってますね。
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

大規模なギョームシステムに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

×