Ten Principles for Effective Front-end Development

by Harry Roberts

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

#10CSS

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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.

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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.

Slide 9

Slide 9 text

03. Understand the Business 03. Comprenez les enjeux

Slide 10

Slide 10 text

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.

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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 selﬁsh. There is a much bigger picture to look at.

Slide 16

Slide 16 text

The User The Business The Team

Slide 17

Slide 17 text

The User The Business The Team

Slide 18

Slide 18 text

The User The Business The Team

Slide 19

Slide 19 text

The User The Business The Team

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

06. Think at Product Level 06. Pensez produit

Slide 23

Slide 23 text

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.

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

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é

Slide 31

Slide 31 text

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 inﬂuencing the rest of the project. Now you have to maintain something that no one even wanted. Solve each problem as you encounter it.

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

Thank you Harry Roberts @csswizardry