Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Frontend Infrastructure at Etsy

Frontend Infrastructure at Etsy

Delivered at Smashing Conf NYC, June 17th 2015

Daniel Espeset

June 17, 2015
Tweet

More Decks by Daniel Espeset

Other Decks in Programming

Transcript

  1. 3

  2. 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
  3. Daniel Espeset @danielespeset Frontend Infrastructure 5 Daniel Espeset Daniel Na

    Takashi Mizohata Etsy Seth Walker Sufian Rhazi Jonathan Lai
  4. pages/search_results.php if (Feature::isEnabled('my_new_feature')) { // TODO build this part }

    else { // Existing code } 20 21 22 .. 100 12 config/production.php // Owner: despeset, frontend infrastructure server_config['my_new_feature'] = ( 'enabled' => 0 ); 890 891 892 893 Checking a flag Defining a flag
  5. 13 desp .join pushbot has changed topic to: "<prod> seth

    dna* gio* | desp" pushbot desp jklein : You're up desp .in pushbot has changed topic to: "desp jklein" pushbot has changed topic to: "desp* jklein" jklein .in pushbot has changed topic to: "desp* jklein*" pushbot desp jklein : everyone is ready Coordinating Deploys
  6. 14

  7. 15

  8. 16

  9. 17

  10. 18

  11. 20 // Owner: despeset, frontend infrastructure server_config['my_new_feature'] = ( 'enabled'

    => 0, 'group' => 9903 ); 890 891 892 893 894 config/production.php
  12. 21 config/production.php // Owner: despeset, frontend infrastructure server_config['my_new_feature'] = (

    'enabled' => 0, 'group' => 9903, 'admin' => 'on' ); 890 891 892 893 894 895
  13. 22 // Owner: despeset, frontend infrastructure server_config['my_new_feature'] = ( 'enabled'

    => 50, 'group' => 9903, 'admin' => 'on' ); 890 891 892 893 894 895 config/production.php
  14. 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
  15. 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
  16. Daniel Espeset @danielespeset At any given time we may be

    running dozens of tests per page 29
  17. 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 “ ”
  18. {% css files="base" %}{% /css %} Template Code <link href="css/base.20150607182402.css"

    ... /> Rendered HTML most recent last modified date of file and all dependencies.
  19. {% css files="base" %}{% /css %} Template Code <link href="css/base.20150607182402.css"

    ... /> Rendered HTML adds version number, always happens.
  20. {% css files="base" %}{% /css %} Template Code <link href="css/base.20150607182402.css"

    ... /> Rendered HTML if (rand() > 0.01) { log(template, asset); }
  21. Daniel Espeset @danielespeset + + JS graph Asset logs CSS

    graph Ranger combines 3 dependency graphs 45
  22. 46

  23. 47

  24. 48

  25. 49

  26. 50

  27. 51

  28. 52

  29. 53

  30. Daniel Espeset @danielespeset 57 • Pick a stylesheet loaded on

    the page • Randomly pick 50 selectors via CSSOM Shrinkray - CSS analysis
  31. 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
  32. 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
  33. 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
  34. 61

  35. Daniel Espeset @danielespeset • Low confidence on long-tail pages •

    Doesn't capture CSS appearing by user action Why doesn't it work yet? 62
  36. 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
  37. 64 #container .button-cool ul { color: pink; float: left; }

    #container .button-cool ul:before { content: ''; background-image: url('selector-used?id=1'); } 890 891 892 893 894 895 896 899 some_page.css CSS Background Beacon
  38. Daniel Espeset @danielespeset • @import statements needed changed • Converter

    fixes 171,244 Sass-lint errors • Had to resolve hundreds of invalid CSS rules & selectors Converter script 69
  39. Daniel Espeset @danielespeset CSS Source Legacy CSS Build Converter Sass

    Build New CSS Build AST Differ Parse to AST Parse to AST 74 Legacy Build
  40. Daniel Espeset @danielespeset CSS Source Legacy CSS Build Converter Sass

    Build 100% Etsy New CSS Build 76 Legacy Build
  41. Daniel Espeset @danielespeset CSS Source Legacy CSS Build New CSS

    Build Converter Sass Build 100% 78 Legacy Build
  42. 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
  43. 81

  44. Daniel Espeset @danielespeset It helps to have a team dedicated

    to this work. (or even just a person) 87