0

Với JADE/PUG, Công việc cắt HTML trở nên nhanh hơn – Phần 1

JADE/PUG là cái quái gì mà ghê dữ vậy?!

JADE/PUG là một template engine cực kỳ mạnh được phát triển với ý tưởng dựa trên Haml. Thực thi cùng với JavaScript và NodeJS. Thay đổi hoàn toàn cách viết HTML với những cú pháp hoàn toàn mới và tức nhiên sẽ giải quyết những vấn đề mà HTML không để làm được.

Dù mới nhưng không có nghĩa nó sẽ rất khó để có thể đọc và hiểu, trong khi phương châm của các lập trình viên ngày nay là “Write less, do more” và JADE/PUG đã làm được điều đó. Với JADE/PUG, bạn sẽ code HTML một cách nhanh hơn và sạch hơn.

JADE hay PUG

Dự án ban đầu được mang tên là “JADE” một cái tên rất đẹp “Ngọc Bitch” nghe buê đuê vãi, tuy nhiên cái tên JADE là bị đụng bản quyền với một công ty phần mềm lớn (vấn đề bản quyền ở nước ngoài không có phải đùa như đạo nhạc ở Việt Nam đâu). Sau khi trao đổi với các dev và maintainer thì cái tên “PUG” (Chó mặt xệ) được ra đời. Và tất cả các bản release sau đều đổi thành PUG với cú pháp mạnh mẽ, linh hoạt và rõ ràng hơn JADE nữa.

Tại sao JADE/PUG?

What’s wrong with HTML?

– It’s 2016. No one codes HTML directly anymore.

Như ban đầu mình đã nói JADE/PUG là:

  • Template engine cực kỳ mạnh.
  • Giản lược cách viết các thẻ HTML, không sợ mở thẻ ở chỗ này mà quên đóng thẻ ở chỗ khác.
  • Có thể kế thừa và tái sử dụng (không phải copy/paste).
  • Vì mang tính kế thừa, nên sửa một chỗ, có thể cập nhật ở những chỗ khác mà không sợ thiếu sót.
  • Điều quan trong cuối cùng là JADE/PUG thông minh hơn HTML.

Bắt đầu như thế nào?!

Lưu ý trước khi bắt đầu:

Vì đây là bài đầu tiên, mình chỉ dừng ở mức đơn giản, giới thiệu tổng quan và dùng để cắt HTML/CSS cơ bản nên chưa thể thấy hết toàn bộ 100% hiệu năng về template engine của nó. Nên đừng thất vọng mà bỏ cuộc sớm nhé.

Cài đặt, thiết lập môi trường

NodeJs và NPM bắt buộc phải có (2017 rồi mấy cái đó mà không có thì không phải Front-end Developer nhé).

Install package:

$ npm install pug

Install command line:

$ npm install pug-cli -g

Và chạy lệnh:

$ pug --help

Sample syntax

Tạo một file index.pug như sau:

Mở command line rồi chạy lệnh

JADE/PUG khá là nhạy cảm với indent là tab hay space, tab thì tab hết còn space thì là space hết (space có thể 2-space hoặc 4-space).

Bạn có thể compile bằng CMD như cách ở trên, chúng ta còn một cách compile bằng JavaScript nhưng cũng chẳng khá hơn mấy, nên mình cũng không muốn đề cập ở đây (các bạn có thể tham khảo ở link này: https://pugjs.org/api/getting-started.html). Ủa vậy nếu compile phức tạp thế thì xài JADE/PUG làm cờ hó chi cho mệt thây. Ức chế lắm đúng không!? nhưng đừng có lo, với JavaScript bây giờ không còn chỉ dừng ở mức client-script rồi, hệ sinh thái của nó bây giờ như dải ngân hà, như vũ trụ rồi, chỉ có chúng ta là hạt cát trên sa mạc thôi.

Ở bài sau mình sẽ hướng dẫn các bạn phương pháp compile hàng loạt, “watch” – theo dõi có thay đổi trong file JADE/PUG sẽ auto compile, dữ dằn chưa, thậm chí có thể tự động reload trình duyệt mà khỏi cần phải nhấn F5 sau khi đã cập nhật gì đó. Tiện lắm phải không?!

Một vài cú pháp đơn giản

Comments

Đừng vội, ông bà ta có câu “Học ăn, học nói, học gói, học mở”. Theo mình thấy thì comment lúc nào cũng quan trọng trong lập trình, code xong một function mấy tháng sau quay lại “Òa… òa… hồi đó mình code cái gì vậy, không hiểu gì hết!”. Điều mà các lập trình viên lại hay quên làm đó là comment trong code, không cần nhiều, chỉ cần đủ để hiểu được mình đã code gì.

Như JavaScript:

Hoặc

Thêm dấu – Compiler sẽ tự động bỏ qua comment đó.

Block Comments

Conditional comments

Với IE – trình duyệ tốt nhất hiện nay – thì tức nhiên phải chơi cho tới chứ.

Tags

Mặc định, từ đầu tiên của mỗi dòng tượng trưng cho một thẻ HTML, và cứ mỗi indent vào một cấp thì chúng lồng vào nhau, tạo thành một cây như kiến trúc của HTML.

Tương tự với những thẻ tự đóng

Và cũng để tiết kiệm thời gian, JADE/PUG cũng cung cấp cú pháp cho những thẻ lồng vào nhau trên cùng 1 dòng (inline syntax).

Plain text

JADE/PUG cung cấp cho chúng ta 3 cách để chèn văn bản, và được áp dụng cho những trường hợp nhất định.

Piped text

Đây là cách đơn giản để chèn văn bản với ký tự | đứng trước đoạn văn bản và áp dụng cho một dòng (đừng nói là không biết ký tự “|” là “pipe” nhé mà tự đi hỏi lòng mình tại sao là “Piped text”).

HTML có thể truyền trực tiếp vào trong đoạn văn bản.

Block in a Tag

Thông qua đó bạn có thể viết Javascript trực tiếp trong file JADE/PUG

Class and ID Literal

Cú pháp tương tự như selector trong CSS

Class: tag.classname

ID: tag#idname

Ví dụ

Vì div là thẻ được sử dụng nhiều nhất nên cho dù có khai báo thẻ div hay không thì cũng vậy.

div.classname  = .classname 

Ví dụ:

Attributes

Thường thì trong HTML có những thuộc tính mà chúng ta muốn quy định cho nó, đại loại như class, id, style, hay các thuộc tính data-

Được biểu diễn gần như tương tự HTML, các attributes phân cách nhau bằng dấu phẩy hoặc khỏi cũng được.

Multiline Attributes

Có thể viết thành nhiều dòng attributes.

Hoặc attribute của bạn có nhiều dòng với back quote ` (xoắn não vãi)

Boolean Attributes

Style Attributes

Kết thúc phần 1

Mình xin dừng lại phần này ở đây, toàn bộ những phần cài đặt, chạy command line, và những cú pháp basic bên trên đủ để bạn có thể cắt được HTML rồi, nhưng nó chỉ mới tầm 40% hiệu năng mà JADE/PUG mang lại cho chúng ta. Ở phần 2, mình sẽ nói về cú pháp làm cho JADE/PUG thông minh hơn HTML. Hy vọng mọi người sẽ đón theo dõi. Mọi thắc mắc xin để lại comment bên dưới, trao đổi thảo luận để cùng phát triển.

P/s: Danh sách bài viết mình đang plan để viết:

 

 

 

 

 

Bình luận với Facebook

Nguyễn Quốc Tuấn

I don't know who I am!?

Leave a Reply

Your email address will not be published. Required fields are marked *