BROOKのよもやま話
Dev LT vol. 9 daichi.hiroki
読み方
 ぶるーく
 ブルック
意味
・・・ではなくて
Brook : 古英語で
「大地を割って進むもの」=> 澤
という意味。
誕生
 今年の初め。そろそろ1年。
特徴
 promise -> channel -> model
 非同期をモジュラにするパーツ
 brook.view.template
 妙に速いtemplate engine
 brook.widget
 markupとcont...
モチベーション
これからページ遷移はどんどん無くなるぞ
JSの寿命もどんどん長くなる
非同期処理をきれいにモジュール化する
必要があるぞ
ところで、非同期イベントとは
時間軸:t
fire fire fire
Event, t1 Event, t2 Event, t3 …..
t1 t2 t3
あれ、だんだんと リスト に見えてきませんか。
リストなら
要素一つ一つについて、処理の流れを書く
eventList
.filter(isClickEvent) // リストへの処理は
.map(eventToObject) // モジュラにできる
.forEach(function(e)...
リスト処理
List Filter Mapper
リストの要素を変換するパーツ
function (element){
return element.toString();
};
関数は入力に対して、同期に出力する。
入力
出力
非同期に要素を変換するパーツ
function(element,callback){
setTimeout(function(){
callback(element.toString());
},1000);
};
returnの代わりにcal...
同期パーツの結合
 P1,P2,P3が変換パーツとして、
関数なら、順番に適応すればいいので
合成を定義すればいい
(P1 * P2 * P3)(x) := P3(P2(P1( element )))
function *(p1,p2){
r...
非同期パーツを組み合わせ可能に
var p1 =
ns.brook.promise(function(element,callback){
setTimeout(function(){
callback(element.toString());...
非同期パーツの結合
 promise#bindをつかう
 P1,P2,P3が非同期のパーツ
P1.bind(P2).bind(P3);
非同期なパーツの例
クリック発生
ローディング状態
にする
RPC呼び出しして
レスポンスを返す
レスポンスから表示をつくる
表示からイベント待機
イベ
ント
非同期なパーツの例
domEvent(element,’click’)).observe(
$loading // ローディング状態
.bind( $callRPC) // RPC呼び出し
.bind( $renderView ) // 表示
...
非同期なパーツ2
イベ
ント
非同期なパーツの例2
domEvent(element,’click’)).observe(
$friendSelection.bind( $renderView )
);
var $friendSelection = ns.promise
....
まとめ
 非同期の世界は、無限に連なるイベント
リストの世界。
 brook.promiseは、非同期の世界の関数。
 非同期の世界の関数はbindで合成できる
 いかなる粒度でもパーツ化できる。
Upcoming SlideShare
Loading in …5
×

Brookよもやま話

2,581 views

Published on

非同期の世界の入出力を合成して、非同期を支配する。

0 Comments
11 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,581
On SlideShare
0
From Embeds
0
Number of Embeds
50
Actions
Shares
0
Downloads
3
Comments
0
Likes
11
Embeds 0
No embeds

No notes for slide

Brookよもやま話

  1. 1. BROOKのよもやま話 Dev LT vol. 9 daichi.hiroki
  2. 2. 読み方  ぶるーく  ブルック
  3. 3. 意味 ・・・ではなくて Brook : 古英語で 「大地を割って進むもの」=> 澤 という意味。
  4. 4. 誕生  今年の初め。そろそろ1年。
  5. 5. 特徴  promise -> channel -> model  非同期をモジュラにするパーツ  brook.view.template  妙に速いtemplate engine  brook.widget  markupとcontrollerを疎につなぐ仕組み
  6. 6. モチベーション これからページ遷移はどんどん無くなるぞ JSの寿命もどんどん長くなる 非同期処理をきれいにモジュール化する 必要があるぞ
  7. 7. ところで、非同期イベントとは 時間軸:t fire fire fire Event, t1 Event, t2 Event, t3 ….. t1 t2 t3 あれ、だんだんと リスト に見えてきませんか。
  8. 8. リストなら 要素一つ一つについて、処理の流れを書く eventList .filter(isClickEvent) // リストへの処理は .map(eventToObject) // モジュラにできる .forEach(function(e){ // do stuff }) Event, t1 Event, t2 Event, t3 …..
  9. 9. リスト処理 List Filter Mapper
  10. 10. リストの要素を変換するパーツ function (element){ return element.toString(); }; 関数は入力に対して、同期に出力する。 入力 出力
  11. 11. 非同期に要素を変換するパーツ function(element,callback){ setTimeout(function(){ callback(element.toString()); },1000); }; returnの代わりにcallbackを呼ぶことで、 出力を非同期に発生させられる。 入力 出力
  12. 12. 同期パーツの結合  P1,P2,P3が変換パーツとして、 関数なら、順番に適応すればいいので 合成を定義すればいい (P1 * P2 * P3)(x) := P3(P2(P1( element ))) function *(p1,p2){ return function(x){ return p2(p1(x)); } }
  13. 13. 非同期パーツを組み合わせ可能に var p1 = ns.brook.promise(function(element,callback){ setTimeout(function(){ callback(element.toString()); },1000); });
  14. 14. 非同期パーツの結合  promise#bindをつかう  P1,P2,P3が非同期のパーツ P1.bind(P2).bind(P3);
  15. 15. 非同期なパーツの例 クリック発生 ローディング状態 にする RPC呼び出しして レスポンスを返す レスポンスから表示をつくる 表示からイベント待機 イベ ント
  16. 16. 非同期なパーツの例 domEvent(element,’click’)).observe( $loading // ローディング状態 .bind( $callRPC) // RPC呼び出し .bind( $renderView ) // 表示 );
  17. 17. 非同期なパーツ2 イベ ント
  18. 18. 非同期なパーツの例2 domEvent(element,’click’)).observe( $friendSelection.bind( $renderView ) ); var $friendSelection = ns.promise .bind( $openSlideWindow ) .bind( $getFriendList ) .bind( $renderSelectior );
  19. 19. まとめ  非同期の世界は、無限に連なるイベント リストの世界。  brook.promiseは、非同期の世界の関数。  非同期の世界の関数はbindで合成できる  いかなる粒度でもパーツ化できる。

×