CUI & Feature Flags

Geek Friday / HelloFresh

In this talk, I present how my team uses Feature Flags. I led this implementation when I worked on the Pricing Experience team. These slides will give you a context for the talk, going through where we applied, the benefits and reasons, lessons learned, and challenges.

Transcript

1. CUI & Feature Flags ❤ Sep 2024 / Pricing Experience
2. who.is • 󰎙 • thulioph.com
3. Context What is CUI? 🤔
4. conversions-ui a.k.a. CUI 1. Vouchers 2. Campaigns 3. Referrals 4. Discount communications 5. Price experiments
5. • Add image • Right-click image • “Order” • “Send to back” Conversions UI
6. • Add image • Right-click image • “Order” • “Send to back” Discount Communications
7. • Add image • Right-click image • “Order” • “Send to back” Vouchers
8. • Add image • Right-click image • “Order” • “Send to back” Vouchers
9. • Add image • Right-click image • “Order” • “Send to back” Vouchers
10. Feature Flags What are they, and Why do we use them? 🚦
11. "Toggle switches that enable or disable features in production." "By ChatGPT" 🤖
12. Why do we use them? Core Benefits • Controlled rollouts (e.g., beta testing, gradual user release) * • A/B testing and experimentation • Quick rollbacks without redeploying code * • Risk mitigation • Decoupling deployment from release • Engaging and empowering more team members in the development process • Recovering faster from incidents * • Testing new things with more confidence • Improve DORA metrics (e.g., Deployment Frequency, Lead Time to Change, Time to Restore)
13. How we implement First, make It Work. Then, make It Right! 🔁
14. • Add image • Right-click image • “Order” • “Send to back” Make it work!
15. • Add image • Right-click image • “Order” • “Send to back” Make it right! (server-side - BFF) (client-side - UI) (Service provider)
16. Usage github.com/hellofresh/conv ersions-ui/pull/1097
17. Usage Define a single entry point for the flag
18. Usage client-side (UI)
19. Usage server-side (BFF)
20. Real-world example
21. Real-world example • Statsig feature flag • Users can create campaigns in bulk using global Ids • Users can "Edit" campaigns using global partners & channels • Users can "Create" campaigns using global partners & channels Global IDs
22. Let's play with bulk campaigns Testing in dev
23. Challenges and Lessons Learned
24. Identify ownership of feature flags in HF (for internal apps) #statsig-operations-feature-flags-users
25. Mismatch between environment values (NODE_ENV) Ticket to fix this issue
26. Reminder of Stale Flags (via email) Nudges to clean up Stale gates
27. Example & Guidelines (must have) Examples & Guidelines (CUI)
28. Thank you! thulioph.com/talks