[Event]ADOBE MAX 2013 3日目メモ
3日目のメモ
（英語はGoogle先生によるほぼ直訳）
■Choosing a JavaScript Framework
ADOBE TV
http://tv.adobe.com/watch/max-2013/choosing-a-javascript-framework/
**********************************
概要
いろんなJSフレームワークを使って同じサイトをつくってみた
jQueryMobile,Backbone.js,ANgularJS,ember
それぞれの特徴をグラフ形式で比較
**********************************
最近はクライアントサイドでUI実装
サーバーサイドではやらないよ
1ページのアプリはメモリリークに気をつけてね
フレームワークがそれを助けてくれるよ。
フレームワークの特徴別の比較
jQueryMobile
Backbone.js
ANgularJS
ember
特徴別比較項目(5段階）
1)全部入り(フルスタック)か？
2)宣言型(htmlに属性）か？（反対はプログラム型（jsゴリゴリ）か）
3)機能の分離はしにくいか？
4)理解はしやすいか？
//////////////////////////////////////////
jQuery Mobile
基本的な使い方：
data-filter=”true”でul-liのフィルタリング
data-add-back-btn=”true”でバックボタンがヘッダに。
コンポーネントと切り離すのは大変
特徴別比較項目
1)フルスタック度:5
2)宣言型度:5
3)分離しにくさ:5
4)理解のしやすさ:5
//////////////////////////////////////////
Backbone.js
ディープリンクつけれるよ
AppRounterというのを使うとね
Bacbone.Router.extend
MVC実現してくれるよ
View
Backbone.View.extend
Model
Backbone.model.extend
urlRootを定義
特徴
minimalist
特徴別比較項目
1)フルスタック度:1
2)宣言型度:1
3)分離しにくさ:2
4)理解のしやすさ:5
//////////////////////////////////////////
ANgularJS
初耳：日本語の説明サイト
http://qiita.com/items/82aa9dde64826d25407d
特徴別比較項目
1)フルスタック度:3
2)宣言型度:5
3)分離しにくさ:4
4)理解のしやすさ:5
//////////////////////////////////////////
ember
初耳：参考
http://qiita.com/items/14644b9d10b7eec74ee4
htmlに埋め込む感じ？
(テンプレート型？）
特徴別比較項目
1)フルスタック度:2
2)宣言型度:2
3)分離しにくさ:4
4)理解のしやすさ:3
■Best of the Best: International Flash Games Showcase
ADOBE TV
http://tv.adobe.com/watch/max-2013/best-of-the-best-international-flash-games-showcase/
**********************************
概要
世界のFlashゲームの紹介
Flash製でガチのオンラインゲームとか
アメリカと中国すごい
**********************************
ロシア
intrusion2
http://www.intrusion2.com/
物理エンジンな2Dゲーム
BOX2D,stage3D
ドイツ
herokon-online.com
https://www.herokon-online.com/en/home
クォータビューRPG
3Dモデル？？？
フィリピン
splitman2
http://www.silvergames.com/splitman-2
バイナリーランド的な横スクロールアクション
屍を越える
フランス
Dofus
http://www.dofus.com/en
クォータービュー戦略RPG
アニメ絵
日本
legend world
http://avatar.member.jp.square-enix.com/avatar/sqex_lw_act/promotion?rk=0100eqx1000aka&PID=522979&ASID=13690
Stage3D
ameba pigg
https://pigg.ameba.jp/
箱庭
アメリカ
ChronoBlade
http://www.chronoblade.com/
Unityからのエクスポート？
天地を喰らう系
中国
Deep3D inBeta
http://117.135.163.209:808/
クォータービュー系
フル3D
diabolo3っぽい
Heaven
http://tianjie.game2.cn/
セクシークォータービュー
背景を必要なぶんだけ読み込み
GoogleMapぽい。
Gods War
http://gw.igg.com/
クォータービュー系
3Dモデル
■Browser tools for debugging and profit
ADOBE TV
(なし）
**********************************
概要
基本的なデバッグのやり方
ChromeのToolの使い方の紹介
UnitTestツールの紹介
**********************************
blogにスライドアップする予定
http://www.raymondcamden.com/
jQueryUIの場合
jsが有効
jQuery読んで、UIもよんで、UI CSSも読んで
chrome extension
javascript-error-notifier
errorception
http://errorception.com/
有料（30日無料）
chrome dev toolの使い方
networkから選んでresponseタブを選択してjsonの中身をみる
JSONPはエラーになる？
console上で修正してリロードすると値そのままでデバッグ変更？
Adobe inspectを使うとモバイルもらくちん
iOS:safari remotedebug (ios6)
Unit Testのツール
jasmine
selenium(firefox)
■JavaScript Puzzlers: Puzzles to Make You Think (and Write Fewer Bugs)
charlesbihis
**********************************
概要
JSの仕様を理解するためのひっかけクイズ
細かい仕様を理解してミスのないコーディングを。
**********************************
ライブラリなしで
パズラー
シンプルなプログラミングパズルをjsでつくる
演算子の順番
parseInt はブラウザで挙動変わるよ。FFとchrome
radixに注意（ダニ2引数）
jsのnumberは2の53乗まで。こえたら0になる？
小数点以下はIEEE754の数値罠に注意
頭5ケタを保証する？
new String(“a”)は、object型のデータ
Javaの人はやっちゃうかも？
typeチェックも考えてね。===
符号には気をつけようね
■Practical Javascript: the Future and Now
ADOBE TV
http://tv.adobe.com/watch/max-2013/practical-javascript/
**********************************
概要
ある問題に対しての解決策
Bracketsの宣伝とか
**********************************
Framework , Tool , Performance
・フレームワーク
YepNope.js
Moderniziingがいまんとこ一番速い
問題：スパゲッティ
→RequireJS
問題：Asynchronous Code(非同期）
→Promises
これ？（http://d.hatena.ne.jp/cheesepie/20111112/1321064204）
new $.Deferred()
→Chaining Avoids”pyramid of Doom”
未来：ES6 Harmony yield
未来：Better Debugging(
問題：Adhoc UI UPDATE
→TemplationgFramework MVC Framework
(Batman knockout knockback angular ember)
未来：ES5 ゲッター、セッター
問題：サーバーのエラーログミス
→EroorLogging
→パフォーマンスAPIs
・ツール
問題：いろいろ問題がある
解決：contextual snipepets
Bracket使うといいよ
解決：Type Interface
テストツール？instabug
・パフォーマンス
速度測るコード書くのがめんどくさい（new Date)
where that left us
Quantify
investigate
fix
解決：Browser Performance tool
TimeLinePanel
FPS Counter(Chrome;//flags)
未来：ScoutJS
未来：Programmatic APIs