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

ADOBE TV
http://tv.adobe.com/watch/max-2013/javascript-puzzlers-puzzles-to-make-you-think-and-write-fewer-bugs/

**********************************
概要
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