Professional Frontend Engineering
- 1. Professional Frontend
Engineering
Nate Koechley
Senior Frontend Engineer
Yahoo!
natek@yahoo-inc.com | developer.yahoo.com/yui
nate.koechley.com/blog | “natekoechley”
- 4. • Put a stake in the
ground.
• Reiterate our
values.
• Advocate the
discipline.
• Nurture a healthy
Web.
- 8. Historical Our Beliefs
Perspective & Principles
- 9. Historical Our Beliefs
Perspective & Principles
Knowledge
Areas & Best
Practices
- 10. Historical Our Beliefs
Perspective & Principles
Knowledge
Why It All
Areas & Best
Matters
Practices
- 35. Now
Professional Frontend
Engineers focused at the
intersection of design and
development is a best practice.
- 37. “In 2001, with developments in advanced
JavaScript and DHTML, we knew the web
experience would evolve beyond the static
pages we were producing. We brought in web
developers to help us pioneer Yahoo’s offerings
to include a more dynamic, interactive
experience for our users.”
—Irene Au, SVP of UED at Yahoo!
- 39. “... Another motivation was to bring in a
disciplined frontend programming
practice to Yahoo. Before then, the
presentation, behavior, and structure of
our pages were not separate, which led
to many challenges and inefficiencies in
designing and developing our products.”
—Irene Au, SVP of UED at Yahoo!
- 42. “The Framers of the Web
saw browser differences
as beneficial and believed
that visitors should
choose how their browser
displays the page...”
- 44. “...I wanted more control
so I threw my HTML
book in the trash and
started from scratch.”
- 51. The Yahoo! Stack
Pages & modules
95% HTML, 5% PHP
Display logic & APIs
50% HTML, 50% PHP
Specific PHP biz logic
90% PHP, 10% Text
Generic PHP functions & libs
100% PHP
C/C++ Libraries.
90% C/C++, 10% PHP
- 52. The Yahoo! Stack
Pages & modules
Frontend
95% HTML, 5% PHP
Display logic & APIs
50% HTML, 50% PHP
Specific PHP biz logic
90% PHP, 10% Text
Generic PHP functions & libs
100% PHP Backend
C/C++ Libraries.
90% C/C++, 10% PHP
- 53. The Yahoo! Stack
Pages & modules
Frontend
95% HTML, 5% PHP
Display logic & APIs
50% HTML, 50% PHP
Specific PHP biz logic
90% PHP, 10% Text
Generic PHP functions & libs
100% PHP Backend
C/C++ Libraries.
90% C/C++, 10% PHP
- 59. (X)HTML
Specification
Implementation
server
- 60. (X)HTML
Specification
Implementation
Bugs
server
- 61. (X)HTML
Specification
Implementation
Bugs
[ Theory / Practice ]
server
- 62. CSS
BOM API
(X)HTML DOM JavaScript
DOM API
Specification
Data Transport
data: custom, xml,
mixed: new xhtml
Implementation
json
behavior: js
Bugs
[ Theory / Practice ]
server
- 63. Safari Firefox Opera IE5, 6, 7 Firefox Opera 10,000+ UAs
Macintosh Windows Linux, Unix, Mobile
CSS
BOM API
(X)HTML DOM JavaScript
DOM API
Specification
Data Transport
data: custom, xml,
mixed: new xhtml
Implementation
json
behavior: js
Bugs
[ Theory / Practice ]
server
- 64. Safari Firefox Opera IE5, 6, 7 Firefox Opera 10,000+ UAs
Macintosh Windows Linux, Unix, Mobile
CSS
BOM API
(X)HTML DOM JavaScript
DOM API
Specification
data: custom, xml,
mixed: new xhtml,
Data Transport
Implementation
behavior: js
json
Defects
[ Theory / Practice ]
server
- 65. Safari Firefox Opera IE5, 6, 7 Firefox Opera 10,000+ UAs
Macintosh Windows Linux, Unix, Mobile
knowledge areas: 7
CSS
(X)HTML
dimensions: xJavaScript
DOM
4 BOM API
DOM API
platforms: x 3
Specification
data: custom, xml,
mixed: new xhtml,
browsers perDefects platform: x 4
Data Transport
Implementation
behavior: js
json
rendering modes: x 2
[ Theory / Practice ]
server
=672
- 67. usability, internationalization,
localization, visual design,
accessibility, information
architecture, security, build
processes, performance,
benchmarking, devices, portability
- 69. Different from Backend
because we:
• Can’t compile.
• Can’t trust.
• Can’t predict.
• Can’t install or store.
• Can’t hide anything!
- 75. ...which is why professional
frontend engineering is
critical for success.
- 76. Historical Our Beliefs
Perspective & Principles
- 93. Three Support Grades
C-Grade
• Blacklist (of incapable browsers)
• Withhold CSS & JavaScript
A-Grade
• Whitelist (of capable browsers tested)
• Serve CSS & JavaScript
- 94. Three Support Grades
C-Grade
• Blacklist (of incapable browsers)
• Withhold CSS & JavaScript
A-Grade
• Whitelist (of capable browsers tested)
• Serve CSS & JavaScript
X-Grade
• Everybody else.
• Serve CSS & JavaScript
- 103. Rules of Progressive
Enhancement
• Enrich content with thorough, explicit markup.
• Test core functionality with HTML only.
- 104. Rules of Progressive
Enhancement
• Enrich content with thorough, explicit markup.
• Test core functionality with HTML only.
• Enhance layout via externally linked CSS.
- 105. Rules of Progressive
Enhancement
• Enrich content with thorough, explicit markup.
• Test core functionality with HTML only.
• Enhance layout via externally linked CSS.
• Enhance behavior via externally linked
unobtrusive JavaScript.
- 106. Rules of Progressive
Enhancement
• Enrich content with thorough, explicit markup.
• Test core functionality with HTML only.
• Enhance layout via externally linked CSS.
• Enhance behavior via externally linked
unobtrusive JavaScript.
• Respect end-user browser preferences.
- 111. Rules of Unobtrusive
JavaScript
• No JavaScript in HTML documents.
• Don’t depend on or trust JavaScript.
- 112. Rules of Unobtrusive
JavaScript
• No JavaScript in HTML documents.
• Don’t depend on or trust JavaScript.
• Poke objects before using them.
- 113. Rules of Unobtrusive
JavaScript
• No JavaScript in HTML documents.
• Don’t depend on or trust JavaScript.
• Poke objects before using them.
• Write JavaScript, not dialects.
- 114. Rules of Unobtrusive
JavaScript
• No JavaScript in HTML documents.
• Don’t depend on or trust JavaScript.
• Poke objects before using them.
• Write JavaScript, not dialects.
• Mind your manners with vars & scope.
- 115. Rules of Unobtrusive
JavaScript
• No JavaScript in HTML documents.
• Don’t depend on or trust JavaScript.
• Poke objects before using them.
• Write JavaScript, not dialects.
• Mind your manners with vars & scope.
• Support multiple event triggers.
- 119. Making Decisions (1)
1. Do what is standard.
if impossible, then:
2. Do what is common.
if impossible, then:
3. Do what it takes.
- 122. Historical Our Beliefs
Perspective & Principles
Knowledge
Areas & Best
Practices
- 123. 8 Areas of Focus
1. HTML 6. Performance
2. CSS 7. Infrastructure &
Process
3. JavaScript
8. Tooling
4. Accessibility
5. Internationalization
- 149. Linting
• Use programs like JSLint (jslint.org) to
confirm the quality of your code.
• Adopt the idioms it promotes to improve
your code quality.
- 150. Unit Testing w/ YUI Test
• Rapid creation of test cases via simple syntax.
• Advanced failure detection for methods that
throw errors.
• Grouping of related test cases using test suites.
• Asynchronous tests for testing events and Ajax
communication.
• DOM Event simulation in all A-grade browsers.
- 151. Profiling
• Learn where to improve your code.
• Programmatically retrieve profiling
information as the application is running.
• Determine unit-testing success based on
profiling results.
- 152. JavaScript Pollution
• Do not mutate JavaScript itself.
• Do protect yourself from browsers.
• Minimize touchpoints between authors and
vendors so vendors can iterate faster.
- 158. oc us
F
#5
Internationalization
- 164. Avoid Redirects
• 3xx status codes – mostly 301 and 302
HTTP/1.1 301 Moved Permanently
Location: http://yahoo.com/newuri
• Cache redirects via Expires headers
• Redirects are worst
form of blocking
- 165. Use Cookie-Free
Domains For Assets.
• Serving static cacheable assets from a
distinct domains keeps cookies from riding
along with all requests.
yimg.com
images-amazon.com
fbcdn.net
- 168. Preload Assets
1. Unconditional preload - always w/ onload
Example: google.com’s sprite
2. Conditional preload - based on user action
Ex: search.yahoo.com’s Search Assist
- 169. Preload Assets
1. Unconditional preload - always w/ onload
Example: google.com’s sprite
2. Conditional preload - based on user action
Ex: search.yahoo.com’s Search Assist
3. Anticipated preload - give redesigns a boost
- 172. Optimize CSS Sprites
1. Horizontal alignment is usually smaller than
vertical.
2. Combine similar colors in a sprite to
minimize color count.
Only 256 colors can fit in a PNG8.
- 173. Optimize CSS Sprites
1. Horizontal alignment is usually smaller than
vertical.
2. Combine similar colors in a sprite to
minimize color count.
Only 256 colors can fit in a PNG8.
3. Avoid unnecessarily large gaps between
parts of the sprite.
- 174. GET for Ajax Requests
• POST is a two-step process.
• GET can send in one packet.
• Use if possible, but max payload is 2K in IE.
- 175. Keep Focusing on Events
1. Event Delegation to reduce total number
2. Don’t always wait for onLoad
• YUI Event has onAvailable,
onContentReady, & onDomReady
- 176. iPhone Tip
• iPhone will not cache assets larger than 25K
• That’s 25K uncompressed.
• Only 19 total items in cache.
• http://yuiblog.com/blog/2008/02/06/iphone-
cacheability/
- 177. oc us
F
#7
Infrastructure &
Process
- 187. But there’s been some:
• JSLint, JScript Debugger, Firebug, Debug Bar,
Fiddler, Charles, HTTP Live Headers,
DragonFly, Visual Studio 2008
• YUI Logger, YUI Test, and YUI Profiler
- 188. Historical Our Beliefs
Perspective & Principles
Knowledge
Why It All
Areas & Best
Matters
Practices
- 200. CC Images Used
• http://www.flickr.com/photos/dideo/407360526/sizes/l/
• http://www.flickr.com/photos/jenniferbuehrer/113554568/sizes/l/
• http://www.flickr.com/photos/peteashton/290691658/sizes/l/
• http://www.flickr.com/photos/pedjap/101230548/sizes/o/
• http://www.flickr.com/photos/songtuyuri/2200100451/sizes/o/
• http://www.flickr.com/photos/dominik99/1403329318/sizes/o/
• http://www.flickr.com/photos/cuellar/482993472/sizes/o/