A recipe for a happier frontend development team
By two frontend developers ๐Ÿ‘จ๐Ÿปโ€๐Ÿ’ป ๐Ÿ‘จ๐Ÿปโ€๐Ÿ’ป

Aurรฉlien Loyer

@AurelienLoyer

Software Engineer @QIMAย 

Benoรฎt-Charles Detuncq

@bc-detuncq

Software Engineer @QIMAย 

  • Feb 7, 2019
  • 260653 lines of code
  • 19 frontend devs
  • 5 countries
  • 8 teams - ๐ŸฆŠ ๐Ÿง ๐Ÿฆฆ ...
  • Angular 12
  • ...

Be ready to hear things that make your day unpleasant...

But don't worry, we've found solutions!

Disclaimer โœ‹

This is not the way to work

but the way we work

The code is really complex ๐Ÿ™‡๐Ÿปโ€โ™‚๏ธ

The project structure is hard to maintain ๐Ÿ”ง
We're spending too much time fixing small regressions ๐Ÿ›
I'm afraid to do regression on this component ๐Ÿ˜ง
It's hard to understand each other's code ๐Ÿ™‰

Use the right tooling ecosystem!

STEP #1

Build component driven UIs faster
The project structure is hard to maintain ๐Ÿ”ง
Let the Storybook magic happen ๐Ÿง™โ€โ™‚๏ธ
  • More consistency
  • More genericity
  • Better documentation
  • Easier onboardings
  • Easier refactoring
...and not only used by developers ๐Ÿ™Œ
Ship pixel-perfect UI components
I'm afraid to do regression on this component ๐Ÿ˜ง
  • Automatic regression detection
  • Pixel perfect
  • Inserted directly in your CI
  • Perfect answer for web app testing needs

Now Let The Bots Take Your Job ๐Ÿค–

Create code consistency with Linter and Code Formater

+

Ensure the rules using hooks before a GIT commit using Husky ๐Ÿถ
  • Format your code and check for errors before a commit
  • Respect a writing convention for commit messages (Change Log ๐Ÿ‘)
  • Respect a naming convention for our branches
  • Check the tests, ...
Before sending to Github ๐Ÿ™

It will be my first PR ๐Ÿ™€

Request changes ๐Ÿ›‘
There is too much labels ๐ŸŽŸ
I don't know who to ask for the review ๐Ÿ˜ข
I don't know which PR I can review ๐Ÿ™‰

Have quality pull request process!

STEP #2

Clean reviews using GitHub ๐Ÿ™ templating

It will be my first PR ๐Ÿ™€

Improve your review process ๐Ÿ”Ž
  • Part of our daily task
    
  • Create teams with strong links
    
  • Share important PRs to everyone
  • Involve other developers ๐Ÿ‘จโ€๐Ÿ‘ง๐Ÿ‘จโ€๐Ÿ‘ฆโ€๐Ÿ‘ฆ
  • A huge bulk of labels
I don't know who to ask for the review ๐Ÿ˜ข
I don't know which PR I can review ๐Ÿ™‰
I can see labels everywhere ๐Ÿ‘€
Tada !๐ŸŽ‰

๐Ÿค– Probot Autolabeler

There is too much labels ๐ŸŽŸ
I don't know who to ask for the review ๐Ÿ˜ข
techops: [ 'Dockerfile', 'DOCKER-COMPOSE.md' ]
frontend: [ 'frontend/' ]
backend: [ 'backend/' ]
'Storybook :books:': [ 'frontend/.storybook/', 'frontend/**/stories/' ]
'UX review needed :art:': [ 'frontend/**/*.html', 'frontend/**/*.css' ]
'PM review needed :icecream:': [ '*' ]
โ€‹Add labels to Pull Requests based on matched file patterns โ€‹

PolicyBot ๐Ÿ‘ฎโ€โ™‚๏ธ

A GitHub App that enforces approval policies on pull requests based on:
  • Teams organisation
  • Type of files
  • Number of files
  • From and target branch
  • Min number of reviewers
  • ...
...made by the team for the team ๐Ÿ’•
- name: UX must approve if it's requested
    if:
      has_labels:
        - 'UX review needed :art:'
      targets_branch:
        pattern: '^(develop)$'
    requires:
      count: 1
      teams: ['asiainspection/ux-qima-platform']
      
- name: Frontend team must approve config changes
    requires:
      count: 4
      teams: ['asiainspection/frontend-qima-platform']
    if:
      targets_branch:
        pattern: '^(develop)$'
      changed_files:
        paths:
          - '^frontend/.*angular.json$'
      has_author_in:
        teams: ['asiainspection/dev-qima-platform']
Make your testing environment more enjoyable with Sandboxes ๐Ÿ“ฆ
  • Easy to use!
  • Dedicated sandboxes by teams
  • Accessible to all the team
  • On demand sandbox
We have plenty other tools to ease our daily tasks ๐Ÿงฐ
We didn't understand that in the user story ๐Ÿคท๐Ÿปโ€โ™‚๏ธ

My job is not diverse enough ๐Ÿ˜ฟ

I don't have the opportunity to share my opinion

There is too much technical dept ๐ŸฅŠ

Plenty of @todo in the code ๐Ÿšง

I've to take too many decisions alone ๐Ÿ™‡๐Ÿปโ€โ™‚๏ธ

A technical oriented organization!

STEP #3

An organization around sharing ๐ŸŽ
  • Pair design
    • โ€‹DOR of our user story
    • Help splitting huge task
  • Pair / Mob programming
    • โ€‹Ease heavy topics
    • Part of onboarding process
    • Knowledge sharing
  • Tech Exchanges...  
We didn't understand that in the user story ๐Ÿคท๐Ÿปโ€โ™‚๏ธ
I've to take too many decisions alone ๐Ÿ™‡๐Ÿปโ€โ™‚๏ธ
Tech Exchanges every sprint ๐Ÿ“ฃ
  • Split back & front 
    
  • Open to everyone
  • Open discussions
    • Libraries / practices
    • Documentation update
    • Linter / refactoring
Tech tasks to tackle tech topics ๐Ÿ‘ทโ€โ™‚๏ธ

~40%

A bandwidth to focus on technical topics ๐ŸฅŠ
Tech groomings every sprint ๐Ÿ“ฃ
  • Split back & front 
  • Open to everyone
  • Priorization
  • Estimation
  • Dispatching
A neat organization ๐Ÿ“… ๐Ÿ‘Œ
  • Normal sprint 
  • Tech sprint
  • Support sprint
  • Tech focus teams
Pick a team during Mercato โšฝ
Follow your progress using a Tech dashboard ๐Ÿ“บ

You will be the next team in support ๐Ÿ˜ฐ

ย There is a non-reproducible bug to fix ๐Ÿ›

I've performance issues. Pages are long too load ๐Ÿ˜ข

Too much pressure to deploy in production ๐Ÿšง

Make support great again!

STEP #4

Support sprint ๐Ÿš€
  • Rotation involving all the teams
  • 2 Weeks
    
  • Check production state
  • 2 Releases production deployments
    
  • Fix and deploy blocking issues
  • Main entry point for all requests
    
  • Feature delivery from A to Z
A neat organization ๐Ÿ‘Œ ๐Ÿ“…
An awesome mix of people:โ€‹
  • All the Developers of the team...
    • โ€‹With a Release Captain ๐Ÿ‘จโ€โœˆ๏ธ
  • The Product Manager of the team
  • The ScrumMaster of the team
  • A member of the QA team
  • A member of the Techops teamโ€‹
    
Production releases can be complex ๐Ÿค•
But we have...
A modern frontend monitoring tool
ย There is a non-reproducible bug to fix ๐Ÿ›
Reproduce every user session with a pixel-perfect replay ๐ŸŽฅ
  • Session recording
  • User tracking
  • See DOM state, network logs, Javascript errors, and performance data for in-depth debugging
  • Search for sessions by user to quickly resolve support tickets and user-reported issues
  • JIRA ticket linked to a session 
ย There is a non-reproducible bug to fix ๐Ÿ›
Frontend performance monitoring ๐ŸŽ

I've performance issues. Pages are long too load ๐Ÿ˜ข

  • CPU usage โ€‹
  • Memory usage
  • Network speed
  • Page load time
  • Time Between Events
  • Alerting
Let's continue improving the support ๐Ÿ’ช

Disclaimer โœ‹

This is not the way to work

but the way we work

We do plenty other things...

๐Ÿ‘‡๐Ÿ‘‡๐Ÿ‘‡

Hackathon ๐Ÿ‘พ
Interviews ๐Ÿ‘“
Meetups & Conferences ๐ŸŽค
Blog articles ๐Ÿ“ฐ
...and thanks ๐Ÿ™ again!

A recipe for a happier frontend development team ๐Ÿง‘โ€๐Ÿณ โค๏ธ ๐Ÿง‘โ€๐Ÿ’ป

By Aurelien Loyer

A recipe for a happier frontend development team ๐Ÿง‘โ€๐Ÿณ โค๏ธ ๐Ÿง‘โ€๐Ÿ’ป

A recipe for a happier front-end development team ๐Ÿง‘โ€๐Ÿณ โค๏ธ ๐Ÿง‘โ€๐Ÿ’ป

  • 668