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

Ten Principles for Effective Front-end Development

Harry Roberts
November 14, 2014

Ten Principles for Effective Front-end Development

Ten Principles for Effective Front-end Development at dotCSS, Paris. November 2014.

Harry Roberts

November 14, 2014
Tweet

More Decks by Harry Roberts

Other Decks in Design

Transcript

  1. Ten Principles for Effective Front-end Development
    Harry Roberts – dotCSS, November 2014

    View full-size slide

  2. About Me
    Harry Roberts
    Consultant Front-end Architect
    I help companies write better UIs
    @csswizardry

    View full-size slide

  3. Why this talk?
    Code is only a small part of our job.
    My focus shifted for the better.
    Specifics are good, but aren’t always transferrable.

    View full-size slide

  4. 01. The Simplest Option Is Usually the Best
    01. L’option la plus simple est souvent la meilleure

    View full-size slide

  5. The Simplest Option Is Usually the Best
    Faster and cheaper to implement.
    Easier (for other developers) to understand, inherit, maintain, debug.
    Less likely to fail or break.
    Lessens the amount of cognitive overhead when working at scale.

    View full-size slide

  6. 02. Reduce the Amount of Moving Parts
    02. Réduisez le nombre de variables

    View full-size slide

  7. Reduce the Amount of Moving Parts
    Get rid of as much as you can.
    Every moving part is a potential point of failure.
    You’re inviting the chance for something to go wrong.
    Reduce both features and code.

    View full-size slide

  8. 03. Understand the Business
    03. Comprenez les enjeux

    View full-size slide

  9. Understand the Business
    Code itself is unimportant: it’s a means to an end.
    Understand the business cost and value of your work.
    Don’t waste other peoples’ money.

    View full-size slide

  10. 04. Care Less, Care Appropriately
    04. Ne vous souciez que des choses importantes

    View full-size slide

  11. Care Less, Care Appropriately
    No one cares about your code more than you do.
    Pick the right battles.
    Remain objective.
    Balance the needs of everyone.
    Be less selfish.
    There is a much bigger picture to look at.

    View full-size slide

  12. The User
    The Business
    The Team

    View full-size slide

  13. The User
    The Business
    The Team

    View full-size slide

  14. The User
    The Business
    The Team

    View full-size slide

  15. The User
    The Business
    The Team

    View full-size slide

  16. 05. Pragmatism Trumps Perfection
    05. Le pragmatisme vaut mieux que la perfection

    View full-size slide

  17. Pragmatism Trumps Perfection
    ‘Good enough’ today is better than ‘perfect’ tomorrow.
    Does it work?
    Measure features by their business value.

    View full-size slide

  18. 06. Think at Product Level
    06. Pensez produit

    View full-size slide

  19. Think at Product Level
    Your job isn’t just to reproduce designs anymore.
    Do not put yourself in a bubble.
    Get involved with everyone else’s issues.
    Do what’s right for the product.

    View full-size slide

  20. 07. Do Not Design Systems around Edge-cases
    07. Ne concevez pas un système autour de cas particuliers

    View full-size slide

  21. Do Not Design Systems around Edge-cases
    Don’t let the minority lead the majority.
    Build for the most common scenario first.
    Solve edge-cases separately.

    View full-size slide

  22. 08. Do Not Make Decisions Based on Anecdotal Evidence
    08. Ne prenez pas de décisions sur des anecdotes

    View full-size slide

  23. Do Not Make Decisions Based on Anecdotal Evidence
    Anecdotes are not representative.
    Anecdotes are isolated incidents.
    Trust data, not stories.

    View full-size slide

  24. 09. Don’t Build It until You’ve Been Asked for It
    09. Ne développez pas tant qu’on ne vous l’a pas demandé

    View full-size slide

  25. Don’t Build It until You’ve Been Asked for It
    You’ve caused yourself work, and cost the business money.
    No spec, so how do we know it’s right? How do we test it?
    Could end up influencing the rest of the project.
    Now you have to maintain something that no one even wanted.
    Solve each problem as you encounter it.

    View full-size slide

  26. 10. Expect and Accommodate Change
    10. Anticipez et adaptez-vous aux changements

    View full-size slide

  27. Expect and Accommodate Change
    Always keep adaptable, flexible, and nimble.
    Everything is subject to change.
    Nothing is set in stone.

    View full-size slide

  28. Ten Principles for Effective Front-end Development
    The Simplest Option Is Usually the Best
    Reduce the Amount of Moving Parts
    Understand the Business
    Care Less, Care Appropriately
    Pragmatism Trumps Perfection
    Think at Product Level
    Do Not Design Systems around Edge-cases
    Do Not Make Decisions Based on Anecdotal Evidence
    Don’t Build It until You’ve Been Asked for It
    Expect and Accommodate Change

    View full-size slide

  29. Thank you
    Harry Roberts
    @csswizardry

    View full-size slide