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 به کاربر برمی‌گرداند.

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