happy designer 20080329
DESCRIPTION
gugod's talk about SPA, JavaScript::Writer and pQuery. In HappyDesigner meetup 2008/03/29.TRANSCRIPT
![Page 1: Happy Designer 20080329](https://reader034.vdocuments.us/reader034/viewer/2022042814/554c5330b4c905282a8b4b4d/html5/thumbnails/1.jpg)
SPAJavaScript::Writer
pQuery
![Page 2: Happy Designer 20080329](https://reader034.vdocuments.us/reader034/viewer/2022042814/554c5330b4c905282a8b4b4d/html5/thumbnails/2.jpg)
My Name IsGUGOD
![Page 3: Happy Designer 20080329](https://reader034.vdocuments.us/reader034/viewer/2022042814/554c5330b4c905282a8b4b4d/html5/thumbnails/3.jpg)
My Name IsGUGOD
•Coffee-maniac•日本語を勉強•Hacker•JavaScript•Perl, Ruby
![Page 4: Happy Designer 20080329](https://reader034.vdocuments.us/reader034/viewer/2022042814/554c5330b4c905282a8b4b4d/html5/thumbnails/4.jpg)
Emacs
![Page 5: Happy Designer 20080329](https://reader034.vdocuments.us/reader034/viewer/2022042814/554c5330b4c905282a8b4b4d/html5/thumbnails/5.jpg)
SPA
![Page 6: Happy Designer 20080329](https://reader034.vdocuments.us/reader034/viewer/2022042814/554c5330b4c905282a8b4b4d/html5/thumbnails/6.jpg)
Single Page Application
![Page 7: Happy Designer 20080329](https://reader034.vdocuments.us/reader034/viewer/2022042814/554c5330b4c905282a8b4b4d/html5/thumbnails/7.jpg)
http://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/HTTP_persistent_connection.svg
![Page 8: Happy Designer 20080329](https://reader034.vdocuments.us/reader034/viewer/2022042814/554c5330b4c905282a8b4b4d/html5/thumbnails/8.jpg)
http://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/HTTP_persistent_connection.svg
telnet
![Page 9: Happy Designer 20080329](https://reader034.vdocuments.us/reader034/viewer/2022042814/554c5330b4c905282a8b4b4d/html5/thumbnails/9.jpg)
http://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/HTTP_persistent_connection.svg
web
telnet
![Page 10: Happy Designer 20080329](https://reader034.vdocuments.us/reader034/viewer/2022042814/554c5330b4c905282a8b4b4d/html5/thumbnails/10.jpg)
http://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/HTTP_persistent_connection.svg
web
+ajax
telnet
![Page 11: Happy Designer 20080329](https://reader034.vdocuments.us/reader034/viewer/2022042814/554c5330b4c905282a8b4b4d/html5/thumbnails/11.jpg)
http://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/HTTP_persistent_connection.svg
web
+ajax
telnet
cometd
![Page 12: Happy Designer 20080329](https://reader034.vdocuments.us/reader034/viewer/2022042814/554c5330b4c905282a8b4b4d/html5/thumbnails/12.jpg)
SPA EXAMPLE
![Page 13: Happy Designer 20080329](https://reader034.vdocuments.us/reader034/viewer/2022042814/554c5330b4c905282a8b4b4d/html5/thumbnails/13.jpg)
gmailgoogle map
![Page 14: Happy Designer 20080329](https://reader034.vdocuments.us/reader034/viewer/2022042814/554c5330b4c905282a8b4b4d/html5/thumbnails/14.jpg)
SPA : how
![Page 15: Happy Designer 20080329](https://reader034.vdocuments.us/reader034/viewer/2022042814/554c5330b4c905282a8b4b4d/html5/thumbnails/15.jpg)
iframe
![Page 16: Happy Designer 20080329](https://reader034.vdocuments.us/reader034/viewer/2022042814/554c5330b4c905282a8b4b4d/html5/thumbnails/16.jpg)
ajax
![Page 17: Happy Designer 20080329](https://reader034.vdocuments.us/reader034/viewer/2022042814/554c5330b4c905282a8b4b4d/html5/thumbnails/17.jpg)
href=”/go/there”
<a
>
![Page 18: Happy Designer 20080329](https://reader034.vdocuments.us/reader034/viewer/2022042814/554c5330b4c905282a8b4b4d/html5/thumbnails/18.jpg)
href=”/go/there”
<a
>
![Page 19: Happy Designer 20080329](https://reader034.vdocuments.us/reader034/viewer/2022042814/554c5330b4c905282a8b4b4d/html5/thumbnails/19.jpg)
onclick=”#{ajax}”
<a
>
![Page 20: Happy Designer 20080329](https://reader034.vdocuments.us/reader034/viewer/2022042814/554c5330b4c905282a8b4b4d/html5/thumbnails/20.jpg)
action=”/that/one”
<form
>
![Page 21: Happy Designer 20080329](https://reader034.vdocuments.us/reader034/viewer/2022042814/554c5330b4c905282a8b4b4d/html5/thumbnails/21.jpg)
action=”/that/one”
<form
>
![Page 22: Happy Designer 20080329](https://reader034.vdocuments.us/reader034/viewer/2022042814/554c5330b4c905282a8b4b4d/html5/thumbnails/22.jpg)
onsubmit=”#{ajax}”
<form
>
![Page 23: Happy Designer 20080329](https://reader034.vdocuments.us/reader034/viewer/2022042814/554c5330b4c905282a8b4b4d/html5/thumbnails/23.jpg)
大きい相違Biggest difference
![Page 24: Happy Designer 20080329](https://reader034.vdocuments.us/reader034/viewer/2022042814/554c5330b4c905282a8b4b4d/html5/thumbnails/24.jpg)
document.body 恆久遠
![Page 25: Happy Designer 20080329](https://reader034.vdocuments.us/reader034/viewer/2022042814/554c5330b4c905282a8b4b4d/html5/thumbnails/25.jpg)
global variable永流傳
![Page 26: Happy Designer 20080329](https://reader034.vdocuments.us/reader034/viewer/2022042814/554c5330b4c905282a8b4b4d/html5/thumbnails/26.jpg)
session storage(fake)
![Page 27: Happy Designer 20080329](https://reader034.vdocuments.us/reader034/viewer/2022042814/554c5330b4c905282a8b4b4d/html5/thumbnails/27.jpg)
Performance
![Page 28: Happy Designer 20080329](https://reader034.vdocuments.us/reader034/viewer/2022042814/554c5330b4c905282a8b4b4d/html5/thumbnails/28.jpg)
/page/simple
![Page 29: Happy Designer 20080329](https://reader034.vdocuments.us/reader034/viewer/2022042814/554c5330b4c905282a8b4b4d/html5/thumbnails/29.jpg)
•HTML
/page/simple
![Page 30: Happy Designer 20080329](https://reader034.vdocuments.us/reader034/viewer/2022042814/554c5330b4c905282a8b4b4d/html5/thumbnails/30.jpg)
•HTML•JavaScript
/page/simple
![Page 31: Happy Designer 20080329](https://reader034.vdocuments.us/reader034/viewer/2022042814/554c5330b4c905282a8b4b4d/html5/thumbnails/31.jpg)
•HTML•JavaScript•Compile JavaScript
/page/simple
![Page 32: Happy Designer 20080329](https://reader034.vdocuments.us/reader034/viewer/2022042814/554c5330b4c905282a8b4b4d/html5/thumbnails/32.jpg)
•HTML•JavaScript•Compile JavaScript•Run JavaScript
/page/simple
![Page 33: Happy Designer 20080329](https://reader034.vdocuments.us/reader034/viewer/2022042814/554c5330b4c905282a8b4b4d/html5/thumbnails/33.jpg)
/page/simpleHTML: 1K
JavaScript: 1KCompile: 100ms
Run: 20ms
![Page 34: Happy Designer 20080329](https://reader034.vdocuments.us/reader034/viewer/2022042814/554c5330b4c905282a8b4b4d/html5/thumbnails/34.jpg)
/page/simpleHTML: 1K
JavaScript: 1KCompile: 100ms
Run: 20ms
/page/complexHTML: 2K
JavaScript: 2KCompile: 200ms
Run: 80ms
![Page 35: Happy Designer 20080329](https://reader034.vdocuments.us/reader034/viewer/2022042814/554c5330b4c905282a8b4b4d/html5/thumbnails/35.jpg)
/page/simpleHTML: 1K
JavaScript: 1KCompile: 100ms
Run: 20ms
/page/complexHTML: 2K
JavaScript: 2KCompile: 200ms
Run: 80ms
/page/simpleHTML: 1K
JavaScript: 1KCompile: 100ms
Run: 20ms
![Page 36: Happy Designer 20080329](https://reader034.vdocuments.us/reader034/viewer/2022042814/554c5330b4c905282a8b4b4d/html5/thumbnails/36.jpg)
/page/simpleHTML: 1K
JavaScript: 1KCompile: 100ms
Run: 20ms
/page/complexHTML: 2K
JavaScript: 2KCompile: 200ms
Run: 80ms
/page/simpleHTML: 1K
JavaScript: 1KCompile: 100ms
Run: 20ms
Total:HTML: 4KJavaScript: 4KCompile: 400msRun: 120ms
![Page 37: Happy Designer 20080329](https://reader034.vdocuments.us/reader034/viewer/2022042814/554c5330b4c905282a8b4b4d/html5/thumbnails/37.jpg)
/page/simpleHTML: 1K
JavaScript: 2KCompile: 200ms
Run: 20ms
![Page 38: Happy Designer 20080329](https://reader034.vdocuments.us/reader034/viewer/2022042814/554c5330b4c905282a8b4b4d/html5/thumbnails/38.jpg)
/page/simpleHTML: 1K
JavaScript: 2KCompile: 200ms
Run: 20ms
/page/complexHTML: 2K
JavaScript: 0KCompile: 0ms
Run: 80ms
![Page 39: Happy Designer 20080329](https://reader034.vdocuments.us/reader034/viewer/2022042814/554c5330b4c905282a8b4b4d/html5/thumbnails/39.jpg)
/page/simpleHTML: 1K
JavaScript: 2KCompile: 200ms
Run: 20ms
/page/complexHTML: 2K
JavaScript: 0KCompile: 0ms
Run: 80ms
/page/simpleHTML: 1K
JavaScript: 0KCompile: 0ms
Run: 20ms
![Page 40: Happy Designer 20080329](https://reader034.vdocuments.us/reader034/viewer/2022042814/554c5330b4c905282a8b4b4d/html5/thumbnails/40.jpg)
/page/simpleHTML: 1K
JavaScript: 2KCompile: 200ms
Run: 20ms
/page/complexHTML: 2K
JavaScript: 0KCompile: 0ms
Run: 80ms
/page/simpleHTML: 1K
JavaScript: 0KCompile: 0ms
Run: 20ms
Total:HTML: 4KJavaScript: 4KCompile: 200msRun: 120ms
![Page 41: Happy Designer 20080329](https://reader034.vdocuments.us/reader034/viewer/2022042814/554c5330b4c905282a8b4b4d/html5/thumbnails/41.jpg)
Total:HTML: 4KJavaScript: 4KCompile: 400msRun: 120ms
Total:HTML: 4KJavaScript: 4KCompile: 200msRun: 120ms
SPANormal
![Page 42: Happy Designer 20080329](https://reader034.vdocuments.us/reader034/viewer/2022042814/554c5330b4c905282a8b4b4d/html5/thumbnails/42.jpg)
Total:HTML: 4KJavaScript: 4KCompile: 400msRun: 120ms
Total:HTML: 4KJavaScript: 4KCompile: 200msRun: 120ms
SPANormal
勝
![Page 43: Happy Designer 20080329](https://reader034.vdocuments.us/reader034/viewer/2022042814/554c5330b4c905282a8b4b4d/html5/thumbnails/43.jpg)
PreloadAll Code
![Page 44: Happy Designer 20080329](https://reader034.vdocuments.us/reader034/viewer/2022042814/554c5330b4c905282a8b4b4d/html5/thumbnails/44.jpg)
慢一次配合 “never expire” 處方服用,效果尤佳
![Page 45: Happy Designer 20080329](https://reader034.vdocuments.us/reader034/viewer/2022042814/554c5330b4c905282a8b4b4d/html5/thumbnails/45.jpg)
SPAkit
http://rubyforge.org/projects/spakit/
http://rubyforge.org/projects/massage/
![Page 46: Happy Designer 20080329](https://reader034.vdocuments.us/reader034/viewer/2022042814/554c5330b4c905282a8b4b4d/html5/thumbnails/46.jpg)
Jifty::Plugin::SinglePage
![Page 47: Happy Designer 20080329](https://reader034.vdocuments.us/reader034/viewer/2022042814/554c5330b4c905282a8b4b4d/html5/thumbnails/47.jpg)
JavaScript::Writer
![Page 48: Happy Designer 20080329](https://reader034.vdocuments.us/reader034/viewer/2022042814/554c5330b4c905282a8b4b4d/html5/thumbnails/48.jpg)
JavaScript code generation from Perl.
![Page 49: Happy Designer 20080329](https://reader034.vdocuments.us/reader034/viewer/2022042814/554c5330b4c905282a8b4b4d/html5/thumbnails/49.jpg)
js->alert(42);
![Page 50: Happy Designer 20080329](https://reader034.vdocuments.us/reader034/viewer/2022042814/554c5330b4c905282a8b4b4d/html5/thumbnails/50.jpg)
js("Widget.Lightbox") ->show("Nihao");
![Page 51: Happy Designer 20080329](https://reader034.vdocuments.us/reader034/viewer/2022042814/554c5330b4c905282a8b4b4d/html5/thumbnails/51.jpg)
js("3s")->latter( sub { js->alert(42); });
![Page 52: Happy Designer 20080329](https://reader034.vdocuments.us/reader034/viewer/2022042814/554c5330b4c905282a8b4b4d/html5/thumbnails/52.jpg)
Why ?
![Page 53: Happy Designer 20080329](https://reader034.vdocuments.us/reader034/viewer/2022042814/554c5330b4c905282a8b4b4d/html5/thumbnails/53.jpg)
Perl
We
![Page 54: Happy Designer 20080329](https://reader034.vdocuments.us/reader034/viewer/2022042814/554c5330b4c905282a8b4b4d/html5/thumbnails/54.jpg)
JavaScript is
HARD
![Page 55: Happy Designer 20080329](https://reader034.vdocuments.us/reader034/viewer/2022042814/554c5330b4c905282a8b4b4d/html5/thumbnails/55.jpg)
sleep()
![Page 56: Happy Designer 20080329](https://reader034.vdocuments.us/reader034/viewer/2022042814/554c5330b4c905282a8b4b4d/html5/thumbnails/56.jpg)
asynchronous execution context
![Page 57: Happy Designer 20080329](https://reader034.vdocuments.us/reader034/viewer/2022042814/554c5330b4c905282a8b4b4d/html5/thumbnails/57.jpg)
function can returnbefore it finished
![Page 58: Happy Designer 20080329](https://reader034.vdocuments.us/reader034/viewer/2022042814/554c5330b4c905282a8b4b4d/html5/thumbnails/58.jpg)
Browser Sucks
![Page 59: Happy Designer 20080329](https://reader034.vdocuments.us/reader034/viewer/2022042814/554c5330b4c905282a8b4b4d/html5/thumbnails/59.jpg)
pQuery
![Page 60: Happy Designer 20080329](https://reader034.vdocuments.us/reader034/viewer/2022042814/554c5330b4c905282a8b4b4d/html5/thumbnails/60.jpg)
jQuery ported to Perl
![Page 61: Happy Designer 20080329](https://reader034.vdocuments.us/reader034/viewer/2022042814/554c5330b4c905282a8b4b4d/html5/thumbnails/61.jpg)
use pQuery;
pQuery("http://google.com/search?q=pquery") ->find("h2") ->each(sub { my $i = shift; print $i + 1, ") ", pQuery($_)->text, "\n"; });
![Page 62: Happy Designer 20080329](https://reader034.vdocuments.us/reader034/viewer/2022042814/554c5330b4c905282a8b4b4d/html5/thumbnails/62.jpg)
PQUERY(map "http://search.cpan.org/~$_/", qw(ingy gugod miyagawa)) ->find("table")->eq(1)->find("tr") ->EACH(sub{ printf("%40s - %s Perl distributions\n", $_->url, $_->length - 1) });
Query Multiple DOM All At Once
http://search.cpan.org/~ingy/ - 88 Perl distributions http://search.cpan.org/~gugod/ - 87 Perl distributions http://search.cpan.org/~miyagawa/ - 138 Perl distributions
![Page 63: Happy Designer 20080329](https://reader034.vdocuments.us/reader034/viewer/2022042814/554c5330b4c905282a8b4b4d/html5/thumbnails/63.jpg)
Why
![Page 64: Happy Designer 20080329](https://reader034.vdocuments.us/reader034/viewer/2022042814/554c5330b4c905282a8b4b4d/html5/thumbnails/64.jpg)
Perl
We
![Page 65: Happy Designer 20080329](https://reader034.vdocuments.us/reader034/viewer/2022042814/554c5330b4c905282a8b4b4d/html5/thumbnails/65.jpg)
jQuery
We
![Page 66: Happy Designer 20080329](https://reader034.vdocuments.us/reader034/viewer/2022042814/554c5330b4c905282a8b4b4d/html5/thumbnails/66.jpg)
JavaScript VMsSucks
![Page 67: Happy Designer 20080329](https://reader034.vdocuments.us/reader034/viewer/2022042814/554c5330b4c905282a8b4b4d/html5/thumbnails/67.jpg)
Cross-Site ScriptingFileDB
![Page 68: Happy Designer 20080329](https://reader034.vdocuments.us/reader034/viewer/2022042814/554c5330b4c905282a8b4b4d/html5/thumbnails/68.jpg)
The power of jQueryshould be released
![Page 69: Happy Designer 20080329](https://reader034.vdocuments.us/reader034/viewer/2022042814/554c5330b4c905282a8b4b4d/html5/thumbnails/69.jpg)
謝謝