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

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

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

علاوه‌براین، زبان‌های قالب‌بندی به‌عنوان ابزاری کارآمد برای ایجاد ارتباط میان بخش‌های بک‌اند و فرانت‌اند در یک برنامه شناخته می‌شوند. امروزه بسیاری از فریم‌ورک‌ها از این زبان‌ها برای راحت‌تر کردن فرآیند توسعه استفاده می‌کنند. در ادامه این مقاله از لیارا، برخی از زبان‌های قالب‌بندی همراه با مثال‌هایی از کدهای آن‌ها معرفی خواهیم کرد.

سرور ابری NodeJS لیارا با پشتیبانی از مقیاس‌پذیری خودکار، امنیت بالا و مدیریت آسان، گزینه‌ای ایده‌آل برای راه‌اندازی سریع برنامه‌های NodeJS است.
✅ پشتیبانی از نسخه‌های مختلف NodeJS ✅ ترافیک نامحدود ✅ مدیریت آسان از طریق پنل کاربر
خرید هاست NodeJS

آنچه در ادامه خواهید خواند:

• ۵ زبان برای ساخت قالب به جای HTML
• سوالات متداول
• جمع بندی

۵ زبان برای ساخت قالب به جای HTML

استفاده از زبان‌های قالب‌بندی یا Templating Language می‌تواند سرعت کدنویسی را افزایش دهد و ساختار پروژه‌ها را منظم‌تر کند. اگر به دنبال جایگزینی برای HTML هستید که قابلیت‌هایی مانند استفاده مجدد از کد، خوانایی بهتر یا یکپارچه‌سازی با JavaScript را فراهم کند، در ادامه با 5 زبان محبوبی آشنا خواهید شد که می‌توانند انتخاب‌های مناسبی برای شما باشند.

۱۰ ترفند جاوا اسکریپت که فقط توسعه‌دهندگان حرفه‌ای از آن‌ها خبر دارند!
جاوا اسکریپت

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>

جمله شما به این صورت قابل فهم‌تر و روان‌تر خواهد بود:

سینتکس (Syntax) این زبان به شکلی طراحی شده که به‌راحتی قابل خواندن و استفاده است. یکی از قابلیت‌های این زبان، helpers نام دارد که به شما این قابلیت را می‌دهد که فانکشن‌های مورد نیاز خود را با استفاده از علامت # فراخوانی کرده و از آن‌ها در قالب‌های خود استفاده کنید.

راهنمای نصب جاوا با استفاده از apt در دبیان 12
نصب جاوا با استفاده از apt در دبیان

Pug

Pug از زبان 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 با استفاده از افزونه‌ای که در GitHub وجود دارد در برنامه‌های React خود استفاده کنید.

Mustache

Mustache یک زبان قالب‌بندی ساده است که حداقل امکانات لازم را برای شما فراهم می‌کند. این زبان از منطق برنامه‌نویسی پیروی نمی‌کند، اما همچنان می‌توانید از آن برای طراحی وب‌سایت ها و برنامه‌های تحت وب از آن استفاده کنید. همچنین سینتکس (Syntax) آن خوانا و و ساده است و کامپایل پیچیده‌ای هم ندارد.

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

مدیریت چالش‌های توسعه؛ مهارت فنی یا درک عمیق؟
چالش‌های توسعه

React (JSX)

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

با افزایش محبوبیت React، استفاده از JSX برای بسیاری از توسعه‌دهندگان به یک استاندارد رایج تبدیل شده است و اهمیت قابلیت‌های این زبان قالب‌بندی هنگام ترکیب با React برای همه روشن و واضح است.

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

چگونه یک پیام کامیت مناسب را در گیت بنویسیم (راهنمای کامل)
کامیت مناسب

همین الان، بدون کمترین پیچیدگی، سرور مجازی خودتون رو در کمتر از ۳۰ ثانیه، راه‌اندازی کنید.
✅ عملکرد پایدار ✅ ترافیک نامحدود ✅ هزینه به‌صرفه
خرید سرور مجازی ابری

سوالات متداول

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

Templating Language دقیقاً چه کاربردی دارد؟

زبان‌های قالب‌بندی (Templating Languages) به توسعه‌دهندگان این قابلیت را می‌دهد که کدهای HTML را با زبان‌های برنامه‌نویسی مانند JavaScript ترکیب کرده و بخش‌هایی از کد را قابل استفاده مجدد، خواناتر و پویا کنند.

آیا می‌توان از Templating Language در همه پروژه‌ها استفاده کرد؟

بله، اما بستگی به نوع پروژه دارد. در پروژه‌های ساده ممکن است نیازی به Templating Language نباشد، اما در پروژه‌های متوسط تا پیشرفته استفاده از آن به شدت توصیه می‌شود.

کدام Templating Language برای افراد مبتدی مناسب‌تر است؟

EJS و Handlebars به‌دلیل سادگی در سینتکس (Syntax) و شباهت زیاد به HTML، گزینه‌های مناسبی برای شروع هستند.

آیا Templating Languageها فقط برای JavaScript هستند؟

خیر. هرچند بسیاری از Templating Language های رایج مانند EJS یا JSX برای JavaScript ساخته شده‌اند، اما زبان‌های قالب‌بندی برای زبان‌های دیگر مانند Python (مانند Jinja2) یا PHP هم وجود دارد.

تفاوت بین Templating Language و HTML چیست؟

HTML فقط یک زبان نشانه‌گذاری ایستا است، درحالی‌که Templating Language امکان استفاده از منطق برنامه‌نویسی (مانند شرط‌ها و حلقه‌ها) را فراهم می‌کند و می‌تواند HTML را به‌صورت پویا تولید کند.

ارزیابی و بهینه‌ سازی عملکرد وب سرورها
عملکرد وب سرورها

جمع‌ بندی

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

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