Front End Ops Conf

Make serving web apps easier and faster



http://www.feopsconf.com/
April 24-25, 2014 | San Francisco

Front end ops - 1

Alex Sexton, Stripe  

  • What is a  front-end operations engineer?
    • http://www.smashingmagazine.com/2013/06/11/
      front-end-ops/
    • The bridge between an application's intent and an
      application's reality
    • host front-end resources/grunt/modules
    • versioning, caching and deployment
    • own external performance


    FRONT END OPS - 2

    Alex Sexton, Stripe

    • Speed of the app
      • make a dashboard
      • speed index & link to the diff
      • page weight (gzipped/ungzipped)
      • # of requests, errors, build times
    • Speed of the development
      • Goal: change -> app should approach 0
      • source map 
      • easy cmd to get things works
      • LiveReload
      • set a calender remainder to update dependencies
      • rigorous styles checking - lint

    Performance and Maintainability with
    Continuous Experimentation

    Seth Walker, Esty

    • Continuous delivery with analytic capabilities
      • 400 experiments in 2013
      • collecting both performance data and 
        product data
      • a heads up display for admin that shows perf
        info, currently running experiments



      PERFORMANCE AND MAINTAINABILITY WITH

      CONTINUOUS EXPERIMENTATION

      Seth Walker, Esty

      • Feature flags
        • https://github.com/etsy/feature
       Feature::isEnabled('my_feature') // returns true when feature is enabled
       Feature::variant('my_feature') // returns the name of the variant
       server_config['foo'] = array(     'enabled' => 10, // enabled for 10% of regular user     'admin' => 'on'  // enabled for all admins  );

      Deliver the goods in under 1000ms

      Paul Irish, Google Chrome
      • bring speed index under 1000
        • TCP handshake
        • TCP slow start
        • max of 200ms server resp time
        • 14k bytes
          • Critical Rendering Path

        Critical Rendering Path

        1. Allow early discovery of dependent resources (CSS/JS/IMG)
        2. Get CSS down to the client as fast as you can
        3. Eliminate blocking JS
        • do you need scripts in your critical rendering path?

        Code Example


        https://docs.google.com/presentation/d/1IRHyU7_crIiCjl0Gvue0WY3eY_eYvFQvSfwQouW9368/edit#slide=id.p19

        The critical rendering path


        Reducing Complexity With
        a component api

        Ian Feather, Lonely Planet 

        • Problems with big site:
          • complex UI components, high risk and high fear
          • interwinded, low reuse,  technical debt


          COMPONENT API

          • Should feel as ez as working on a small site
          • Need to decouple the UI and the apps
          • Components
            • a template with associated css and js
            • and API to fetch them

            A COMPONENT API










            http://rizzo.lonelyplanet.com/styleguide/design-elements/colours
            • Style guide == a data-driven application





            REGRESSION TESTING TOOLS

            • Image Regression 
              • wraith (a responsive screenshot comparison tool)
              • grunt-photobox
              • siteeffect.io (pixel comparison & dom css context)

            • Performance Regression
              • phantomas (phantomJS based)
              • Browser-perf (npm)
              • chrome telemetry (a wrapper around the chrome's dev tool)

            • CSS Regression
              • csste.st
              • hardy.io (a cmd-line tool)

            • General
              • Sauce Labs (browsers, platforms, language, devices)
              • Appium (test automation framework for mobile apps)

            Made with Slides.com