عرض HN: مكتبة واجهة مستخدم JavaScript لـ JSX الإلزامي

0.0.5 •عام• نشرت منذ يوم واحد

@ماتري/دوم

إطار عمل ويب لـ JSX الإلزامي – طريقة جديدة للتفكير في هندسة واجهة المستخدم.

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

لرؤية أمثلة على ذلك في العمل، لقد قمت بإنشاء مستودع للوصفات

ملخص

أنا أحب React، لكنه يعاني من مشاكل:

قد يكون من الصعب فهم السلوك المتباين من الناحية المفاهيمية
قد يكون من المحرج العمل مع التراكيب الإلزامية بطبيعتها مثل setTimeout و autofocus
السياق والخطافات والإشارات كلها مطلوبة لتمرير الحالة حول شجرة واجهة المستخدم
ينتهي الأمر بتشكيل بنية حالة التطبيق الخاص بك بواسطة واجهة المستخدم، بينما يجب أن يكون الأمر على العكس
يتولى React التحكم الكامل في أي شيء في شجرته، مما يعني أن معظم حزم واجهة المستخدم يجب أن تحتوي على تكاملات خاصة بـ React لتعمل بشكل صحيح
لقد تسبب جعل React يعمل مع SSR في حدوث الكثير من الصداع
إنه يخلق حاجزًا بين المطور وDOM، مما يؤدي إلى جيل من المطورين الذين يفتقدون ميزات النظام الأساسي الأساسية
هناك سقف لكيفية أداء تطبيق React، ويتطلب تعظيم الأداء فهمًا عميقًا لنموذج عرض React
بسبب تدفق البيانات أحادي الاتجاه في React، لا توجد ميزات مضمنة لقراءة حالة واجهة المستخدم

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

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

فيما يلي الوظائف التي تقدمها @matry/dom:

يستبدل – يحل محل أحد أو أكثر من أبناء العناصر
ألحق – إضافة عناصر جديدة
يزيل – يزيل العناصر
تبديل – تبديل عنصرين
تعيين المحتوى – تعيين محتوى النص لعنصر واحد أو أكثر
تعيين السمات – تعيين سمات عنصر واحد أو أكثر
إزالة السمات – إزالة السمات من عنصر واحد أو أكثر
إضافة مستمعي الحدث – إضافة مستمعي الأحداث إلى عنصر واحد أو أكثر
إزالة مستمعي الحدث – يزيل مستمعي الأحداث من عنصر واحد أو أكثر

جولة سريعة

فيما يلي عرض توضيحي بسيط للعداد.

<html>  <head>    <title>My Counter Apptitle>  head>  <body>    <main>main>  body>html>

// set our initial valuelet count = 0;// perform our initial renderreplace(  <main>    <p key="counter">The count is {count}</p>    <button onclick={add}>add 1</button>  </main>);// replace the text contentfunction add() {  count++;  setContent(<p key="counter">The count is {count}</p>);}

في المثال أعلاه، نسمي replace لتقديم واجهة المستخدم الخاصة بنا إلى main العنصر. ثم نستخدم setContent لتحديث محتوى p لاحظ أنه عند تحديث DOM، نحتاج فقط إلى تمرير ما يكفي من JSX لتحديد العناصر التي نريد تعديلها. وهذا يضعك في السيطره الكامله من أداء تطبيقاتك.

المقايضات

كما هو الحال مع جميع التقنيات، هناك مزايا وعيوب لهذا النهج. ومن أجل الشفافية، سأذكر العيوب أولاً.

سلبيات

نظرًا لأن JSX يعمل كاستعلام، فإن الاستعلامات لها قوة تعبيرية محدودة. على سبيل المثال، من أجل المطابقة مع عقدة في DOM، يجب أن تكون مطابقة دقيقة، أي لا يمكن أن تكون هناك استعلامات “تحتوي على” حيث سيؤدي ذلك إلى إدخال العديد من الحالات الهامشية.
سيكون هناك تكرار لمحتوى HTML، على الأقل من حيث الكود. ورغم أنه يمكن تقليل هذا الأمر من خلال استراتيجيات مختلفة، إلا أنه أمر لا مفر منه.
عليك حقا يفكر بخصوص واجهة المستخدم، وهو أمر قد لا تكون معتادًا عليه إذا كنت معتادًا على React. أود أن أزعم أن هذا أمر جيد، لكنه لن يكون مناسبًا للجميع.
لا يحدد هذا كيفية الحصول على حالتك، في حين أن React تميل إلى أن تكون أكثر تشددًا. يمكن أن يؤدي هذا إلى المزيد من العمل المعماري المطلوب من المطورين. أود أن أزعم مرة أخرى أن هذا أمر جيد، ولكن يمكنك أن تقرر بنفسك ما إذا كان هذا شيئًا تريده.

مزايا

لديك سيطرة كاملة على عملية العرض، ويمكنك جعل تطبيقات Matry عالية الأداء كما تريد.
لا “تمتلك” Matry واجهة المستخدم التي تمررها إلى JSX، لذا يمكنك بسهولة استخدام المكتبات الشائعة (على سبيل المثال، مجموعة أدوات تطوير برامج Google Maps) دون قلق. بل ويمكنك حتى عرضها على html, head، و body عناصر!
الوظائف التي تقدمها ماتري – write(), append(), setAttributes() وغيرها – هي نظائر مرآوية لطرق DOM الأصلية، مما يعني أنه يمكنك التفكير في المنصة. لا يوجد شيء مثل “التفكير في Matry”، بل هو مجرد “التفكير في الويب”.
على عكس React، فإن Matry عبارة عن “مكتبة واجهة مستخدم” حقيقية. ليس لها أي آثار جانبية تتطلب منك هيكلة الكود الخاص بك أو بياناتك بأي طريقة معينة.

ابدء

أولاً، قم بتثبيت الحزمة. يُنصح باستخدام Vite، وذلك لأنني استخدمته لاختبارها :p

npm create vite whatever # choose Vanilla, then JavaScript (for now)cd whatevernpm install @matry/dom

بعد ذلك، قم بتكوين Vite حتى تتمكن من استخدام وقت تشغيل JSX الخاص بـ Matry:

// vite.config.jsimport { defineConfig } from "vite";export default defineConfig({  esbuild: {    jsx: "transform",    jsxDev: false,    jsxInject: `import { jsx } from '@matry/dom'`,    jsxFactory: "jsx.component",  },});

ها أنت على استعداد للذهاب!

الوضع الحالي

لا ينبغي اعتبار ماتري مستقرًا حتى 1.0.0لذا لا تستخدمه في الإنتاج حتى ذلك الحين. هناك العديد من الميزات التي لم يتم تنفيذها بعد – ترقبوا ذلك!

خريطة الطريق

بعض الأشياء التي خططت لها للمكتبة:

دعم TypeScript
reverse() لعكس قوائم العناصر
paint() لتحديث CSSOM
serialize() لتقديم JSX إلى سلسلة (أساسًا لـ SSR)
deserialize() لعرض سلسلة (سيتم استخدامها في الاستجابات لتحديثات SSR)
read() لتحميل البيانات من HTML الثابتة إلى ذاكرة JS

اقرأ أكثر