0
JSX の現在と未来
Oct. 26 2013
DeNA Co., Ltd.
Kazuho Oku

1
Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved.
自己紹介
 名前:奥 一穂
 経歴:
⁃ モバイルウェブブラウザ Palmscape (Xiino) の開発
(1996-2003)
⁃ IPA未踏スーパークリエータ (2004)
•

「ウェブアプリケーション統合開発環境の開発」

⁃ ...
JSX の概要

JSX の現在と未来

3
Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved.
altJS とは?
 JavaScript に変換して実行される言語
 背景:
⁃ JavaScript の普及

⁃ ウェブブラウザで動くのは JavaScript だけ
•

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

⁃ ウェブブラウ...
JSX とは?
 DeNA でを中心に開発している altJS
⁃ JavaScript の言語仕様にできるだけ沿いつつ、以下
を実現

⁃ 静的型付け
⁃ クラスベースのオブジェクト指向
⁃ 最適化コンパイラ

 2012/5/31 に公...
JSX の現在と未来

6
Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved.
altJS の種類
 CoffeeScript
⁃ JavaScript と1:1対応する文法
⁃ 意味論は変更しない

 TypeScript
⁃ JavaScript の上位互換
 JSX

⁃ JavaScript の下位互換 + ...
DeNA における JavaScript
 JavaScript による大規模開発
⁃ 数万行〜10万行規模に及ぶコードベース
⁃ 開発メンバーの入れ替わりが激しい

 専用内製ライブラリ/フレームワークの使用が多い
⁃ ngCore, E...
直面した問題
 生産性と品質担保
⁃ 実行するまでバグが見つからない
⁃ GUI やネットワークまわりはテストが難しい

 実行速度が遅い
 ロード時間と使用メモリ量の増大
⁃ スマートフォンは PC より貧弱

JSX の現在と未来

...
解決策: JSX の開発
 課題: 生産性と品質担保
→ コンパイル時にエラー検知
 課題: 実行速度

→ JavaScriptへの変換時に最適化コンパイル
•

型情報を利用したインライン展開や定数畳み込み

 課題: ロード時間と使...
静的型付けで生産性と品質が向上する理由
 変数名やメソッドの存在をコンパイル時に検証できる
⁃ 全ての値は、代入するまで参照不可能
⁃ 以下のような JS でよくある現象と戦わなくていい
•

“Object foo has no metho...
なぜ静的型付けを必須としたのか
 型付けが Optional なら JavaScript 上位互換なのに
⁃ 例: CoffeeScript, Google Closure Compiler
 オプショナルな型付けの問題

⁃ 型付けがない...
JSX の文法
 できるだけ JavaScript っぽく
⁃ プログラマの多くは、新しい言語を学びたいとは思
っていない
JSX = JavaScript の式と文
+ 型アノテーション

+ 型推論
+ クラスベースのオブジェクト指向
(...
JSX のコード例(アフィン変換)
class Point {
var x : number, y : number;
function constructor(x : number, y : number) {
this.x = x;
thi...
JSX のコード例(アフィン変換)
 JSX のソースコード:
new Matrix(1, 0, 0, 0, 2, 0).transform(new Point(x, y))

 生成される JavaScript:
{x: x + 0 * ...
Performance Benchmarks
 Box2D
⁃ box2d.js を JSX に移植して fps を測定
⁃ iOS 5.0 – 12%向上

⁃ Android 2.3 – 29%向上
 AOBench
⁃

http:/...
プロファイラ
 呼出回数や総実行時間を測定
⁃ サンプリングではない
 あらゆる環境で実行可能

JSX の現在と未来

17
Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved.
Minify
 強力かつ安全な minify
⁃ プロパティ名の短縮は静的型付けが必須でない限り
不可能
Impact of Minifica on
Total

ngCore HTML5
jsx --release
jsx --releas...
JSX 公開後の進化

JSX の現在と未来

19
Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved.
JSX 公開後の進化
 セルフホスティング
⁃ JSX のコンパイラを JSX へ移植
 minify

 型推論の強化
⁃ var a = [1,2,3].map((x) -> 3 * x)
•

a の型は number[]

 オ...
バインディング/ライブラリの増加
 W3C API
⁃ ほぼ全対応
•

IDLから自動生成

 node.jsx
⁃ node.js 用のバインディングを淡々と作っていくよ
⁃ コア, mysql, memcached, needle, ...
現在の開発体制
 ゆるふわにこんな感じ?
名前

主な貢献

kazuho

リーダー, 言語仕様, コンパイラ実装

gfx

コンパイラ実装, テストフレームワーク, W3C バインディング

wasabiz

セルフホスティング, オプ...
DeNA における JSX の使用状況
 社内における普及方針
⁃ 複雑なライブラリの新規開発で JSX を使用
⁃ その後、それらを使うゲームでも JSX を使用
•

理由: 既存のゲームを JSX に移植するのは非現実的

 社内の使...
社内開発の教訓
 言語仕様は枯れている
⁃ 学習コストはそれほど高くなさそう
 最適化関連のバグを踏むことがある

⁃ デバッグビルドは品質高い
•

開発中はデバッグビルドでエラー検出するのが便利

⁃ 早期から最適化オプションを使ったテ...
JSX の未来

JSX の現在と未来

25
Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved.
予定している拡張
 async対応
⁃ 非同期処理を同期的に書けるように
 JSX のパッケージ管理

⁃ npm として公開する方向
 ドキュメント強化
⁃ 必要ですよね…

JSX の現在と未来

26
Copyright (C) 2...
まとめ

JSX の現在と未来

27
Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved.
まとめ
 JSX は得失のはっきりした altJS
⁃ メリット:
•

強力なエラー検出機能

•

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

⁃ デメリット:
•

JavaScript で書かれた既存との接続が煩雑

 プロダクションレ...
Upcoming SlideShare
Loading in...5
×

JSX の現在と未来 - Oct 26 2013

5,649

Published on

DeNA を中心に開発されているプログラミング言語 JSX の現状と今後の計画について紹介

Published in: Technology

Transcript of "JSX の現在と未来 - Oct 26 2013"

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

    Clipping is a handy way to collect important slides you want to go back to later.

×