pug چیست و چه کاربردی دارد؟

سرفصل‌های مقاله

Pug چیست؟
template engine چیست و چرا از آن استفاده می‌کنند؟
تاریخچه ای کوتاه از PUG
چگونه از Pug استفاده کنیم؟
مزایا و معایب Pug

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

Pug چیست؟

Pug یک Template Engine یا موتور قالب برای Node و مرورگر است که به خوبی با کدهای HTML یکپارچه سازی می‌شود. Pug سینتکس ساده و روانی دارد که هم به راحتی قابل یادگیری است و هم کدهای شما را برای دیگران خوانا و قابل فهم می‌کند. همچنین به شما اجازه می‌دهد داده هایی که از یک پایگاه داده یا API گرفته اید را به خوبی نمایش دهید. موتور قالب Pug کمک می‌کند تا داده‌های مختلف را درون کدهای HTML خود فراخوانی کنید. در ادامه، مفهوم Pug و کاری که انجام می‌دهد را بهتر درک خواهید کرد.

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

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

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

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

<!DOCTYPE HTML> <html> <body> <h2> {Welcome_Massage} </h2> </body> </html>

وظیفه ی Template Engine این است که مقادیر مختلفی را که کاربر تعیین می‌کند، درون {Welcome_Massage} قرار دهد. در واقع سرویس هایی که مبتنی بر داده هستند، به احتمال زیاد از Template Engine استفاده می‌کنند؛ همانند فروشگاه‌های اینترنتی، سایت‌های خدماتی، جستجوهای پیشرفته ی داخل سایت‌ها و... .

نکته: زمانی که سایت شما ایستا است و قرار نیست تغییرات پویا در آن ایجاد کنید، نیازی به Template Engine نخواهید داشت.

تاریخچه ای کوتاه از PUG

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

چگونه از Pug استفاده کنیم؟

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

// TERMINAL npm install pug --save // SERVER.JS app.set('view engine', 'pug')

حال، بهتر است نگاهی هم به ظاهر فایل‌های Pug داشته باشیم. برای این کار از یک مثال کوچک استفاده می‌کنیم. ابتدا کد زیر ejs. را که از قبل آماده کرده ایم مشاهده کنید:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Test</title> <link rel="stylesheet" type="text/css" href="/css/style.css"> <link href='https://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'> </head> <body> <div class="container"> <fieldset> <form action="/" method="post"> <input name="city" type="text" class="ghost-input" placeholder="Enter a City" required> <input type="submit" class="ghost-button" value="Get Weather"> </form> <% if(weather !== null){ %> <p><%= weather %></p> <% } %> <% if(error !== null){ %> <p><%= error %></p> <% } %> </fieldset> </div> </body> </html>

حالا ببینید بعد از استفاده از Pug کدهای ما چه شکلی می‌شوند:

doctype html html head meta(charset='utf-8') title Test link(rel='stylesheet', type='text/css', href='/css/style.css') link(href='https://fonts.googleapis.com/css?family=Open+Sans:300', rel='stylesheet', type='text/css') body .container fieldset form(action='/', method='post') input.ghost-input(name='city', type='text', placeholder='Enter a City', required='') input.ghost-button(type='submit', value='Get Weather') if weather p= weather if error p= error

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

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

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

جمع بندی

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