Tweet
Tweet

Slide 1

Slide 1 text

CUI & Feature Flags ❤ Sep 2024 / Pricing Experience

Slide 2

Slide 2 text

who.is ● 󰎙 ● thulioph.com

Slide 3

Slide 3 text

Context What is CUI? 🤔

Slide 4

Slide 4 text

conversions-ui a.k.a. CUI 1. Vouchers 2. Campaigns 3. Referrals 4. Discount communications 5. Price experiments

Slide 5

Slide 5 text

● Add image ● Right-click image ● “Order” ● “Send to back” Conversions UI

Slide 6

Slide 6 text

● Add image ● Right-click image ● “Order” ● “Send to back” Discount Communications

Slide 7

Slide 7 text

● Add image ● Right-click image ● “Order” ● “Send to back” Vouchers

Slide 8

Slide 8 text

● Add image ● Right-click image ● “Order” ● “Send to back” Vouchers

Slide 9

Slide 9 text

● Add image ● Right-click image ● “Order” ● “Send to back” Vouchers

Slide 10

Slide 10 text

Feature Flags What are they, and Why do we use them? 🚦

Slide 11

Slide 11 text

"Toggle switches that enable or disable features in production." "By ChatGPT" 🤖

Slide 12

Slide 12 text

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)

Slide 13

Slide 13 text

How we implement First, make It Work. Then, make It Right! 🔁

Slide 14

Slide 14 text

● Add image ● Right-click image ● “Order” ● “Send to back” Make it work!

Slide 15

Slide 15 text

● Add image ● Right-click image ● “Order” ● “Send to back” Make it right! (server-side - BFF) (client-side - UI) (Service provider)

Slide 16

Slide 16 text

Usage github.com/hellofresh/conv ersions-ui/pull/1097

Slide 17

Slide 17 text

Usage Define a single entry point for the flag

Slide 18

Slide 18 text

Usage client-side (UI)

Slide 19

Slide 19 text

Usage server-side (BFF)

Slide 20

Slide 20 text

Real-world example

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

Let's play with bulk campaigns Testing in dev

Slide 23

Slide 23 text

Challenges and Lessons Learned

Slide 24

Slide 24 text

Identify ownership of feature flags in HF (for internal apps) #statsig-operations-feature-flags-users

Slide 25

Slide 25 text

Mismatch between environment values (NODE_ENV) Ticket to fix this issue

Slide 26

Slide 26 text

Reminder of Stale Flags (via email) Nudges to clean up Stale gates

Slide 27

Slide 27 text

Example & Guidelines (must have) Examples & Guidelines (CUI)

Slide 28

Slide 28 text

Thank you! thulioph.com/talks