1. ALEXEY SHPAKOV | SENIOR DEVELOPER
Jira Frontend Delivery

2. Jira Frontend
• 230+ commits per day
• 200+ unique monthly contributors
• 6+ production deployments per day
• ~10 incidents in per month

3. Agenda
Process
Deployment pipeline
Frontend optimisations

4. SLOs
Monitoring
On-call
Incident management
Post-mortems
Rollbacks
Unit tests
Contract tests
Integration tests
Guidelines
PR reviews
INCIDENT
PREVENTION
INCIDENT
MITIGATION

5. Impact
How many
customers were
affected
Timieline and
Mitigation
Actions performed to
mitigate the incident
Root cause
What made this kind
of incidents possible
Follow-up
actions
How we are
preventing it from
happening again
Incident post-mortems
https://www.atlassian.com/incident-management/handbook/postmortems

6. 24/7
On-call

7. TechOps meetings
• check SLOs
• seek to improve reliability
• follow up on previous actions

8. Feature flag
Identify and toggle
Rollback
Identify the first non-
broken version and
deploy it
Fix
Apply the fix and
deploy it
Escalate
Involve more people
to help with
mitigation
Incident response

9. Agenda
Process
Deployment pipeline
Frontend optimisations

10. JIRA FRONTEND
Browser Web server
CDN
html
assets

11. Photo by Pascal van de Vendel on Unsplash
Gradual rollout

12. GRADUAL ROLLOUT
staging
ap region
us + eu regions

13. Photo by Einar Storsul on Unsplash
Alternative deployment

14. ALTERNATIVE DEPLOYMENT
master
release/alt
React 15
React 16
staging/production
if (altFeatureFlag())

15. Photo by Jose Aragones on Unsplash
Blockers

16. BLOCKERS
🔥 staging
ap region
us + eu regions

17. BLOCKERS
blocker
🔥
🛑
ap region
us + eu regions
staging

18. BLOCKERS
🧯🔥 🔥 🔥
🛑
blocker
ap region
us + eu regions
staging

19. BLOCKERS
🛑
blocker
🧯🔥 🔥 🔥
ap region
us + eu regions
staging

20. BLOCKERS
🛑
blocker
🧯🔥 🔥 🔥
ap region
us + eu regions
staging

21. Photo by CDC on Unsplash
Frontend injection

22. FRONTEND INJECTION

23. Agenda
Process
Deployment pipeline
Frontend optimisations

24. CDN with HTTP/2
Photo by Serena Repice Lentini on Unsplash

25. • CacheControl: max-age=31536000, immutable
• Contents -based hash in the filename (webpack-plugin-hash-output)
• Using "chunkIds: 'named'" to get fewer cache invalidations ('deterministic' in webpack@5)
Photo by Aidan Bartos on Unsplash

26. Content-Encoding: br
Photo by Steve Giampa on Unsplash

27. Photo by Steve Johnson on Unsplash
Modern bundles

28. Photo by James Lee on Unsplash
Code splitting
import(/* webpackPreload: true */ 'Modal');

29. Photo by Nathan Anderson on Unsplash
Streaming

30. Dependencies deduplication
Photo by Ross Joyner on Unsplash

31. DEPENDENCIES SEMVER-COMPATIBLE WITH ROOT
yarn add button@^1.0.0
yarn add select@^1.0.1
node_modules
|_button@1.0.0
|_select@1.0.1
|_node_modules
|_button@1.0.1
yarn.lock
"button@^1.0.0":
version "1.0.0"
"button@^1.0.1":
version "1.0.1"
npx yarn-deduplicate
yarn install
node_modules
|_button@1.0.1
|_select@1.0.1
yarn.lock
“button@^1.0.0", “button@^1.0.1":
version “1.0.1"

32. DEPENDENCIES NON-SEMVER-COMPATIBLE WITH ROOT
yarn add button@^1.0.0
yarn add select@^2.0.0
yarn add combo@^2.0.1
npx yarn-deduplicate
yarn install
node_modules
|_button@1.0.0
|_select@2.0.0
|_node_modules
|_button@2.0.1
|_combo@2.0.1
|_node_modules
|_button@2.0.1
webpack-deduplication-plugin

33. USEFUL LINKS
https://www.atlassian.com/incident-management/handbook/postmortems
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control
https://www.npmjs.com/package/webpack-plugin-hash-output
https://webpack.js.org/guides/code-splitting
https://www.npmjs.com/package/webpack-deduplication-plugin
https://www.npmjs.com/package/yarn-deduplicate

34. Thank you