JSX - 公開から1年を迎えて
- 3. altJS とは?
n JavaScript に変換して実行される言語
n 背景: JavaScript の普及
n ウェブブラウザで動くのは JavaScript だけ
n ベンダー間の競争の結果、実行速度が高速に
n ウェブブラウザ以外でも JavaScript を使うように
n サーバサイド: node.js
n クライアントサイド: Titanium, PhoneGap, ngCore, …
n 適用範囲が拡大した結果、不満が噴出…
Aug 24 2013 JSX - 公開から1年を迎えて 3
- 7. DeNA における JavaScript
n JavaScript による大規模開発
n 専用内製ライブラリ/フレームワークの使用が多い
n ngCore, ExGame, Post ExGame, …
n スマホ上での実行が多い + 一部サーバサイド
n 数万行に及ぶコードベース
n 頻繁なコード変更
n ゲーム内イベント等
Aug 24 2013 JSX - 公開から1年を迎えて 7
- 9. 解決策 = JSX の開発
n JSX: 静的型付け必須なJavaScriptの方言
n 課題:生産性と品質担保
→ コンパイル時にエラー検知
n 課題:実行速度
→ JavaScriptへの変換時に最適化コンパイル
n 型情報を利用したインライン展開や定数畳み込みが可能
n 課題:ロード時間と使用メモリ量
→ 強力なminify
n 静的型付け必須だから、プロパティの安全確実なリネームが可能
n トレードオフ
n JavaScript の動的な性質を利用したライブラリと接続が煩雑に
Aug 24 2013 JSX - 公開から1年を迎えて 9
- 10. なぜ静的型付けを必須としたのか
n 型付けが Optional なら JavaScript 上位互
換なのに
n 例: CoffeeScript, Google Closure Compiler
n オプショナルな型付けの問題
n 型付けがないコードが混在すると、コンパイル時のエ
ラーチェックが困難に
n 安全な最適化やminifyができない
Aug 24 2013 JSX - 公開から1年を迎えて 10
- 11. JSX の文法
JSX = JavaScript の式と文
+ 型アノテーション
+ 型推論
+ クラスベースのオブジェクト指向
n 単一クラス継承、複数インターフェイス継承
n メソッドのオーバーロード可能
Aug 24 2013 JSX - 公開から1年を迎えて 11
- 12. 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
- 13. 最適化コンパイル例 – アフィン変換
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
- 14. 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
- 15. 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
- 16. リリース後の進化
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