أداة جديدة تعد بإنشاء مواقع ويب أسرع مع واجهة مستخدم مبسطة يتم عرضها بواسطة الخادم

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

حسنًا، في الواقع سيكون من المثير للاهتمام حقًا عرض مشروع يسمى HMPL . إنها لغة قالب صغيرة لعرض واجهة المستخدم من الخادم إلى العميل. وهي تعتمد على طلبات قابلة للتخصيص يتم إرسالها إلى الخادم عبر الجلب ومعالجتها في HTML جاهز.

في الواقع، إنه جيد حقًا كبديل لوحدات مثل htmx و alpine.js ، لأنه يسمح لك بإنشاء واجهات ديناميكية بمجموعة أدنى من المعلمات القابلة للتكوين، بالإضافة إلى حجم ملفات الإخراج. يتم تحقيق ذلك من خلال العمل مع الخادم، عندما نقوم بإعداد واجهة المستخدم هناك، وننقلها إلى العميل فقط عبر واجهة برمجة التطبيقات.

كيف يعمل هذا في الكود؟

لنأخذ كمثال نموذج تسجيل بريد إلكتروني صغير، حيث سيكون هناك فقط إدخال وزر:

 import { compile } from "hmpl-js"; const templateFn = compile( `<div> <form onsubmit="function prevent(e){e.preventDefault();};return prevent(event);" id="form"> <div class="form-example"> <label for="name">Enter your email: </label> <input type="email" name="email" id="email" required /> </div> <div class="form-example"> <input type="submit" value="Register!" /> </div> </form> <p> { { "src":"/api/register", "after":"submit:#form", "repeat":false, "indicators": [ { "trigger": "pending", "content": "<p>Loading...</p>" } ] } } </p> </div>` ); const initFn = (ctx) => { const event = ctx.request.event; return { body: new FormData(event.target, event.submitter), credentials: "same-origin", }; }; const obj = templateFn(initFn); const wrapper = document.getElementById("wrapper"); wrapper.appendChild(obj.response);

نتيجة الكود:

لقد تم إنفاق عدد لا بأس به من الأحرف على هذا النموذج، والآن إذا تخيلنا أننا سنفعل الشيء نفسه على أطر عمل مثل Vue، فسوف يتعين علينا ربط pinia بالخادم، وإنشاء مجموعة من المكونات وهذا من شأنه أن يشغل مساحة كبيرة على القرص.

أهمية النهج المتبع على جانب الخادم

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

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

مميزات هذه الوحدة مقارنة بالوحدات الأخرى:

أولاً وقبل كل شيء، إذا أخذنا HTMX، فمن الجدير بالذكر هنا بالطبع أن الوحدة تعمل على جلب البيانات وهي مخصصة بالكامل. أي أنه يمكنك إرسال طلب كما يحلو لك، في أي مكان وإنشاء عدد لا حصر له من العقد في DOM كما يحلو لك. مقارنةً بـ alpine.js، يمكنك إنشاء ديناميكيات، ولكن بالاشتراك مع الخادم، مما سيسمح لك بعدم تضمين وحدات إضافية في مشروعك.

يمكنك أيضًا العمل مع الملفات الفردية ذات الامتداد .hmpl، ولكن في الوقت الحالي فقط لـ webpack.

القليل عن النتائج والتطور

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