4 سیستم قالب‌نویسی برای سریع‌تر نوشتن HTML

HTML اولین زبانی است که بیشتر توسعه‌دهندگان سراغ یادگیری آن می‌روند. بعد از آن گزینه‌های CSS و Javascript به میدان وارد می‌شوند. اما جالب است بدانیم برخلاف CSS و Javascript که ابزارهای مختلفی برای آسان کردن روند توسعه دارند، HTML تا سال‌ها از این ابزارها برخوردار نبود، اما در حال حاضر این وضعیت تغییر کرده است.

اغلب افرادی که HTML را یاد می‌گیرند در دنیای علوم کامپیوتر مبتدی به حساب می‌آیند به همین دلیل شاید آشنا کردن آن‌ها با تکنولوژی‌های جدید فارغ از زبان‌های موجود کار درستی نباشد. اما بعد از یادگیری کامل HTML شاید یادگیری ابزارهایی که HTML را تولید می‌کنند بد نباشد. 

ما در این مطلب تصمیم داریم تا در ارتباط با ۴ سیستم قالب‌نویسی صحبت کنیم که به ما کمک می‌کنند تا بتوانیم کدهای HTML تولید کنیم. اما ابتدا بیایید دلیل بوجود آمدن چنین سیستم‌هایی را بررسی کنیم.

مشکل استفاده از HTML ساده

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

اما مواردی وجود دارد که باعث محدود شدن HTML می‌شود:

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

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

جایگزین‌هایی برای سیستم‌های قالب‌نویسی

قبل از آنکه در ارتباط با سیستم‌های قالب‌نویسی صحبت کنیم، قصد داریم تا اشاره‌ای کوتاه به چند راه‌حل جایگزین برای نوشتن کدهای HTML به صورت مستقیم بکنیم. 

Emmet

Emmet ابزاری ساده برای ویرایشگرهای کد است که به شما قابلیت نوشتن سریع‌تر کدهای HTML را با فراهم کردن یکسری راه‌های میانبر می‌دهد. برای مثال اگر شما از کد زیر استفاده کنید:

navigation#main>img.logo+ul#navigation>li*5>a{Link $}

Emmet کدهای HTML زیر را برای شما تولید می‌کند:

<navigation id="main">
    <img src="" alt="" class="logo"></img>
    <ul id="navigation">
        <li><a href="">Link 1</a></li>
        <li><a href="">Link 2</a></li>
        <li><a href="">Link 3</a></li>
        <li><a href="">Link 4</a></li>
        <li><a href="">Link 5</a></li>
    </ul>
</navigation>

جدای از Emmet ابزارهای مختلف دیگری نیز برای انجام کاری مشاهده توسعه داده شده‌اند.

Template Engine

تقریبا برای هر زبانی که به منظور توسعه اپلیکیشن وب استفاده می‌شود یک Template Engine در نظر گرفته شده که در فرایند توسعه کدهای HTML به ما کمک می‌کند. در زیر می‌توانید چند مورد این Template Engineها را مشاهده کنید:

• ERB – Ruby
• JSP – Java
• Jinja2 – Python
• Razor – ASP.NET

حال بیایید در ارتباط با موضوع اصلی مطلب یعنی سیستم‌های قالب‌نویسی صحبت کنیم. در این مطلب قصد معرفی ۴ مورد از این تکنولوژی‌ها را داریم که عبارت هستند از Pug، Haml، Slim و Markdown.

1. Pug

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

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

article#main
  h1 The Title
  h2 The Sub-title 
  div(class="article-body")  
    p The main body.

در این حالت منظور از علامت # استفاده از خاصیت id با مقدار main برای تگ article است. فاصله قرار گرفته از سمت چپ برای خطوط بعدی به این معناست که تگ‌های بعدی باید در داخل article تعریف شوند. خروجی این قطعه کد Pug را می‌توانید در زیر به صورت HTML مشاهده کنید:

<article id="main">
  <h1>The Title</h1>
  <h2>The Sub-title</h2>
  <div class="article-body">
    <p>The main body</p>
  </div>
</article>

حلقه در Pug

Pug به شما قابلیت نوشتن کدهای جاوااسکریپت را در خود می‌دهد. برای انجام چنین کاری باید از علامت‌های -، = و != استفاده کنید. اما این مسئله در کجا کاربرد دارد؟

اگر بخواهید سه لیست آیتم را ایجاد کنید، استفاده از روش دستی یکی از راه‌هاست. اما می‌توانید به صورت زیر از یک حلقه for مخصوص جاوااسکریپت استفاده نمایید:

 - for (let x = 0; x < 3; x++)
  li= 'Item ' + (x + 1)

دستور بالا خروجی زیر را خواهد داشت:

<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>

می‌توانیم برای قرار دادن متن داخل li از یک آرایه نیز استفاده کنیم. در این حالت نیاز است که روی آرایه عملیات iterate را انجام دهیم:

- var colors = ["Red", "Yellow", "Green", "Blue"]
  each item in colors
    li= item

خروجی این قطعه کد به صورت زیر خواهد بود:

<li>Red</li>
<li>Yellow</li>
<li>Green</li>
<li>Blue</li>

شروط در Pug

یکی دیگر از ویژگی‌های مفید در pug شروط است که می‌شود از آن‌ها در کدهای HTML استفاده کرد. همچنین می‌توان متغیرهای boolean را در این حالت تعریف کرده و به صورت زیر در یک فرایند if else از آن‌ها استفاده کرد:

- var isTrue = true
  if isTrue
    p Boolean is TRUE
  else
    p Boolean is FALSE

حتی می‌توان برای یک مثال پیچیده‌تر از حالت case و switch بهره برد:

- var raceResult = 7
case friends
  when A
    p You won the race!
  when 1
    p You were the runner up!
  default
    p You finished the race after #{raceResult - 1} other runners!

برای آشنایی بیشتر با Pug پیشنهاد می‌کنم که مستندات آن را مطالعه نمایید.

2. HAML

HAML مخفف کلمات HTML Abstraction Markup Language است. درست مانند Pug این تکنولوژی نیز از حالت کناره‌گذاری برای المان‌ها استفاده می‌کند. البته این مورد به عنوان یک جایگزین برای ERB در روبی توسعه پیدا کرد.

تفاوت اصلی HAML و Pug این است HAML بجای جاوااسکریپت از روبی استفاده می‌کند. بنابراین اگر با جاوااسکریپت آشنایی دارید استفاده از Pug می‌تواند مناسب‌تر باشد. 

برای اینکه بتوانیم از قابلیت حلقه‌ها در HAML استفاده کنیم نیاز است که به صورت زیر عمل کنید:

- (1..10).each do |i|
  %div #{i}

این کار اعداد ۱ تا ۱۰ را در divهای جداگانه به نمایش می‌گذارد.

برای استفاده از شروط نیز می‌توانیم به صورت زیر عمل کنیم:

- isSunny = false
- if isSunny
  %p Let's go outside!
- else
  %p I'd rather stay inside.

3. Slim

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

در یک نگاه می‌توانید متوجه شوید که Slim از سینتکس مینیمال‌تری نسبت به HAML برخوردار است. تفاوت بزرگ این دو تکنولوژی نیز در استفاده از % و | است. در زیر می‌توانید پیاده‌سازی یک تگ را در هر دو حالت مشاهده کنید.

/ Slim
tag(attr= “value”)
  | text
-# HAML
%tag{attr: “value”}
  text

4. Markdown

در نهایت ما سراغ Markdown آمدیم. شاید وجود چنین موردی در این مقاله برای‌تان عجیب باشد چرا که مارک‌داون هیچ گونه قابلیت برنامه‌نویسی ندارد و تنها برای نوشتن متون ساده استفاده می‌شود. 

اما با وجود آنکه مارک‌داون ویژگی‌های برنامه‌نویسی ندارد اما نسبت به خود HTML بسیار ساده‌تر نوشته شده و قابلیت خوانایی بسیار بالاتری دارد. اگر دقت کرده باشید خواهید دید که در بیشتر مخازن گیت‌هاب یک فایل README.md وجود دارد که وجود پسوند .md در آن نشان دهنده مارک داون بودن آن است. 

برای آشنایی با سینتکس مارک‌داون می‌توانید این صفحه را مشاهده کنید.

در پایان

در این مطلب سعی داشتیم تا شما را با سیستم‌های قالب‌نویسی HTML آشنا کنیم. امیدوارم که این مطلب توانسته باشد شما را به این تکنولوژی‌ها علاقه‌مند کند. فارغ از این ۴ مورد ابزارهای بسیار دیگری نیز توسعه داده شده‌اند که کارهای مشابهی را انجام می‌دهند. اگر شما از این موارد تجربه خاصی دارید می‌توانید با ما به اشتراک بگذارید.

منبع