jsx - 公開から１年を迎えて

JSX 公開から１年を迎えて

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 - 公開から１年を迎えて 2

altJS とは?

n JavaScript に変換して実行される言語

n 背景: JavaScript の普及 n ウェブブラウザで動くのは JavaScript だけ

n ベンダー間の競争の結果、実行速度が高速に

n ウェブブラウザ以外でも JavaScript を使うように

n サーバサイド: node.js n クライアントサイド: Titanium, PhoneGap, ngCore, …

n 適用範囲が拡大した結果、不満が噴出…


JSX とは?

n DeNA でを中心に開発している altJS n JavaScript がベース

n 静的型付け

n クラスベースのオブジェクト指向

n 最適化コンパイラ


altJS の種類

n CoffeeScript n JavaScript と1:1対応する文法

n TypeScript, Dart, … n JavaScript の上位互換

n JSX n JavaScript の下位互換 + 独自拡張

n Java Web Toolkit, Haxe, Emscripten, … n 既存のプログラミング言語を JavaScript に変換


DeNA における JavaScript

n JavaScript による大規模開発 n 専用内製ライブラリ／フレームワークの使用が多い

n ngCore, ExGame, Post ExGame, … n スマホ上での実行が多い + 一部サーバサイド

n 数万行に及ぶコードベース

n 頻繁なコード変更 n ゲーム内イベント等


直面した問題

n 生産性と品質担保 n 実行するまでバグが見つからない

n GUI やネットワークまわりはテストが難しい

n 実行速度が遅い

n ロード時間と使用メモリ量の増大 n スマートフォンは PC より貧弱


解決策 = JSX の開発

n JSX：静的型付け必須なJavaScriptの方言 n 課題：生産性と品質担保

→ コンパイル時にエラー検知

n 課題：実行速度

→ JavaScriptへの変換時に最適化コンパイル n 型情報を利用したインライン展開や定数畳み込みが可能

n 課題：ロード時間と使用メモリ量

→ 強力なminify n 静的型付け必須だから、プロパティの安全確実なリネームが可能

n トレードオフ n JavaScript の動的な性質を利用したライブラリと接続が煩雑に


なぜ静的型付けを必須としたのか

n 型付けが Optional なら JavaScript 上位互換なのに n 例: CoffeeScript, Google Closure Compiler

n オプショナルな型付けの問題 n 型付けがないコードが混在すると、コンパイル時のエ

ラーチェックが困難に

n 安全な最適化やminifyができない


JSX の文法

JSX = JavaScript の式と文 + 型アノテーション

+ 型推論

+ クラスベースのオブジェクト指向 n 単一クラス継承、複数インターフェイス継承

n メソッドのオーバーロード可能


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); }}


最適化コンパイル例 – アフィン変換

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


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 - 公開から１年を迎えて

0 0.5 1 1.5 2

JavaScript

JSX

TypeScript

Haxe

処理速度

iOS

Android

14

Minify

Aug 24 2013 JSX - 公開から１年を迎えて

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 属性、バインディングのインライン定義


JSX の今後

n バグフィックス、最適化の改善 n 社内外のプロジェクトのサポート

n node.js 対応の強化 n W3C 策定のブラウザAPIは、ほぼすべて対応済

n TypedArray とか WebGL も

n async 属性 n 通常の関数同様に書かれたコードを、非同期ベース

の JavaScript にコンパイル


まとめ

n JSX は得失のはっきりした altJS n メリット:

n 強力なエラー検出機能

n 実行速度とサイズの両面における最適化

n デメリット: n JavaScript で書かれた既存との接続が煩雑

n 既存ライブラリに依存しない新規プロジェクトにオススメ n 例: HTML 5 Canvas を使うゲームを大量に作ったり

とか… Aug 24 2013 JSX - 公開から１年を迎えて 18

jsx - 公開から１年を迎えて

Technology