網頁程式還可以怎麼設計

網頁程式還可以怎麼設計

gugodhttp://gugod.org/

http://gugod.org

http://gugod.org

But First...

Congratulations, John Lennon !

溫故知新

History

In the beginning...

<html><body><h1>Hello, World</h1></body></html>

HTML

http://en.wikipedia.org/wiki/Image:Mosaic_6beta_screenshot.png



use CGI qw/:standard/;print header, start_html('A Simple Example'), h1('A Simple Example'), start_form, "What's your name? ",textfield('name'),p, "What's the combination?", p, checkbox_group(-name=>'words', -values=>['eenie','meenie','minie','moe'], -defaults=>['eenie','minie']), p, "What's your favorite color? ", popup_menu(-name=>'color', -values=>['red','green','blue','chartreuse']),p, submit, end_form, hr;

Perl CGI.pm example

In the middle...

Dark Ages

Features:

java applettried hard to survive

flashreinvent everything

JavaScriptborn to be mis-understood

Builders / Tools

FrontPageDreamWeaver

Word (!)

PHP,Template::Toolkit,Mason, Embperl,

JSP

... and nowadays

Standard Compliant

JHCjavascript, html, css

still rocks

(Jesus H. Christ !)

jhc builderiWeb, rapidweaver, dreamweaver...

java applet

Buzz Words

http://en.wikipedia.org/wiki/Image:Web_2.0_Map.svg



Single Page Application

http://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/HTTP_persistent_connection.svg




telnet




web

telnet




web

+ajax

telnet




web

+ajax

telnet

cometd



SPA EXAMPLE

gmailgoogle map

SPA : how

iframe

href=”/go/there”

<a

>

onclick=”#{ajax}”

<a

>

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•Run JavaScript Lib

/page/simple

•HTML•JavaScript•Run JavaScript Lib•Run JavaScript Main

/page/simple

/page/simpleHTML: 1K

JavaScript: 1KLib: 100msMain: 20ms



/page/complexHTML: 2K








Total:HTML: 4KJavaScript: 4KLib: 400msMain: 120ms


JavaScript: 2KCompile: 200ms

Run: 20ms



Run: 20ms



Run: 80ms



Run: 20ms



Run: 80ms



Run: 20ms



Run: 20ms



Run: 80ms



Run: 20ms

Total:HTML: 4KJavaScript: 4KCompile: 200msRun: 120ms



SPANormal



SPANormal

勝

PreloadAll Code

慢一次配合 “never expire” 處方服用，效果尤佳

SPAkit

http://rubyforge.org/projects/spakit/

http://rubyforge.org/projects/massage/



http://rubyforge.org/projects/massage

http://rubyforge.org/projects/massage

Jifty::Plugin::SinglePage

Generator

link_to( "Hello", onclick => ajax_replace("#area", "data/hello.html"));

sub ajax_replace { my ( $target, $uri ) = @_; return sub { jQuery("#loading")->fadeIn( sub { jQuery("#area")->load($uri)->show( sub { jQuery("#loading")->fadeOut(); } ); } ); js->append("return false;"); };}

JavaScript::Writer

New Tech

User-centric

Forum / Journal /Blog

OpenIDdecentralized identity

OAuth

A Bgrant

DATA

accessowner

OpenSocial

Perfect

Perfection is achieved, not when there is nothing left to add, but when there is nothing left to remove.

– Antoine de Saint-Exupery

Web App Design DOs and Don’ts.

Can Mess Be Measured ?

亂度如何度量

Subjectively主觀地

Model Diagram Show

Too many notes,my dear Mozart.Emperor Joseph II

Die Entführung aus dem Serail (後宮誘逃)

Too many codes,my dear Hacker.

Gugod

Optimize

1. 優化是一個過程

2. 優化是一個演繹的過程。而非改變本質。

1. 優化是一個過程

A A2. 優化是一個演繹的過程。而非改變本質。

PerformanceOptimization

Joseph Smarr — High-performance JavaScript: Why Everything You've Been Taught Is Wrong

http://video.yahoo.com/watch/1041101



Performance@ 0day

Slow

Pain

Forget

Died

A 再怎麼優化還是 A

A 再怎麼優化還是 A

A A

除了優化之外，倒底需要的是什麼？

Simplify簡化

Remove

減法上等

• Remove Models

• Remove Views

• Repeat... until there is nothing left to remove.

• Model = Core

• ㊣簡化

Remove Models

Remove Views

• View = UI

• UI 少 = 用起來單純

• 使其「用起來」很容易

Shuffle 簡化 iPod UI

Remove Controllers

Remove Controllers

• Yeah.. what isn’t this in the list ?

Remove Controllers

• Yeah.. what isn’t this in the list ?

• With too many controllers, you are already doomed.

Less is Moresometimes

jQuerySpiffy JavaScript

jQuery(“<h1>Hello World</h1>”).appendTo(“#output”).show(“slow”, function() { jQuery(“#loading”).hide()});

Ajaxbuzzer of the year

Lazy loaded Content

JSONLess markup, More data

JSONRequestLess restrict, more mash-up

Takahashi MethodLess text, more delivering

(More Slides);-)

Out-sourcingLess work, more productivity

Recommendations

DON’Ts不好吧

Don’t Optimize Mess別優化亂象

Reduced to Mess演繹亂象

DOs這樣就對了

Starts Simple始於純樸

Ends Simple終於極簡

表

我希望這真的是頂帽子，而不是像條吃了大象的蛇，這麼恐怖的東西

Conclusion...

Dark Agesover yet ?

Social NetworkMyth

Still Growing

Scalability

Performance

EspressoORIGIN 1940s: from Italian (caffè) espresso,

literally ‘pressed out (coffee).’

http://en.wikipedia.org/wiki/Image:Linea_doubleespresso.jpg



網頁程式還可以怎麼設計

Business