happy designer 20080329

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

謝謝