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

The Responsibilities Of A Front End Operations Engineer

The Responsibilities Of A Front End Operations Engineer

Reflecting on the non-development side of FEOPs

Rodney Rehm

April 25, 2014
Tweet

More Decks by Rodney Rehm

Other Decks in Technology

Transcript

  1. The Responsibilities of a
    Front-End
    Operations
    Engineer
    Rodney Rehm - @rodneyrehm
    Front End Ops Conf 2014
    Samstag, 26. April 14

    View Slide

  2. The Non-Development
    Parts of FEOPS
    Rodney Rehm - @rodneyrehm
    Front End Ops Conf 2014
    Samstag, 26. April 14

    View Slide

  3. Hey,
    I’m Rod
    Photo by @stn1978
    Samstag, 26. April 14

    View Slide

  4. Samstag, 26. April 14

    View Slide

  5. Samstag, 26. April 14

    View Slide

  6. Not exactly a Start Up
    Samstag, 26. April 14

    View Slide

  7. https://www.qivicon.com
    Samstag, 26. April 14

    View Slide

  8. https://www.qivicon.com
    Home Automation
    Samstag, 26. April 14

    View Slide

  9. Not exactly Corporate
    Samstag, 26. April 14

    View Slide

  10. http://ladyalora.deviantart.com/art/Stupid-Unicorns-180198455
    Samstag, 26. April 14

    View Slide

  11. What have we
    seen so far?
    Samstag, 26. April 14

    View Slide

  12. •Analysis Tools
    •Test Tools
    •Build Tools
    •Development Tools
    Samstag, 26. April 14

    View Slide

  13. Similar, Yet So Different
    Samstag, 26. April 14

    View Slide

  14. Development
    Build
    Test
    Analysis
    Developer User
    Samstag, 26. April 14

    View Slide

  15. https://www.flickr.com/photos/[email protected]/8486023159
    Samstag, 26. April 14

    View Slide

  16. Where do we
    go from here?
    Samstag, 26. April 14

    View Slide

  17. … I don’t know?!
    Samstag, 26. April 14

    View Slide

  18. I've come up with a set of rules that describe our
    reactions to technologies:
    1. Anything that is in the world when you’re born is
    normal and ordinary and is just a natural part of the way
    the world works.
    2. Anything that's invented between when you’re fifteen
    and thirty-five is new and exciting and revolutionary and
    you can probably get a career in it.
    3. Anything invented after you're thirty-five is against
    the natural order of things.
    ― Douglas Adams, The Salmon of Doubt
    Samstag, 26. April 14

    View Slide

  19. I've come up with a set of rules that describe our
    reactions to technologies:
    1. Anything that is in the world when you’re born is
    normal and ordinary and is just a natural part of the way
    the world works.
    2. Anything that's invented between when you’re fifteen
    and thirty-five is new and exciting and revolutionary and
    you can probably get a career in it.
    3. Anything invented after you're thirty-five is against
    the natural order of things.
    ― Douglas Adams, The Salmon of Doubt
    Samstag, 26. April 14

    View Slide

  20. I've come up with a set of rules that describe our
    reactions to technologies:
    1. Anything that is in the world when you’re born is
    normal and ordinary and is just a natural part of the way
    the world works.
    2. Anything that's invented between when you’re fifteen
    and thirty-five is new and exciting and revolutionary and
    you can probably get a career in it.
    3. Anything invented after you're thirty-five is against
    the natural order of things.
    ― Douglas Adams, The Salmon of Doubt
    Samstag, 26. April 14

    View Slide

  21. I've come up with a set of rules that describe our
    reactions to technologies:
    1. Anything that is in the world when you’re born is
    normal and ordinary and is just a natural part of the way
    the world works.
    2. Anything that's invented between when you’re fifteen
    and thirty-five is new and exciting and revolutionary and
    you can probably get a career in it.
    3. Anything invented after you're thirty-five is against
    the natural order of things.
    ― Douglas Adams, The Salmon of Doubt
    Samstag, 26. April 14

    View Slide

  22. Know your goals before
    starting negotiations
    Samstag, 26. April 14

    View Slide

  23. Start with
    something small,
    but something
    with impact
    Samstag, 26. April 14

    View Slide

  24. Convincing
    the Team
    Samstag, 26. April 14

    View Slide

  25. whose turf?
    • Graphic designers
    • UX designers
    • QA engineers
    • Ops, DevOps
    Samstag, 26. April 14

    View Slide

  26. https://www.flickr.com/photos/sunnyuk/2390099471
    Samstag, 26. April 14

    View Slide

  27. https://www.flickr.com/photos/criminalintent/2744040362/
    Samstag, 26. April 14

    View Slide

  28. https://www.flickr.com/photos/[email protected]/2597900487/
    Samstag, 26. April 14

    View Slide

  29. … when your team is
    on the same page …
    Samstag, 26. April 14

    View Slide

  30. Convincing the
    boss is hard
    Samstag, 26. April 14

    View Slide

  31. https://www.flickr.com/photos/bilal-kamoon/6773383766
    Samstag, 26. April 14

    View Slide

  32. https://www.flickr.com/photos/ratterrell/413624395
    Samstag, 26. April 14

    View Slide

  33. Request
    Rendering
    Render
    Spinner
    Fetch Data
    Render
    Data
    Samstag, 26. April 14

    View Slide

  34. Request
    Rendering
    Render
    Spinner
    Fetch Data
    Render
    Data
    oh god, this app
    is sooooo slow
    Samstag, 26. April 14

    View Slide

  35. Request
    Rendering
    Render
    spinner
    Fetch Data
    Render
    Data
    I can use some
    components
    already
    Render
    Cached Data
    Update
    Cache
    Samstag, 26. April 14

    View Slide

  36. first render at < 1 second,
    partly usable
    fully functional at 1 second +
    backend + network +
    model update + render
    (median around 7 seconds)
    Samstag, 26. April 14

    View Slide

  37. https://www.flickr.com/photos/ratterrell/413624395
    Samstag, 26. April 14

    View Slide

  38. Blind Refactoring
    is not your friend
    Samstag, 26. April 14

    View Slide

  39. 131 files in one app
    55 files in shared modules
    52KB of CSS
    400KB of images
    186 files less to think about
    500KB less to serve to client
    Samstag, 26. April 14

    View Slide

  40. 131 files in one app
    55 files in shared modules
    52KB of CSS
    400KB of images
    186 files less to think about
    500KB less to serve to client
    BLOAT
    BLOAT
    Samstag, 26. April 14

    View Slide

  41. (Sorry Paul)
    Samstag, 26. April 14

    View Slide

  42. how to avoid this
    in the future?
    Samstag, 26. April 14

    View Slide

  43. Keeping things running
    is bothersome
    Samstag, 26. April 14

    View Slide

  44. Samstag, 26. April 14

    View Slide

  45. Things we’ve failed at
    Samstag, 26. April 14

    View Slide

  46. Code Metrics
    Samstag, 26. April 14

    View Slide

  47. Samstag, 26. April 14

    View Slide

  48. Code Coverage
    Samstag, 26. April 14

    View Slide

  49. Samstag, 26. April 14

    View Slide

  50. Samstag, 26. April 14

    View Slide

  51. Testing User Interaction
    Samstag, 26. April 14

    View Slide

  52. Chrome
    Firefox
    Chrome
    Firefox
    Internet
    Explorer
    Internet
    Explorer
    Samstag, 26. April 14

    View Slide

  53. http://dalekjs.com
    Samstag, 26. April 14

    View Slide

  54. Ah, one last thing
    Samstag, 26. April 14

    View Slide

  55. Non-US businesses may
    not be able to run US
    cloud services
    (even before PRISM)
    Samstag, 26. April 14

    View Slide

  56. It’s OK if that
    doesn’t matter
    to you
    Samstag, 26. April 14

    View Slide

  57. start small,
    build prototypes,
    follow through.
    Samstag, 26. April 14

    View Slide

  58. Thank you
    Rodney Rehm - @rodneyrehm
    Front End Ops Conf 2014
    Samstag, 26. April 14

    View Slide