- . , visx . , .
- , . visx, , CSS-in-JS-. , React- , , , , , . Visx, , . , .
- هذه ليست مجموعة من العناصر "شحذ" لإنشاء الرسوم البيانية. إذا كنت تستخدم أساسيات التصور لإنشاء الرسوم البيانية ، فستقوم في النهاية بإنشاء مكتبتك الخاصة التي تحل هذه المشكلة. علاوة على ذلك ، ستكون مكتبة مخصصة لاحتياجاتك. ستكون تحت سيطرتك الكاملة.
تتمثل أهم قوة في visx في أنها في الأساس مجموعة منتظمة من مكونات React. إن معرفة كيفية العمل مع مكتبة React يعني أنه يمكنك استخدام visx لإنشاء تصورات. يستخدم واجهات برمجة التطبيقات القياسية والأنماط المألوفة لمطوري React. في أي مشروع React ، يجب أن تشعر وكأنك في المنزل. نحن مهتمون جدًا بإلقاء نظرة على ما تقوم بإنشائه باستخدام visx!
التحدي: تصور البيانات في تطوير الواجهة الأمامية
مطلوب تصور البيانات من قبل المتخصصين من مختلف المجالات. لهذا السبب ، هناك حاجة لوجود أطر عمل لإنشاء عناصر رسومية. مثل هذه الأطر القادرة على حل مشاكل هؤلاء الناس. النوع الذي يستطيع هؤلاء الناس إتقانه حقًا.
إحدى هذه المجموعات هي مطوري الواجهة الأمامية الذين يتعين عليهم باستمرار إنشاء تصورات للبيانات لمشاريع الويب. هناك الكثير من المكتبات والأطر الرائعة لإنشاء رسومات الويب. من D3 و Highcharts و Plotly و Echarts و Victory و G2 و Recharts و response -vis و vega وvega-lite و Semiotic وغيرها من المشاريع المماثلة. على الرغم من هذا التنوع ، قمنا بتحليل أكثر من اثنتي عشرة مكتبة موجودة وفكرنا في استخدامها على Airbnb ووجدنا أن معظمها معيب في واحد على الأقل من المجالات الثلاثة المهمة لمطوري الواجهة الأمامية لدينا:
- ( ?). - . API D3 vega. , -.
- ( , ?). , ? ( — airbnb.com), . ? .
- . -, , -, , airbnb.com, . , , , , , .
لوحظ أنه غالبًا ما تكون هناك علاقة مباشرة بين التعبير عن أدوات تصور البيانات والقدرة على استكشافها بسرعة. أفضل واحدة من هذه الخصائص ، يمكن أن يكون الآخر أسوأ. كل هذا قادنا إلى التساؤل حول كيفية إنشاء مكتبة يمكن استكشافها بسرعة ، مكتبة معبرة بدرجة كافية ، وفي نفس الوقت - أداء عالي. تتكون الإجابة على هذا السؤال من كلمة واحدة: "رد الفعل".
الحل: بدائل بصرية منخفضة المستوى تعتمد على React
في السنوات الأخيرة ، أصبحت مكتبة React هي الاتجاه السائد لتطوير الويب. يرجع هذا جزئيًا إلى حقيقة أنه يحتوي على واجهات برمجة تطبيقات تعريفية تساعدك على كتابة كود نظيف وقابل للقراءة يسهل صيانته. هذه المكتبة مألوفة للعديد من مطوري الواجهة الأمامية ، وهناك الكثير من المواد حول تحسين أداء تطبيقات React. لقد أسسنا المشروع على React والنظام البيئي لهذه المكتبة ، مما يعني أننا جعلنا من السهل التعلم والإنتاجية. أصبح تنفيذ API المعياري منخفض المستوى فيه هو المفتاح لتعبيره.
عندما نتحدث عن هذه الرؤية لهذا المشروع ، عادة ما نطرح سؤالين.
إليكم السؤال الأول: "لماذا لا نستخدم فقط D3 ، مكتبة معبرة جدًا في تطبيقات React؟"
النقطة المهمة هي أنه يمكنك فعل ذلك. ولكن نظرًا لأن كلاً من D3 و React يرغبان في معالجة DOM بمفردهما ، فقد وجدنا أنه من الأفضل استخدام D3 فقط للحساب واستخدام React لـ DOM. خلافًا لذلك ، فإن نموذجين ذهنيين يتنافسان على تحديث DOM يفتحان الباب أمام الحشرات للتسلل إلى المشروع. لكن استخدام D3 فقط للحسابات يعني أنه لن يتم استخدام جزء كبير من وظائف هذه المكتبة (تلك المتعلقة بـ DOM). ولكن عن selection.join ، التكبير ، السحب ، فرشاة و التحولات... بالإضافة إلى ذلك ، كما ذكرنا ، تستغرق D3 بعض الوقت لإتقانها. ونود أن يشعر المطورون بأنهم يكتبون كود React الأصلي الذي يستخدم واجهات برمجة التطبيقات القياسية والأنماط المألوفة عند القيام بتصور البيانات.
إليكم السؤال الثاني: لماذا لا تستخدم فقط واحدة من مكتبات التصيير العديدة المصممة لـ React؟
أظهر بحثنا (النتائج معروضة في الشكل التالي) أن مكتبات React الحالية لتصور البيانات غالبًا ما تكون تجريدية عالية المستوى ومُحسّنة لسهولة الاستخدام (أي التركيز على تقليل كمية الكود المطلوب لاستخدامها). يتم ذلك على حساب تعبيرهم. لا يقدم أي منها للمطور تعبيرًا عن العناصر الأولية لـ D3 ، ولا يسمح العديد منها بالتحسين الذي نحتاجه لمشاريع الإنتاج ، نظرًا لأن الحساب والرسوم المتحركة وإدارة الحالة والأنماط والعرض ترتبط ارتباطًا وثيقًا ببعضها البعض.
- , , . visx , React-
من خلال تحليل مساحة المشكلة المعروضة في الشكل السابق ، يمكنك أن ترى بوضوح فرصة التطوير الناجح لمكتبة React بمستوى عالٍ من التعبير. من خلال إنشاء أساسيات عرض منخفضة المستوى تم تصميمها من الألف إلى الياء لاستخدام واجهات برمجة تطبيقات React الشائعة ، كنا نأمل أن نتمكن من إنشاء مكتبة سهلة التعلم ومعبرة وذات أداء عالٍ. كنا نظن أن مثل هذه المكتبة ستكون مفيدة لأي مطور أمامي. هكذا وُلد مشروع visx.
تفاصيل حول visx
تخفي مجموعة مكونات visx (المعروفة سابقًا باسم vx) الكلمات "مكونات التصور" في اسمها. يتكون من أكثر من 30 حزمة منفصلة تحتوي على أساسيات تصور بيانات React ، مقسمة إلى عدة فئات (انظر الشكل التالي). كل من يستخدم هذه الأوليات لا يجبر على نوع من تطبيق نظام إدارة الدولة. يمكن للمطور اختيار طريقة تحريك العناصر وتصميمها. كل هذا يعني أنه يمكن دمج بدائل visx في أي قاعدة بيانات تستند إلى React. وحقيقة أنه عند إنشاء visx ، تم التركيز على نمطية (وهذا يجعل visx مشابهًا لـ D3) يسمح لك بإنشاء حزم من التطبيقات ذات الحجم الصغير ، بما في ذلك في تكوينها فقط ما هو مطلوب لتنفيذ مكتبتك الخاصة لتصور البيانات ، والمخصصة للاستخدام القابل لإعادة الاستخدام ، أو بعد ذلك ،ما هو مطلوب لتشكيل جدول فريد موجود في نسخة واحدة.
Visx عبارة عن مجموعة معيارية من أكثر من 30 حزمة تتناول مهام تصور البيانات الشائعة في تطبيقات React.
أسئلة وأجوبة
▍كيف يتم استخدام D3 في visx؟
تستخدم العديد من الحزم المضمنة مع visx D3 لإجراء عمليات حسابية مختلفة ، مثل وضع العناصر على الصفحات. إنهم يكررون وظيفيًا حزم D3 التي يستخدمونها ، ويزودونها بواجهات برمجة تطبيقات React APIs. تتضمن أمثلة هذه الحزم @ visx / axis و @ visx / geo و @ visx / hierarchy و @ visx / shape. تحل الحزم الأخرى محل وظائف إدارة DOM في D3 وتزود المطور بأساسيات React للتفاعل مع العناصر. هذه ، على سبيل المثال ، @ visx / brush و @ visx / drag و @ visx / zoom.
▍ ما الذي يمكن أن يفعله Visx الذي لا يستطيع D3 فعله؟
العديد من الحزم غير مرتبطة تمامًا بـ D3 ، فهي تلخص الحلول للمشكلات الشائعة التي واجهناها عند إنشاء عروض تخطيط التصميم في React والتي تعرض التخطيطات بدقة بكسل. تعمل العديد من هذه الأدوات على تجريد وتبسيط مشاكل حجم الكائنات المعقدة وتبسيط SVG API. وهنا بعض الأمثلة.
@ visx / تلميح الأدوات
وهنا مثال التفاعلي.
تلميحات
الأدوات تعتبر تلميحات الأدوات عنصرًا يستخدم غالبًا في مشروعات الويب. لكن إدراك جميع التفاعلات الدقيقة مع هذه العناصر ليس بالمهمة السهلة. حزمة @ visx / tooltip ملخصات إدارة حالة تلميح الأدوات. يساعد على إدارة محتوياته وإحداثياته وإظهاره وإخفائه. يتم ذلك باستخدام React hooks (useTooltip) وباستخدام مكون ذي ترتيب أعلى (withTooltip). يؤدي استخدام حزمة @ visx / tooltip أيضًا إلى تسهيل حل المهام المتعلقة بعرض تلميحات الأدوات ، مثل التحديد التلقائي للمواضع (نتيجة لذلك ، لا يتم قص تلميح الأداة بواسطة الحاوية الخاصة به) ، مثل العرض الاختياري داخل البوابة الإلكترونية.لاستكشاف مشكلات التراكب السياقي وإصلاحها
@ visx / text
يمكن العثور على مثال تفاعلي هنا .
العمل مع النص
في SVG 1.1. لا توجد إمكانيات للعمل مع نص متعدد الأسطر ، مثل تلك الموجودة في HTML ، حيث ، على سبيل المثال ، يمكنك بسهولة ، باستخدام CSS ، تنفيذ تمثيل متعدد الأسطر للنصوص الطويلة. عادةً ما يتطلب تنفيذ مثل هذه الآليات باستخدام React (أو حتى JavaScript فقط) عرض عناصر DOM غير مرئية تُستخدم لقياس حجم النص ولإيجاد معلمات لتقسيم النص إلى أسطر. تلخص حزمة @ visx / text كل هذه المهام وتجعل من السهل دعم النصوص الطويلة في التصورات.
@ visx / مستجيب
وهنا مثال التفاعلي.
تطبيقات الويب
المستجيبة من السهل إنشاء تطبيقات الويب المستجيبة باستخدام HTML. إذا تم إنشاء الرسوم التخطيطية بالاعتماد على رسومات SVG وإمكانيات عنصر Canvas ، فيجب أخذ قياسات دقة البكسل لجعلها سريعة الاستجابة ، وهو أمر ليس بهذه السهولة في React. توفر الحزمة @ visx / response للمطور العديد من الأدوات المساعدة التي تسهل الحصول على أبعاد البكسل للعناصر بحيث يمكنك بسهولة إنشاء مخططات سريعة الاستجابة.
@ visx / gradient، @ visx / pattern
هنا للمثال التفاعلي.
التدرجات
والنماذج تعزز التدرجات اللونية وتعبئة الأنماط بشكل كبير من قدرات أولئك الذين يصممون المخططات. هذه التأثيرات الرسومية تخلق صورًا لافتة للنظر تبرز من الخلفية. لكن وصف مثل هذه الصور باستخدام SVG كثير من التعليمات البرمجية ويمكن أن يكون مهمة شاقة. تعمل حزم @ visx / gradient و @ visx / pattern على تبسيط بناء الجملة بشكل كبير لإعلان الأنماط المناسبة ، مما يسمح لأي شخص بإنشاء رسوم بيانية لطيفة.
▍ ما الذي يمكن إنشاؤه باستخدام visx؟
لقد استخدمنا visx منذ 2.5 عام ، مستخدمين هذه المجموعة من العناصر في العشرات من أدوات البيانات الداخلية وعلى airbnb.com.
تصورات تم إنشاؤها باستخدام visx
يوضح الشكل السابق أمثلة لما أنشأناه باستخدام visx. هذه هي ، إذا ذهبت في اتجاه عقارب الساعة ، بدءًا من الزاوية اليسرى العليا ، المشاريع التالية: مخطط جانت مع التبعيات ، مخطط دائري هيكلي ، مخطط شعاعي ، تقرير مقاييس العمل ، نظرة عامة على تفاعل الخدمة.
استخدمنا أيضًا visx لإنشاء مكتبة عالية المستوى لإنشاء مخططات قابلة لإعادة الاستخدام. سمح لنا ذلك بتقليل مقدار الشفرة المعيارية عند إنشاء عناصر رسومية بسيطة.
Visx عبارة عن مجموعة من العناصر منخفضة المستوى. إنه مصمم لإنشاء أنظمة ذات مستوى أعلى على أساسه. يجب استخدامه لإنشاء مكتباتك عالية المستوى وإنشاء تصورات مخصصة لتطبيقات الويب.
▍Visx يبدو مثيرًا للاهتمام ، ولكن ماذا لو أحب D3 حقًا؟
نحن نحب D3 أيضًا!
▍ كيف يتم تطوير Visx؟
لمدة 3 سنوات من العمل على visx ، قمنا بتطوير هذه المجموعة من الأوليات في الاتجاهات الثلاثة التالية:
- . , visx, - Airbnb, ( — , , ) , ( , ). , , , , , .
- . , visx, , , . , vx, . visx, blocks.org, CodeSandbox, , , visx.
- . visx JavaScript-, TypeScript. . TypeScript — - Airbnb. , TypeScript, — ts-migrate. , , visx . , Happo, visx, .
تستخدم وثائق visx أمثلة على نمط blocks.org يمكنك تجربتها على النظام الأساسي CodeSandbox. جميع الأمثلة مرتبطة ارتباطًا وثيقًا
بحزم الجمع المقابلة هل استخدمت visx؟