لماذا يجب أن تختار HTMX لمشروعك الجانبي المستند إلى الويب التالي - وترك MPA المعقدة وSPA المتقلبة

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

في هذا المنشور سأشارك لماذا أعتقد أن HTMX خيار رائع لبناء تطبيقات الويب بشكل أسرع وأرخص ولماذا أصبح الآن جزءًا أساسيًا من مجموعة تقنيتي - مجموعة HAM.

MPA مقابل SPA
MPA مقابل SPA

تطبيقات متعددة الصفحات (MPA)
في البداية كان لدينا تطبيقات متعددة الصفحات (MPA).

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

مزايا وعيوب MPA

الايجابيات: سهل البناء
العيوب: يبدو بطيئًا وثقيلًا بسبب التحديثات
تطبيقات الصفحة الواحدة (SPA)
لحل هذه المشكلة، تم إنشاء تطبيقات الصفحة الواحدة (SPA).

يتم تحميل عنوان URL حمولة JS كبيرة تحتوي على مجموعة من منطق التطبيق
هذا JS يتولى عملية عرض الصفحة
يستخدم الحالة الداخلية لتحديد كيف يجب أن تبدو الصفحة ويقوم بنقل البيانات في الخلفية لذا يحتاج فقط إلى تحديث الأجزاء من الصفحة التي تحتاج إلى تغيير
هذا يشعر المستخدم بتحسن لأن التغييرات تبدو أسرع. الصفحة تحدث فقط حيثما تحتاج إلى ذلك ولا نحتاج إلى تحديث كامل للصفحة لتغيير البيانات. تشعر معظم التطبيقات / المواقع اليوم بهذه الطريقة لأنها تقدم بشكل عام تجربة مستخدم أفضل.

الإيجابيات: تجارب مستخدمين "حديثة" غنية
العيوب: معقد عند النطاق - التعامل مع نقل البيانات ( تم بناء graphQL من أجل ذلك )، التجريدات، وأحجام الحمولة الخاصة بمنطق التطبيق
لذا بشكل عام:

تطبيقات متعددة الصفحات (MPA) - سهل البناء ولكن من الصعب الحصول على تجارب مستخدم "حديثة" غنية
تطبيقات الصفحة الواحدة (SPA) - معقدة في البناء ولكن يمكن أن تحقق تجارب مستخدم "حديثة" غنية
MPA مقابل HTMX مقابل SPA
MPA مقابل HTMX مقابل SPA

إلهام الصورة من u/Abhilash26 على r/htmx.

لقد كانت HTMX موجودة لعدة سنوات ولكنها حققت ضجة كبيرة حقًا في العام الماضي أو نحو ذلك. هذه الضجة ليست بلا أساس - فهي غالبًا ما تتيح لك بناء تطبيقات ويب حديثة بشكل أسرع وأرخص من SPA.

HTMX في الأساس يوسع HTML بحيث يمكنه إجراء إعادة تحميل جزئية للصفحة.

يمكن لأي عنصر أن يحدد كيفية استرجاع البيانات المحدثة ومتى يجب عليه القيام بذلك
يمكن للعنصر بعد ذلك تحديد ما يجب فعله بالبيانات الجديدة - استبدال نفسه أو عناصر أخرى على الصفحة
إذا نظرنا إلى مقارنة MPA مقابل SPA، يمكننا أن نرى أن عدم وجود إعادة تحميل جزئي للصفحات هو حقًا الشيء الرئيسي الذي يعيق MPAs. لذا فإن إضافة هذه القدرة إلى MPA تمكنك إلى حد كبير من الحصول على معظم تجارب المستخدم "الحديثة" الغنية لـ SPA مع مستوى التعقيد الخاص بـ MPA.

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

لذا فإن خفض تكلفة البناء - من حيث الوقت والمال - أمر حاسم لجعل المشروع الجانبي ناجحًا.

من وجهة نظري، يوفر HTMX توازنًا رائعًا بين السماح لك ببناء تطبيقات حديثة بتعقيد منخفض جدًا ( وبالتالي تكلفة الوقت والمال ). لذلك أصبح جزءًا أساسيًا من مجموعة تقنياتي - مجموعة HAM.

التالي
مد سعيدور رحمن