Tìm hiểu về Jade template

Chào các bạn, hôm nay tôi xin giới thiệu đến các bạn về 1 công nghệ làm giao diện web đó là Jade template. Trước khi đi vào bước cài đặt và sử dụng cơ bản, chúng ta cùng tìm hiểu vì sao nên sử dụng công nghệ này.

Những điểm lợi thế trong công nghệ Jade template

HTML là một ngôn ngữ để tạo ra trang web bằng các thẻ Tag và tất cả những ai làm việc về Web đều rõ về ngôn ngữ HTML này và trong lúc làm việc với HTML chắc hẳn ai cũng gặp vài vấn đề gây ra những lỗi khi hiển thị trên web. Dưới đây tôi xin đưa ra vài tiện ích mà Jade template ưu điểm hơn HTML:

Bạn sẽ không cần phải quan tâm đến việc đã đóng Tag mình mở ra chưa

Chắc hẳn ai làm web cũng đều gặp phải vấn đề này rồi và điều này hoàn toàn được giải quyết nào bạn dùng Jade, cụ thể hơn khi viết với Jade bạn chỉ cần viết đơn giản như dưới mà không cần phải đóng Tag. Dưới dây ví dụ đơn giản tạo menu sử dụng Bootstrap.

.navbar.navbar-fixed-top
  .navbar-inner
    .container-fluid
      a.btn.btn-navbar(data-toggle="collapse", data-target=".nav-collapse")
        span.icon-bar
        span.icon-bar
        span.icon-bar
      a.brand(href="#") asmuelle.de
      .nav-collapse
      ul.nav
       li.active
        a(href="#") Home
       li
        a(href="#about") About
       li
        a(href="#contact") Contact
      p.navbar-text.pull-right Logged in as
        a(href="#") GUEST

Không yêu cầu về chuẩn định dạng code

Việc sinh Jade sinh ra các Tag HTML mà không cần phải có quy định nào khiến cho bạn dễ dàng, linh động hơn trong việc tạo file HTML.

#foo
 .bar Hello World

thì kết quả cho ra là

     <div id="foo"><div class="bar">Hello World</div></div/>

Jade hỗ trợ về markdown

Jade tích hợp sẵn các chuẩn Markdown khiến cho chúng ta linh động và dễ dàng hơn tạo các thẻ 1 cách nhanh chóng và dễ nhìn

 Block Statements
=============
*   Red
*   Green
*   Blue
Links
-------------
[Viblo](http://viblo.asia)

Cho ta kết quả

<h1>Block Statements</h1>
<ul><li>Red</li><li>Green</li><li>Blue</li></ul>
<h2>Links</h2>
<a href="http://viblo.asia">Viblo</a>

Và 1 điều nữa đó là Jade có thể làm việc hoàn toàn với Angular.

Angular dường như đang đem lại đến thế giới web những điều mới mẻ mà trước kia rất khó để làm được trên web. Và Jade cũng có thể làm việc tốt với Angular thì sẽ sớm trở thành công nghệ đi cùng vơi Angular, Express Js hay Node Js. Qua 1 vài ưu diểm trên ta có thể thấy Jade Template có khá nhiều ưu điểm, tuy nhiên nó là 1 công nghệ mới cho nên vẫn chưa được phổ biến cũng như chưa có những phiên bản bền vững. Nhưng những ưu điểm đem lại không thể bỏ qua. Vậy gio tôi cùng các bạn tìm hiểu những bước cơ bản nhất để cài đặt thực thi về Jade template

Cài đặt Jade template và vài lệnh cơ bản của Jade

Đầu tiên bạn cần phải cài đặt Node js, tùy vào hệ điều hành mà có cách cài khác nhau. Các bạn có thể vào trang chủ Node Js để cài đặt.

Khi khi cài Node js bạn dùng lệnh sau để cài Jade npm install pug --save

Tạo các Tag đơn giản

div
  address
  i
  strong

Ở đây ta thấy sẽ sinh ra 1 thẻ div, và bên trong nó sẽ có các thẻ khác như thẻ address, thẻ i, hay strong. Và kết quả HTML sinh ra như sau:

<div>
  <address></address><i></i><strong></strong>
</div>

Thêm các nội dung text và các Tag

Mặc định các đoạn text jade sẽ hiểu đó là các tag, vì thể để nhập text ta làm như sau

h1 Welcome to Viblo
p
  | Có rất nhiều cách để thêm nội dung vào trong các thẻ
p.
  Chào mừng bạn đến với Viblo, hi vọng bạn có thể tìm kiếm cũng
  như trang bạn được nhiều kiến thức bổ ích cho bản thân
  .

Kết quả

<h1>Welcome to Viblo</h1>
<p>
  Có rất nhiều cách để thêm nội dung vào trong các thẻ
</p>
<p>
  Chào mừng bạn đến với Viblo, hi vọng bạn có thể tìm kiếm cũng
  như trang bạn được nhiều kiến thức bổ ích cho bản thân.
</p>

Cách thêm các thuộc tính cho thẻ

Khi làm việc với HTML các bạn thường xuyên phải thêm các thuộc tính như id, class vậy Jade sẽ tạo ra các thuộc tính này như sau:

h1(id="title") Welcome to Jade
button(class="btn", data-action="bea").
  Sử dụng Jade template

Nhìn qua bạn có thể hình dung rõ ràng được các thẻ có thuộc tính gì, đây là những ưu điểm của Jave, và kết quả HTML sinh ra như sau

<h1 id="title">Welcome to Jade</h1>
<button data-action="bea" class="btn">Sử dụng Jade template</button>

#### Kết luận

Bài này chúng ta chỉ đi 1 cách cơ bản về Jade, qua đó cũng thấy được vài ưu diểm cũng như cách sử dụng. Tuy nhiên vì nó cũng sinh ra từ Node JS nên cũng có vài nhược điểm đi cùng như khó bắt lỗi hoặc có lỗi từ đâu đó khác thì toàn bộ app sẽ không chạy được. Hi vọng bài tới sẽ đi sâu hơn về công nghệ này.