عند إنشاء البرامج، قد يكون إصدار ميزات جديدة بسرعة دون كسر أي شيء أمرًا صعبًا. أعلام الميزات تجعل هذا الأمر أسهل. بعد القراءة عن Vercel’s Features Flag SDK، اعتقدت أنه سيكون من المفيد دراسة المزيد حول علامات الميزات وشرح ماهيتها، وكيفية عملها، وكيف يمكنك إنشاء واحدة بنفسك.

ما هي أعلام الميزات؟

تسمح علامات الميزات (وتسمى أيضًا تبديل الميزات) للمطورين بتشغيل الميزات أو إيقاف تشغيلها دون الحاجة إلى تغيير التعليمات البرمجية أو إعادة نشر التطبيق. هذا يعني أنه يمكنك:

• إصدار الميزات تدريجيًا: اسمح لبعض المستخدمين فقط برؤية الميزة الجديدة ونشرها ببطء للجميع.
• اختبار الميزات الجديدة في الإنتاج: يمكنك تمكين الميزة لنفسك أو لمجموعة صغيرة من المختبرين دون إتاحتها لجميع المستخدمين.
• استعادة الميزة بسرعة: إذا تسببت ميزة جديدة في حدوث مشكلات، فيمكنك تعطيلها دون إعادة النشر.

باستخدام علامات الميزات، يمكنك التحكم في الوقت الذي يتمكن فيه المستخدمون من الوصول إلى الميزات، بشكل منفصل عن وقت نشر التعليمات البرمجية.

لماذا نستخدم أعلام الميزات؟

1. التسليم المستمر

   تساعد علامات الميزات الفرق على إصدار التعليمات البرمجية بشكل متكرر. يمكنك دمج العمل غير المكتمل في قاعدة التعليمات البرمجية الرئيسية، وإخفائه خلف علامة، ونشره دون التأثير على المستخدمين.

2. اختبار أ/ب

   يمكنك اختبار إصدارين من الميزة مع مجموعات مستخدمين مختلفة لمعرفة أيهما يحقق أداءً أفضل. وهذا يساعد على تحسين تجربة المستخدم بناءً على البيانات الحقيقية.

3. الإصدارات الخاضعة للرقابة

   يمكنك إصدار ميزة لمجموعة صغيرة من المستخدمين، ومراقبة أدائها، ثم إصدارها للجميع.

4. التراجع السريع

   إذا حدث خطأ ما، فإن إيقاف تشغيل علامة الميزة يكون أسرع بكثير من التراجع عن تغييرات التعليمات البرمجية، مما يساعد في الحفاظ على استقرار التطبيق.

استخدام علامات الميزات في Next.js مع Vercel's Flags SDK

flags.ts (من جانب الخادم)

import { unstable_flag as flag } from "@vercel/flags/next";

export const showBanner = flag({
  key: "banner",
  decide: () => false,
});

تحدد وظيفة التحديد قيمة العلامة، والتي يمكن توفيرها من مصادر مختلفة مثل:

• متغيرات البيئة
• موفري علامات الميزات الأخرى
• تكوين Edge الخاص بـ Vercel (مخزن تكوين البيانات)
• قواعد البيانات، الخ.

app/page.tsx

import { showBanner } from "../flags";

export default async function Page() {
  const banner = await showBanner();
  return (
    

      {banner ?  : null}
      {/* other components */}
    
  );
}

نظرًا لأن العلامات عبارة عن وظائف، فيمكننا بسهولة تغيير التنفيذ دون تعديل أي شيء من جانب الاتصال. تسمح هذه المرونة لتطبيقك بالتكيف مع المتطلبات الجديدة دون الحاجة إلى تغيير البنية الأساسية لمنطق العلم.

كيفية بناء نظام علم الميزات الخاص بك

دعونا نبني نظامًا بسيطًا لتمييز الميزات يمكنك تحسينه بمرور الوقت.

الخطوة 1: إنشاء خطاف مخصص لاسترداد علامات الميزات

تتضمن هذه الخطوة إنشاء رابط مخصص يسمح لك باسترداد علامات الميزات ديناميكيًا. يمكنك بسهولة إعادة استخدام هذا الخطاف في أي جزء من تطبيق React الخاص بك للتحقق من تمكين الميزة أو تعطيلها.

import { useState, useEffect } from 'react';

export const useFeatureFlag = (key: string): boolean => {
  const [isEnabled, setIsEnabled] = useState(false);

  useEffect(() => {
    const fetchFeatureFlag = async () => {
      try {
        const response = await fetch(`http://localhost:3001/api/feature-flags/${key}`);
        if (response.ok) {
          const data = await response.json();
          setIsEnabled(data.is_enabled);
        }
      } catch (error) {
        console.error('Failed to fetch feature flag:', error);
      }
    };

    fetchFeatureFlag();
  }, [key]);

  return isEnabled;
};

الخطوة 2: رد الفعل المكون

بعد ذلك، قم بإنشاء مكون يستخدم الخطاف المخصص لعرض ميزات مختلفة بناءً على ما إذا كانت العلامة ممكّنة أو معطلة. سيسمح هذا لتطبيقك بالتبديل بسلاسة بين الوظائف القديمة والجديدة دون أي انقطاع في تجربة المستخدم.

import React from 'react';
import { useFeatureFlag } from './useFeatureFlag';

const FeatureFlaggedComponent: React.FC = () => {
  const isNewFeatureEnabled = useFeatureFlag('new-feature');

  return (
    

      
Feature Flag Example
      {isNewFeatureEnabled ? (
        

          
New Feature
          
This is the new feature enabled by the feature flag.
        
      ) : (
        

          
Old Feature
          
This is the old feature displayed when the new feature is disabled.
        
      )}
    
  );
};

export default FeatureFlaggedComponent;

حلول علامات الميزات الأخرى في السوق

يعد إنشاء نظام علامة الميزات الخاص بك مفيدًا للمشروعات الصغيرة، ولكن إذا كنت تعمل مع فرق أكبر أو تحتاج إلى تحكم أكثر تقدمًا، فإن العديد من الأدوات تقدم وضع علامة على الميزات كخدمة:

1. أعلام ميزات Vercel

   تقدم Vercel علامات ميزات مدمجة في نظامها الأساسي، مما يسمح بالتحكم في الوقت الفعلي في تحديد المستخدمين الذين يمكنهم رؤية الميزات.

2. إطلاق داركلي

   LaunchDarkly هي أداة شائعة لإدارة علامات الميزات على نطاق واسع. وهو يدعم عمليات الطرح المعقدة، ويستهدف المستخدمين بناءً على سمات مثل الموقع أو السلوك.

3. على النحو الأمثل

   يركز بشكل مثالي على التجريب واختبار A/B، باستخدام علامات الميزات لاختبار ميزات مختلفة وتحسين تجربة المستخدم.

4. Split.io

   يسمح Split.io للفرق بتقسيم حركة المرور بين إصدارات الميزات المختلفة وتتبع مقاييس الأداء في الوقت الفعلي.

5. هايبرتون

يعد Hypertune لاعبًا جديدًا في مجال وضع علامات على الميزات، مع التركيز على التجارب عالية الأداء وتبديل الميزات. فهو يمكّن الفرق من إجراء تجارب معقدة بأقل قدر من زمن الوصول، مما يضمن رؤى الأداء في الوقت الفعلي. يدمج نهج Hypertune الفريد علامات الميزات مع نماذج التعلم الآلي، مما يسمح باتخاذ قرارات أكثر ذكاءً فيما يتعلق بنشر الميزات واستهداف المستخدم.

خاتمة

تعد علامات الميزات طريقة ممتازة لإصدار الميزات بأمان، واختبارها في الإنتاج، وإجراء تغييرات سريعة دون إعادة نشر التعليمات البرمجية. يمكنك إنشاء نظام بسيط لتمييز الميزات باستخدام JavaScript أو استخدام أدوات أكثر تقدمًا مثل Vercel أو LaunchDarkly أو Optimizely للمشاريع الأكبر.

سيؤدي استخدام علامات الميزات إلى جعل عملية التطوير الخاصة بك أكثر مرونة وكفاءة، مما يسمح لك بتقديم ميزات جديدة بشكل أسرع وأكثر ثقة.

شكرًا على القراءة، ولا تتردد في مشاركة تعليقاتك!