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 ๐งโ๐ณ โค๏ธ ๐งโ๐ป
- 680