happy designer 20080329
DESCRIPTION
gugod's talk about SPA, JavaScript::Writer and pQuery. In HappyDesigner meetup 2008/03/29.TRANSCRIPT
SPAJavaScript::Writer
pQuery
My Name IsGUGOD
My Name IsGUGOD
•Coffee-maniac•日本語を勉強•Hacker•JavaScript•Perl, Ruby
Emacs
SPA
Single Page Application
http://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/HTTP_persistent_connection.svg
http://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/HTTP_persistent_connection.svg
telnet
http://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/HTTP_persistent_connection.svg
web
telnet
http://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/HTTP_persistent_connection.svg
web
+ajax
telnet
http://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/HTTP_persistent_connection.svg
web
+ajax
telnet
cometd
SPA EXAMPLE
gmailgoogle map
SPA : how
iframe
ajax
href=”/go/there”
<a
>
href=”/go/there”
<a
>
onclick=”#{ajax}”
<a
>
action=”/that/one”
<form
>
action=”/that/one”
<form
>
onsubmit=”#{ajax}”
<form
>
大きい相違Biggest difference
document.body 恆久遠
global variable永流傳
session storage(fake)
Performance
/page/simple
•HTML
/page/simple
•HTML•JavaScript
/page/simple
•HTML•JavaScript•Compile JavaScript
/page/simple
•HTML•JavaScript•Compile JavaScript•Run JavaScript
/page/simple
/page/simpleHTML: 1K
JavaScript: 1KCompile: 100ms
Run: 20ms
/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/complexHTML: 2K
JavaScript: 2KCompile: 200ms
Run: 80ms
/page/simpleHTML: 1K
JavaScript: 1KCompile: 100ms
Run: 20ms
/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/simpleHTML: 1K
JavaScript: 2KCompile: 200ms
Run: 20ms
/page/simpleHTML: 1K
JavaScript: 2KCompile: 200ms
Run: 20ms
/page/complexHTML: 2K
JavaScript: 0KCompile: 0ms
Run: 80ms
/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/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
Total:HTML: 4KJavaScript: 4KCompile: 400msRun: 120ms
Total:HTML: 4KJavaScript: 4KCompile: 200msRun: 120ms
SPANormal
Total:HTML: 4KJavaScript: 4KCompile: 400msRun: 120ms
Total:HTML: 4KJavaScript: 4KCompile: 200msRun: 120ms
SPANormal
勝
PreloadAll Code
慢一次配合 “never expire” 處方服用，效果尤佳
SPAkit
http://rubyforge.org/projects/spakit/
http://rubyforge.org/projects/massage/
Jifty::Plugin::SinglePage
JavaScript::Writer
JavaScript code generation from Perl.
js->alert(42);
js("Widget.Lightbox") ->show("Nihao");
js("3s")->latter( sub { js->alert(42); });
Why ?
Perl
We
JavaScript is
HARD
sleep()
asynchronous execution context
function can returnbefore it finished
Browser Sucks
pQuery
jQuery ported to Perl
use pQuery;
pQuery("http://google.com/search?q=pquery") ->find("h2") ->each(sub { my $i = shift; print $i + 1, ") ", pQuery($_)->text, "\n"; });
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
Why
Perl
We
jQuery
We
JavaScript VMsSucks
Cross-Site ScriptingFileDB
The power of jQueryshould be released
謝謝