همل (Haml): زبان نشانه‌گذاری تمیزتر برای HTML

Haml
📅 26 خرداد 1405 📄 1,030 کلمه 🔗 منبع اصلی

چکیده

همل (Haml) یک سیستم قالب‌سازی است که کدهای درون‌خطی را حذف کرده و HTML را تمیزتر می‌کند. این ابزار با پشتیبانی از محتوای پویا و سینتکس شبیه CSS، نوشتن کدهای وب را ساده‌تر و خواناتر می‌کند.

همل (Haml) چیست؟

همل (Haml یا HTML Abstraction Markup Language) یک سیستم قالب‌سازی است که برای جلوگیری از نوشتن کدهای درون‌خطی و تمیزتر کردن سند HTML طراحی شده است. این ابزار انعطاف‌پذیری لازم برای داشتن محتوای پویا در HTML را فراهم می‌کند. درست مانند سیستم‌های قالب‌سازی دیگر مثل eRuby، همل هم کدهایی را در خود جای می‌دهد که در زمان اجرا پردازش شده و برای ارائه محتوای پویا، کدهای HTML تولید می‌کنند. برای اجرای کدهای همل، فایل‌ها باید پسوند .haml داشته باشند. این فایل‌ها شبیه فایل‌های .erb هستند که در توسعه وب‌اپلیکیشن‌ها به جایگذاری کدهای روبی کمک می‌کنند.

هنگام تحلیل کامنت‌های کد، همل از قوانین روبی نسخه ۱.۹ یا بالاتر پیروی می‌کند. این زبان تنها کدگذاری‌های سازگار با ASCII مثل UTF-8 را می‌فهمد و از UTF-16 یا UTF-32 پشتیبانی نمی‌کند، زیرا این موارد با ASCII ناسازگارند.

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

تاریخچه

همل ابتدا توسط همپتون کتلین معرفی و در سال ۲۰۰۶ منتشر شد و سپس افراد دیگری روی آن کار کردند. هدف او ساده‌تر، تمیزتر و آسان‌تر کردن HTML بود. از سال ۲۰۰۶ تاکنون، همل چندین بار بازبینی شده و نسخه‌های جدیدتری منتشر شده‌اند. تا سال ۲۰۱۲، ناتالی ویزنبام نگهدارنده اصلی همل بود و پس از او تا سال ۲۰۱۵ نورمن کلارک این مسئولیت را بر عهده گرفت. ناتالی روی قابل استفاده کردن همل در اپلیکیشن‌های روبی کار کرد، در حالی که نیک والش برندسازی و طراحی آن را بر عهده داشت.

تاریخچه نسخه‌ها

  • نسخه ۲.۲.۰ در ژوئیه ۲۰۰۹ با پشتیبانی از روبی ۱.۹ و ریلز ۲.۰ به بالا منتشر شد.
  • نسخه ۳.۰.۰ در مه ۲۰۱۰ عرضه شد که پشتیبانی از ریلز ۳ و بهبود عملکرد را به همراه داشت.
  • نسخه چهارم، سازگاری با نسخه‌های قبلی را شکست و تنها از ریلز ۳ و روبی ۱.۸.۷ به بالا پشتیبانی کرد. این نسخه نشان‌دهنده تغییر به نسخه‌گذاری معنایی بود. در سری ۴، اصلاحات متعددی مثل افزایش سرعت، رفع هشدارها، سازگاری با جدیدترین نسخه‌های ریلز و اصلاح مستندات انجام شد.
  • نسخه ۵.۰.۰ در آوریل ۲۰۱۷ منتشر شد. این نسخه از روبی ۲.۰.۰ به بالا پشتیبانی می‌کند و سازگاری با ریلز ۳ را قطع کرده است. همچنین گزینه 'trace' برای ردیابی قالب‌های همل به آن اضافه شد.

ویژگی‌ها

در توسعه همل، چهار اصل مهم در نظر گرفته شده است:

نشانه‌گذاری کاربرپسند

یک زبان نشانه‌گذاری در صورتی کاربرپسند است که:

  • فهم آن آسان باشد.
  • پیاده‌سازی و استفاده از آن ساده باشد.

اصل DRY (تکرار نکنید)

زبان نشانه‌گذاری باید از اصل Don't Repeat Yourself پیروی کند. به این معنی که:

  • از تکرارهای غیرضروری پرهیز کند.
  • بر روی کدهای تمیز تمرکز داشته باشد.

تورفتگی مناسب

تورفتگی مناسب در زبان نشانه‌گذاری، ظاهر کد را بهبود بخشیده و خواندن آن را برای برنامه‌نویسان آسان می‌کند؛ همچنین مشخص کردن ابتدا و انتهای هر عنصر را ساده‌تر می‌کند.

ساختار شفاف

ساختار واضح به نگهداری کد و درک منطقی خروجی نهایی کمک می‌کند. البته مشخص نیست که آیا همل در این زمینه مزیت ویژه‌ای نسبت به سایر ابزارها ارائه می‌دهد یا خیر.

مثال‌ها

سینتکس همل شبیه CSS است. برای نمونه، همل مانند CSS از نقطه (.) برای کلاس‌ها استفاده می‌کند که کار با آن را برای توسعه‌دهندگان آسان می‌سازد.

مثال «سلام، دنیا!»

همل به عنوان ابزار خط فرمان

دو دستور زیر در همل معادل هم هستند، زیرا همل انتخابگرهای CSS را تشخیص می‌دهد:

%p{:class => "sample", :id => "welcome"} Hello, World!
%p.sample#welcome Hello, World!

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

<p class="sample" id="welcome">Hello, World!</p>

همل به عنوان افزونه روبی روی ریلز

برای استفاده از همل در روبی، باید خط زیر به فایل Gemfile اضافه شود:

gem 'haml'

مشابه eRuby، همل هم می‌تواند به متغیرهای محلی دسترسی پیدا کند. در این مثال، یک فایل کنترلر روبی فرضی استفاده شده است:

# file: app/controllers/messages_controller.rb
class MessagesController < ApplicationController
  def index
    @message = "Hello, World!"
  end
end
# file: app/views/messages/index.html.haml
#welcome
  %p= @message

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

<div id="welcome">
  <p>Hello, World!</p>
</div>

همل به عنوان ماژول روبی

برای استفاده مستقل از همل بدون ریلز و ActionView، ابتدا gem مربوطه را نصب کرده و به Gemfile اضافه کنید. سپس آن را در اسکریپت روبی وارد کنید (با دستور require 'haml') یا مفسر روبی را با فلگ -rubygems فراخوانی کنید.

welcome = Haml::Engine.new("%p Hello, World!")
welcome.render

خروجی:

<p>Hello, World!</p>

Haml::Engine یک کلاس در همل است.

مثال پایه

همل برای تورفتگی و تعیین محدوده تگ‌ها از فاصله (معمولاً دو فاصله) استفاده می‌کند. این روش جایگزین تگ‌های باز و بسته شده و کد را تمیزتر و خشک‌تر (DRY) می‌کند. در ادامه تفاوت‌های کلیدی همل و eRuby بررسی شده است:

  • در همل، برخلاف eRuby، هر عنصر تگ باز و بسته جداگانه ندارد.
  • سینتکس eRuby شبیه HTML است، اما سینتکس همل بیشتر به CSS می‌ماند.
  • همل برای تورفتگی تگ‌ها از فاصله‌دهی استفاده می‌کند، در حالی که eRuby ساختار HTML را حفظ می‌کند.
  • در همل، ویژگی‌هایی مثل کلاس و شناسه (id) به ترتیب با . و # نشان داده می‌شوند. همچنین همل به جای <> در eRuby، از % برای نشان دادن عناصر HTML استفاده می‌کند.

مثال با کدهای جایگذاری شده روبی

توجه: این تنها یک مثال پیش‌نمایش ساده است و ممکن است با نسخه فعلی زبان کاملاً مطابقت نداشته باشد.

!!!
%html{ :xmlns => "http://www.w3.org/1999/xhtml", :lang => "en", "xml:lang" => "en"}
  %head
    %title BoBlog
    %meta{"http-equiv" => "Content-Type", :content => "text/html; charset=utf-8"}
    %link{"rel" => "stylesheet", "href" => "main.css", "type" => "text/css"}
  %body
    #header
      %h1 BoBlog
      %h2 Bob's Blog
    #content
      - @entries.each do |entry|
        .entry
          %h3.title= entry.title
          %p.date= entry.posted.strftime("%A, %B %d, %Y")
          %p.body= entry.body
    #footer
      %p
        All content copyright © Bob

کد همل بالا XHTML زیر را تولید می‌کند:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
  <head>
    <title>BoBlog</title>
    <meta content='text/html; charset=utf-8' http-equiv='Content-Type' />
    <link href='/stylesheets/main.css' media='screen' rel='Stylesheet' type='text/css' />
  </head>
  <body>
    <div id='header'>
      <h1>BoBlog</h1>
      <h2>Bob's Blog</h2>
    </div>
    <div id='content'>
      <div class='entry'>
        <h3 class='title'>Halloween</h3>
        <p class='date'>Tuesday, October 31, 2006</p>
        <p class='body'>
          Happy Halloween, glorious readers! I'm going to a party this evening... I'm very excited.
        </p>
      </div>
      <div class='entry'>
        <h3 class='title'>New Rails Templating Engine</h3>
        <p class='date'>Friday, August 11, 2006</p>
        <p class='body'>
          There's a very cool new Templating Engine out for Ruby on Rails. It's called Haml.
        </p>
      </div>
    </div>
    <div id='footer'>
      <p>
        All content copyright © Bob
      </p>
    </div>
  </body>
</html>

پیاده‌سازی‌ها

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

  • Ruby: hamlit
  • PHP: Fammel, pHAML, phamlp, phpHaml (PHP 5), HAML-TO-PHP (PHP 5), Multi target HAML (PHP 5.3)
  • Javascript: haml-js
  • Python: HamlPy
  • Common Lisp: cl-haml
  • Dart: Hart
  • Java: JHaml
  • Lua: LuaHaml
  • .NET: NHaml
  • ASP.NET: MonoRail NHaml
  • Perl: Text::Haml
  • Scala: Scalate

همچنین ببینید

  • BBCode
  • eRuby
  • Markaby
  • Ruby
  • Ruby on Rails
  • YAML
  • Sass – یک سیستم مشابه برای CSS که آن هم توسط کتلین طراحی شده است.
  • Website Meta Language – یک زبان قالب‌سازی با عملکردهای مشابه
  • Web template – مفهوم کلی قالب‌سازی برای بسط دادن به HTML

جمع‌بندی

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