1. Professional Frontend Engineering Nate KoechleySenior Frontend Engineer Yahoo!natek@yahoo-inc.com | developer.yahoo.com/yuinate.koechley.com/blog | natekoechley

2. Why this topic? 3. Put a stake in theground. Reiterate ourvalues. Advocate thediscipline. Nurture a healthyWeb. 4. HistoricalPerspective 5. Historical Our BeliefsPerspective & Principles 6. HistoricalOur BeliefsPerspective& Principles KnowledgeAreas & BestPractices 7. HistoricalOur BeliefsPerspective& Principles Knowledge Why It AllAreas & Best MattersPractices 8. HistoricalPerspective 9. Year = 2001 10. Age = 7 years 11. Employees = 3000 12. FrontendEngineers = 0 13. So? 14. 2001First frontend engineeringspecialists hired. 15. 2008~700 professional frontend engineers spread acrossY! ofces worldwide. And hiring!!! 16. 2001Font tags & nested tables. Static interface. 17. 2008Semantic & accessible markup.Rich DHTML & Ajax behavior.More content. Same fast speed. 18. 2001Available and accessible to everyone. 19. 2008Available and accessible to everyone. 20. 2001Plain but predictable. 21. 2008Highly visual and adaptive, but still dependable. 22. 2001Modest user expectations. 23. 2008Sophisticated, broad, andnon-trivial user expectations. 24. 2001Intersection of design and development still vague. 25. NowProfessional Frontend Engineers focused at theintersection of design anddevelopment is a best practice. 26. Irene Au, SVP of UED at Yahoo! 27. In 2001, with developments in advanced JavaScript and DHTML, we knew the webexperience would evolve beyond the staticpages we were producing. We brought in webdevelopers to help us pioneer Yahoos offerings to include a more dynamic, interactive experience for our users.Irene Au, SVP of UED at Yahoo! 28. Irene Au, SVP of UED at Yahoo! 29. ... Another motivation was to bring in a disciplined frontend programming practice to Yahoo. Before then, thepresentation, behavior, and structure ofour pages were not separate, which led to many challenges and inefciencies indesigning and developing our products. Irene Au, SVP of UED at Yahoo! 30. The Framers of the Web saw browser differencesas beneficial and believed that visitors shouldchoose how their browser displays the page... 31. ...I wanted more control so I threw my HTMLbook in the trash andstarted from scratch. 32. The Web is still sick. 33. Frontend Engineers arethe Webs Radiologists 34. Question:What is FrontendEngineering? 35. Answer:We write softwarein JavaScript, CSS,and HTML & more... 36. Answer:We tell browserswhat to do. 37. Answer:Were responsiblefor view source 38. The Yahoo! StackPages & modules95% HTML, 5% PHP Display logic & APIs 50% HTML, 50% PHPSpecic PHP biz logic90% PHP, 10% Text Generic PHP functions & libs 100% PHPC/C++ Libraries. 90% C/C++, 10% PHP 39. The Yahoo! Stack Pages & modules Frontend 95% HTML, 5% PHPDisplay logic & APIs50% HTML, 50% PHP Specic PHP biz logic 90% PHP, 10% TextGeneric PHP functions & libs100% PHP Backend C/C++ Libraries.90% C/C++, 10% PHP 40. The Yahoo! Stack Pages & modules Frontend 95% HTML, 5% PHPDisplay logic & APIs50% HTML, 50% PHP Specic PHP biz logic 90% PHP, 10% TextGeneric PHP functions & libs100% PHP Backend C/C++ Libraries.90% C/C++, 10% PHP 41. SIMPLE? 42. no. 43. server 44. (X)HTML server 45. (X)HTMLSpecication server 46. (X)HTML SpecicationImplementation server 47. (X)HTML SpecicationImplementation Bugs server 48. (X)HTMLSpecication ImplementationBugs[ Theory / Practice ] server 49. CSSBOM API(X)HTMLDOMJavaScriptDOM APISpecicationData Transport data: custom, xml, mixed: new xhtml Implementationjson behavior: jsBugs[ Theory / Practice ] server 50. SafariFirefoxOpera IE5, 6, 7Firefox Opera 10,000+ UAs Macintosh WindowsLinux, Unix, MobileCSSBOM API (X)HTMLDOMJavaScriptDOM API Specication Data Transportdata: custom, xml,mixed: new xhtmlImplementation jsonbehavior: js Bugs [ Theory / Practice ] server 51. SafariFirefoxOpera IE5, 6, 7 Firefox Opera10,000+ UAs Macintosh Windows Linux, Unix, MobileCSS BOM API (X)HTML DOM JavaScript DOM API Specification data: custom, xml, mixed: new xhtml,Data TransportImplementation behavior: jsjsonDefects [ Theory / Practice ] server 52. SafariFirefoxOpera IE5, 6, 7 Firefox Opera10,000+ UAs Macintosh Windows Linux, Unix, Mobile knowledge areas: 7CSS (X)HTML dimensions: xJavaScriptDOM4BOM API DOM APIplatforms: x 3 Specification data: custom, xml, mixed: new xhtml, browsers perDefects platform: x 4Data Transport Implementation behavior: jsjson rendering modes: x 2[ Theory / Practice ] server =672 53. usability, internationalization,localization, visual design,accessibility, information architecture, security, build processes, performance,benchmarking, devices, portability 54. from Lifted2007 Pixar Animation Studios 55. Different from Backendbecause we: Cant compile. Cant trust. Cant predict. Cant install or store. Cant hide anything! 56. Douglas Crockford on browsers: The most hostilesoftware development environment imaginable. 57. If your business is online... your value depends on Frontend Engineering. 58. Elegant algorithms benet users through interfaces built byFrontend Engineers. 59. Every gorgeous design isbrought to life by FrontendEngineers. 60. Frontend engineers give sitesstrength & resilience, appearance & form, and functionality & interactivity. 61. ...which is why professional frontend engineering iscritical for success. 62. Historical Our BeliefsPerspective & Principles 63. Four Guiding Principles 64. 1) Availability 65. Availability:Maximize availability, accessibilityand utility of content and servicesfor all users worldwide. 66. 2) Openness 67. Openness:Share. Learn. Support. Advocate.We benet from a healthy Internet. 68. 3) Richness 69. Richness:Provide, but not too much.Layer endlessly.Remember we are not average. 70. 4) Stability 71. Stability:The Web is young.Invest in quality.Prepare for the future. 72. Four Guiding Principles Availability Openness Richness Stability 73. Three Core Techniques 74. 1) Graded Browser Supporthttp://developer.yahoo.com/yui/articles/gbs/ 75. Support does notmean identical. 76. Support is not abinary choice. 77. Three Support Grades 78. Three Support GradesC-Grade Blacklist (of incapable browsers) Withhold CSS & JavaScript 79. Three Support GradesC-Grade Blacklist (of incapable browsers) Withhold CSS & JavaScriptA-Grade Whitelist (of capable browsers tested) Serve CSS & JavaScript 80. Three Support GradesC-Grade Blacklist (of incapable browsers) Withhold CSS & JavaScriptA-Grade Whitelist (of capable browsers tested) Serve CSS & JavaScriptX-Grade Everybody else. Serve CSS & JavaScript 81. A-Grade Supporthttp://developer.yahoo.com/yui/articles/gbs 82. C-Grade Experience 83. A-Grade Experience 84. C-Grade Experience 85. A-Grade Experience 86. 2) ProgressiveEnhancement 87. Rules of Progressive Enhancement 88. Rules of Progressive Enhancement Enrich content with thorough, explicit markup. 89. Rules of Progressive Enhancement Enrich content with thorough, explicit markup. Test core functionality with HTML only. 90. Rules of Progressive Enhancement Enrich content with thorough, explicit markup. Test core functionality with HTML only. Enhance layout via externally linked CSS. 91. 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 linkedunobtrusive JavaScript. 92. 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 linkedunobtrusive JavaScript. Respect end-user browser preferences. 93. Flipped denition ofgraceful degradation 94. 3) Unobtrusive JavaScripthttp://onlinetools.org/articles/unobtrusivejavascript/ 95. Rules of UnobtrusiveJavaScript 96. Rules of UnobtrusiveJavaScript No JavaScript in HTML documents. 97. Rules of UnobtrusiveJavaScript No JavaScript in HTML documents. Dont depend on or trust JavaScript. 98. Rules of UnobtrusiveJavaScript No JavaScript in HTML documents. Dont depend on or trust JavaScript. Poke objects before using them. 99. Rules of UnobtrusiveJavaScript No JavaScript in HTML documents. Dont depend on or trust JavaScript. Poke objects before using them. Write JavaScript, not dialects. 100. Rules of UnobtrusiveJavaScript No JavaScript in HTML documents. Dont depend on or trust JavaScript. Poke objects before using them. Write JavaScript, not dialects. Mind your manners with vars & scope. 101. Rules of UnobtrusiveJavaScript No JavaScript in HTML documents. Dont depend on or trust JavaScript. Poke objects before using them. Write JavaScript, not dialects. Mind your manners with vars & scope. Support multiple event triggers. 102. Dont Break the Web!href=#href=javascript:foo()onclick=foo() 103. Three Core Techniques Graded Browser Support Progressive Enhancement Unobtrusive JavaScript 104. Making Decisions 105. Making Decisions (1)1. Do what is standard.if impossible, then:2. Do what is common.if impossible, then:3. Do what it takes. 106. Making Decisions (2)1. Do what is simple.2. Do what is exible & progressive.3. Do what is open. 107. Making Decisions (3) Remember you have multiplesaudiences to satisfy: Users Developers Machines 108. HistoricalOur BeliefsPerspective& Principles KnowledgeAreas & BestPractices 109. 8 Areas of Focus1. HTML 6. Performance2. CSS7. Infrastructure & Process3. JavaScript8. Tooling4. Accessibility5. Internationalization 110. oc usF#1 HTML 111. Focus: Be thorough. 112. 113. 114. 115. 116. 117. 118. 119. Aim for permanence. 120. Switching costsare rising. 121. oc usF#2 CSS 122. Focus on the left side. 123. selector: declaration; 124. selector: declaration; 125. Focus: Specicity great selectors are anexpression of professionalism 126. h1: declaration; 127. #mod h1: declaration; 128. div#mod h1: declaration; 129. body.cart #mod h1.class a: declaration; 130. #mod ul li li: declaration; 131. Focus: Maintenancethink about how sites age 132. oc usF#3 JavaScript 133. JavaScript Quality Security 134. 1) Quality 135. Linting Use programs like JSLint (jslint.org) toconrm the quality of your code. Adopt the idioms it promotes to improveyour code quality. 136. Unit Testing w/ YUI Test Rapid creation of test cases via simple syntax. Advanced failure detection for methods thatthrow errors. Grouping of related test cases using test suites. Asynchronous tests for testing events and Ajaxcommunication. DOM Event simulation in all A-grade browsers. 137. Proling Learn where to improve your code. Programmatically retrieve prolinginformation as the application is running. Determine unit-testing success based onproling results. 138. JavaScript Pollution Do not mutate JavaScript itself. Do protect yourself from browsers. Minimize touchpoints between authors andvendors so vendors can iterate faster. 139. 2) Security 140. JavaScript Security Beware of XSS Never Trust Data from the Client Monitor AdSafe/Caja Developments 141. oc usF#4 Accessibility 142. ARIA 143. Decoupled Events 144. oc usF#5 Internationalization 145. Begin serving all .cssand .js at UTF-8 146. @charset " 147. oc usF#6 Performance 148. 14 then. 8 more today. 149. not @import Because @importoverrides the browsersnative performancesequencing. 150. Avoid Redirects 3xx status codes mostly 301 and 302HTTP/1.1 301 Moved PermanentlyLocation: http://yahoo.com/newuri Cache redirects via Expires headers Redirects are worstform of blocking 151. Use Cookie-Free Domains For Assets. Serving static cacheable assets from adistinct domains keeps cookies from ridingalong with all requests.yimg.comimages-amazon.comfbcdn.net 152. Preload Assets 153. Preload Assets1. Unconditional preload - always w/ onloadExample: google.coms sprite 154. Preload Assets1. Unconditional preload - always w/ onloadExample: google.coms sprite2. Conditional preload - based on user actionEx: search.yahoo.coms Search Assist 155. Preload Assets1. Unconditional preload - always w/ onloadExample: google.coms sprite2. Conditional preload - based on user actionEx: search.yahoo.coms Search Assist3. Anticipated preload - give redesigns a boost 156. Optimize CSS Sprites 157. Optimize CSS Sprites1. Horizontal alignment is usually smaller than vertical. 158. Optimize CSS Sprites1. Horizontal alignment is usually smaller than vertical.2. Combine similar colors in a sprite to minimize color count.Only 256 colors can t in a PNG8. 159. Optimize CSS Sprites1. Horizontal alignment is usually smaller than vertical.2. Combine similar colors in a sprite to minimize color count.Only 256 colors can t in a PNG8.3. Avoid unnecessarily large gaps between parts of the sprite. 160. 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. 161. Keep Focusing on Events1. Event Delegation to reduce total number2. Dont always wait for onLoad YUI Event has onAvailable,onContentReady, & onDomReady 162. iPhone Tip iPhone will not cache assets larger than 25K Thats 25K uncompressed. Only 19 total items in cache. http://yuiblog.com/blog/2008/02/06/iphone-cacheability/ 163. oc usF#7 Infrastructure &Process 164. Build Process 165. Documentation 166. three versions of each member 167. *.js 168. *-debug.js 169. *-min.js 170. What Is YUI? 171. oc usF#8 Tooling 172. Need More Progress. 173. But theres been some: JSLint, JScript Debugger, Firebug, Debug Bar,Fiddler, Charles, HTTP Live Headers,DragonFly, Visual Studio 2008 YUI Logger, YUI Test, and YUI Proler 174. HistoricalOur BeliefsPerspective& Principles Knowledge Why It AllAreas & Best MattersPractices 175. Theres a lot ofwork to be done. 176. We need morepeople doing it. 177. The health of theinternet depends on it. 178. The health of ourbusinesses and passions depends on it. 179. We must stay vigilant. 180. We must defend users. 181. Go forth with this in mind: 182. Be TirelessTrendsetters of Quality Be active. Find the way forward.Educate. 183. Be BelligerentGatekeepers of Quality Do not accept less. Do not cut corners. 184. Exhibit StubbornEmpathy for UsersWere the last line of defense! 185. Lets keep talking... nate@koechley.comhttp://nate.koechley.com/blognatekoechley 186. CC Images Used http://www.ickr.com/photos/dideo/407360526/sizes/l/ http://www.ickr.com/photos/jenniferbuehrer/113554568/sizes/l/ http://www.ickr.com/photos/peteashton/290691658/sizes/l/ http://www.ickr.com/photos/pedjap/101230548/sizes/o/ http://www.ickr.com/photos/songtuyuri/2200100451/sizes/o/ http://www.ickr.com/photos/dominik99/1403329318/sizes/o/ http://www.ickr.com/photos/cuellar/482993472/sizes/o/ 187. nate@koechley.comhttp://nate.koechley.com/blognatekoechley = twitter,delicious, flickr, tripit, last.fm, linkedin,fireeagle, friendfeed, ... everywhere.