۵ Templating Language که می‌توانید به‌عنوان جایگزین HTML از آن‌‌ها استفاده کنید

فایل‌های خام HTML به‌تدریج در حال منسوخ شدن هستند و بهترین گزینه برای ایجاد وبسایت‌های مدرن استفاده از Templating Language است. کسانی که با فریم‌ورک‌هایی مانند Express یا React کار کرده باشند، مزیت‌های استفاده از Templating Language را می‌دانند.

برای مثال می‌توانیم ایجاد کدهایی با قابلیت استفاده‌ی مجدد را از شاخص‌ترین مزیت‌های Templating Language بدانیم. البته تعداد کمی Templating Language وجود دارد که برخی از آن‌ها شباهت بسیار زیادی به کدهای HTML دارند درحالی که برخی دیگر کاملا منحصربه‌فرد هستند.

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

EJS

EJS که مختصر شده‌ی Embedded JavaScript است به شما اجازه می‌دهد که به‌راحتی کدهای JavaScript خود را در میان کدهای HTML استفاده کنید. این Templating Language بسیار ساده است و انتخاب مناسبی برای تازه کارها خواهد بود.

<% if (user) { %>
  <h2><%= user.name %></h2>
<% } %>

برای استفاده از کدهای JavaScript فقط کافی است که کدهای خودتان را در میان <% %> قرار دهید. البته EJS بهترین گزینه برای برنامه‌های پیچیده نیست اما در بیشتر پروژه‌ها می‌توانید از آن استفاده کنید.

Handlebars

Handlebars یکی دیگر از Templating Languageهای ساده است اما ویژگی‌های منحصربه‌فرد زیادی ندارد. با‌این‌حال انتخاب مناسبی برای پروژه‌های کوچک است.

<ul class="people_list">
  {{#each people}}
    <li>{{this}}</li>
  {{/each}}
</ul>

سینتکس آن به‌راحتی قابل خواندن و استفاده است. یکی از قابلیت‌های این Templating Language که helpers نام دارد درواقع به این شکل است که می‌توانید فانکشن‌های مورد نیاز خود را با # ترکیب کرده و از آن‌ها استفاده کنید.

Pug

Pug یک Templating Language است که از HAML الهام گرفته و مانند زبان برنامه‌نویسی Python از whitespaceها برای nesting استفاده می‌کند. از دیگر ویژگی‌های Pug می‌توانیم به قابلیت‌های including، conditions و ایجاد کامپوننت‌هایی با قابلیت استفاده مجدد با استفاده Mixins اشاره داشته باشیم.

//- index.pug
doctype html
html
  include includes/head.pug
  body
    h1 My Site
    p Welcome to my super lame site.
    include includes/foot.pug

//- From official docs

ID و Class nameها به‌صورت مختصر نوشته می‌شوند و این کار ویرایش را علاوه‌بر خواندن کدها آسان می‌کند. همچنین می‌توانید از Pug با استفاده از این افزونه در برنامه‌های React خود نیز استفاده کنید.

Mustache

Mustache یک Templating Language با حداقل امکانات مورد نیاز است. همچنین از هیچ منطقی پیروی نمی‌کند اما هنوز هم می‌توانید از آن برای ایجاد وبسایت‌ها و برنامه‌های تحت وب خود استفاده کنید.

Hello {{name}}
You have just won {{value}} dollars!
{{#in_ca}}
Well, {{taxed_value}} dollars, after taxes.
{{/in_ca}}

سینتکس آن خوانا است و به‌راحتی می‌توانید آن را یاد بگیرید حتی کامپایل ساده‌ای دارد.

React (JSX)

React فریم‌ورکی است که با استفاده از JSX این قابلیت را در اختیار شما قرار می‌دهد که کامپوننت‌هایی با قابلیت استفاده‌ی مجدد ایجاد کنید. JSX شباهت زیادی به Templating Languageهای دیگر دارد و یادگیری آن بسیار آسان است.

با افزایش محبوبیت فریم‌ورک React، استفاده از JSX برای بسیاری توسعه‌دهندگان به یک امر معمول تبدیل شده است و اهمیت قابلیت‌های ارائه شده توسط این Templating Language در هنگام ترکیب آن با React از چشم کسی پوشیده نیست.

function HomePage(props) {
    return (
        <div>
            <div className="alert-text">
                <span>New address saved.</span>
            </div>
            <SubmitButton />
        </div>
    )
}

جمع‌بندی

امروزه میزان استفاده از Templating Languageها در ساخت وبسایت یا برنامه‌های وب بسیار بیشتر از قبل شده است و احتمالا شما هم برای به‌روز نگه‌داشتن روند توسعه‌ی خود باید از آن‌ها استفاده کنید. همچنین قابل ذکر است که در این مقاله فقط به ۵ Templating Language پرداخته شده و شما می‌توانید موارد دیگری را به‌نسبت نیاز خود پیدا کرده و از آن‌ها استفاده کنید.

منبع: https://betterprogramming.pub/templating-languages-to-use-instead-of-html-eb3682443958