Download as PDF, PPTX
![callbackで継続
function (callback) {
get(anchor.href, callback);
},
function (callback, html) {
var m = html.match(PATTERN);
if (m) {
callback(m[0]);
}
},
function (callback, uri) {
get(uri, callback);
},
function (callback, js) {
var images = eval(js);
images.forEach(function (image) {
li.appendChild(createImage(image));
});
}
13年12月3日火曜日](https://image.slidesharecdn.com/ca-js-131203083858-phpapp01/75/Bitter-Sweet-Javascript-36-2048.jpg)
![callbackで継続
function (callback) {
get(anchor.href, callback);
},
function (callback, html) {
var m = html.match(PATTERN);
if (m) {
callback(m[0]);
}
},
function (callback, uri) {
get(uri, callback);
},
function (callback, js) {
var images = eval(js);
images.forEach(function (image) {
li.appendChild(createImage(image));
});
}
13年12月3日火曜日](https://image.slidesharecdn.com/ca-js-131203083858-phpapp01/75/Bitter-Sweet-Javascript-37-2048.jpg)
![callbackで継続
function (callback) {
get(anchor.href, callback);
},
function (callback, html) {
var m = html.match(PATTERN);
if (m) {
callback(m[0]);
}
},
function (callback, uri) {
get(uri, callback);
},
function (callback, js) {
var images = eval(js);
images.forEach(function (image) {
li.appendChild(createImage(image));
});
}
13年12月3日火曜日](https://image.slidesharecdn.com/ca-js-131203083858-phpapp01/75/Bitter-Sweet-Javascript-38-2048.jpg)
![callbackで継続
function (callback) {
get(anchor.href, callback);
},
function (callback, html) {
var m = html.match(PATTERN);
if (m) {
callback(m[0]);
}
},
function (callback, uri) {
get(uri, callback);
},
function (callback, js) {
var images = eval(js);
images.forEach(function (image) {
li.appendChild(createImage(image));
});
}
13年12月3日火曜日](https://image.slidesharecdn.com/ca-js-131203083858-phpapp01/75/Bitter-Sweet-Javascript-39-2048.jpg)
Bitter Sweet Javascript
- 1.
- 2. about me. たんぽぽT /JavaScript委員会 08年度入社 @hiroki_daichi 13年12月3日火曜日
- 3. what i amnot talking about: mobile webkit特有の話はしません。 html5の話もしません。 jQuery/prototypeの話もしません。 ソーシャルな話もしません。 coffee scriptの話もしません。 13年12月3日火曜日
- 4. talking about shibui.js javascriptのnamespaceの話 javascriptのwebappを作る為のコアの話 オシャレじゃないjavascriptの世界 渋いハードボイルドを目指す。 13年12月3日火曜日
- 5.
- 6. brook.js 非同期パーツ群 (promise)を組み合わせ る monad ! モナド!monad! MVC / Resource Driven Widget / Channel 13年12月3日火曜日
- 7.
- 8.
- 9.
- 10.
- 11.
- 12. 依存関係を動的に解決 namespace N1 namespace A namespaceN2 namespace N3 namespace B namespace N4 namespace C namespace N5 namespace D namespace N6 13年12月3日火曜日
- 13. 依存関係を動的に解決 namespace N1 namespace A namespaceN2 namespace N3 namespace B namespace N4 namespace C namespace N5 namespace D namespace N6 13年12月3日火曜日
- 14. 依存関係を動的に解決 namespace N1 namespace A namespaceN2 namespace N3 namespace B namespace N4 namespace C namespace N5 namespace D namespace N6 13年12月3日火曜日
- 15. 依存関係を動的に解決 namespace N1 namespace A namespaceN2 namespace N3 namespace B namespace N4 namespace C namespace N5 namespace D namespace N6 13年12月3日火曜日
- 16. 依存関係を動的に解決 namespace N1 namespace A namespaceN2 namespace N3 namespace B namespace N4 namespace C namespace N5 namespace D namespace N6 13年12月3日火曜日
- 17. 依存関係を動的に解決 namespace N1 namespace A namespaceN2 namespace N3 namespace B namespace N4 namespace C namespace N5 namespace D namespace N6 13年12月3日火曜日 # Makefile N2 : N1 N5 : N4 N6 : N1 A : N2 B : N3 N4 C : N5 D : N6
- 18. 依存関係を動的に解決 namespace N1 namespace A namespaceN2 namespace N3 namespace B namespace N4 namespace C namespace N5 namespace D namespace N6 13年12月3日火曜日 # Makefile N2 : N1 N5 : N4 N6 : N1 A : N2 B : N3 N4 C : N5 D : N6
- 19. 結合/読込順序に非依存 • 必要になるときに初めて評価されるので 結合/読込順序に依存しない よくある実装 namespace N1 namespace N2 namespaceA 13年12月3日火曜日 o x namespace A namespace N1 namespace N2 Namespace.js namespace N1 namespace N2 namespace A o o namespace A namespace N1 namespace N2
- 20.
- 21. 省エネもできる • 必要とされるまで定義の中身は実行されない • 実行どころか必要時までコンパイルもしない こともできる Namespace('jp.co.mixi') .use('hoge') .use('fuga') .define (ns)-> ns.provideeval """ /**your great code **/ """ 13年12月3日火曜日
- 22.
- 23.
- 24.
- 25.
- 26. brook.widget Markup Resource widget A -meta data - meta data widget A - meta data - meta data namespace N1 namespace A namespace N2 namespace N3 widget B - meta data - meta data namespace B widget C - meta data - meta data namespace C namespace N5 namespace D namespace N6 13年12月3日火曜日 namespace N4
- 27. brook.widget Markup Resource widget A -meta data - meta data widget A - meta data - meta data namespace N1 namespace A namespace N2 namespace N3 widget B - meta data - meta data namespace B widget C - meta data - meta data namespace C namespace N5 namespace D namespace N6 13年12月3日火曜日 namespace N4
- 28. brook mvc • brookは簡易なMVCサポート機能を持っていま す。 • 簡単なUI追加機能はbrook.widget単体で表現 できます。(e.g. jquerymobile) • よりhard coreなアプリケーションでは、 brook.widget = controllerとしてMVCを展開 13年12月3日火曜日
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36. callbackで継続 function (callback) { get(anchor.href,callback); }, function (callback, html) { var m = html.match(PATTERN); if (m) { callback(m[0]); } }, function (callback, uri) { get(uri, callback); }, function (callback, js) { var images = eval(js); images.forEach(function (image) { li.appendChild(createImage(image)); }); } 13年12月3日火曜日
- 37. callbackで継続 function (callback) { get(anchor.href,callback); }, function (callback, html) { var m = html.match(PATTERN); if (m) { callback(m[0]); } }, function (callback, uri) { get(uri, callback); }, function (callback, js) { var images = eval(js); images.forEach(function (image) { li.appendChild(createImage(image)); }); } 13年12月3日火曜日
- 38. callbackで継続 function (callback) { get(anchor.href,callback); }, function (callback, html) { var m = html.match(PATTERN); if (m) { callback(m[0]); } }, function (callback, uri) { get(uri, callback); }, function (callback, js) { var images = eval(js); images.forEach(function (image) { li.appendChild(createImage(image)); }); } 13年12月3日火曜日
- 39. callbackで継続 function (callback) { get(anchor.href,callback); }, function (callback, html) { var m = html.match(PATTERN); if (m) { callback(m[0]); } }, function (callback, uri) { get(uri, callback); }, function (callback, js) { var images = eval(js); images.forEach(function (image) { li.appendChild(createImage(image)); }); } 13年12月3日火曜日
- 40.
- 41.
- 42. brook.promise • 未来の処理を渡されるcallbackを抽象化 function(next,value){ next(value);} • どこで切ってもモジュール化できる var $promise= ns.promise(function(next,value){ ! next(value); }); var $wait = ns.promise(function(next,value){ ! setTimeout(next.bind(value),100); }); var get = function(path){ ! return ns.promise(function(next,value){ ! ! get(path,next.bind( value ) ); ! }); }; var $waitGet = $wait.bind( get( “hoge.xml”)) 13年12月3日火曜日
- 43.
- 44.
- 45. MVC is .. Model View Controller //mvc as a stream of callbacks userAction .bind( viewToController ) .bind( controller ) .bind( model ) .bind( viewFromModel ) userAction.subscribe(); 単純なデータフローとして考え るとこのようにモデル化でき る。 13年12月3日火曜日
- 46.
- 47. brook.channel • promiseの流れをforkする // mvc asa stream of callbacks var channel = ns.channel(); channel.observe( action1.bind( fin ) ); channel.observe( action2.bind( fin ) ); before.bind( channel.send() ); 13年12月3日火曜日
- 48.
- 49. flip flop var flip= new Tab(flipElement); var flop = new Tab(flopElement); Flip Flip Content Flop Flop Content flip.select .observe( flop.toHide() ); flop.select .observe( flip.toHide() ); flip.select .observe( ! displayLoading .bind( flipContent ) ); flop.select .observe( ! displayLoading .bind( flopContent ) ); 13年12月3日火曜日
- 50.
- 51. brook.model var model =ns.createModel(); Model create delete notify(“create”) model.addMethod('create', requestFilter .bind( jsonrpc.createRPCPromise('create.entry') ) .bind( responseFilter ) ); model.addMethod('delete', requestFilter .bind( jsonrpc.createRPCPromise('delete.entry') ) .bind( responseFilter ) ) userAction.observe( eventToRequest.bind( model.notify("create")); model.method('create').observe( actionA ); model.method('create').observe( actionB ); 13年12月3日火曜日
- 52. MVC is justa event network Model View Model View Controller 13年12月3日火曜日
- 53. MVC is justa event network Model View // in controller Model var model = ns.model; var view = ns.view; View Controller observeEvent( element, 'click', ! viaEvent.bind( model.notify('update') ); model.observe( 'update', view ! .bind( updateHTML(element) ) ! .bind( ns.bindAllWidget ) ); 13年12月3日火曜日
- 54. todo brook /namespace • ふふふふ。 • ドキュメントが。。が。 • ほんとはモテる感出したい • 13年12月3日火曜日
- 55. まとめ。 非同期コールバックをそのまま使っていいの は小学生まで。 依存性の記述＝並列性の記述 resource駆動 + MVC+ promiseを使って モジュラプログラミングしよう 13年12月3日火曜日
- 56. 全く関係ない話 • Perl Hackers Hubに記 事があります。 • • DIin Perl • 13年12月3日火曜日 Software Metrics アーキテクチャパターン