Tìm hiểu về các template engine trong Rails

Chào các bạn, hôm nay mình sẽ giới thiệu cho các bạn về templating cho HTML và cụ thể đó là SLIM. Đây là 2 công cụ rất hay xuất hiện trong các dự án về Ruby On Rails. Chúng ta sẽ cùng tìm hiểu về nó để biết tại sao nó rất hay được sử dụng như vậy nhé.

SLIM là một template engine. Thông thường khi mới khởi tạo 1 project, template engine mặc định là .html.erb, tuy nhiên cách viết HTML thông thường quá dài, phải đóng mở đúng, viết đúng cú pháp, quá trình viết code cũng như đọc hiểu sẽ gây khó khăn cho lập trình viên. Và thế là SLIM ra đời là để giảm thiểu, tối ưu các đoạn code về HTML và XML một cách gọn gàng nhất. Cú pháp khi code trong SLIM cũng sẽ dễ nhìn hơn so với HTML thông thường. Thông tin thêm là SLIM bắt đầu được hỗ trợ từ Rails 3 trở lên. Để hiểu rõ hơn chúng ta tiếp tục theo dõi phần dưới nhé.

Đầu tiên chúng ta hãy cài đặt SLIM đã. Thêm dòng này vào Gemfile:

gem "slim"

Sau đó bundle instal, và bật lại server. Hoặc gem install slim ở trong terminal.

1. Cách sử dụng

Cách sử dụng thì đơn giản lắm, để sử dụng slim bạn phải tạo file có đuôi là .slim thay vì .html.erb ở trong thư mục view thôi.

2. Cú pháp trong slim

Điểm nhấn của SLIM chính là không có thẻ tag, mà sẽ thay thế bằng cách lùi đầu dòng (ấn nút tab trên bàn phím). Thử sơ qua 1 ví dụ nhỏ nhé. Thông thường bạn viết code .html muốn viết 1 đoạn hiển thị thông tin sẽ phải:

<div class="demo">
  <p id="full_name">Họ tên: Nguyễn Văn A</p>
  <p id="age">Tuổi: 22</p>
</div>

Đoạn code trên trong SLIM sẽ viết 1 đoạn tương đương ứng là:

.demo
  p#full_name
    | Họ tên: Nguyễn Văn A
  p#age
    | Tuổi: 22

Đoạn code trên ta chú ý 1 chút:

• . => đây là 1 div có class là demo (nếu là # thì tức là id = demo)
• thụt lề => full_name và age thụt vào 1 tab ở so với .demo vì vậy nó sẽ nằm trong .demo
• | => ký tự (|) được sử dụng để phân tách đoạn văn bản dạng tự do trên một dòng mới và nó thụt vào so với thẻ p vì thế nó nằm trong p. OK vậy là chúng ta đã biết sơ qua về SLIM như nào rồi nhỉ. Giờ thì cùng tìm hiểu chi tiết hơn về cú pháp của SLIM nhé.

Line indicators

Control code -

Ký tự - chính là biểu hiện cho <% %> đó các bạn. Nếu viết if end hoặc vòng lặp thì các bạn cũng không cần phải viết end cho nó nữa tất cả SLIM đã dựa vào ident(dấu tab) để xác định rồi.

- if user.name.nil?
  p
    | Không có tên
- else
  p
    = user.name

Output

Đó chính là ký tự = thay cho <%= %> các bạn thấy nó bị tối giản đi rất nhiều phải không.