Radix UI Primitives Feature Flag Management —
Radix UI Primitives คืออะไร
Radix UI เป็น open source component library สำหรับ React ที่ให้ unstyled, accessible primitives สำหรับสร้าง UI components คุณภาพสูง ต่างจาก component libraries อื่นที่มาพร้อม styles Radix UI ให้เฉพาะ behavior, accessibility และ keyboard interactions ให้ developers style เองตามต้องการ
ข้อดีของ Radix UI ได้แก่ WAI-ARIA compliant ทุก component accessible ตั้งแต่แรก, Unstyled ไม่มี opinionated styles ใช้กับ Tailwind CSS หรือ CSS-in-JS ได้, Composable ทุก component ประกอบจาก primitives เล็กๆ, Controlled/Uncontrolled รองรับทั้งสองรูปแบบ, TypeScript support types ครบถ้วน และ SSR compatible ใช้กับ Next.js ได้
Feature Flag Management สำหรับ UI components ช่วยให้ toggle UI features โดยไม่ต้อง redeploy, A/B test different component variants, gradual rollout ของ new UI designs, emergency disable ของ problematic features และ personalize UI ตาม user segments
การรวม Radix UI กับ Feature Flags ทำให้สามารถ switch ระหว่าง component versions (เช่น Dialog V1 กับ V2), enable/disable experimental features (เช่น new navigation), customize component behavior ตาม user role และ test new accessibility improvements กับ subset ของ users
ติดตั้งและใช้งาน Radix UI
เริ่มต้นใช้งาน Radix UI Primitives
=== ติดตั้ง Radix UI ===
สร้าง React project ด้วย Vite
npm create vite@latest my-app -- --template react-ts
cd my-appติดตั้ง Radix UI Primitives (แยกติดตั้งเฉพาะที่ใช้)
npm install @radix-ui/react-dialog
npm install @radix-ui/react-dropdown-menu
npm install @radix-ui/react-tabs
npm install @radix-ui/react-tooltip
npm install @radix-ui/react-switch
npm install @radix-ui/react-select
npm install @radix-ui/react-accordion
npm install @radix-ui/react-toast
npm install @radix-ui/react-popoverติดตั้ง styling dependencies
npm install tailwindcss @tailwindcss/vite
npm install clsx tailwind-merge
npm install class-variance-authorityติดตั้ง feature flag dependencies
npm install launchdarkly-react-client-sdkหรือ
npm install @unleash/proxy-client-react=== Project Structure ===
src/
├── components/
│ ├── ui/ # Radix UI wrapped components
│ │ ├── Dialog.tsx
│ │ ├── Button.tsx
│ │ ├── Select.tsx
│ │ └── Toast.tsx
เนื้อหาเกี่ยวข้อง — อ่านต่อ: Prometheus PromQL Service Level Objective SLO
│ ├── features/ # Feature-flagged components
│ │ ├── NewNavigation.tsx
│ │ └── ExperimentalSearch.tsx
│ └── shared/
├── hooks/
│ ├── useFeatureFlag.ts
│ └── useFeatureFlags.ts
├── providers/
│ └── FeatureFlagProvider.tsx
└── lib/
แนะนำเพิ่มเติม — ดูสัญญาณเทรดที่ XM Signal
├── flags.ts
└── utils.ts
=== tailwind.config.ts ===
import type { Config } from 'tailwindcss'
export default {content: ['./src/**/*.{ts, tsx}'],
theme: {
extend: {
keyframes: {
'dialog-overlay-show': {
from: { opacity: '0' },
to: { opacity: '1' },
},
'dialog-content-show': {
from: { opacity: '0', transform: 'translate(-50%,-48%) scale(0.96)' },
to: { opacity: '1', transform: 'translate(-50%,-50%) scale(1)' },
},
},
animation: {
'dialog-overlay': 'dialog-overlay-show 150ms ease',
'dialog-content': 'dialog-content-show 150ms ease',
},
},
},
เนื้อหาเกี่ยวข้อง — แนะนำให้อ่าน MLflow Experiment Cloud Native Design: คู่มือฉบับสมบูรณ์ 2026 สำหรับการพัฒนา…
} satisfies Config
echo "Radix UI project setup complete"
สร้าง Feature Flag System สำหรับ React
Feature Flag Provider และ hooks
รวม Radix UI กับ Feature Flags
ใช้ Feature Flags ควบคุม Radix UI components
Testing Components กับ Feature Flags
ทดสอบ components ที่ใช้ feature flags
Production Deployment และ A/B Testing
Deploy และ A/B test components
=== Production Feature Flag Setup ===
1. Feature Flag API Server (Express)
server.ts
import express from 'express';
import { createHash } from 'crypto';
const app = express();
interface FlagConfig {
enabled: boolean;
rolloutPct: number;
variants?: Record<string, number>; // variant -> weight
}
const FLAGS: Record<string, FlagConfig> = {
'new-dialog-design': { enabled: true, rolloutPct: 25 },
แนะนำเพิ่มเติม — แหล่งความรู้ Forex iCafeForex
'new-navigation': { enabled: true, rolloutPct: 50 },
'experimental-search': { enabled: false, rolloutPct: 0 },
'onboarding-variant': {
enabled: true,
rolloutPct: 100,
variants: { control: 50, variant_a: 25, variant_b: 25 },
},
};
function getUserBucket(userId: string, flagName: string): number {
const hash = createHash('md5')
.update(`:`)
.digest('hex');
return parseInt(hash.substring(0, 8), 16) % 100;
}
app.get('/api/flags', (req, res) => {
const userId = req.query.user as string || 'anonymous';
เนื้อหาเกี่ยวข้อง — ดูเพิ่มเติมเรื่อง อัตราการว่างงานโลก 2026: คู่มือพิชิตปัญหาเศรษฐกิจ
const result: Record<string, any> = {};
for (const [name, config] of Object.entries(FLAGS)) {
if (!config.enabled) {
result[name] = false;
continue;
}
const bucket = getUserBucket(userId, name);
if (config.variants) {
let cumulative = 0;
for (const [variant, weight] of Object.entries(config.variants)) {
cumulative += weight;
if (bucket < cumulative) {
result[name] = variant;
break;
}
}
} else {
result[name] = bucket < config.rolloutPct;
}
}
res.json(result);
});
2. Analytics Integration
Track which variant users see
function trackFeatureExposure(flagName: string, variant: string, userId: string) {
fetch('/api/analytics/track', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
event: 'feature_exposure',
properties: {
flag_name: flagName,
variant: variant,
user_id: userId,
เนื้อหาเกี่ยวข้อง — ดูเพิ่มเติมเรื่อง Htmx Alpine.js Citizen Developer
timestamp: new Date().toISOString(),
},
}),
});
}
3. CI/CD Pipeline
.github/workflows/deploy.yml
name: Deploy with Feature Flags
on:
push:
branches: [main]
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: 20
- run: npm ci
- run: npm run test
- run: npm run build
# Verify feature flags are properly configured
- name: Validate Feature Flags
run: |
node -e "
const flags = require('./src/lib/flags');
const required = ['new-dialog-design', 'new-navigation'];
for (const f of required) {
if (!(f in flags.DEFAULT_FLAGS)) {
throw new Error('Missing flag: ' + f);
}
}
console.log('Feature flags validated');
"
- name: Deploy
run: npm run deploy
echo "Production setup complete"
FAQ คำถามที่พบบ่อย
Q: Radix UI กับ shadcn/ui ต่างกันอย่างไร?
A: Radix UI เป็น primitive library ที่ให้ behavior และ accessibility แต่ไม่มี styles shadcn/ui สร้างบน Radix UI โดยเพิ่ม Tailwind CSS styles ให้พร้อมใช้งาน ใช้ copy-paste approach (ไม่ใช่ npm package) ทำให้ customize ได้ง่าย สำหรับ projects ใหม่แนะนำ shadcn/ui เพราะประหยัดเวลา styling สำหรับ projects ที่ต้องการ design system เฉพาะ ใช้ Radix UI โดยตรงแล้ว style เอง
Q: Feature Flag ทำให้ bundle size ใหญ่ขึ้นไหม?
A: ถ้า import ทั้ง V1 และ V2 components จะเพิ่ม bundle size ทางแก้ใช้ React.lazy() กับ dynamic imports เพื่อ code-split feature-flagged components โหลดเฉพาะ version ที่ user ได้รับ สำหรับ flags ที่ควบคุม small UI changes (เช่น สี, text) ไม่กระทบ bundle size สำหรับ flags ที่ควบคุม entire pages/features ใช้ route-based code splitting
Q: จะทำ gradual rollout ของ new UI อย่างไร?
A: เริ่มจาก internal users (employees) 100%, ขยายเป็น beta users 100%, จากนั้น public users 5% -> 25% -> 50% -> 100% ที่แต่ละ stage monitor metrics สำคัญ (conversion rate, error rate, page load time, user feedback) ถ้า metrics ดีขึ้นหรือคงที่ เพิ่ม rollout percentage ถ้า metrics แย่ลง rollback ทันทีโดย set percentage เป็น 0
Q: Accessibility testing สำหรับ feature-flagged components ทำอย่างไร?
A: ต้อง test accessibility ทั้ง enabled และ disabled states ของทุก flag ใช้ axe-core หรือ Playwright accessibility testing ทดสอบ keyboard navigation, screen reader, focus management สำหรับทุก variant Radix UI primitives มี accessibility built-in แต่ custom styles อาจทำให้ contrast ratio ไม่ผ่าน ใช้ automated testing ใน CI pipeline ทดสอบทุก flag combination ที่เป็นไปได้
