Daniel Espeset @danielespeset A front-end operations engineer is not a title you’ve likely come across, but hopefully one that you will [...] an expert at serving and hosting front-end resources. [finding] the best ways to piece together the parts of a Web application, and [being a pro] at versioning, caching and deployment. Alex Sexton @slexaxton "Front-End Ops", Smashing Magazine, July 2013 “ ” 4
Daniel Espeset @danielespeset idea code release idea code release? A/B test idea prototy release A/B test validate A/B test refine 2005 2010 2012 Shamelessly stolen from Dan McKinley mcfunley.com/data-driven-products-now Evolution of Continuous Experimentation 24
Daniel Espeset @danielespeset • Engineers are trusted and given agency • The production codebase is constantly changing • That codebase is filled with feature flags In a nutshell 25
Daniel Espeset @danielespeset 40 ...the bridge between an application's intent and an application's reality. Alex Sexton (JavaScript Laureate of Texas) "Front-End Ops", Smashing Magazine, July 2013 “ ”
Daniel Espeset @danielespeset 58 • Pick a stylesheet loaded on the page • Randomly pick 50 selectors via CSSOM • Search for matches with document.querySelector Shrinkray - CSS analysis
Daniel Espeset @danielespeset 59 • Pick a stylesheet loaded on the page • Randomly pick 50 selectors via CSSOM • Search for matches with document.querySelector • Send results to server Shrinkray - CSS analysis
Daniel Espeset @danielespeset • Pick a stylesheet loaded on the page • Randomly pick 50 selectors via CSSOM • Search for matches with document.querySelector • Send results to server • Aggregate data with Map Reduce Shrinkray - CSS analysis 60
Daniel Espeset @danielespeset • Increase measurement volume if perf allows • Add time skew to measurements • Intelligently target selectors based on the data • Add a second pass using an more invasive but thorough technique Possible solutions 63
Daniel Espeset @danielespeset • No @extends or functions, ever • @mixins only defined in one global file • Nesting level < 4 • Variable definitions should in a dedicated file Restricting Sass 80