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

Front-End Ops - jQuery Conf Chicago 2014

Alex Sexton
September 13, 2014

Front-End Ops - jQuery Conf Chicago 2014

Alex Sexton

September 13, 2014
Tweet

More Decks by Alex Sexton

Other Decks in Technology

Transcript

  1. Front-End Ops
    Alex Sexton | 2014

    View full-size slide

  2. A little under a year
    later…

    View full-size slide

  3. Naming Things
    #hardCSproblems

    View full-size slide

  4. Regressive Enhancement

    View full-size slide

  5. Front-End Ops
    Alex Sexton | 2014

    View full-size slide

  6. UGLY
    (in spanish)

    View full-size slide

  7. Iron Ops
    catchy

    View full-size slide

  8. I pay the
    Iron Price
    for lower
    latency

    View full-size slide

  9. What is Front-End Ops?

    View full-size slide

  10. “Some weird terms you
    invented to describe
    things that don’t exist.”
    - John Edgar, Digital Ocean

    View full-size slide

  11. First Of All

    View full-size slide

  12. More Importantly…

    View full-size slide

  13. That’s the whole point.

    View full-size slide

  14. Serving webpages
    is really hard.

    View full-size slide

  15. that’s why we have
    conferences for this stuff
    (jQConf, FEOpsConf)

    View full-size slide

  16. Conferences That
    Don’t Exist

    View full-size slide

  17. HTML &ENTITY; CONF

    View full-size slide

  18. SundayMorningConf

    View full-size slide

  19. Front-End Ops is the collection
    of things you can do to make
    serving webpages easier.
    opposite of harder

    View full-size slide

  20. So you can focus
    on your product.

    View full-size slide

  21. Mature FEOps
    benefits the people
    who don’t have time to
    think about this stuff.

    View full-size slide

  22. Lots of folks agree!

    View full-size slide

  23. So really what is it?

    View full-size slide

  24. The App
    Everything
    Else

    View full-size slide

  25. The App
    Everything
    Else
    FEOps™

    View full-size slide

  26. Article Recap

    View full-size slide

  27. “Front-End Ops Engineers are the bridge between
    an application’s intent and an application’s reality”

    View full-size slide

  28. We’re collectively insane.

    View full-size slide

  29. Application logic is being
    deferred to the client side.

    View full-size slide

  30. Performance Testing

    View full-size slide

  31. Error Logging

    View full-size slide

  32. Lifecycle Logging

    View full-size slide

  33. Measurement over time

    View full-size slide

  34. A Front-End Ops Engineer
    enables long-term progress

    View full-size slide

  35. Performance is the
    foundation on which user
    experience is built.

    View full-size slide

  36. A UX in the DOM
    is worth two on the wire.

    View full-size slide

  37. Speed is the metric
    that we measure by.

    View full-size slide

  38. Speed of app.

    View full-size slide

  39. Speed of tools.

    View full-size slide

  40. Speed of development.

    View full-size slide

  41. (all of these can be
    measured and tracked)

    View full-size slide

  42. (all of these can be
    measured and tracked)
    ((but it’s important to read the data right))

    View full-size slide

  43. Speed of app.

    View full-size slide

  44. Speed up your app
    In 5 Simple Steps
    How To

    View full-size slide

  45. Step 1
    forget everything
    you know because
    it’s wrong

    View full-size slide

  46. Step 2
    it’s probably
    the network

    View full-size slide

  47. Step 3
    Probably Read Ilya’s book

    View full-size slide

  48. Step 4
    measure

    View full-size slide

  49. Step 5
    measure

    View full-size slide

  50. 1) Forget everything
    2) It’s probably the network
    3) Ilya’s book
    4) Measure
    5) Measure
    Recap

    View full-size slide

  51. Chrome DevTools
    Flame Graphs, CPU Profiles, and
    Repaints/Reflows info are invaluable.

    View full-size slide

  52. The limiting factor of your
    system should be the
    speed of light.
    Assuming you have Fiber

    View full-size slide

  53. 0 50 100 150 200
    THEORETICAL
    GRAPHS

    View full-size slide

  54. OS X
    Android
    iOS
    Blackberry
    1200ms
    0ms

    View full-size slide

  55. Distribution of Load Time

    View full-size slide

  56. Desktop Mobile

    View full-size slide

  57. Two distinct loading curves

    View full-size slide

  58. What you see when you
    add them together.

    View full-size slide

  59. If I had to pick one part
    that was most important
    to FEOps, it’d be all of it

    View full-size slide

  60. but #2 would be
    MEASUREMENT

    View full-size slide

  61. Measure twice.
    Optimize once.

    View full-size slide

  62. Make a dashboard.

    View full-size slide

  63. Things you can put
    in a dashboard

    View full-size slide

  64. Speed Index Over Time

    View full-size slide

  65. Speed Index Over Time
    And then draw lines where commits happen.

    View full-size slide

  66. Speed Index Over Time
    And then draw lines where commits happen.
    And then link to the diff between tests

    View full-size slide

  67. image is of speedcurve.com

    View full-size slide

  68. Things you can put
    in a dashboard

    View full-size slide

  69. Page Weight Over Time

    View full-size slide

  70. Page Weight Over Time
    gzipped/ungzipped

    View full-size slide

  71. Page Weight Over Time
    gzipped/ungzipped
    Broken down by filetype

    View full-size slide

  72. Requests Over Time
    0E+00
    2.5E+01
    5E+01
    7.5E+01
    1E+02

    View full-size slide

  73. Errors
    There are lots of great
    companies that will help you
    do this these days.

    View full-size slide

  74. Build Time Over Time

    View full-size slide

  75. Speed of tools.
    usually build

    View full-size slide

  76. The time between making
    a change, and seeing it in
    your app must approach 0.

    View full-size slide

  77. Never do
    anything twice.

    View full-size slide

  78. AKA
    “Cache Everything”

    View full-size slide

  79. (feel free to do two things
    at the same time though)

    View full-size slide

  80. Speed of development.

    View full-size slide

  81. Speed of development.
    AKA Developer Happiness

    View full-size slide

  82. Spare no expense.

    View full-size slide

  83. Take the time to make
    source maps work.

    View full-size slide

  84. There should be one easy
    command to get
    everything to work.

    View full-size slide

  85. There should be one easy
    command to get
    everything to work.
    Vagrant can help with environments

    View full-size slide

  86. Turn on LiveReload

    View full-size slide

  87. Implement
    Lifecycle Logging

    View full-size slide

  88. Set a calendar reminder to
    update your dependencies

    View full-size slide

  89. Have a rigorous Style Guide
    that everyone follows, and
    that robots yell about.
    Lint!

    View full-size slide

  90. If we take care to build robust tools
    around these FEOps ideals,
    !
    developers will need to master less,
    and will be able to focus on users more.

    View full-size slide

  91. Let’s make fast,
    measurement driven,
    easily-maintained
    web applications
    the starting point.

    View full-size slide

  92. Thanks
    @slexaxton

    View full-size slide