template engine چیست و چرا از آن استفاده می‌کنند؟

بهتر است قبل از مطالعه درباره‌ی Pug، کمی راجع به Template Engine صحبت کنیم و بفهمیم که این تکنولوژی چه کاری انجام می‌دهد. Template Engine در ساده‌ترین حالت، یک برنامه است که قالب‌های نوشته شده به زبان‌های مختلف (طیف گسترده‌ای از زبان‌ها را شامل می‌شود) را به HTML کامپایل می‌کند. به عبارت دیگر، Template Engine داده‌هایی را از یک منبع خارجی دریافت کرده و آن‌ها را به Template مدنظر تززیق می‌کند. تصویر زیر به درک بهتر شما کمک می‌کند.

Template Engine منطق و ظاهر برنامه را از هم جدا کرده و آن‌ها در یک محیط ایزوله قرار می‌دهد. اگر برنامه نویس باشید احتمالا با شنیدن این جمله به یاد مدل‌های معروفی مثل MVC خواهید افتاد و می‌دانید که در مدل MVC نحوه‌ی نمایش عناصر صفحه، مربوط به View بوده و منطق برنامه توسط Controller مدیریت می‌شود. وظیفه‌ی Template Engine این است که مقادیر مورد نیاز View را بارگذاری کند. با یک مثال این موضوع را بررسی می‌کنیم:

فرض کنید یک صفحه‌ی HTML بسیار ساده طراحی کرده‌ایم که داخل آن چیزی به غیر از پیغام خوش آمدگویی به کاربر وجود ندارد.

حالا مشکل استفاده از HTML ساده چه بود؟

از آنجایی که html یک زبان نشانه‌گذاری است و قابلیت‌های یک زبان برنامه‌نویسی را ندارد، تعریف کردن آن‌ها معمولا از طریق یکسری تگ انجام می‌شود. اما مواردی وجود دارد که باعث محدود شدن HTML می‌شود که عبارت است از:

استفاده از داده‌های داینامیک در HTML ساده نیست.مشکل استفاده از html ساده

اگر بخواهید چندین المان‌ را به صورت تکراری قرار دهید هیچ راه میانبری را در اختیار ندارید، باید خودتان دستی این کار را انجام دهید.

کاربر در HTML قابلیت ایجاد نوع‌های جدیدی از تگ را ندارد.

با وجود آنکه خوانایی بالایی دارد اما نوشتن HTML گاهی اوقات می‌تواند بسیار طولانی باشد.

مطمئنا حل کردن تمام این مشکلات کاری انجام نشدنی است، البته تا قبل از آمدن سیستم قالب نویسی؛ چرا که این سیستم‌ها کاری می‌کنند که شما بتوانید HTML را با کنترلرهای مختلفی ایجاد کنید. این کار باعث می‌شود که کدها سریع‌تر تولید شده و همچنین قابلیت‌های جدیدی به روند توسعه صفحات HTML اضافه شود. یکی از آنها pug است که در ادامه بیشتر به تعریف آن میپردازیم.

تاریخچه pug چیست:

Template Engine در ابتدا کار خود را با نام Jade شروع کرد اما بخاطر مسئله‌های مربوط به کپی رایت و ثبت شدن علامت آن، در سال 2015 مجبور شدند نام آن را به Pug تغییر دهند؛ چون هم کوتاه بود و هم به خوبی در ذهن میماند و از نظر توسعه‌دهندگان، نژاد سگ‌های پاگ بامزه بودند. با تغییر نام در نسخه 2 این تمپلیت، لوگو و تمام ریپازیتوری‌های مربوط به آن تغییر کرد.

مزایا و معایب Pug

پاگ حجم کدها را تا حد قابل توجهی کاهش می‌دهد. در مثال قبلی دیدیم که کد ما از 27 خط به به 17 خط کاهش پیدا کرد. همچنین، خوانایی کدها در تمپلیت انجین پاگ بسیار بالا است، کدها بیشتر شبیه به پاراگراف‌های جذابی به نظر می‌رسند که به‌راحتی می‌توان آن‌ها را خواند. تگ‌ها در پاگ نیازی به بسته شدن ندارند و از همه مهم‌تر اینکه جاوا اسکریپت و Pug به خوبی با هم سازگار هستند و می‌توانید به‌راحتی کدهای جاوا اسکریپت خود را درون پاگ قرار دهید.

تمام مزایای پاگ را گفتیم اما نباید از معایب آن غافل شویم. در pug شما نمی‌توانید کدهای html را از هر جایی که خواستید کپی کرده و به پروژه‌ی خود اضافه کنید. باید اول آن‌ها را به پاگ تبدیل کنید تا قابل استفاده باشند. علاوه بر این، کدنویسی صحیح در Pug بسیار مهم است. یک اشتباه کوچک در ساختار، تورفتگی یا فاصله دادن در کدها ممکن است کار را برایتان مشکل کند.

جمع بندی:

خب دوستان گفتیم که pug چیست. حالا میخواهیم نکاتی را درباره آن به شما بگوییم:

اول اینکه استفاده از این تمپلیت بسیار آسان است. کافیست در ابتدا با یک دستور ساده پاگ را نصب کرده و آن را به پروژه‌ی خود اضافه کنید. حالا نوبت به تنظیم کردن View Engine می‌رسد، در پایان نیز باید یک فایل با پسوند pug. ایجاد کنید.

مطلب بعدی این است که پاگ حجم کدها را تا حد قابل توجهی کاهش می‌دهد و به خاطر خوانایی بالای کدها در تمپلیت انجین پاگ، کدها بیشتر شبیه به پاراگراف‌های جذاب به نظر می‌رسند که به‌راحتی خوانده میشوند. تگ‌ها، در پاگ نیازی به بسته شدن ندارند و از همه مهم‌تر اینکه جاوا اسکریپت و Pug به خوبی با هم سازگار هستند. یعنی می‌توانید به‌راحتی کدهای جاوا اسکریپت خود را درون پاگ قرار دهید.

جمع بندی مطلبشما نباید از این موضوع غافل شوید که در pug نمی‌توانید کدهای html را از هر جایی که خواستید کپی و به پروژه‌ی خود اضافه کنید. باید اول آن‌ها را به پاگ تبدیل کرده تا قابل استفاده باشد. همچنین، کدنویسی صحیح در Pug بسیار مهم است. یک اشتباه کوچک در ساختار، تورفتگی یا فاصله دادن در کدها ممکن است برایتان پشیمانی به بار آورد.

امیدوارم که این مطلب مورد رضایت شما دوستان قرار گرفته باشد و اگر تجربه کاری در اینباره دارید، در قسمت کامنت‌ها با ما به اشتراک بگذارید.