Post on 17-Dec-2014
description
Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved.
1
JSX の現在と未来Oct. 26 2013
DeNA Co., Ltd.
Kazuho Oku
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 の現在と未来
Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved.
3
JSX の概要
JSX の現在と未来
Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved.
4
altJS とは ?
JavaScript に変換して実行される言語 背景 :
⁃ JavaScript の普及⁃ ウェブブラウザで動くのは JavaScript だけ• ベンダー間の競争の結果、実行速度が高速に
⁃ ウェブブラウザ以外でも JavaScript を使うように• サーバサイド : node.js
• クライアントサイド : Titanium, PhoneGap, ngCore, …
⁃ 適用範囲が拡大した結果、不満が噴出
JSX の現在と未来
Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved.
5
JSX とは ?
DeNA でを中心に開発している altJS
⁃ JavaScript の言語仕様にできるだけ沿いつつ、以下を実現
⁃ 静的型付け⁃ クラスベースのオブジェクト指向⁃ 最適化コンパイラ
2012/5/31 に公開
JSX の現在と未来
Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved.
6JSX の現在と未来
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 の現在と未来
Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved.
8
DeNA における JavaScript
JavaScript による大規模開発⁃ 数万行〜 10 万行規模に及ぶコードベース⁃ 開発メンバーの入れ替わりが激しい
専用内製ライブラリ／フレームワークの使用が多い⁃ ngCore, ExGame, Post ExGame, …
⁃ スマホ上での実行が多い + 一部サーバサイド 頻繁なコード変更
⁃ ゲーム内イベント等
JSX の現在と未来
Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved.
9
直面した問題
生産性と品質担保⁃ 実行するまでバグが見つからない⁃ GUI やネットワークまわりはテストが難しい
実行速度が遅い ロード時間と使用メモリ量の増大
⁃ スマートフォンは PC より貧弱
JSX の現在と未来
Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved.
10
解決策 : JSX の開発
課題 : 生産性と品質担保→ コンパイル時にエラー検知
課題 : 実行速度→ JavaScript への変換時に最適化コンパイル• 型情報を利用したインライン展開や定数畳み込み
課題 : ロード時間と使用メモリ量→ 強力な minify• 静的型付け必須だからプロパティ名の安全確実なリネー
ムが可能 トレードオフ : JavaScript の動的な性質を利用したラ
イブラリとの接続が煩雑に
JSX の現在と未来
Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved.
11
静的型付けで生産性と品質が向上する理由
変数名やメソッドの存在をコンパイル時に検証できる⁃ 全ての値は、代入するまで参照不可能⁃ 以下のような JS でよくある現象と戦わなくていい• “Object foo has no method ’bar’”
• “foo is not defined”
• いつのまにか値が NaN
実行時にエラーチェックを行うことができる⁃ 配列の未初期化要素へのアクセスを検出
⁃ デバッグビルドの場合のみ
JSX の現在と未来
Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved.
12
なぜ静的型付けを必須としたのか
型付けが Optional なら JavaScript 上位互換なのに⁃ 例 : CoffeeScript, Google Closure Compiler
オプショナルな型付けの問題⁃ 型付けがないコードが混在すると、コンパイル時の
エラーチェックが困難に⁃ 安全な最適化や minify ができない
JSX の現在と未来
Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved.
13
JSX の文法
できるだけ JavaScript っぽく⁃ プログラマの多くは、新しい言語を学びたいとは思っていない
JSX = JavaScript の式と文 + 型アノテーション + 型推論 + クラスベースのオブジェクト指向
(単一クラス継承、複数インターフェイス継承 )
( メソッドのオーバーロード可能 )
JSX の現在と未来
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 の現在と未来
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 の現在と未来
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
JSX の現在と未来
JavaScript
JSX
TypeScript
Haxe
0 0.2 0.4 0.6 0.8 1 1.2 1.4 1.6 1.8
処理速度
iOSAndroid
Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved.
プロファイラ
17
JSX の現在と未来
呼出回数や総実行時間を測定⁃ サンプリングではない
あらゆる環境で実行可能
Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved.
18
Minify
強力かつ安全な minify
⁃ プロパティ名の短縮は静的型付けが必須でない限り不可能
JSX の現在と未来
Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved.
19
JSX 公開後の進化
JSX の現在と未来
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 の現在と未来
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 の現在と未来
Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved.
22
現在の開発体制
ゆるふわにこんな感じ ?
JSX の現在と未来
名前 主な貢献kazuho リーダー , 言語仕様 , コンパイラ実装gfx コンパイラ実装 , テストフレームワーク , W3C バインディン
グwasabiz セルフホスティング , オプティマイザ , 言語仕様拡張shibukawa バインディング , パッケージ管理
Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved.
23
DeNA における JSX の使用状況
社内における普及方針⁃ 複雑なライブラリの新規開発で JSX を使用⁃ その後、それらを使うゲームでも JSX を使用• 理由 : 既存のゲームを JSX に移植するのは非現実的
社内の使用状況⁃ JSX で開発されたライブラリが複数存在• ngCore on HTML5
• HTML5 上で動作するスプライト描画系• node.js 上で動作するサーバサイドフレームワーク
⁃ それらを使ったゲーム開発プロジェクトが複数
JSX の現在と未来
Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved.
24
社内開発の教訓
言語仕様は枯れている⁃ 学習コストはそれほど高くなさそう
最適化関連のバグを踏むことがある⁃ デバッグビルドは品質高い• 開発中はデバッグビルドでエラー検出するのが便利
⁃ 早期から最適化オプションを使ったテストをすべき
JSX の現在と未来
Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved.
25
JSX の未来
JSX の現在と未来
Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved.
26
予定している拡張
async 対応⁃ 非同期処理を同期的に書けるように
JSX のパッケージ管理⁃ npm として公開する方向
ドキュメント強化⁃ 必要ですよね…
JSX の現在と未来
Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved.
27
まとめ
JSX の現在と未来
Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved.
28
まとめ
JSX は得失のはっきりした altJS
⁃ メリット :• 強力なエラー検出機能• 実行速度とサイズの両面における最適化
⁃ デメリット :• JavaScript で書かれた既存との接続が煩雑
プロダクションレベルの成熟度⁃ 今後も機能追加します／互換性は壊しません
新規開発案件にオススメ⁃ バインディングは今後増えて行くでしょうが⁃ 既存ライブラリへの依存が少ないとなお良い
JSX の現在と未来