JSX 公開から1年を迎えて
DeNA Co., Ltd.
Kazuho Oku
自己紹介
n 名前:奥 一穂 n 経歴:
n モバイルウェブブラウザ「Palmscape」「Xiino」の開発 (1996-2003)
n IPA未踏スーパークリエータ (2004) n サイボウズ・ラボ (2005-2010)
n Japanize, Pathtraq, Q4M, mycached, …
n ディー・エヌ・エー (2010-) n R&Dに従事
Aug 24 2013 JSX - 公開から1年を迎えて 2
altJS とは?
n JavaScript に変換して実行される言語
n 背景: JavaScript の普及 n ウェブブラウザで動くのは JavaScript だけ
n ベンダー間の競争の結果、実行速度が高速に
n ウェブブラウザ以外でも JavaScript を使うように
n サーバサイド: node.js n クライアントサイド: Titanium, PhoneGap, ngCore, …
n 適用範囲が拡大した結果、不満が噴出…
Aug 24 2013 JSX - 公開から1年を迎えて 3
JSX とは?
n DeNA でを中心に開発している altJS n JavaScript がベース
n 静的型付け
n クラスベースのオブジェクト指向
n 最適化コンパイラ
Aug 24 2013 JSX - 公開から1年を迎えて 4
Aug 24 2013 JSX - 公開から1年を迎えて 5
altJS の種類
n CoffeeScript n JavaScript と1:1対応する文法
n TypeScript, Dart, … n JavaScript の上位互換
n JSX n JavaScript の下位互換 + 独自拡張
n Java Web Toolkit, Haxe, Emscripten, … n 既存のプログラミング言語を JavaScript に変換
Aug 24 2013 JSX - 公開から1年を迎えて 6
DeNA における JavaScript
n JavaScript による大規模開発 n 専用内製ライブラリ/フレームワークの使用が多い
n ngCore, ExGame, Post ExGame, … n スマホ上での実行が多い + 一部サーバサイド
n 数万行に及ぶコードベース
n 頻繁なコード変更 n ゲーム内イベント等
Aug 24 2013 JSX - 公開から1年を迎えて 7
直面した問題
n 生産性と品質担保 n 実行するまでバグが見つからない
n GUI やネットワークまわりはテストが難しい
n 実行速度が遅い
n ロード時間と使用メモリ量の増大 n スマートフォンは PC より貧弱
Aug 24 2013 JSX - 公開から1年を迎えて 8
解決策 = JSX の開発
n JSX: 静的型付け必須なJavaScriptの方言 n 課題:生産性と品質担保
→ コンパイル時にエラー検知
n 課題:実行速度
→ JavaScriptへの変換時に最適化コンパイル n 型情報を利用したインライン展開や定数畳み込みが可能
n 課題:ロード時間と使用メモリ量
→ 強力なminify n 静的型付け必須だから、プロパティの安全確実なリネームが可能
n トレードオフ n JavaScript の動的な性質を利用したライブラリと接続が煩雑に
Aug 24 2013 JSX - 公開から1年を迎えて 9
なぜ静的型付けを必須としたのか
n 型付けが Optional なら JavaScript 上位互換なのに n 例: CoffeeScript, Google Closure Compiler
n オプショナルな型付けの問題 n 型付けがないコードが混在すると、コンパイル時のエ
ラーチェックが困難に
n 安全な最適化やminifyができない
Aug 24 2013 JSX - 公開から1年を迎えて 10
JSX の文法
JSX = JavaScript の式と文 + 型アノテーション
+ 型推論
+ クラスベースのオブジェクト指向 n 単一クラス継承、複数インターフェイス継承
n メソッドのオーバーロード可能
Aug 24 2013 JSX - 公開から1年を迎えて 11
JSX のコード例
class Point { var x : number, y : number; function constructor(x : number, y : number) { this.x = x; this.y = y; }}class Matrix { var a11 : number, a12 : number, a13 : number var a21 : number, a22 : number, a23 : number; function constructor(a11 : number, a12 : number, (省略)) { this.a11 = a11; (省略) } function transform(pt : Point) : Point { return new Point( this.a11 * pt.x + this.a12 * pt.y + this.a13, this.a21 * pt.x + this.a22 * pt.y + this.a23); }}
Aug 24 2013 JSX - 公開から1年を迎えて 12
最適化コンパイル例 – アフィン変換
n JSX のソースコード: new Matrix(1, 0, 0, 0, 2, 0).transform(new Point(x, y))
n 生成される JavaScript: {x: x + 0 * y, y: 0 * x + 2 * y}Note: 0 * n cannot be folded since it is equiv. to: isNaN(n) ? NaN : 0
Aug 24 2013 JSX - 公開から1年を迎えて 13
Performance Benchmarks
n Box2D n convert box2d.js to JSX and measure the fps n iOS 5.0 – 12% speed-up n Android 2.3 – 29% speed-up
n AOBench n from http://spheresofa.net/blog/?p=757
Aug 24 2013 JSX - 公開から1年を迎えて
0 0.5 1 1.5 2
JavaScript
JSX
TypeScript
Haxe
処理速度
iOS
Android
14
Minify
Aug 24 2013 JSX - 公開から1年を迎えて
n Minify is safe and more effective thanks to the type information
0" 0.2" 0.4" 0.6" 0.8" 1" 1.2"
Total"
ngCore"HTML5"
JSX"
v8bench.jsx"
byte%size%of%generated%code(ra2o)%
Impact%of%Minifica2on�
jsx"AArelease"
jsx"AArelease"|"uglifyjs"
jsx"AArelease"|"esmangle"
jsx"AArelease"AAminify"
15
リリース後の進化
n セルフホスティング n JSX のコンパイラを JSX へ移植
n 型推論の強化 n var a = [1,2,3].map((x) -> 3 * x)
n a の型は number[]
n オプティマイザの強化 n メソッドの関数への変換、末尾再帰のループ展開等
n JavaScript との互換性の強化 n export 属性、バインディングのインライン定義
Aug 24 2013 JSX - 公開から1年を迎えて 16
JSX の今後
n バグフィックス、最適化の改善 n 社内外のプロジェクトのサポート
n node.js 対応の強化 n W3C 策定のブラウザAPIは、ほぼすべて対応済
n TypedArray とか WebGL も
n async 属性 n 通常の関数同様に書かれたコードを、非同期ベース
の JavaScript にコンパイル
Aug 24 2013 JSX - 公開から1年を迎えて 17
まとめ
n JSX は得失のはっきりした altJS n メリット:
n 強力なエラー検出機能
n 実行速度とサイズの両面における最適化
n デメリット: n JavaScript で書かれた既存との接続が煩雑
n 既存ライブラリに依存しない新規プロジェクトにオススメ n 例: HTML 5 Canvas を使うゲームを大量に作ったり
とか… Aug 24 2013 JSX - 公開から1年を迎えて 18