Progressive
Enhancement Practice
ytian@thoughtworks.com

Why PE?
Separation of Concerns
Data - Structure
Presentation - Style
Behavior - Event

Why PE?
KISS
/

PE’s goal
/ Universal
/ Usability
/ Maintain
/ Communication

Practice
Mapping requirement to right layer
HTTP Restful, the web way
HTML/XHTML Structural data format
CSS Visual enhancement
Javascript Behavior enhancement

Http layer
What’s restful? The web way.
Use right request method
Use right HTTP response CODE
Use the useful HTTP headers
Resources centric URL?
Form model and Post redirect-back

Http layer
Web site should be a restful app
Human readable website is also a
computer readable API provider
(x)HTML is a valid structural ATOM
feed format
Web page is a composite
representation of domain model

(x)Html layer
Choose tag semantically
HTML Tag
HTML5 friendly?
HTML5 Name Class

(x)Html layer
Microformats
open protocal
markup conventions
semantic way
easy to parse
easy to validate

CSS Layer
reset css
css selector
css class
micro formats class
id javascript

CSS Layer
css selector ( microformats)
.project .stage .job .name
.article h2
.comment .time

Javascript Layer
Javascript
JQuery’s PE support
API DSL
($(selector).hehavior)

Javascript Layer
graceful degradation
microformats convension

Conclusion
Never re-invent the web (wheel)
Discover the beauty of web standard
Do right things in right way

Thanks