Slide 1

Slide 1 text

@onishiweb Trophy winning teams Adam Onishi DrupalCon Europe September 2015

Slide 2

Slide 2 text

@onishiweb Teams

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

@onishiweb Sporting teams

Slide 5

Slide 5 text

@onishiweb Planning Sports

Slide 6

Slide 6 text

@onishiweb The “play” Sports

Slide 7

Slide 7 text

@onishiweb Sports Sports @onishiweb

Slide 8

Slide 8 text

@onishiweb Teamwork Sports

Slide 9

Slide 9 text

@onishiweb Maul! @onishiweb

Slide 10

Slide 10 text

@onishiweb Everyone is equal Sports

Slide 11

Slide 11 text

@onishiweb Sports @onishiweb

Slide 12

Slide 12 text

@onishiweb Adaptability Sports

Slide 13

Slide 13 text

@onishiweb Sports @onishiweb

Slide 14

Slide 14 text

@onishiweb Communication Sports

Slide 15

Slide 15 text

@onishiweb Sports @onishiweb

Slide 16

Slide 16 text

@onishiweb Development teams Sports

Slide 17

Slide 17 text

@onishiweb @onishiweb Sports

Slide 18

Slide 18 text

@onishiweb Baseline

Slide 19

Slide 19 text

@onishiweb Boilerplate Planning

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

@onishiweb assets/ |- scss/ | |- settings/ | |- tools/ | |- […] |- images/ |- javascript/ | |- src/ | |- vendor/ Planning

Slide 22

Slide 22 text

@onishiweb Gulp! Planning

Slide 23

Slide 23 text

@onishiweb Pattern library Planning

Slide 24

Slide 24 text

@onishiweb Planning @onishiweb

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

@onishiweb Coding Consistently

Slide 27

Slide 27 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 28

Slide 28 text

@onishiweb Code style guides Consistency

Slide 29

Slide 29 text

@onishiweb Consistency http://codeguide.co/

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 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 33

Slide 33 text

@onishiweb Consistency @onishiweb

Slide 34

Slide 34 text

@onishiweb Consistency @onishiweb

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

@onishiweb 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 benefit it gave you. Rule 1: Obey the rules Consistency

Slide 37

Slide 37 text

@onishiweb Consistency 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. Rule 4: It's all about the bike code.

Slide 38

Slide 38 text

@onishiweb Consistency 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, Coffeescript, or Node.js there's always something new to learn. Rule 12: The correct number of JavaScript libraries to know is n+1

Slide 39

Slide 39 text

@onishiweb Consistency

Slide 40

Slide 40 text

@onishiweb Mistakes Consistency

Slide 41

Slide 41 text

@onishiweb @onishiweb Consistency

Slide 42

Slide 42 text

@onishiweb ”The Rules” Consistency

Slide 43

Slide 43 text

@onishiweb • Be consistent. • Don't rewrite existing code to follow this guide. • Don't violate a guideline without a good reason. • A reason is good when you can convince a teammate. https://playbook.thoughtbot.com/#style-guide Thoughtbot’s Playbook Consistency

Slide 44

Slide 44 text

@onishiweb Enforcing Consistency

Slide 45

Slide 45 text

@onishiweb Linting Consistency

Slide 46

Slide 46 text

@onishiweb Code reviews Consistency

Slide 47

Slide 47 text

@onishiweb @onishiweb Consistency

Slide 48

Slide 48 text

@onishiweb C0de reviews Consistency

Slide 49

Slide 49 text

@onishiweb Reading good code Consistency https://www.youtube.com/watch?v=mW_xKGUKLpk

Slide 50

Slide 50 text

@onishiweb Pull Requests Consistency

Slide 51

Slide 51 text

@onishiweb Consistency

Slide 52

Slide 52 text

@onishiweb Consistency

Slide 53

Slide 53 text

@onishiweb Nothing Personal Consistency

Slide 54

Slide 54 text

@onishiweb @onishiweb Consistency

Slide 55

Slide 55 text

@onishiweb Code review etiquette Consistency

Slide 56

Slide 56 text

@onishiweb Documentation

Slide 57

Slide 57 text

@onishiweb General Documentation

Slide 58

Slide 58 text

@onishiweb Contextual Documentation

Slide 59

Slide 59 text

@onishiweb For Reference Documentation

Slide 60

Slide 60 text

@onishiweb Onboarding Documentation

Slide 61

Slide 61 text

@onishiweb Teamwork

Slide 62

Slide 62 text

@onishiweb Smaller teams Teamwork

Slide 63

Slide 63 text

@onishiweb Mentorship Teamwork

Slide 64

Slide 64 text

@onishiweb Responsibility Teamwork

Slide 65

Slide 65 text

@onishiweb Buddy System Teamwork

Slide 66

Slide 66 text

@onishiweb Learning Teamwork

Slide 67

Slide 67 text

@onishiweb Sharing knowledge Teamwork

Slide 68

Slide 68 text

@onishiweb Developer déjeuner Teamwork

Slide 69

Slide 69 text

@onishiweb Group code reviews Teamwork

Slide 70

Slide 70 text

@onishiweb Teamwork @onishiweb

Slide 71

Slide 71 text

@onishiweb Conferences & Meet ups Teamwork

Slide 72

Slide 72 text

@onishiweb Extra time!

Slide 73

Slide 73 text

@onishiweb Great dev teams Extra time

Slide 74

Slide 74 text

@onishiweb • Planning • Teamwork • Equality • Adaptability • Communication Extra time

Slide 75

Slide 75 text

@onishiweb Extra time @onishiweb

Slide 76

Slide 76 text

@onishiweb Adam Onishi DrupalCon Europe September 2015 Gracias