Building & Scaling a Front End Practice & Team

B U I L D I N G A F R O N T E N D P R A C T I C E & T E A M

Scaling FED

• Definitions of FED • Building a Craft • Building a Culture

Today

1 - Defining FEDHey Fronteers, what do you do?

WTFED?• HTML • CSS • JavaScript

WTFED?• HTML • CSS • JavaScript • Node/WebPack/Sass/Gulp/PostCSS/jQuery/CoffeeScript/

a11y/Bourbon/SVG/Bower/npm/React/Animations/ AMP/PWA/Responsive/Angular/Data Viz/BEM/Performance/TypeScript/Ember/Browserify/OOCSS

CHAOS?

Design App Dev*

HTML CSS JS Design App Dev*

User Interfaces Design App Dev*

•inconsistent or even buggy UI • spaghetti code • hard to maintain & iterate • not accessible/performant/responsive

HTML CSS

JS Design App Dev*

😍

💖

Owners on a spectrum

FED Design App Dev*

Owners on a spectrum

FED Design App Dev*

💃🏃

Building a Craft1. Language Styleguides 2. Code Reviews 3. Pattern Libraries

1. Language Styleguides• shared coding standards • consistency is key • helps team members read each other’s code • helps you read your own code 6 months from now

Form an opinion

http://cssguidelin.es/ http://sass-guidelin.es/ https://github.com/Shopify/javascript https://github.com/rwaldron/idiomatic.js/ https://google.github.io/styleguide/javascriptguide.xml

Borrow one to start

💬💬

🎉

🍕🍕

2. Code Reviews

…or use a linter - eshint, scss-lint

• support & grow your guide • standards to make things easier

• if hard to enforce, it might not be useful • shared definition of quality

2. Code Reviews

• burning existing code isn’t usually an option

• support & grow your guide • standards to make things easier

• if hard to enforce, it might not be useful • shared definition of quality • builds a culture of feedback and knowledge sharing

2. Code Reviews

Growing Into Reusable SystemsPattern Libraries

Pattern Libraries• a way to pool our efforts • make it possible to share code automatically • a starting point for new projects

What might you include?• A common stack(s) • responsive guidelines - easy defaults for breakpoints,

flexible grids, starting points for styling and behavior, testing standards

• performance standards & language tooling

• accessibility best practices

Accessibility• colour contrast audits in a single place

Accessibility• JS helpers for common a11y fixes

• eg keycodes & focus handlers

Full UI components• common UI for re-use

UI library• core application patterns, built in a reusable way • solve for our use cases

• opinionated • provide constraints • custom to our stack

Hi! I’m an icon that comes alongwith some text⚡ ⚡Me Too!

something special

⚡Me Too!

Hi! I’m an icon that comes alongwith some text⚡ ⚡Me Too!

something special

⚡Me Too!

is this a pattern?

how should it be built?

FED Design App Dev*

Why bother?• we solve problems once* • more people can contribute • more time on most impactful features

Why bother?• we solve problems once* • more people can contribute • more time on most impactful features

Design FED

Iteration

Build

Review

Teach

Building a Culture

How does your team make decisions?

Expectations & Hiring

Have more conversations

#FED Talks• talk about standards • talk about common problems • share work from in and out of day-to-day

FED Design App Dev*

Continuing to Scale

prototyper

CSS developer

performance specialist

accessibility expert

web animator

JS data engineer

interaction engineer

future framework X engineer

Design App Dev*

HTML CSS

JS Design App Dev*

Find and follow opportunities for impact

what do you want to grow?

Thanks!

@ M O N S I K Am e d i u m . c o m / s h o p i f y - u x