More Related Content Similar to JSX の現在と未来 - Oct 26 2013 (20) More from Kazuho Oku (20) JSX の現在と未来 - Oct 26 20131. JSX の現在と未来
Oct. 26 2013
DeNA Co., Ltd.
Kazuho Oku
1
Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved.
2. 自己紹介
名前:奥 一穂
経歴:
⁃ モバイルウェブブラウザ Palmscape (Xiino) の開発
(1996-2003)
⁃ IPA未踏スーパークリエータ (2004)
•
「ウェブアプリケーション統合開発環境の開発」
⁃ サイボウズ・ラボ (2005-2010)
•
Japanize, Pathtraq, Q4M, mycached, …
⁃ ディー・エヌ・エー (2010-) R&Dに従事
JSX の現在と未来
2
Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved.
4. altJS とは?
JavaScript に変換して実行される言語
背景:
⁃ JavaScript の普及
⁃ ウェブブラウザで動くのは JavaScript だけ
•
ベンダー間の競争の結果、実行速度が高速に
⁃ ウェブブラウザ以外でも JavaScript を使うように
•
サーバサイド: node.js
•
クライアントサイド: Titanium, PhoneGap, ngCore, …
⁃ 適用範囲が拡大した結果、不満が噴出
JSX の現在と未来
4
Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved.
5. JSX とは?
DeNA でを中心に開発している altJS
⁃ JavaScript の言語仕様にできるだけ沿いつつ、以下
を実現
⁃ 静的型付け
⁃ クラスベースのオブジェクト指向
⁃ 最適化コンパイラ
2012/5/31 に公開
JSX の現在と未来
5
Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved.
7. altJS の種類
CoffeeScript
⁃ JavaScript と1:1対応する文法
⁃ 意味論は変更しない
TypeScript
⁃ JavaScript の上位互換
JSX
⁃ JavaScript の下位互換 + 独自拡張
Java Web Toolkit, Haxe, Emscripten, …
⁃ 既存のプログラミング言語を JavaScript に変換
JSX の現在と未来
7
Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved.
8. DeNA における JavaScript
JavaScript による大規模開発
⁃ 数万行〜10万行規模に及ぶコードベース
⁃ 開発メンバーの入れ替わりが激しい
専用内製ライブラリ/フレームワークの使用が多い
⁃ ngCore, ExGame, Post ExGame, …
⁃ スマホ上での実行が多い + 一部サーバサイド
頻繁なコード変更
⁃ ゲーム内イベント等
JSX の現在と未来
8
Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved.
10. 解決策: JSX の開発
課題: 生産性と品質担保
→ コンパイル時にエラー検知
課題: 実行速度
→ JavaScriptへの変換時に最適化コンパイル
•
型情報を利用したインライン展開や定数畳み込み
課題: ロード時間と使用メモリ量
→ 強力なminify
•
静的型付け必須だからプロパティ名の安全確実なリネー
ムが可能
トレードオフ: JavaScript の動的な性質を利用したラ
イブラリとの接続が煩雑に
JSX の現在と未来
10
Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved.
12. なぜ静的型付けを必須としたのか
型付けが Optional なら JavaScript 上位互換なのに
⁃ 例: CoffeeScript, Google Closure Compiler
オプショナルな型付けの問題
⁃ 型付けがないコードが混在すると、コンパイル時の
エラーチェックが困難に
⁃ 安全な最適化やminifyができない
JSX の現在と未来
12
Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved.
13. JSX の文法
できるだけ JavaScript っぽく
⁃ プログラマの多くは、新しい言語を学びたいとは思
っていない
JSX = JavaScript の式と文
+ 型アノテーション
+ 型推論
+ クラスベースのオブジェクト指向
(単一クラス継承、複数インターフェイス継承)
(メソッドのオーバーロード可能)
JSX の現在と未来
13
Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved.
14. 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);
}
}
JSX の現在と未来
14
Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved.
15. JSX のコード例(アフィン変換)
JSX のソースコード:
new Matrix(1, 0, 0, 0, 2, 0).transform(new Point(x, y))
生成される 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
JSX の現在と未来
15
Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved.
16. Performance Benchmarks
Box2D
⁃ box2d.js を JSX に移植して fps を測定
⁃ iOS 5.0 – 12%向上
⁃ Android 2.3 – 29%向上
AOBench
⁃
http://spheresofa.net/blog/?p=757
処理速度
Haxe
TypeScript
iOS
Android
JSX
JavaScript
0
JSX の現在と未来
0.5
1
1.5
2
16
Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved.
18. Minify
強力かつ安全な minify
⁃ プロパティ名の短縮は静的型付けが必須でない限り
不可能
Impact of Minifica on
Total
ngCore HTML5
jsx --release
jsx --release | uglifyjs
JSX
jsx --release | esmangle
jsx --release --minify
v8bench.jsx
0
JSX の現在と未来
0.2
0.4
0.6
0.8
1
byte size of generated code(ra o)
1.2
18
Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved.
20. JSX 公開後の進化
セルフホスティング
⁃ JSX のコンパイラを JSX へ移植
minify
型推論の強化
⁃ var a = [1,2,3].map((x) -> 3 * x)
•
a の型は number[]
オプティマイザの強化
⁃ メソッドの関数への変換、末尾再帰のループ展開等
JavaScript との互換性の強化
⁃ export 属性、バインディングのインライン定義
JSX の現在と未来
20
Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved.
21. バインディング/ライブラリの増加
W3C API
⁃ ほぼ全対応
•
IDLから自動生成
node.jsx
⁃ node.js 用のバインディングを淡々と作っていくよ
⁃ コア, mysql, memcached, needle, …
Qt.jsx, Ext.jsx, tmlib.jsx, mizuki, …
⁃ ごめんなさいなんかいろいろ忘れてる気が
JSX の現在と未来
21
Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved.
23. DeNA における JSX の使用状況
社内における普及方針
⁃ 複雑なライブラリの新規開発で JSX を使用
⁃ その後、それらを使うゲームでも JSX を使用
•
理由: 既存のゲームを JSX に移植するのは非現実的
社内の使用状況
⁃ JSX で開発されたライブラリが複数存在
•
ngCore on HTML5
•
HTML5 上で動作するスプライト描画系
•
node.js 上で動作するサーバサイドフレームワーク
⁃ それらを使ったゲーム開発プロジェクトが複数
JSX の現在と未来
23
Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved.
28. まとめ
JSX は得失のはっきりした altJS
⁃ メリット:
•
強力なエラー検出機能
•
実行速度とサイズの両面における最適化
⁃ デメリット:
•
JavaScript で書かれた既存との接続が煩雑
プロダクションレベルの成熟度
⁃ 今後も機能追加します/互換性は壊しません
新規開発案件にオススメ
⁃ バインディングは今後増えて行くでしょうが
⁃ 既存ライブラリへの依存が少ないとなお良い
JSX の現在と未来
28
Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved.