Trophy Winning Teams - Speaker Deck

Slide 1

Slide 1 text

@onishiweb Trophy winning teams Adam Onishi Front-End London May 2015

Slide 2

Slide 2 text

@onishiweb Hello! @onishiweb

Slide 3

Slide 3 text

@onishiweb Hello!

Slide 4

Slide 4 text

@onishiweb 20 developers Hello!

Slide 5

Slide 5 text

@onishiweb Teams…

Slide 6

Slide 6 text

@onishiweb – Jose Mourinho “Players don't win you trophies, teams win trophies.” Teams

Slide 7

Slide 7 text

@onishiweb Sporting teams

Slide 8

Slide 8 text

@onishiweb Planning Sports

Slide 9

Slide 9 text

@onishiweb Sports @onishiweb

Slide 10

Slide 10 text

@onishiweb Teamwork Sports

Slide 11

Slide 11 text

@onishiweb Everyone is equal Sports

Slide 12

Slide 12 text

@onishiweb Adaptability Sports

Slide 13

Slide 13 text

@onishiweb Who cares? Sports

Slide 14

Slide 14 text

@onishiweb Planning

Slide 15

Slide 15 text

@onishiweb Baseline Planning

Slide 16

Slide 16 text

@onishiweb Boilerplate Planning

Slide 17

Slide 17 text

@onishiweb Planning https://github.com/wearearchitect/Frontend-Boilerplate

Slide 18

Slide 18 text

Slide 19

Slide 19 text

@onishiweb Gulp! Planning

Slide 20

Slide 20 text

@onishiweb Pattern library Planning

Slide 21

Slide 21 text

@onishiweb @onishiweb Planning

Slide 22

Slide 22 text

@onishiweb %clearfix { zoom:1; &:before, &:after { content: "\0020"; display: block; height: 0; overflow: hidden; } &:after { clear: both; } } Planning

Slide 23

Slide 23 text

@onishiweb Planning https://github.com/madebymany/css-patterns

Slide 24

Slide 24 text

@onishiweb Code Consistently

Slide 25

Slide 25 text

@onishiweb – Mark Otto (@mdo) “Code should look as if it's been written by one person, no matter how many people have worked on it” Consistency

Slide 26

Slide 26 text

@onishiweb Code style guides Consistency

Slide 27

Slide 27 text

@onishiweb Code style guides Consistency

Slide 28

Slide 28 text

@onishiweb http://codeguide.co/ Consistency

Slide 29

Slide 29 text

@onishiweb http://sass-guidelin.es/ Consistency

Slide 30

Slide 30 text

@onishiweb https://github.com/onishiweb/code-style Consistency

Slide 31

Slide 31 text

@onishiweb – Mark Otto (@mdo) “Enforce these, or your own, agreed upon guidelines at all times. Small or large, call out what's incorrect.” Consistency

Slide 32

Slide 32 text

@onishiweb @onishiweb Consistency

Slide 33

Slide 33 text

@onishiweb @onishiweb Consistency

Slide 34

Slide 34 text

@onishiweb The Rules Consistency https://github.com/wearearchitect/Frontend-Rules

Slide 35

Slide 35 text

@onishiweb Consistency Where possible all of these rules should be followed to the letter. But, all rules are open to discussion and review. Obviously there are also times where a rule must be broken, but you should be able to explain why it was necessary and what beneﬁt it gave you. Rule 1: Obey the rules

Slide 36

Slide 36 text

@onishiweb Consistency Rule 4: It's all about the bike code. None of these rules are personal, there is no agenda in the rules; it's all about the code. The rules are here to help us write good code and work together as a team. It's about learning as well, front end development is continually evolving with new techniques and new tools becoming available all the time, the rules will keep evolving with these best practices and be updated over time.

Slide 37

Slide 37 text

@onishiweb Consistency Rule 12: The correct number of JavaScript libraries to know is n+1 Most front end developers are familiar with JavaScript and jQuery, but there are now more frameworks than you can shake a stick at! Whether it's Angular, Meteor, Backbone, Ember, Coﬀeescript, or Node.js there's always something new to learn.

Slide 38

Slide 38 text

@onishiweb @onishiweb Consistency

Slide 39

Slide 39 text

@onishiweb Enforcing Consistency

Slide 40

Slide 40 text

@onishiweb Linting Consistency

Slide 41

Slide 41 text

@onishiweb Code reviews Consistency

Slide 42

Slide 42 text

@onishiweb Code reviews Consistency

Slide 43

Slide 43 text

@onishiweb Pull Requests Consistency

Slide 44

Slide 44 text

@onishiweb Consistency

Slide 45

Slide 45 text

@onishiweb Consistency Rule 2: Lead by example You should make yourself familiar with the rules inside and out and ensure your code always follows the rules. Code reviews will be employed and pull requests will be declined if you're found to be breaking the rules.

Slide 46

Slide 46 text

@onishiweb Consistency

Slide 47

Slide 47 text

@onishiweb Nothing Personal Consistency

Slide 48

Slide 48 text

@onishiweb Teamwork

Slide 49

Slide 49 text

@onishiweb Smaller teams Teamwork

Slide 50

Slide 50 text

@onishiweb Mentorship Teamwork

Slide 51

Slide 51 text

@onishiweb Responsibility Teamwork

Slide 52

Slide 52 text

@onishiweb Learning Teamwork

Slide 53

Slide 53 text

@onishiweb Sharing knowledge Teamwork

Slide 54

Slide 54 text

@onishiweb Developer déjeuner Teamwork

Slide 55

Slide 55 text

@onishiweb Developer déjeuner Teamwork

Slide 56

Slide 56 text

@onishiweb Group code reviews Teamwork

Slide 57

Slide 57 text

@onishiweb Group code reviews Teamwork

Slide 58

Slide 58 text

@onishiweb @onishiweb Teamwork

Slide 59

Slide 59 text

@onishiweb Conferences /Meet ups Teamwork

Slide 60

Slide 60 text

@onishiweb Own goal…

Slide 61

Slide 61 text

@onishiweb ”The Rules” Fail!

Slide 62

Slide 62 text

@onishiweb C0de reviews Fail!

Slide 63

Slide 63 text

@onishiweb C0de reviews Fail!

Slide 64

Slide 64 text

@onishiweb Code review etiquette Fail!

Slide 65

Slide 65 text

@onishiweb Extra time!

Slide 66

Slide 66 text

@onishiweb Great dev teams Summary

Slide 67

Slide 67 text

@onishiweb • Planning Summary

Slide 68

Slide 68 text

@onishiweb • Planning • Teamwork Summary

Slide 69

Slide 69 text

@onishiweb • Planning • Teamwork • Equality Summary

Slide 70

Slide 70 text

@onishiweb • Planning • Teamwork • Equality • Adaptability Summary

Slide 71

Slide 71 text

@onishiweb @onishiweb Summary

Slide 72

Slide 72 text

@onishiweb Thanks Adam Onishi Front-End London May 2015