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 Slide

  2. View Slide

  3. A little under a year
    later…

    View Slide

  4. View Slide

  5. Naming Things
    #hardCSproblems

    View Slide

  6. Regressive Enhancement

    View Slide

  7. Polyfill

    View Slide

  8. Prollyfill

    View Slide

  9. View Slide

  10. View Slide

  11. Parlayfill

    View Slide

  12. Mollyfill

    View Slide

  13. ANYWAYS

    View Slide

  14. Front-End Ops
    Alex Sexton | 2014

    View Slide

  15. FEO

    View Slide

  16. UGLY
    (in spanish)

    View Slide

  17. FeOps

    View Slide

  18. View Slide

  19. Iron Ops
    catchy

    View Slide

  20. I pay the
    Iron Price
    for lower
    latency

    View Slide

  21. What is Front-End Ops?

    View Slide

  22. View Slide

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

    View Slide

  24. View Slide

  25. First Of All

    View Slide

  26. More Importantly…

    View Slide

  27. That’s the whole point.

    View Slide

  28. Serving webpages
    is really hard.

    View Slide

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

    View Slide

  30. Conferences That
    Don’t Exist

    View Slide

  31. HTML &ENTITY; CONF

    View Slide

  32. SundayMorningConf

    View Slide

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

    View Slide

  34. So you can focus
    on your product.

    View Slide

  35. View Slide

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

    View Slide

  37. Lots of folks agree!

    View Slide

  38. So really what is it?

    View Slide

  39. The App
    Everything
    Else

    View Slide

  40. The App
    Everything
    Else
    FEOps™

    View Slide

  41. Article Recap

    View Slide

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

    View Slide

  43. Why?

    View Slide

  44. We’re collectively insane.

    View Slide

  45. View Slide

  46. Why now?

    View Slide

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

    View Slide

  48. Performance Testing

    View Slide

  49. Error Logging

    View Slide

  50. Lifecycle Logging

    View Slide

  51. Measurement over time

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  55. Speed is the metric
    that we measure by.

    View Slide

  56. Speed of app.

    View Slide

  57. Speed of tools.

    View Slide

  58. Speed of development.

    View Slide

  59. View Slide

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

    View Slide

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

    View Slide

  62. Speed of app.

    View Slide

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

    View Slide

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

    View Slide

  65. Step 2
    it’s probably
    the network

    View Slide

  66. Step 3
    Probably Read Ilya’s book

    View Slide

  67. Step 4
    measure

    View Slide

  68. Step 5
    measure

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  72. 0 50 100 150 200
    THEORETICAL
    GRAPHS

    View Slide

  73. OS X
    Android
    iOS
    Blackberry
    1200ms
    0ms

    View Slide

  74. 1200ms
    0ms

    View Slide

  75. 1200ms
    0ms

    View Slide

  76. Distribution of Load Time

    View Slide

  77. Desktop Mobile

    View Slide

  78. Two distinct loading curves

    View Slide

  79. What you see when you
    add them together.

    View Slide

  80. ಠ_ಠ

    View Slide

  81. Measurement

    View Slide

  82. Measurement

    View Slide

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

    View Slide

  84. but #2 would be
    MEASUREMENT

    View Slide

  85. Measure twice.
    Optimize once.

    View Slide

  86. Make a dashboard.

    View Slide

  87. Things you can put
    in a dashboard

    View Slide

  88. Speed Index Over Time

    View Slide

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

    View Slide

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

    View Slide

  91. image is of speedcurve.com

    View Slide

  92. Things you can put
    in a dashboard

    View Slide

  93. Page Weight Over Time

    View Slide

  94. Page Weight Over Time
    gzipped/ungzipped

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  98. Build Time Over Time

    View Slide

  99. Speed of tools.
    usually build

    View Slide

  100. Rule #1

    View Slide

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

    View Slide

  102. Rule #2

    View Slide

  103. Never do
    anything twice.

    View Slide

  104. AKA
    “Cache Everything”

    View Slide

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

    View Slide

  106. Speed of development.

    View Slide

  107. Speed of development.
    AKA Developer Happiness

    View Slide

  108. Spare no expense.

    View Slide

  109. Take the time to make
    source maps work.

    View Slide

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

    View Slide

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

    View Slide

  112. Turn on LiveReload

    View Slide

  113. Implement
    Lifecycle Logging

    View Slide

  114. Set a calendar reminder to
    update your dependencies

    View Slide

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

    View Slide

  116. 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 Slide

  117. View Slide

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

    View Slide

  119. Thanks
    @slexaxton

    View Slide