JSX - 公開から1年を迎えて

6,438 views

Published on

Published in: Technology

JSX - 公開から1年を迎えて

  1. 1. JSX公開から1年を迎えて DeNA Co., Ltd. Kazuho Oku
  2. 2. 自己紹介 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
  3. 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
  4. 4. JSX とは? n DeNA でを中心に開発している altJS n JavaScript がベース n 静的型付け n クラスベースのオブジェクト指向 n 最適化コンパイラ Aug 24 2013 JSX - 公開から1年を迎えて 4
  5. 5. Aug 24 2013 JSX - 公開から1年を迎えて 5
  6. 6. 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
  7. 7. DeNA における JavaScript n JavaScript による大規模開発 n 専用内製ライブラリ/フレームワークの使用が多い n ngCore, ExGame, Post ExGame, … n スマホ上での実行が多い + 一部サーバサイド n 数万行に及ぶコードベース n 頻繁なコード変更 n ゲーム内イベント等 Aug 24 2013 JSX - 公開から1年を迎えて 7
  8. 8. 直面した問題 n 生産性と品質担保 n 実行するまでバグが見つからない n GUI やネットワークまわりはテストが難しい n 実行速度が遅い n ロード時間と使用メモリ量の増大 n スマートフォンは PC より貧弱 Aug 24 2013 JSX - 公開から1年を迎えて 8
  9. 9. 解決策 = JSX の開発 n JSX: 静的型付け必須なJavaScriptの方言 n 課題:生産性と品質担保 → コンパイル時にエラー検知 n 課題:実行速度 → JavaScriptへの変換時に最適化コンパイル n 型情報を利用したインライン展開や定数畳み込みが可能 n 課題:ロード時間と使用メモリ量 → 強力なminify n 静的型付け必須だから、プロパティの安全確実なリネームが可能 n トレードオフ n JavaScript の動的な性質を利用したライブラリと接続が煩雑に Aug 24 2013 JSX - 公開から1年を迎えて 9
  10. 10. なぜ静的型付けを必須としたのか n 型付けが Optional なら JavaScript 上位互 換なのに n 例: CoffeeScript, Google Closure Compiler n オプショナルな型付けの問題 n 型付けがないコードが混在すると、コンパイル時のエ ラーチェックが困難に n 安全な最適化やminifyができない Aug 24 2013 JSX - 公開から1年を迎えて 10
  11. 11. JSX の文法 JSX = JavaScript の式と文 + 型アノテーション + 型推論 + クラスベースのオブジェクト指向 n 単一クラス継承、複数インターフェイス継承 n メソッドのオーバーロード可能 Aug 24 2013 JSX - 公開から1年を迎えて 11
  12. 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. 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. 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. 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. 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
  17. 17. JSX の今後 n バグフィックス、最適化の改善 n 社内外のプロジェクトのサポート n node.js 対応の強化 n W3C 策定のブラウザAPIは、ほぼすべて対応済 n TypedArray とか WebGL も n async 属性 n 通常の関数同様に書かれたコードを、非同期ベース の JavaScript にコンパイル Aug 24 2013 JSX - 公開から1年を迎えて 17
  18. 18. まとめ n JSX は得失のはっきりした altJS n メリット: n 強力なエラー検出機能 n 実行速度とサイズの両面における最適化 n デメリット: n JavaScript で書かれた既存との接続が煩雑 n 既存ライブラリに依存しない新規プロジェク トにオススメ n 例: HTML 5 Canvas を使うゲームを大量に作ったり とか… Aug 24 2013 JSX - 公開から1年を迎えて 18

×