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開発徹底比較 パネラー
前置き終わり
(どうせ読み流してるから、続きはウェブで)
今日は
顕現しつつある地獄の話
最近の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の破綻
DOMとはViewであり、Viewはグローバルな状態を持つ
DOMの直接参照 = > スパゲティ化 => 確実な死
HTMLはXMLデータベースとして捉えると死ぬ
- サーバーサイド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>
たった1つの値を書き換えるためだけに
毎秒全部の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倍以上速い)
しかし意味的な可読性が損なわれる
なにが問題か
テンプレートは1つではない
ループは1つではない
状態はURLで一意に決まらない
スレッドは1つしかない
解決策
- 個別チューニングという地獄
- 高速な抽象DOMラッパーつくる(ここに夢が残されてる)
そもそも、そこまでシビアな世界あるの?
- スマホは貧弱
- 20msでも遅延するとUXに影響を与える
- モバイルでも30FPS出したい => GPU負荷をみる必要 =>
地獄の顕現
大域テンプレーティングはあくまで一つの例
互換性地獄は言わずもがな、クライアントには色んな地獄がある
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系フレームワーク