JavaScript 実践講座 Framework, Tool, Performance

JavaScript 実践講座
Framework, Tool, Performance
taiga.jp
Taiga Hirohata

About
Freelance engineer
(Flash, Flex, AIR, JavaScript etc)
Principle Classmethod, Inc.
Adobe Community Professional
http://taiga.jp/
@taiga
© 2013 taiga.jp 2 / 54

Practical JavaScript
http://tv.adobe.com/watch/max-
2013/practical-javascript/
Original
© 2013 taiga.jp 3 / 54

Agenda
Framework
Tools
Performance
© 2013 taiga.jp 4 / 54

当セッションにおける要素
問題解決策将来
© 2013 taiga.jp 5 / 54

Frameworks
© 2013 taiga.jp 6 / 54

ブラウザ対応
一貫性のないブラウザ API
Ex : 9 以前の IE は attachEvent()
9 以降は addEventListener() を使用
ブラウザ機能の矛盾
Ex : <input type="data">
© 2013 taiga.jp 7 / 54

JavaScript Libraries
Utility
jQuery(event listeners, XHR, etc.)
http://api.jquery.com/category/events/
http://api.jquery.com/Types/#jqXHR
Underscore(collections, etc)
http://underscorejs.org/#collections
© 2013 taiga.jp 8 / 54

Polyfills
古いブラウザでもモダンブラウザと同等の機能を提供
html5shiv / html5shim
selectivizr
es5-shim
Mozilla Developer Network samples
© 2013 taiga.jp 9 / 54

Feature detection
特徴検出
Moderinizr
http://modernizr.com/
YepNope
http://yepnopejs.com/
© 2013 taiga.jp 10 / 54

Ease of library use
Library bundles (HTML5 Boilerplate)
Package managers (Bower)
Scaffolding generators (Yeoman)
© 2013 taiga.jp 11 / 54

非常に積極的にリリースされている
これまで以上に速く近代化している
今まで以上に標準に従っていく
ブラウザの改善
© 2013 taiga.jp 12 / 54

http://www.w3counter.com/trends
ブラウザの改善
© 2013 taiga.jp 13 / 54

 依存関係分かりますか？
 本当にすべてのファイル使ってますか？
 これらは正しい順序でロードされていますか？
<script src="script3.js"></script>
…
依存関係、スパゲッティ
© 2013 taiga.jp 14 / 54

http://requirejs.org/
Module Pattern
RequireJS Pattern
RequireJS
© 2013 taiga.jp 15 / 54

Logger.js
RequireJS
define(...) {
...
function print(msg) {
console.log(msg);
}
// Define public API
exports.print = priint;
});
define(function(require, exports, module) {
var Logger = require("pkg/Logger");
function sayHelloWorld() {
Logger.print("Hello, world!");
}
exports.sayHelloWorld = sayHelloWorld;
});
© 2013 taiga.jp 16 / 54

Modules in ES6 Harmony
module "foo" {
import "pkgLogger" as Logger;
function sayHelloWorld() {
Logger.print("Hello, world!");
}
export sayHelloWorld;
}
© 2013 taiga.jp 17 / 54

非同期プログラムは難しい
コールバックは悪くない
…が改善の余地がある
非同期コード
© 2013 taiga.jp 18 / 54

非同期処理完了のリスニング
リスナーにはオブジェクトが返される
Promises
var options = … ;
var promise = beginSomeAsyncOperation(options);
promise.done(function(result) {
console.log("Operation finishes with result:" + result); });
promise.fail(function(errorCode) {
console.log("Operation failed. Error:" + errorCode); });
© 2013 taiga.jp 19 / 54

内部的に、非同期 API は処理完了後に
遅延オブジェクトを生成して返します
Promises
function beginSomeAsyncOperation(options) {
var result = new $.Deffered();
sendNetworkRequest( function(response) {
if(response.error)
result.reject(response.error);
else
result.resolve(response.data);
});
return result.promise(); //req still pending here
}
© 2013 taiga.jp 20 / 54

「ピラミッド」を回避
Callbacks
authenticate(userName, password,
fucntion () {
findRecord(itemId,...
function(item) {
applyUpdates(item);
saveRecord(item,
function (result) {
indicateSucess();
}
);
}
);
}
);
Promise chaining
authenticate(userName, password)
.then( function() {
return findRecord(itemId);
})
.then( function(item) {
applyUpdates(item);
return saveRecord(item);
})
.then( function(result) {
indicateSucess();
});
© 2013 taiga.jp 21 / 54

ES6 Harmony "yield"
Promise chaining
authenticate(userName, password)
.then( function() {
return findRecord(itemId);
})
.then( function(item) {
applyUpdates(item);
return saveRecord(item);
})
.then( function(result) {
indicateSucess();
});
ES6 "yield" + task.js
spawn(function() {
yield authenticate(userName, password);
var item = yield findRecord(itemId);
applyUpdates(item);
var result = yield saveRecord(item);
indicateSucess();
});
© 2013 taiga.jp 22 / 54

将来は非同期実行のフローを
ツールが理解して教えてくれる…はず
より良いデバッギング
© 2013 taiga.jp 23 / 54

手作業によるスパゲッティ化
限定的な UI 更新
$("project-title").text(filename);
$(".dialog .validation-error").toggle(isError);
$(".modal-overlay ul.songs li:eq(" + i + ")").addClass("selected");
dialog.appendChild(document.createElement("div"));
dialog.firstCihld.innerHTML = "<input type='text' value='"
+ htmlEscape(imte.name) + "'>";
$("#help-sidebar .main-content").html(newContent);
© 2013 taiga.jp 24 / 54

View
Underscore
Mustache
Handlebars
Templating & MVC F/W
© 2013 taiga.jp 25 / 54

Model
Backbone
© 2013 taiga.jp 26 / 54

Controller
Knockout
Batman
Ember
Angular
Knockback
© 2013 taiga.jp 27 / 54

JavaScript F/W Popularity
© 2013 taiga.jp
from GitHub Archive
28 / 54

プレーンなモデルの使用
Ember, Backbone
name = model.get("songName");
model.set("rating", 5);
ES5 Getters/Setters
© 2013 taiga.jp 29 / 54

Knockout
name = model.songName();
model.rating(5);
ES5 Getters/Setters
© 2013 taiga.jp 30 / 54

Serenade
name = model.songName;
model.rating = 5;
ES5 Getters/Setters
© 2013 taiga.jp 31 / 54

Web1.0 アプリは常に C/S 往復
サーバ上のクラッシュ
サーバ上の遅延
モダンアプリはクライアント処理が主流
どのようにクライアント端末上の
クラッシュや遅延を知ればよい？
サーバログ
© 2013 taiga.jp 32 / 54

Open bugs in …
WebKit
Chrome
Firefox
フルスタックトレース…？
© 2013 taiga.jp 34 / 54

<html>
<head>
<script>
function onLoad() {
var now = Date.now();
var pageLoadTime = now - pertformance.timing.natigationStart;
sendToServer(pageLoadTime);
}
</script>
</head>
<body onload="onLoad()">
...
Performance APIs
© 2013 taiga.jp 35 / 54

Tools
© 2013 taiga.jp 36 / 54

(![]+[])[+[]]+(![]+[])[+!+[]]+([![]]+[][[]])
[+!+[]+[+[]]]+(![]+[])[+!+[]+!+[]]
シートベルトなし運転
© 2013 taiga.jp 37 / 54

統合解析 / Linting
ex :
Brackets Continuous Compilation extension
https://github.com/JoachimK/brackets-
continuous-compilation
© 2013 taiga.jp 40 / 54

var start = Date.now();
//... Do do stuff ...
var end = Date.now();
console.log((end - start) + "ms");
//CSS style calculation
//Layout
//Repaint
//User sees update->Date.now()==???
評価が難しい
© 2013 taiga.jp 49 / 54

Resource Timing
ページ上の各リソース読み込みタイミング
Async Scroll
スクロールのパフォーマンスをテストする
Display Performance
フレームレート関連 API
Programmatic APIs
© 2013 taiga.jp 54 / 54

JavaScript 実践講座 Framework, Tool, Performance

Recommended

Recommended

More Related Content

What's hot

What's hot (15)

Viewers also liked

Viewers also liked (20)

Similar to JavaScript 実践講座 Framework, Tool, Performance

Similar to JavaScript 実践講座 Framework, Tool, Performance (20)

More from クラスメソッド株式会社

More from クラスメソッド株式会社 (12)

Recently uploaded

Recently uploaded (8)

JavaScript 実践講座 Framework, Tool, Performance

Editor's Notes