أهلا بالجميع! في هذه المقالة أود أن أخبرك كيف يمكنك تقليل حجم ملفات جافا سكريبت عدة مرات بفضل لغة القالب مثل hmpl.

إن النهج التكنولوجي الذي يظهر في المقال ليس جديدا، ولكنه مع ذلك يحظى بشعبية كافية اليوم بحيث يستحق الحديث عنه.

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

عند استخدام معظم الأطر والمكتبات لإنشاء واجهة المستخدم، يتعين عليك كتابة الكثير من التعليمات البرمجية المعيارية. يشغل كل رمز مساحة من الذاكرة. لنأخذ أداة النقر Vue.js:

createApp({
  setup() {
    const count = ref(0);
    return {
      count,
    };
  },
  template: `

        Click!
        
Clicks: {{ count }}
    
`,
}).mount("#app");

أداة نقر بسيطة للغاية، ولكنها تتطلب قدرًا لا بأس به من أسطر التعليمات البرمجية في JS، ناهيك عن الحالات التي يكون فيها التطبيق كبيرًا إلى حد ما.

حتى بدون فاصلتين، قد يكون هناك بايتات أقل

هذه ليست مشكلة Vue فحسب، بل أيضًا مع أطر العمل والمكتبات الأخرى التي تعمل بطريقة مماثلة. لكن هذه ليست النقطة الوحيدة. هناك عدد هائل من الوحدات الإضافية التي تذهب إليهم، ويذهب إليهم نفس العدد من الوحدات الإضافية، وهكذا إلى "اللانهاية".

في الواقع، تم اقتراح أحد الحلول لهذه المشكلة منذ فترة طويلة وهو بسيط للغاية - وهو إعداد واجهة المستخدم على الخادم وتحميلها ببساطة على العميل. بفضل هذا، يمكن تقليل حجم ملفات التطبيق بشكل كبير. هذه هي بالضبط الفكرة المستخدمة في HMPL.

في المثال، سأحاول أيضًا إنشاء جهاز نقر، ولكن باستخدام hmpl.js.

document.querySelector("#app").appendChild(
  hmpl.compile(
    `

        Click!
        
Clicks: {{ src: "/api/clicks", after: "click:button" }}
    
`
  )().response
);

كما ترون، ستكون واجهة المستخدم هي نفسها، ولكن حجم الملف سيكون أصغر قليلاً.

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

كما يتبين من المثال، يمكن، إذا رغبت في ذلك، نقل وظيفة حساب حالة التطبيق وتخزينها إلى الخادم.

كما ترون من المثال، يمكن، إذا رغبت في ذلك، نقل وظيفة حساب حالة التطبيق وتخزينها إلى الخادم. من الواضح أنه إذا كان هناك عدد كبير من المستخدمين، فهذا سيؤدي ببساطة إلى تعطل الخادم، ولكن حقيقة أن واجهة المستخدم هي نفسها أمر مهم.

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

شكرًا جزيلاً لكم جميعًا على قراءة هذا المقال!

قائمة المواد:

https://hmpl-lang.github.io/#/docs
https://vuejs.org/guide/quick-start.html