JSX Design Overview (日本語)

7,670 views

Published on

Published in: Technology
0 Comments
22 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
7,670
On SlideShare
0
From Embeds
0
Number of Embeds
65
Actions
Shares
0
Downloads
0
Comments
0
Likes
22
Embeds 0
No embeds

No notes for slide

JSX Design Overview (日本語)

  1. 1. JSXDesign OverviewDeNA Co., Ltd. Kazuho Oku
  2. 2. 自己紹介  1997-2003 「Palmscape」「Xiino」の開発者  Palm OS用Webブラウザ (Sony, IBM, DoCoMo 等が採用)  JavaScript VMもフルスクラッチで書いていた  2004 IPA未踏「Webアプリ統合開発環境の開発」  スーパークリエータ認定  Perlのウェブブラウザ上でのデバッガ等  2005-2010 サイボウズ・ラボ  Japanize, Pathtraq – ブラウザ拡張を使うウェブサービス  Q4M – メッセージキュー (Mixi, livedoor, DeNA 等で利用)  2011- ディー・エヌ・エー  JavaScript 等、プラットフォーム技術の研究開発May 31 2012 JSX - Design Overview 2
  3. 3. JSX の目標 優れたウェブブラウザ用プログラミング 言語 JavaScript より速く ブラウザゲームは速度重要。超重要 JavaScript より開発効率が高く 特に中〜大規模開発において メンテナンスコストも重要 JavaScript より成果物の品質が向上 サービスに影響があるバグの中には JavaScript で書か れたコードが原因のものもあるMay 31 2012 JSX - Design Overview 3
  4. 4. JavaScript の問題 生産性が低い 実行しないとバグが見つからない 成果物の品質が低い 遅い メモリ食い 初動が遅いMay 31 2012 JSX - Design Overview 4
  5. 5. JavaScript の問題 = 動的な言語である点 実行時に「しか」エラーチェックできな い → 生産性と品質に悪影響 実行時に適応コンパイル → 実行速度、起動速度、メモリ消費量に悪影響 コンパイラ系の最適化技術が活用されな い JIT で可能な最適化には限界 or オーバーヘッドが存在 → 実行速度に悪影響May 31 2012 JSX - Design Overview 5
  6. 6. 解決策 独自のプログラミング言語を開発 JavaScript に静的な型機構を追加 like ActionScript 3 / EcmaScript 4 JavaScript への変換時に最適化 JavaScript より高速に!May 31 2012 JSX - Design Overview 6
  7. 7. 先行事例 いずれも一長一短 実行環境 生産性と品質 速度 (PC Web / SP Web) JavaScript ○/○ △ △ Google Web Toolkit ○/△ □ × Google Closure Compiler ○/○ △ □ Dart △/△ ○ × ActionScript 3 △/× ○ ○ JSX ○/○ ○ ○ Google Web Toolkit は JVM と JavaScript へのトランスレータの互換性に難あり。Google Closure Compiler には、生産性/品質 と速度の間にトレードオフあり(ADVANCED_OPTIMIZATIONS モードを使用するには煩雑でエラーチェックの弱い型アノテー ションを書く必要があるため)。Dart はネイティブサポートしたブラウザがないに等しく、JavaScript へのトランステータだ と実行速度低下。ActionScript 3 は要フラッシュ、スマートホンのブラウザ上で動作しない。May 31 2012 JSX - Design Overview 7
  8. 8. JSX の言語設計方針 静的型言語 できるだけ多くのエラーをコンパイル時に検出 開発効率と品質の向上につながる 式と文は JavaScript + 型指定 開発者がとっつきやすいように JS への変換におけるオーバーヘッドを最小化 デバッグ支援コードの挿入 静的なクラス構造 リンク時最適化を含むコンパイル時最適化May 31 2012 JSX - Design Overview 8
  9. 9. JSX が解決する JavaScript の問題 生産性が低い / 成果物の品質が低い → コンパイル時のエラーチェック + デバッグ支援 速度が遅い → コンパイル時最適化 メモリ食い → ??? 初動が遅い → ???May 31 2012 JSX - Design Overview 9
  10. 10. JavaScript との連携 JS のオブジェクトは JSX 内ではキャストし て使用 (js.global["alert"] as function (:string):void)("hello"); JS から JSX を呼び出すには require  JSX.require("foo.jsx")._Main.run$();May 31 2012 JSX - Design Overview 10
  11. 11. 最適化 JavaScript より遅くはならない 理由: 式と文が1対1対応だから 型情報を使ったインライン展開を実装 中〜大規模開発でプロジェクトで特に有効 Google Closure Compiler では不可能な展開も実現 型アノテーションつきの JavaScript を出 力 Closure Compiler で更に最適化可能 つまり JSX で書くだけで Closure CompilerMay 31 2012 (ADVANCED_OPTIMIZATIONS) 以上の高速化 JSX - Design Overview 11
  12. 12. 最適化の実装状況 数種類のテストプログラムで JavaScript より高速なことを確認 大域最適化から優先して実装中 インライン展開 既に Google Closure Compiler より優秀? 定数畳み込み リンク時最適化 コードの可読性が下がらない最適化はあとまわし 例: loop-invariant code motion, CSEMay 31 2012 JSX - Design Overview 12

×