إنشاء القوالب على الخادم: Jinja2 وHandlebars

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

تُعد Jinja2 مكتبة إنشاء القوالب المعتمدة فعليًا في Python، وتستخدمها Flask وDjango (عبر الواجهة المضمّنة أو الواجهة الخلفية لـ jinja2) وPelican وmkdocs. يوضع المنطق داخل وسوم {% %}، والتعبيرات داخل {{ }}: استخدم <h1>{{ title }}</h1> للمتغيرات، و{% for item in items %} للحلقات.

تُعد Handlebars مكتبة إنشاء القوالب الأكثر استخدامًا في Node.js، وتشتهر برسائل البريد الإلكتروني الخاصة بالمعاملات، مثل SendGrid وMailgun، وبالعرض من جانب الخادم عبر Express. توضع التعبيرات داخل {{ }}، وتُنشأ الكتل عبر {{# }}: {{#each items}}<li>{{name}}</li>{{/each}}.

يجري كلا المحركين عملية الهروب التلقائي لمخرجات المتغيرات افتراضيًا؛ فالقيمة {{ user.name }} عندما يكون name = "<script>" تنتج "&lt;script&gt;"، مما يحيد هجوم XSS. اعتمد دائمًا على الهروب التلقائي، ولا تستخدم المرشح الصريح للمحتوى الخام (Jinja: {{ x|safe }}، وHandlebars: {{{x}}}) إلا مع HTML موثوق.

في Jinja: تُستخدم {% extends "base.html" %} في القالب الابن، مع {% block content %}{% endblock %} في القالب الأساسي. وفي Handlebars: تُستخدم {{#> layout }}{{/layout}} مع كتل جزئية. يتيح ذلك لتخطيط أساسي تعريف البنية مرة واحدة، بينما تملأ الصفحات المناطق المتغيرة.

في Jinja: {% include "header.html" %}. وفي Handlebars: {{> header}}. كلاهما يضمّن قالبًا آخر داخل القالب الحالي. وتُعد القوالب الجزئية اللبنات الأساسية لمكتبات المكوّنات الكبيرة؛ إذ تُركّب داخل الصفحات والتخطيطات.

مرشحات Jinja: {{ price|currency }}. مساعدات Handlebars: {{currency price}}. يتيح كلاهما استدعاء دوال التنسيق على القيم. ويمكن تعريف مرشحات ومساعدات خاصة للتحويلات المتعلقة بالمشروع، مثل تنسيق التاريخ، والتعامل مع صيغ الجمع، وإنشاء الروابط.

في Jinja: {% if user.is_logged_in %}Welcome{% else %}Sign in{% endif %}. وفي Handlebars: {{#if user.isLoggedIn}}Welcome{{else}}Sign in{{/if}}. يمكن تفريع القوالب استنادًا إلى البيانات من دون اللجوء إلى JavaScript في جهة العميل لإخفاء المحتوى أو عرضه.

يُجري كلا المحركين ترجمة مسبقة للقوالب إلى دوال، ثم يستدعيان تلك الدوال مع كل طلب. تحدث الترجمة مرة واحدة، بينما يكون التصيير سريعًا. وفي المواقع ذات عدد الزيارات الضخم، يُفضّل تخزين المحتوى المصيّر مؤقتًا عند الحافة باستخدام Varnish أو Cloudflare بدلًا من إعادة تصيير الصفحات المتطابقة.

يمكن دمج القوالب مع مكتبات i18n، مثل Jinja2 + Babel في Python، وHandlebars + i18next في Node. تحتوي القوالب على مفاتيح الترجمة مثل {{ t "welcome" }}، بينما تحل طبقة i18n هذه المفاتيح إلى اللغة المناسبة. وبذلك يمكن لقالب واحد التصيير بلغات متعددة.

تأتي أطر العمل الحديثة بتنسيقات القوالب الخاصة بها: ERB في Rails، وTwig في Symfony، وBlade في Laravel، وRazor في .NET، وSlim/Haml للتنسيق الأكثر اختصارًا. الأنماط واحدة، لكن الصياغة تختلف. اختاروا المحرك الذي ينسجم مع لغة الواجهة الخلفية والنظام البيئي المستخدمين.

تعمل القوالب بكفاءة كبيرة مع المواقع التقليدية المصيّرة على الخادم. أما التطبيقات الأكثر تفاعلية، فتجعل أطر مثل Next.js (React) وNuxt (Vue) وSvelteKit الحد الفاصل أقل وضوحًا؛ إذ تصيّر القوالب على الخادم، ثم تُجرى إماهة المكوّنات نفسها على العميل لإتاحة التفاعل.

لماذا يُعد الإفلات التلقائي السلوك الافتراضي في محركات القوالب مثل Jinja2 وHandlebars؟

تولّد محركات القوالب في جهة الخادم، مثل Jinja2 في Python وHandlebars في JS وERB/Twig/Blade في حزم تقنية أخرى، HTML على الخادم باستخدام المتغيرات والحلقات والشروط والقوالب الجزئية والتوريث. يحمي الإفلات التلقائي من XSS افتراضيًا. ويمكن دمجها مع مكتبات i18n لإنشاء مواقع متعددة اللغات. القوالب هي الأساس، بينما تضيف أطر العمل الحديثة الإماهة فوقها.