XMlUI: إحياء نموذج Visual Basic للتطوير السهل على الويب الحديث

تقديم XMLUI في منتصف التسعينيات، كان بإمكانك إنشاء برامج مفيدة دون أن تكون مبرمجًا محترفًا. كان لديك Visual Basic وبيئة غنية بالمكونات التي يمكن ربطها معًا لإنشاء تطبيقات، مستندًا إلى جهود المبرمجين الذين بنوا هذه المكونات. ولكن إذا كنت تبلغ من العمر أقل من 45 عامًا، فقد لا تعرف كيف كان الأمر في ذلك الوقت، ولا تدرك أن المكونات الويب لم تعمل بنفس الطريقة أبدًا. المشروع الذي نعلن عنه اليوم، XMLUI، يعيد نموذج Visual Basic إلى الويب الحديث ونظام مكوناته المستندة إلى React. يغلف XMLUI مكونات React و CSS ويوفر مجموعة من المكونات التي يمكنك تكوينها باستخدام علامات XML. تطبيق صغير لفحص حالة خطوط المترو في لندن ```xml ``` هذه القطعة البسيطة من الكود XML كافية لإنشاء تطبيق تفاعلي يعرض حالة خطوط المترو في لندن ومحطاتها بشكل آلي عند اختيار الخط. المكونات المقالة الأكثر اقتباسًا لي في مجلة BYTE كانت غلافًا عن "البرامج القابلة للتركيب" في عام 1994. كنا نعتقد أن محرك البرمجيات القابلة لإعادة الاستخدام سيكون مكتبات الأشياء المنخفضة المستوى المرتبطة ببرامج مكتوبة بواسطة مبرمجين مهرة. ومع ذلك، فإن ما حقق التقدم فعلًا كان المكونات التي بنى المطورون المحترفون واستخدمها المطورون التجاريون. توفر XMLUI مجموعة غنية من المكونات، بما في ذلك جميع المكونات التفاعلية التي تتوقعها بالإضافة إلى المكونات الخفية مثل DataSource، APICall، وQueue. يمكنك بسهولة تعريف مكوناتك الخاصة التي تعمل مع المكونات الأصلية ومع بعضها البعض. مثلاً، إليك علامات XML لتكوين مكون TubeStops: ```xml {$props.line} ``` يمكن استخدام هذا المكون مرتين في تخطيط جانبي بسيط: xml <HStack> <Stack width="50%"> <TubeStops line="victoria" /> </Stack> <Stack width="50%"> <TubeStops line="waterloo-city" /> </Stack> </HStack> التفاعلية التحدي الأكبر مع التفاعلية في أسلوب XMLUI ليس ما تحتاج إلى تعلميه بل ما تحتاج إلى نسيانه. مثلاً، إليك الكود مرة أخرى للتطبيق الموضح في البداية: ```xml ``` لاحظ كيف يعلن Select الخاصية id="lines". هذا يجعل lines متغيرًا تفاعليًا. الآن انظر إلى خاصية url في DataSource. تحتوي على مرجع لـ lines.value. عند تغيير الاختيار، يتم تحديث lines.value، وتتفاعل DataSource باستدعاء دفعة جديدة من التفاصيل. كذلك تشير خاصية data في Table إلى tubeStations (وهو DataSource) لذا تعرض البيانات الجديدة تلقائيًا. هذا النمط يعرف باسم "ربط البيانات التفاعلي". وهو ما تقوم به جداول البيانات عندما ينتشر التغيير في خلية واحدة إلى خلايا أخرى تشير إليها. XMLUI تمكّن المطورين من تحقيق هذا دون الحاجة إلى معرفة React أو CSS. التصميمات عندما رأيت نظام التصميم في XMLUI لأول مرة، لم أكن متحمسًا جدًا. أنا لست مصممًا، لذا أقدر وجود تصميم افتراضي جيد لا يتطلب مني اختيار ألوان قد لا أكون مؤهلًا لاختيارها. القدرة على تغيير التصاميم لم تكن مهمة بالنسبة لي، لكن XMLUI تهدف إلى جعل كل ما تبنيه يبدو جيدًا ويعمل بشكل متناسق دون الحاجة إلى كتابة أي CSS أو أوامر تخطيط مشابهة. يمكنك تطبيق الأنماط الداخلية، ولكن غالبًا لن تحتاج إلى ذلك ولن يجب عليك استخدامها. كل مكون يوفر مجموعة واسعة من متغيرات التصميم التي تؤثر في لون النص والخط، لون الخلفية، الهوامش، الحدود، الوسادات وغيرها. تتبع هذه المتغيرات تسمية موحدة تمكن إعدادًا من التحكم في المظهر بشكل عام أو بطرق متدرجة. على سبيل المثال، هنا متغيرات يمكن أن تتحكم في لون الحد الذي يظهر عندما يمر الفأرة فوق الزر الرئيسي: color-primary backgroundColor-Button backgroundColor-Button-solid backgroundColor-Button-primary backgroundColor-Button-primary-solid backgroundColor-Button-primary-solid--hover عندما يعرض XMLUI زرًا، يعمل على سلسلة من الإعدادات الأكثر تحديدًا حتى الأكثر عمومية. هذا يمنح المصممين درجات حرة عديدة لتصميم تفاصيل متقنة. ومع ذلك، فإن معظم الإعدادات هي اختيارية، والمحددة بالافتراض تستخدم أسماء منطقية بدلاً من قيم ثابتة. على سبيل المثال، الإعداد الافتراضي لـ backgroundColor-Button-primary هو $color-primary-500، وهو نقطة الوسط في نطاق الألوان التي تلعب دورًا رئيسيًا في واجهة المستخدم. السكريبت كما في Visual Basic، لم يكن متوقعًا من المطورين أن يكونوا مبرمجين محترفين ولكن كان يجب أن يتمكنوا من التعامل مع قليل من السكريبت. الأمر نفسه ينطبق على XMLUI. اللغة هي JavaScript ويمكن الذهاب بعيدًا باستخدام أجزاء صغيرة من الكود مثل هذه في TubeStops: xml <Fragment when="{$item.wifi === 'yes'}"></Fragment> TubeStops يستخدم أيضًا خاصية transformResult في DataSource لاستدعاء كتلة كود أكثر طموحًا: javascript function transformStops(stops) { return stops.map(stop => { // مساعد لاستخراج قيمة من additionalProperties بواسطة المفتاح const getProp = (key) => { const prop = stop.additionalProperties && stop.additionalProperties.find(p => p.key === key); return prop ? prop.value : ''; }; return { name: stop.commonName, zone: getبر (key) => { const prop = stop.additionalProperties && stop.additionalProperties.find(p => p.key === key); return prop ? prop.value : ''; }; return { name: stop.commonName, zone: getProp('Zone'), wifi: getProp('WiFi'), toilets: getProp('Toilets'), // قائمة منفصلة بالخطوط التي تخدم هذه المحطة lines: stop.lines ? stop.lines.map(line => line.name).join(', ') : '' }; }); } هذا ليس بسيطًا للغاية ولكنه ليس معقدًا جدًا. ويمكن لمساعدي الذكاء الاصطناعي إنجاز مثل هذه المهام بشكل فعال. لذا، بينما لا يمكننا الادعاء بأن XMLUI بنسبة 100% إعلانية، فإننا نعتقد أن الأجزاء الإلزامية محددة بشكل جيد ومتاحة للمطورين الذين لا يعرفون شيئًا عن التعقيدات الصناعية لـ JavaScript. بروتوكول سياق النموذج (MCP) في عصر الذكاء الاصطناعي، من يحتاج إلى XMLUI عندما يمكن لـ LLMs أن يكتبوا تطبيقات React؟ هذا سؤال مشروع وأعتقد أن لدي إجابة جيدة. الإصدار الأول من XMLUI Invoice كان تطبيق React كتبه Claude في 30 ثانية. كان مكتملًا ووظيفيًا بشكل مدهش، ولكن لم أكن شريكًا متساويًا في العملية. لا أعرف حقًا ما هي useEffect وuseContext في React ولا كيفية استخدامها بشكل صحيح، وليس لدي الكفاءة للمراجعة أو الصيانة. XMLUI يوازن اللعب. يمكنني قراءة ومراجعة وتعديل الكود الذي يكتبه LLMs بشكل كفء. تم توفير خادم MCP يساعد في توجيه انتباه المساعدين أثناء العمل على تطبيقات XMLUI. يمكن لهذه الأدوات تقديم إجابات على أسئلة مثل: هل هناك مكون يقوم بـ [X]؟ ماذا تقول الوثائق حول موضوع [Y] في [X]؟ كيف يتم تنفيذ [X] في الكود المصدر؟ كيف يتم استخدام [X] في تطبيقات أخرى؟ يتم وضع خادم xmlui-mcp بجانب مستودع xmlui، الذي يشمل الوثائق والكود المصدر، وبجانب المستودع الذي تعمل فيه على تطبيق XMLUI. هذا يساعد على تحسين التعاون بمرور الوقت. إدارة المحتوى نقول إن XMLUI يُستخدم لبناء تطبيقات، ولكن ما هي التطبيقات حقًا؟ في العصر الحالي، غالباً ما تكون المواقع الإلكترونية تطبيقات أيضًا، مبنية على أطر مثل Next.js من Vercel. لقد استخدمت أنظمة نشر مبنية بهذه الطريقة، وأنا لست محبًا لها. لا يجب أن تحتاج إلى مطور واجهة أمامية ماهر في React لمساعدتك في إجراء تغييرات روتينية على موقعك. باستخدام XMLUI، هذا ليس ضروريًا. مواقعنا التوضيحية، وصفحات الوثائق، والصفحة الرئيسية كلها تطبيقات XMLUI أسهل لي في الكتابة والصيانة مقارنة بالمواقع التي عملت عليها باستخدام Next.js. القابلية للتوسيع من الصندوق، يغلف XMLUI العديد من مكونات React. ولكن ماذا يحدث إذا لم يكن المكون الذي تحتاجه مشمولًا؟ في محاولات سابقة، اعتمدت بشدة على LLMs لاستكشاف طبقات الكود في React ولكني لم أتمكن من تحقيق الغرض. لمكون XMLUI الأهم بالنسبة لي كان Tiptap editor، وهو عبارة عن غلاف حول أداة ProseMirror الأساسية. كان هذا هدفًا صعبًا لم أتوقع تحقيقه قبل الإصدار. ولكن تمكنت من تحقيقه بنجاح، وهنا الدليل: xml <App var.markdown=""> <Card> <TableEditor id="tableEditor" size="xs" onDidChange="{(e) => { markdown = e.markdown }}" /> </Card> <Card> <HStack> <Text variant="codefence" preserveLinebreaks="{true}"> { markdown } </Text> <SpaceFiller /> <Button icon="copy" variant="ghost" size="xs" onClick="navigator.clipboard.writeText(markdown)" /> </HStack> </Card> </App> يمكنك استخدام أي خادم ويب ثابت لاستضافة التطبيق. يمكنك حتى تشغيله من سلة AWS. تطوير الويب لبقية الناس تم تصميم XMLUI من قبل Gent Hito، مؤسس /n software وCData. مهمتها هي تبسيط التواصلات الشبكية للمطورين في /n software وتوفير سهولة الوصول إلى البيانات للمطورين في CData. الآن، مع XMLUI، الهدف هو تبسيط واجهة المستخدم للمطورين. "نحن من المطورين الخلفيين"، يقول Gent. "جميع مكوناتنا غير مرئية، وكانت المفاجأة كبيرة عندما حاولنا بناء واجهات بسيطة للأعمال ووجدنا أنها صعبة وممتعة." أولئك الذين يتذكرون عصر Visual Basic يعرفون أنه لم يكن دائمًا بهذه الصعوبة. ولكن منصة الويب لم تكن صديقة أبدًا للمطورين الذين يحتاجون إلى إنشاء واجهات المستخدم. أصبح هذا مجالًا للمتخصصين الذين يستطيعون التعامل مع الانفجار المستمر في التعقيدات. يجب ألا يكون الأمر كذلك. بعض التطبيقات تتطلب خبرة خاصة، ولكن العديد منها لا ينبغي أن يحتاج إليها. إذا كنت شركة /n software وتريد توفير واجهة لمراقبة وتحكم في CoreSSH Server لعملائك، فليس عليك توظيف محترفين في React وCSS لتحقيق ذلك. يجب أن يكون فريقك قادرًا على القيام بذلك بمفرده، وهذا ما يمكنه تحقيقه الآن. الخاتمة أنا أستمتع بخلق واجهات لم تكن في متناول يدي من قبل. هل ستكون لديك نفس التجربة؟ جربه ودعنا نعرف كيف كانت تجربتك! XMLUI يهدف إلى تبسيط تطوير واجهات المستخدم للجميع، مما يتيح للمطورين غير المتخصصين إنشاء تطبيقات متطورة ومتناسقة دون الحاجة إلى معرفة عميقة بـ React أو CSS.