GMO-Z.com Vietnam Lab Center Technology Blog

Làm sao để code HTML trông thật sexy với HAML

D.Q.M -

I.Giới thiệu:

Nếu bạn đã từng biết đến ngôn ngữ lập trình LESS, Styles… Chúng đều tạo ra những cách viết CSS nhanh, hiệu quả hơn và nếu bạn đã từng sử dụng, bạn sẽ đánh giá cao sự linh hoạt mà chúng mang lại cho dự án của bạn.

Với HTML bạn sẽ tự hỏi tại sao nó lại quá dài dòng như vậy? Tại sao không ai đó đơn giản hóa nó ? Hôm nay, chúng ta sẽ cùng tìm hiểu cách sử dụng Haml để tối ưu hóa HTML.

Haml (HTML Abstraction Markup Language) là ngôn ngữ markup thu gọn giúp việc viết HTML dễ dàng hơn có thể sử dụng cho nhiều ngôn ngữ PHP, ASP, ERB... được sử dụng nhiều nhất là Ruby on Rails.

HTML gốc

<html>
  <head>
    <title>Myspace</title>
  </head>
  <body>
    <h1>I am the international space station</h1>
    <p>Sign my guestbook</p>
  </body>
</html>

chuyển sang HAML

%html
  %head
    %title Myspace
  %body
    %h1 I am the international space station
    %p Sign my guestbook

II.Sự khác biệt giữa HTLM và Haml.

Bây giờ, bạn đã có một khái niệm cơ bản về Haml, đã đến lúc xem nó hoạt động như thế nào?

Với HTML:

 <p>Hello World</p>

Chú ý những cấu trúc đơn giản nhất của HTML đều có sự lặp lại. Trong Haml ta thay điều đó bằng thẻ %p.

Với Haml:

%p Hello World

Haml dựa vào khoảng trắng để xác định đầu ra, dưới đây là một minh chứng.

Haml:

%h3.title Halloween
%p.date Tuesday, October 31, 2006
%div
  %ul
    %li
      %a{:href => "#devices-tab"} Devices
    %li
      %a{:href => "#options-tab"} System Options
    %li
      %a{:href => "#reports-tab"} Reports
    %li
      %a{:href => "#notes-tab"} Notes

Lần đầu đối với bạn có thể khá khó khăn nhưng đoạn code ở trên chính là đoạn code ở dưới, nghĩa là chúng hoàn toàn tương đương với nhau. Nếu chúng ta viết đoạn Haml ở trên và đưa vào trình phiên dịch, nó sẽ cho ra HTML bên dưới.

HTML:

<h3 class='title'>Halloween</h3>
 <p class='date'>Tuesday, October 31, 2006</p>
<div >
 <ul>
  <li ><a href="#devices-tab">Devices</a></li>
  <li><a href="#options-tab">System Options</a></li>
  <li><a href="#reports-tab">Reports</a></li>
  <li><a href="#notes-tab">Notes</a></li>
 </ul>
</div>

Như bạn có thể thấy, phiên bản HTML yêu cầu rất nhiều ký tự. Sử dụng Haml, chúng ta sẽ tiết kiệm hơn 30 tổ hợp phím trong một đoạn code nhỏ. Nhân lên với toàn bộ website, bạn sẽ thấy đó là một con số khổng lồ.

III.Reference

1.Classes và IDs

Nếu không có cấu trúc tag truyền thống, bạn tự hỏi làm thế nào để triển khai các mục HTML thêm vào như classed và IDs. Với Haml, bạn hoàn toàn có thể làm được và thậm chí là bạn sẽ cảm thấy quen thuộc một cách kỳ lạ.

Haml:

%div
  %ul.tabs
    %li#item
      %a{:href => "#devices-tab"} Devices
    %li#item
      %a{:href => "#options-tab"} System Options
    %li#item
      %a{:href => "#reports-tab"} Reports
    %li#item
      %a{:href => "#notes-tab"} Notes

Như bạn thấy symbol “.” Và “#” được sử dụng để biểu thị classes và IDs tương ứng. Thật tuyệt vời bởi bạn đã quen thuộc với phương pháp này trong CSS. Một khi bạn đã từng sử dụng CSS, bạn hoàn toàn có thể áp dụng với Haml. Đây là cách thực hiện đoạn code.

HTML:

<div >
 <ul class="tabs">
  <li id="item"><a href="#devices-tab">Devices</a></li>
  <li id="item"><a href="#options-tab">System Options</a></li>
  <li id="item"><a href="#reports-tab">Reports</a></li>
  <li id="item"><a href="#notes-tab">Notes</a></li>
 </ul>
</div>

2.Divs

Hãy thành thật rằng ngay cả những yếu tố mới lạ nhất của HTML5, chúng ta cũng chỉ yêu thích divs. Cho rằng đây là yếu tố phổ biến, Haml đã có một cú pháp đặc biệt đơn giản. Hãy cân nhắc thực hiện với Haml.

HTML:

<div id="someDiv">
</div>

Với những gì chúng ta đã học được, bạn sẽ không nghi ngờ cú pháp “%div” là cần thiết ở đây. Tuy nhiên, Haml cho phép bạn bỏ qua tất cả cú pháp div. Để có đoạn HTML như trên trong Haml, tất cả bạn cần chỉ là:

Haml:

#someDiv

Chỉ cần như vậy là đủ. Đoạn code này là div hoàn chỉnh với một ID của “someDiv”. Ngay cả khi bạn hoài nghi rằng nó khá ngắn gọn. Một lần nữa, chúng ta lại thấy được lợi ích rõ ràng của việc viết markup như khi chúng ta viết CSS.

Khi cần chắc chắn rằng bạn thật sự nắm được cách hoạt động, sau đây là một ví dụ lớn hơn. Lần này chúng ta sẽ sử dụng div chính và hai div bên trong cùng với các yếu tố khác.

Haml:

#container
  .box
    %h2 Some Headline
    %p Lorem ipsum doller your mom...
    %ul.mainList
      %li One
      %li Two
      %li Three

  .box
    %h2 Some Headline
    %p Lorem ipsum doller your mom...
    %ul.mainList
      %li One
      %li Two
      %li Three

HTML:

<div id='container'>
  <div class='box'>
    <h2>Some Headline</h2>
    <p>Lorem ipsum doller your mom...</p>
    <ul class='mainList'>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ul>
  </div>
  <div class='box'>
    <h2>Some Headline</h2>
    <p>Lorem ipsum doller your mom...</p>
    <ul class='mainList'>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ul>
  </div>
</div>

Lần này bạn đã thực sự hiểu được sức mạnh của Haml. Sự quyến rũ ở đây vượt xa thực tế rằng bạn tiết kiệm được hàng tấn ký tự và thậm chí là một vài dòng, hãy lưu ý cách thực hiện dễ dàng hơn trong Haml. Tất cả sự lộn xộn kèm theo trong HTML đã được loại bỏ và thay vào đó là hệ thống phân cấp markup rõ ràng mà bạn có thể dễ dàng nhận thấy.

3.Thuộc tính Boolean

Một số thuộc tính, chẳng hạn như “checked” của input tags hoặc “selected” của option tags, là “boolean” . Trong HTML các thuộc tính này có thể được viết dưới dạng

<input selected>

để làm điều này trong Haml bằng cách sử dụng các thuộc tính kiểu băm, chỉ cần gán một giá trị true của cho thuộc tính:

%input{:selected => true}

4.Class and ID: (.) và (#)

Dấu chấm và thăng được mượn từ CSS. Chúng được sử dụng như các phím tắt để xác định các thuộc tính lớp và id của một phần tử. Nhiều tên lớp có thể được chỉ định theo cách tương tự với CSS, bằng cách ghép các tên lớp cùng với dấu chấm. Chúng được đặt ngay sau tag và trước một attributes hash. Ví dụ:

%div#things
  %span#rice Chicken Fried
  %p.beans{ :food => 'true' } The magical fruit
  %h1.class.otherclass#id La La La

được biên dịch thành

<div id='things'>
  <span id='rice'>Chicken Fried</span>
  <p class='beans' food='true'>The magical fruit</p>
  <h1 class='class otherclass' id='id'>La La La</h1>
</div>

Và,

%div#content
  %div.articles
    %div.article.title Doogie Howser Comes Out
    %div.article.date 2006-11-05
    %div.article.entry
      Neil Patrick Harris would like to dispel any rumors that he is straight

được biên dịch thành

<div id='content'>
  <div class='articles'>
    <div class='article title'>Doogie Howser Comes Out</div>
    <div class='article date'>2006-11-05</div>
    <div class='article entry'>
      Neil Patrick Harris would like to dispel any rumors that he is straight
    </div>
  </div>
</div>

5.Filters

Ký tự đại diện chỉ định một bộ lọc. Điều này cho phép bạn truyền khối văn bản thụt lề làm đầu vào cho bộ lọc khác và thêm kết quả đầu ra của Haml. Cú pháp chỉ đơn giản là dấu hai chấm, sau đó là tên của bộ lọc. Ví dụ:

%p
  :markdown
    # Greetings

    Hello, *World*

được biên dịch thành

<p>
  <h1>Greetings</h1>

  <p>Hello, <em>World</em></p>
</p>

Chức năng của một số bộ lọc như Markdown có thể được cung cấp bởi nhiều thư viện khác nhau. Thông thường bạn không phải lo lắng về điều này.
Tuy nhiên trong một số trường hợp, bạn muốn sử dụng các bộ lọc một cách cụ thể . Trong trường hợp này, bạn có thể thực hiện điều này thông qua Tilt, thư viện mà Haml sử dụng để thực hiện nhiều bộ lọc của nó:

Tilt.prefer Tilt::RedCarpetTemplate

Dưới đây là danh sách các filter

  • cdata-filter
  • coffee-filter
  • css-filter
  • erb-filter
  • escaped-filter
  • javascript-filter
  • less-filter
  • markdown-filter
  • maruku-filter
  • plain-filter
  • preserve-filter
  • ruby-filter
  • sass-filter
  • scss-filter
  • textile-filter

6.Hàm điều kiện IF và lặp LOOP

Có một điểm mình rất thích trong HAML là hỗ trợ cú pháp điều kiện IF ELSE rất trực quan và dễ sử dụng . Ngay cả người mới cũng có thể dễ dàng hiểu và nắm bắt được kỹ thuật này .
Ví dụ
từ đoạn code if else bình thường trong ERB

<% if signed_in? %>
  <li><%= link_to "Sign out", sign_out_path %></li>
<% else %>
  <li><%= link_to "Sign in", sign_in_path %></li>
<% end %>

bạn có thể code lại với 1 đoạn trực quan hơn hẳn

- if signed_in?
  %li= link_to "Sign out", sign_out_path
- else
  %li= link_to "Sign in", sign_in_path

Còn hàm loop thì sao

- @my_patients_list.each do |patient|
  %tr
    %td= patient.name
    %td= patient.date_of_birth
    %td= patient.gender

quá đơn giản phải ko.

7.Render subpage

Hơn nữa HAML còn hỗ trợ lồng các trang phụ vào trang chính bằng cú pháp render, bạn có thể tham khảo một trong những cách sau :

cách cổ điển

render partial: 'dog', locals: {dog: dog}

hoặc cách mới hơn

render 'dog', dog: dog

cách đơn giản nhất

= render dog

Ngoài ra HAML còn hỗ trợ render cả một tập hợp ActiveRecord models :

= render partial: "dog", collection: @dogs

khi viết như thế này thì HAML sẽ tự sinh ra một local variable dog cho bạn.

IV.Kết:

Nếu bạn đã từng sử dụng Sass, LESS hoặc Stylus bandwagon và đang tìm kiếm một giải pháp tương tự như HTML, Haml chính là câu trả lời của bạn. Nó cho phép bạn có những đoạn code đơn giản hơn, giúp bạn tiết kiệm thời gian và tất cả thật dễ dàng khi bạn đã quen với nó.

Điều đáng tiếc duy nhất là Haml mang lại một chút khó khăn cho những ai không phải là Ruby deverloper đơn giản chỉ do các tài liệu hướng dẫn đều hướng đến Ruby. Nhưng tôi đảm bảo rằng ngay cả khi bạn không biết gì về Ruby thì Haml vẫn khá thú vị khi bạn có những trải nghiệm với HTML đơn giản.

Khi đã nắm được những mục cơ bản, bạn hãy thử dùng Haml cho các dự án của mình. Hãy xem Haml website để có thêm thông tin và bookmarkHaml Cheatsheet để có thể giúp bạn bắt đầu nhanh hơn.

Cuối cùng, chúc tất cả các bạn sẽ tìm được một công cụ phù hợp cho những dự án tuyệt vời của mình. Hãy cùng nhau thảo luận và chia sẽ nếu bạn có bất kỳ thắc mắc nào nhé!

Để tìm hiểu sâu hơn về haml bạn có thể vào trang http://haml.info/.

V.Nguồn Tham khảo:

HAML REFERENCE
Screencasts
HAML TUTORIAL