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

pug
برنامه نویسی مقالات

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

pug اگر یک طراح یا برنامه نویس وب هستید، صرف نظر از این که در سمت فرانت‌اند یا بک‌اند کار کنید، همیشه باید آمادگی استفاده از HTML و نوشتن تگ‌های مربوط به این زبان نشانه‌گذاری را داشته باشید. هر چند مسئولیت خیلی سختی نیست و اکثر برنامه نویسان به HTML مسلط هستند، اما این زبان می‌تواند گاهی خسته کننده یا تکراری باشد.

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

در ادامه این مقاله از تدریس24 همراه ما باشید تا شمارا بیشتر ر این زمینه راهنمایی کنیم.

 

Pug چیست؟

 

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

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

pug

 

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 بسیار مهم است. یک اشتباه کوچک در ساختار، تورفتگی یا فاصله دادن در کدها ممکن است برایتان پشیمانی به بار آورد.

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

 

 

دیدگاه خود را اینجا قرار دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

اعضا

‫بروز رسانی

سمیرا مردانی's بروزسانی مشخصات انجام شد 1 سال, ماه 2 قبل

محمد جواد محمدی's بروزسانی مشخصات انجام شد 1 سال, ماه 2 قبل

مریم نوری's بروزسانی مشخصات انجام شد 1 سال, ماه 2 قبل

محمد امین طاهری's بروزسانی مشخصات انجام شد 1 سال, ماه 2 قبل

نگار حجتی's بروزسانی مشخصات انجام شد 1 سال, ماه 2 قبل

فیلدهای نمایش داده شده را انتخاب کنید. دیگران مخفی خواهند شد. برای تنظیم مجدد سفارش ، بکشید و رها کنید.
  • عکس
  • شناسه محصول
  • امتیاز
  • قیمت
  • در انبار
  • موجودی
  • افزودن به سبد خرید
  • توضیحات
  • محتوا
  • عرض
  • اندازه
  • تنظیمات بیشتر
  • ویژگی ها
  • ویژگی های سفارشی
  • زمینه های دلخواه
برای پنهان کردن نوار مقایسه ، بیرون را کلیک کنید
مقایسه
مقایسه ×
Let's Compare! Continue shopping