• Save
JSX
Upcoming SlideShare
Loading in...5
×
 

JSX

on

  • 5,098 views

 

Statistics

Views

Total Views
5,098
Views on SlideShare
5,007
Embed Views
91

Actions

Likes
5
Downloads
0
Comments
0

7 Embeds 91

https://si0.twimg.com 33
https://twitter.com 26
https://twimg0-a.akamaihd.net 22
http://us-w1.rockmelt.com 3
http://nuevospowerpoints.blogspot.com 3
http://tweetedtimes.com 2
http://nuevospowerpoints.blogspot.com.au 2
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

JSX JSX Presentation Transcript

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