Professional Frontend Engineering

Slide 1: Professional Frontend Engineering Nate Koechley Senior Frontend Engineer Yahoo! natek@yahoo-inc.com | developer.yahoo.com/yui nate.koechley.com/blog | “natekoechley”

Slide 2: Why this topic?

Slide 4: • Put a stake in the ground. • Reiterate our values. • Advocate the discipline. • Nurture a healthy Web.

Slide 7: Historical Perspective

Slide 8: Historical Our Beliefs Perspective & Principles

Slide 9: Historical Our Beliefs Perspective & Principles Knowledge Areas & Best Practices

Slide 10: Historical Our Beliefs Perspective & Principles Knowledge Why It All Areas & Best Matters Practices

Slide 11: Historical Perspective

Slide 19: Year = 2001

Slide 20: Age = 7 years

Slide 21: Employees = 3000

Slide 22: Frontend Engineers = 0

Slide 23: So?

Slide 24: 2001 First frontend engineering specialists hired.

Slide 25: 2008 ~700 professional frontend engineers spread across Y! offices worldwide. And hiring!!!

Slide 26: 2001 Font tags & nested tables. Static interface.

Slide 27: 2008 Semantic & accessible markup. Rich DHTML & Ajax behavior. More content. Same fast speed.

Slide 28: 2001 Available and accessible to everyone.

Slide 29: 2008 Available and accessible to everyone.

Slide 30: 2001 Plain but predictable.

Slide 31: 2008 Highly visual and adaptive, but still dependable.

Slide 32: 2001 Modest user expectations.

Slide 33: 2008 Sophisticated, broad, and non-trivial user expectations.

Slide 34: 2001 Intersection of design and development still vague.

Slide 35: Now Professional Frontend Engineers focused at the intersection of design and development is a best practice.

Slide 36: —Irene Au, SVP of UED at Yahoo!

Slide 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!

Slide 38: —Irene Au, SVP of UED at Yahoo!

Slide 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!

Slide 42: “The Framers of the Web saw browser differences as beneficial and believed that visitors should choose how their browser displays the page...”

Slide 44: “...I wanted more control so I threw my HTML book in the trash and started from scratch.”

Slide 45: The Web is still sick.

Slide 46: Frontend Engineers are the Web’s Radiologists

Slide 47: Question: What is Frontend Engineering?

Slide 48: Answer: We write software in JavaScript, CSS, and HTML & more...

Slide 49: Answer: We tell browsers what to do.

Slide 50: Answer: We’re responsible for “view source”

Slide 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

Slide 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

Slide 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

Slide 54: SIMPLE?

Slide 55: no.

Slide 56: server

Slide 57: (X)HTML server

Slide 58: (X)HTML Specification server

Slide 59: (X)HTML Specification Implementation server

Slide 60: (X)HTML Specification Implementation Bugs server

Slide 61: (X)HTML Specification Implementation Bugs [ Theory / Practice ] server

Slide 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

Slide 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

Slide 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

Slide 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

Slide 67: usability, internationalization, localization, visual design, accessibility, information architecture, security, build processes, performance, benchmarking, devices, portability

Slide 68: from Lifted ©2007 Pixar Animation Studios

Slide 69: Different from Backend because we: • Can’t compile. • Can’t trust. • Can’t predict. • Can’t install or store. • Can’t hide anything!

Slide 70: Douglas Crockford on browsers: “The most hostile software development environment imaginable.”

Slide 71: If your business is online... your value depends on Frontend Engineering.

Slide 72: Elegant algorithms benefit users through interfaces built by Frontend Engineers.

Slide 73: Every gorgeous design is brought to life by Frontend Engineers.

Slide 74: Frontend engineers give sites strength & resilience, appearance & form, and functionality & interactivity.

Slide 75: ...which is why professional frontend engineering is critical for success.

Slide 76: Historical Our Beliefs Perspective & Principles

Slide 77: Four Guiding Principles

Slide 78: 1) Availability

Slide 79: Availability: Maximize availability, accessibility and utility of content and services for all users worldwide.

Slide 80: 2) Openness

Slide 81: Openness: Share. Learn. Support. Advocate. We benefit from a healthy Internet.

Slide 82: 3) Richness

Slide 83: Richness: Provide, but not too much. Layer endlessly. Remember we are not average.

Slide 84: 4) Stability

Slide 85: Stability: The Web is young. Invest in quality. Prepare for the future.

Slide 86: Four Guiding Principles • Availability • Openness • Richness • Stability

Slide 87: Three Core Techniques

Slide 88: 1) Graded Browser Support http://developer.yahoo.com/yui/articles/gbs/

Slide 89: “Support” does not mean identical.

Slide 90: “Support” is not a binary choice.

Slide 91: Three Support Grades

Slide 92: Three Support Grades C-Grade • Blacklist (of incapable browsers) • Withhold CSS & JavaScript

Slide 93: Three Support Grades C-Grade • Blacklist (of incapable browsers) • Withhold CSS & JavaScript A-Grade • Whitelist (of capable browsers tested) • Serve CSS & JavaScript

Slide 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

Slide 95: A-Grade Support http://developer.yahoo.com/yui/articles/gbs

Slide 96: C-Grade Experience

Slide 97: A-Grade Experience

Slide 98: C-Grade Experience

Slide 99: A-Grade Experience

Slide 100: 2) Progressive Enhancement

Slide 101: Rules of Progressive Enhancement

Slide 102: Rules of Progressive Enhancement • Enrich content with thorough, explicit markup.

Slide 103: Rules of Progressive Enhancement • Enrich content with thorough, explicit markup. • Test core functionality with HTML only.

Slide 104: Rules of Progressive Enhancement • Enrich content with thorough, explicit markup. • Test core functionality with HTML only. • Enhance layout via externally linked CSS.

Slide 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.

Slide 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.

Slide 107: Flipped definition of “graceful degradation”

Slide 108: 3) Unobtrusive JavaScript http://onlinetools.org/articles/unobtrusivejavascript/

Slide 109: Rules of Unobtrusive JavaScript

Slide 110: Rules of Unobtrusive JavaScript • No JavaScript in HTML documents.

Slide 111: Rules of Unobtrusive JavaScript • No JavaScript in HTML documents. • Don’t depend on or trust JavaScript.

Slide 112: Rules of Unobtrusive JavaScript • No JavaScript in HTML documents. • Don’t depend on or trust JavaScript. • Poke objects before using them.

Slide 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.

Slide 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.

Slide 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.

Slide 116: Don’t Break the Web! href=“#” href=“javascript:foo()” onclick=“foo()”

Slide 117: Three Core Techniques • Graded Browser Support • Progressive Enhancement • Unobtrusive JavaScript

Slide 118: Making Decisions

Slide 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.

Slide 120: Making Decisions (2) 1. Do what is simple. ✚ 2. Do what is flexible & progressive. ✚ 3. Do what is open.

Slide 121: Making Decisions (3) • Remember you have multiples audiences to satisfy: • Users • Developers • Machines

Slide 122: Historical Our Beliefs Perspective & Principles Knowledge Areas & Best Practices

Slide 123: 8 Areas of Focus 1. HTML 6. Performance 2. CSS 7. Infrastructure & Process 3. JavaScript 8. Tooling 4. Accessibility 5. Internationalization

Slide 124: oc us F #1 HTML

Slide 125: Focus: Be thorough.

Slide 126: <label>

Slide 127: <fieldset>

Slide 128: <cite>

Slide 129: <caption>

Slide 130: <thead>

Slide 131: <th scope=”row” abbr=”ManU”>

Slide 132: <ins datetime=”2008-05-30”>

Slide 133: Aim for permanence.

Slide 134: Switching costs are rising.

Slide 135: oc us F #2 CSS

Slide 136: Focus on the left side.

Slide 137: selector: declaration;

Slide 138: selector: declaration;

Slide 139: Focus: Specificity great selectors are an expression of professionalism

Slide 140: h1: declaration;

Slide 141: #mod h1: declaration;

Slide 142: div#mod h1: declaration;

Slide 143: body.cart #mod h1.class a: declaration;

Slide 144: #mod ul li li: declaration;

Slide 145: Focus: Maintenance think about how sites age

Slide 146: oc us F #3 JavaScript

Slide 147: JavaScript • Quality • Security

Slide 148: 1) Quality

Slide 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.

Slide 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.

Slide 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.

Slide 152: JavaScript Pollution • Do not mutate JavaScript itself. • Do protect yourself from browsers. • Minimize touchpoints between authors and vendors so vendors can iterate faster.

Slide 153: 2) Security

Slide 154: JavaScript Security • Beware of XSS • Never Trust Data from the Client • Monitor AdSafe/Caja Developments

Slide 155: oc us F #4 Accessibility

Slide 156: ARIA

Slide 157: Decoupled Events

Slide 158: oc us F #5 Internationalization

Slide 159: Begin serving all .css and .js at UTF-8

Slide 160: @charset "

Slide 161: oc us F #6 Performance

Slide 162: 14 then. 8 more today.

Slide 163: <link> not @import • Because @import overrides the browsers’ native performance sequencing.

Slide 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

Slide 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

Slide 166: Preload Assets

Slide 167: Preload Assets 1. Unconditional preload - always w/ onload Example: google.com’s sprite

Slide 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

Slide 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

Slide 170: Optimize CSS Sprites

Slide 171: Optimize CSS Sprites 1. Horizontal alignment is usually smaller than vertical.

Slide 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.

Slide 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.

Slide 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.

Slide 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

Slide 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/

Slide 177: oc us F #7 Infrastructure & Process

Slide 178: Build Process

Slide 179: Documentation

Slide 180: three versions of each member

Slide 181: *.js

Slide 182: *-debug.js

Slide 183: *-min.js

Slide 184: What Is YUI?

Slide 185: oc us F #8 Tooling

Slide 186: Need More Progress.

Slide 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

Slide 188: Historical Our Beliefs Perspective & Principles Knowledge Why It All Areas & Best Matters Practices

Slide 189: There’s a lot of work to be done.

Slide 190: We need more people doing it.

Slide 191: The health of the internet depends on it.

Slide 192: The health of our businesses and passions depends on it.

Slide 193: We must stay vigilant.

Slide 194: We must defend users.

Slide 195: Go forth with this in mind:

Slide 196: Be Tireless Trendsetters of Quality Be active. Find the way forward. Educate.

Slide 197: Be Belligerent Gatekeepers of Quality Do not accept less. Do not cut corners.

Slide 198: Exhibit Stubborn Empathy for Users We’re the last line of defense!

Slide 199: Let’s keep talking... nate@koechley.com http://nate.koechley.com/blog “natekoechley”

Slide 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/

Slide 201: nate@koechley.com http://nate.koechley.com/blog natekoechley = twitter, delicious, flickr, tripit, last.fm, linkedin, fireeagle, friendfeed, ... everywhere.