Khi phát triển ứng dụng song song trên Web (Next.js) và Mobile (Expo/React Native), việc bật/tắt tính năng hoặc thử nghiệm giao diện mới mà không cần deploy lại là yêu cầu thiết yếu. Dưới đây là quy trình thực tế đã áp dụng trong dự án gần đây. ## 1. Chọn giải pháp Feature Flag - **LaunchDarkly / Unleash**: cung cấp dashboard, targeting theo user segment, percentage rollout. - **Self‑hosted (GrowthBook, Flagsmith)**: phù hợp khi cần kiểm soát dữ liệu nội bộ. - **Client‑side SDK**: cả Web và Native đều có thư viện nhẹ (launchdarkly-js-client-sdk, launchdarkly-react-native-client-sdk). ## 2. Cấu trúc flag chung ```json { "newCheckoutFlow": { "enabled": true, "rollout": 30, "variants": ["control", "variantA"] } } ``` - `enabled`: bật/tắt toàn cục. - `rollout`: phần trăm người dùng nhận variant. - `variants`: danh sách biến thể cho A/B test. ## 3. Tích hợp vào code ### Web (Next.js) ```tsx import { useFlags } from 'launchdarkly-react-client-sdk'; const { flags } = useFlags(); if (flags.newCheckoutFlow?.enabled) { return <NewCheckout />; } return <LegacyCheckout />; ``` ### Mobile (Expo) ```tsx import { useFlags } from 'launchdarkly-react-native-client-sdk'; const { flags } = useFlags(); const Checkout = flags.newCheckoutFlow?.enabled ? NewCheckout : LegacyCheckout; ``` Cả hai nền tảng dùng cùng một hook `useFlags` (wrapper tự viết) để đảm bảo API nhất quán. ## 4. Chiến lược A/B Testing 1. **Định nghĩa metric**: conversion rate, average order value, crash‑free sessions. 2. **Phân bổ traffic**: dùng `rollout` 10‑20% cho variant mới, giữ 80% cho control. 3. **Thu thập sự kiện**: gửi event `checkout_started`, `checkout_completed` đến Amplitude/Mixpanel cùng `flagKey` và `variant`. 4. **Phân tích**: so sánh metric giữa các variant sau 1‑2 tuần. 5. **Quyết định**: nếu variant thắng, tăng `rollout` lên 100% và xóa flag sau khi ổn định. ## 5. Best practices có thể áp dụng ngay - **Flag naming convention**: `<domain>.<feature>.<action>` (ví dụ `checkout.newFlow.enabled`). - **Version flag schema** trong repo (JSON/TS) để review qua PR. - **Automated cleanup**: script chạy hàng tuần xóa flag `enabled: false` và `rollout: 0` quá 30 ngày. - **Testing**: viết unit test cho component với `flags` mock; chạy integration test trên cả Web (Cypress) và Mobile (Detox). - **Observability**: log flag evaluation latency; cảnh báo nếu > 200 ms. ## 6. Lợi ích thực tế - Giảm thời gian release từ 2 tuần xuống vài giờ khi chỉ cần toggle flag. - Khả năng rollback tức thì khi phát hiện bug trên production. - Dữ liệu A/B test chính xác nhờ cùng một flag schema trên cả hai nền tảng. Với quy trình trên, team có thể thử nghiệm nhanh, an toàn và duy trứ tính nhất quán giữa Web và Mobile mà không làm phức tạp pipeline CI/CD.