Your SlideShare is downloading. ×

JSX

4,813

Published on

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

No Downloads
Views
Total Views
4,813
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
5
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. JSXa faster, safer, easier JavaScript DeNA Co., Ltd. Kazuho Oku
  • 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 等、プラットフォーム技術の研究開発Aug 4 2012 JSX - a faster, easier, safer JavaScript 2
  • 3. JavaScriptの問題 遅い 特にスマホ向けのゲームを作っていると デバッグに時間がかかる 例: プロパティ名の間違い 読みにくい さまざまな「クラス」実装や「華麗な」コーディ ングテクニックAug 4 2012 JSX - a faster, easier, safer JavaScript 3
  • 4. 解決策 独自のプログラミング言語を開発 JavaScript に静的な型機構を追加 like ActionScript 3 / EcmaScript 4 JavaScript への変換時に最適化 JavaScript より高速に!Aug 4 2012 JSX - a faster, easier, safer JavaScript 4
  • 5. JSX とは? JavaScript より速く、開発効率が高く、成 果物の品質が高いプログラミング言語 あくまでも目標です!Aug 4 2012 JSX - a faster, easier, safer JavaScript 5
  • 6. JSX の言語設計方針 静的型言語 できるだけ多くのエラーをコンパイル時に検出 開発効率と品質の向上につながる 式と文は JavaScript + 型指定 開発者がとっつきやすいように JS への変換におけるオーバーヘッドを最小化 デバッグ支援コードの挿入 静的なクラス構造 リンク時最適化を含むコンパイル時最適化Aug 4 2012 JSX - a faster, easier, safer JavaScript 6
  • 7. なぜ新言語なのか? ActionScript 3 ウェブブラウザで動かない JavaScript へ変換できなくはないがオーバーヘッドが 発生 型がオプショナル Dart JavaScript へ変換するオーバーヘッドが発生 型がオプショナル Coffeescript 静的型でなく、大規模むけでないAug 4 2012 JSX - a faster, easier, safer JavaScript 7
  • 8. JSX の最適化 const-folding, inline-expansion, unboxing, … Box2D ベンチマーク box2d.js を JSX にポーティングして fps を測定 iOS 5.0 - 12%向上 Android 2.3 – 29%向上Aug 4 2012 JSX - a faster, easier, safer JavaScript 8
  • 9. JSX の最適化例: アフィン変換 ソースコード: new Matrix(1, 0, 0, 0, 2, 0).transform(new Point(x, y)) コンパイル結果: {x: x + 0 * y, y: 0 * x + 2 * y} 注: 0 * n は isNaN(n) ? NaN : 0 と等価のため畳み込めないAug 4 2012 JSX - a faster, easier, safer JavaScript 9
  • 10. Hello world! class _Main { static function main(args : string[]) : void { log "Hello world!"; } }Aug 4 2012 JSX - a faster, easier, safer JavaScript 10
  • 11. 冗長?Aug 4 2012 JSX - a faster, easier, safer JavaScript 11
  • 12. 「リーダブルコード」より 「コードは理解しやすくなければならな い」Aug 4 2012 JSX - a faster, easier, safer JavaScript 12
  • 13. 開発効率と規模の関係 大規模なコードを書くのは大変 1,000行のプログラム – 1日 10,000行のプログラム – 10日? 100,000行のプログラム – 100日?? 重要性: キータッチの少なさ < 読みやす さ 8時間で1,000行*30桁コーディングしたとして も、約60文字/分Aug 4 2012 JSX - a faster, easier, safer JavaScript 13
  • 14. 書きやすさと読みやすさの両立 エディタによる補完 わかりやすい変数名 補完候補と、その機能の概要が表示されること 「class」を省略できるよりも、補完が効きまくる ほうがうれしい そのためにも、構造化された文書化仕様 を /** * description * @param a …Aug 4 2012 JSX - a faster, easier, safer JavaScript 14
  • 15. そもそも… プログラミング言語は開発環境の一部Aug 4 2012 JSX - a faster, easier, safer JavaScript 15
  • 16. 開発環境に必要な機能 コード編集とリーディングの支援  jsx --complete  jsx --mode doc (kazuho/jsxdoc branch) テストフレームワーク  jsx --test ソースコードデバッグ  jsx --enable-source-map プロファイラ  jsx --profileAug 4 2012 JSX - a faster, easier, safer JavaScript 16
  • 17. 開発環境に必要な機能 ライブラリサポート 考え中… だって(まだ)ライブラリないし… むしろライブラリ書いてくれる人募集中です!Aug 4 2012 JSX - a faster, easier, safer JavaScript 17
  • 18. まとめ JSX は、より速く、より簡単で、より安 全な JavaScript の方言 開発環境の一部として言語を設計・実装 人柱^H^Hユーザー募集中ですAug 4 2012 JSX - a faster, easier, safer JavaScript 18

×