JavaScript

Hell on Earth

あるいは上昇する意識の中、内宇宙に生じた衝動

mizchi / Aiming Inc.

＠若手の会

@ainame

「どうせだし話すか」

@mizchi

「俺も俺も〜！〜」

……

先輩達の圧力に負けない

強い心を持たねばこの先生きのこれない

大事なのは間合い、そして退かぬ心

自己紹介

{
  "HN"    : "mizchi",
  "name"  : "竹馬 光太郎",
  "age"   : 24,
  "at"    : "Aiming Inc 2012~",
  "job"   : [
     "Web Engineer",
     "Game Client Developer"
  ],
  "lang"  : ["node", "javascript", "python", "ruby", "C#"],
  "env"   : ["HTML5", "Unity3d", "Flash"], 
  "blog"  : "http://d.hatena.ne.jp/mizchi",
  "github": "https://github.com/mizchi"
}

よく燃えるブログ

運用でカバー

Web Engineer & Game Client Developer

エンジニア一年目の思い出

• 社内用KPI ツール作成 :  Haskell / Clojure / MongoDB
• Lord of Knights(iOS) を Unity3d から HTML5移植
• そのままUnity3dチームにjoin
  
• 今は Adobe Air スマホ向けレンダリング最適化(Flash/Native)

他

• WebDB Press vol.71  WebSocket特集   執筆(共著@Jxck_)
• Cross2013 大規模JS開発徹底比較 パネラー
  

前置き終わり

(どうせ読み流してるから、続きはウェブで)

今日は

顕現しつつある地獄の話

JavaScript

ってあるじゃないですか

アレ、

最近辛いらしいんですよ

最近のJSがやること

• サーバーサイド / Node.js
• 2d or 3d アニメーション Canvas / WebGL
• MVCアーキテクチャ / MVC2
• 並列処理 / Web Worker
• 音声処理 / Web Audio API
  
• etc...

LowLevelなタスクの増加

え、これ今までのJSerがやんの？？？？

最近のJSerが考えること

• JS/DOMツリーのCPUコスト

• CSS3/CanvasのGPUコスト

• ネットワークIO

並び替えるとはやい！！！！！！

「え、JSって

マウス周辺に雪降らせたり

するやつでしょ」

(そんな時代もあった)

そんな生ぬるい時代は終わった

HTML5に至るものは

(旧時代のJSが通用するという) 一切の希望を捨てよ

原因

その1. 

JavaScriptの高速化 + 高機能化

• シングルページアプリケーションで複雑な操作が可能に
• V8はなんか異常に速い(とくにJITが効くケース)
• HTML5 API で（MSのなんかを除けば）いろんなことができる
• MSのなんかはどうにかしてほしい

その2.

HTML5 History API

PushState / PopState / ReplaceState

• リフレッシュなしのURL遷移
  
• Githubのアレ
• JSオブジェクトを破棄しない
• もう初期化コスト気にしなくていいんですか！

その3.

クロスプラットフォーム

• iOSでもAndroidでもUI レイヤーを抽象化したい
• 綺麗にMVC分けてれば 同じJSでいけるんでしょ？

その4.

Node.js 資産

• Node.jsのコミュニティが大きくなった
• クライアント側へのフィードバックが起きた
• 主にRuby系ライブラリの移植や発想の借用
• AltJS
  

結果

アーキテクチャの複雑化

今日はその一例の話

jQueryの破綻

• サーバーサイドMVCの直輸入 => 破綻
• 新しいデザパタがいるよね、規約足りないよね…

クライアントサイドMVC

• Backbone

• Ember

• Angular

• etc...

DOM操作の抽象化

• イベントディスパッチャー

• モデル・コレクション

• ビューモデル

• ルーティング

個人的な懸念点

「現在のMVCアーキテクチャは

あまりにもサーバーサイド的な発想が多いのではないか？」

たとえば  =>  大域テンプレーティング

• 文字列 => DOMに変換するコストが本番

• でかいHTMLを書くな死にたいのか

CSSのGPU > DOM生成 > テンプレーティング

例: Unixtimeを吐く60FPSのタイマー

<script type="text/mustache" id='timer'>
  <div>
    <div>
      <div>
         <span id='unixtime'>{unixtime}</span>
      </div>
    </div>
  </div>
</script>

<script>
setInterval(function(){
  $("#content").html(Mustache.render($('#timer').text(),  {unixtime:Date.now()}));
}, 1000/60);
</script> 

たった１つの値を書き換えるためだけに

毎秒全部のDOMを再構築する？

高速化

<!-- 固定な部分はすべて初期化しておく -->
<div id="content">
  <div>
    <div>
      <div>
         <span id='unixtime'></span>
      </div>
    </div>
  </div>
</div>

<script>
var unixtime_span = document.querySelector('#unixtime'); // HTMLElementのキャッシュ
setInterval(function(){
  unixtime_span.innerHTML = Date.now(); 
}, 1000/60);
</script> 

spanのHTMLElementキャッシュに対する最小限の操作なので高速

(たぶん100倍以上速い)

なにが問題か

• テンプレートは１つではない

• ループは１つではない

• 状態はURLで一意に決まらない

• スレッドは１つしかない

解決策

• 個別チューニングという地獄
  
• 高速な抽象DOMラッパーつくる(ここに夢が残されてる)
  

そもそも、そこまでシビアな世界あるの？

• スマホは貧弱
• 20msでも遅延するとUXに影響を与える
  
• モバイルでも30FPS出したい => GPU負荷をみる必要 => 地獄の顕現
  

ゲームエンジニアなので

60FPS出したいですね

大域テンプレーティングはあくまで一つの例

互換性地獄は言わずもがな、クライアントには色んな地獄がある

JSerが直接OpenGLシェーダを触る日も近い

• 端末ごとに異なるAndroid描画系
• クロスプラットフォーム下でのフィンガージェスチェアの取得
• require.js, commonjs
  
• クロージャによるメモリリークと正しいDOMの破棄
  
• 型付きAltJSの既存型に対する型定義(TypeScript, HaXe, JSX)
• AltJSのアセット管理長大化 (grunt)
• Railsのような巨大なBoilerplate (yeoman)
  
• Node.jsのC++拡張
• クラサバ間ロジック共有(Browserify)
  
• WebSocket & WebRTC P2P の 抽象化 (Socket.IO, PeerJS)
  
• WebGLオーサリングツールの不在
• Meteor & Derby のIsomorphic系フレームワーク
  

暇な時間に取り組んでみよう！

おわり