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

CascadiaJS 2021 - Creating a Culture of Frontend Performance

Andrew Hao
November 03, 2021

CascadiaJS 2021 - Creating a Culture of Frontend Performance

Andrew Hao

November 03, 2021
Tweet

More Decks by Andrew Hao

Other Decks in Programming

Transcript

  1. Let's go fast!
    Creating a culture of frontend performance
    @andrewhao

    View full-size slide

  2. We value
    performance


    View full-size slide

  3. But first, a detour
    From Liberian tailors and their apprentices, to Xerox
    representatives, back to us

    View full-size slide

  4. Learning + Practice Combined
    Tailors' Alley
    Apprentices
    Liberian Tailors
    Jean Lave, cultural anthropologist,
    embedded herself with the apprenticed
    tailors of Tailors' Alley in Monrovia, Liberia
    Image credit: "Jean Lave and community of practice"

    View full-size slide

  5. Learning + Practice Combined
    Tailors Alley
    Apprentices
    Liberian Tailors
    Learning is not done in a vacuum.
    Apprentices learned by participating in
    daily life as a tailor, in the community of
    craft.
    We learn by doing, with each other!

    View full-size slide

  6. Breakfast as information transfer
    ...this happened
    When this happened...
    Xerox Field Reps
    Xerox PARC anthropologists studied
    behaviors of Xerox techs in the field
    Community knowledge spread via
    breakfast!
    Images: [1], [2]

    View full-size slide

  7. Breakfast as information transfer
    ...this happened
    When this happened...
    Xerox Field Reps
    Xerox empowers the techs to create their
    own knowledge base to leverage organic
    learning.
    Saves Xerox $100MM!
    Images: [1], [2]

    View full-size slide

  8. Situated
    Learning

    View full-size slide

  9. Situated
    Learning
    "Community of Practice"

    View full-size slide

  10. Communi
    ties of
    Practice

    View full-size slide

  11. Communi
    ties of
    Practice
    ...in the modern software
    org
    ...in modern Agile practice

    View full-size slide

  12. "Spotify
    Model"
    Image:
    https://vitalitychicago.com/blog/there-
    is-no-spotify-model-for-scaling-agile/

    View full-size slide

  13. "Spotify
    Model"
    Gather functionally-similar
    folks together to hone
    their craft
    a.k.a. a "guild", or
    community of practice

    View full-size slide

  14. What is a Community of Practice?

    View full-size slide

  15. Scaling
    pains
    As the organization grows,
    coordination costs get higher
    Top-down decrees won't work
    Shift the culture through a
    community of practice!

    View full-size slide

  16. How it
    works at
    Lyft

    View full-size slide

  17. How it
    works at
    Lyft
    1 Find your allies
    2 Define the charter
    (learning & practice)
    3
    Tap into intrinsic
    motivators (autonomy,
    mastery, purpose)

    View full-size slide

  18. How it
    works at
    Lyft
    5 Low barriers to entry -
    learn by presenting
    6 Record all presentations
    for archiving
    4 Simple agenda & rotating
    roles

    View full-size slide

  19. Tools
    Lighthouse
    runner
    Lighthouse
    runner
    1
    Long-term
    performance
    trends &
    accountability
    Fight bundle
    bloat before
    merges
    Emit modern
    performance
    metrics across
    the fleet
    Bundle Size
    Reporter
    2 3
    Fleetwide
    Perfor-
    mance
    Dashboards
    Core Web
    Vitals Plugin
    4
    Emit modern
    performance
    metrics across
    the fleet
    Make metrics
    visible in on-
    call channels

    View full-size slide

  20. Tools are our most
    effective culture
    levers
    Making information visible through tooling is a powerful
    way to help people care about performance

    View full-size slide

  21. Docs
    Wins
    &
    case
    studies
    1
    Build the case
    for the value of
    Web perf on
    the business
    Great for
    onboarding
    and teaching
    perf concepts
    to newcomers
    Emit modern
    performance
    metrics across
    the fleet
    Tutorials
    and guides
    2 3
    SLO configs
    Guide people
    to set up their
    service for
    observability
    and reliability

    View full-size slide

  22. Time
    -
    bound
    We schedule to only run for a quarter at a time, which ensures
    that everybody involved is able to fully commit

    View full-size slide

  23. Over to you
    What change do you want to see?
    Where can you start a community?

    View full-size slide

  24. Start small
    Look for that one other person.
    Share some articles.
    Starting a brown bag discussion group.

    View full-size slide

  25. Don
    '
    t wait for
    permission
    You can start today!

    View full-size slide

  26. Thanks
    !
    Thanks to our very amazing community:


    Akif S, Andrew O, Eric B, Diana A, Faizan V, Jay M, Joanne D, Jose P, Kim T,
    Marcos I, Mihir M, Ming C, Paul Y, Seth T and many more

    View full-size slide