@onishiweb

Trophy winning teams

Adam Onishi Codemotion Milan - November 2015

@onishiweb

Sports!

@onishiweb

Teams?

@onishiweb

Teams?

@onishiweb

– Jose Mourinho

“Players don't win you trophies, teams win trophies.”

Teams

@onishiweb

Teams

@onishiweb

@onishiweb

– Jose Mourinho

“Players don't win you trophies, teams win trophies.”

Teams

@onishiweb

My teams…

@onishiweb

dxw

Teams

@onishiweb

@onishiweb

Great Sporting teams

@onishiweb

Planning

Sports

@onishiweb

The “play”

Sports

@onishiweb

Sports

@onishiweb

@onishiweb

Teamwork

Sports

@onishiweb

Sports

@onishiweb

@onishiweb

Everyone is equal

Sports

@onishiweb

Sports

@onishiweb

@onishiweb

Adaptability

Sports

@onishiweb

Sports

@onishiweb

@onishiweb

Communication

Sports

@onishiweb

Sports

@onishiweb

@onishiweb

Sports

@onishiweb

@onishiweb

Great teams

Sports

@onishiweb

Sports

@onishiweb

@onishiweb

Baseline

@onishiweb

Boilerplate

Planning

@onishiweb

https://github.com/wearearchitect/Frontend-Boilerplate

Planning

@onishiweb

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

Planning

@onishiweb

Gulp!

Planning

@onishiweb

Pattern library

Planning

@onishiweb

Planning

@onishiweb

@onishiweb

https://github.com/madebymany/css-patterns

Planning

@onishiweb

Theme template

Planning

https://github.com/dxw/whippet-theme-template

@onishiweb

Front-end and Grunt

Planning

@onishiweb

Coding Consistently

@onishiweb

“Code should look as if it's been written by one person, no matter

how many people have worked on it”

– Mark Otto (@mdo)

Consistency

@onishiweb

Consistency

@onishiweb

http://cssguidelin.es/

Consistency

• Reasonable length projects • Varying abilities & specialisms • Different developers on

projects • Various codebases

@onishiweb

http://cssguidelin.es/

Consistency

• Reasonable length projects • Varying abilities & specialisms • Different developers on

projects • Various codebases

@onishiweb

• Reasonable length projects • Varying abilities & specialisms • Different developers on

projects • Various codebases

http://cssguidelin.es/

Consistency

@onishiweb

http://codeguide.co/

Consistency

@onishiweb

http://sass-guidelin.es/

Consistency

@onishiweb

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

Consistency

@onishiweb

“Enforce these, or your own, agreed upon guidelines at all times.

Small or large, call out what’s incorrect.”

– Mark Otto (@mdo)

Consistency

@onishiweb

Consistency

@onishiweb

@onishiweb

Consistency

@onishiweb

@onishiweb

The Rules

https://github.com/wearearchitect/Frontend-Rules

Consistency

@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

@onishiweb

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.

Consistency

@onishiweb

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, Coffeescript, or Node.js there's always something new to learn.

Consistency

@onishiweb

Consistency

@onishiweb

Consistency

@onishiweb

@onishiweb

”The Rules”

Consistency

@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

@onishiweb

Enforcing

Consistency

@onishiweb

Linting

Consistency

@onishiweb

Code reviews

Consistency

@onishiweb

Code reviews

Consistency

@onishiweb

Code reviews

Consistency

@onishiweb

Consistency

@onishiweb

@onishiweb

C0de reviews

Consistency

@onishiweb

C0de reviews

Consistency

@onishiweb

Reading good code

https://www.youtube.com/watch?v=mW_xKGUKLpk

Consistency

@onishiweb

Discussing the code

https://www.youtube.com/watch?v=mW_xKGUKLpk

Consistency

@onishiweb

Discussing the code

https://www.youtube.com/watch?v=mW_xKGUKLpk

Consistency

@onishiweb

Pull Requests

Consistency

@onishiweb

Consistency

@onishiweb

Consistency

@onishiweb

Nothing Personal

Consistency

@onishiweb

Consistency

@onishiweb

@onishiweb

Code review etiquette

Consistency

@onishiweb

Code review etiquette

Consistency

@onishiweb

Consistency

Consistency

@onishiweb

Documentation

@onishiweb

General

Documentation

@onishiweb

Contextual

Documentation

@onishiweb

For Reference

Documentation

@onishiweb

Onboarding

Documentation

@onishiweb

Documentation

@onishiweb

@onishiweb

Onboarding

Documentation

@onishiweb

Documentation

@onishiweb

@onishiweb

Teamwork

@onishiweb

Smaller teams

Teamwork

@onishiweb

Mentorship

Teamwork

@onishiweb

Responsibility

Teamwork

@onishiweb

Buddy System

Teamwork

@onishiweb

Learning

Teamwork

@onishiweb

Sharing knowledge

Teamwork

@onishiweb

Developer déjeuner

Teamwork

@onishiweb

Developer déjeuner

Teamwork

@onishiweb

Group code reviews

Teamwork

@onishiweb

Group code reviews

Teamwork

@onishiweb

Teamwork

@onishiweb

@onishiweb

Conferences & Meet ups

Teamwork

@onishiweb

Share experiences with the team

Teamwork

@onishiweb

Development teams

@onishiweb

Great dev teams

Teams

@onishiweb

Teams

• Planning

@onishiweb

Teams

• Planning • Teamwork

@onishiweb

Teams

• Planning • Teamwork • Equality

@onishiweb

Teams

• Planning • Teamwork • Equality • Adaptability

@onishiweb

• Planning • Teamwork • Equality • Adaptability • Communication

Teams

@onishiweb

Teams

@onishiweb

@onishiweb

Thank you!

Adam Onishi Codemotion Milan - November 2015

Attribution-NonCommercial-ShareAlike 4.0 Internationalhttp://creativecommons.org/licenses/by-nc-sa/4.0/