Jade คืออะไร ? + สอนวิธีใช้ร่วมกับ Express

บทความนี้เราจะมาพูดถึงวิธีการใช้ template engine ยอดนิยมตัวหนึ่งที่มีชื่อว่า Jade โดยเนื้อหาของบทความนี้จะต่อจากบทความ สอนวิธีทำเว็บไซต์ด้วย Express ครับ เรามาดูกันว่าการเอา Jade เข้ามาช่วย จะทำให้เราเขียนเว็บด้วย Express ได้สะดวกขึ้นมากขนาดไหน ?

• ตอนที่ 1 : สอนวิธีทำเว็บไซต์ด้วย Express

Jade คืออะไร ?

Jade นั้นเป็น template engine ตัวหนึ่งที่นิยมใช้งานร่วมกับ Node.js และ Express ครับ ส่วนเจ้า template engine นั้นก็คือตัวช่วยที่ทำให้เราสามารถแยกการทำงานของ web designer และ web developer ออกจากกันได้ ทำให้โค้ดสะอาดและเป็นระเบียบมากขึ้น โดยจุดเด่นของ Jade มีดังนี้ครับ

• แปลงโค้ดให้เป็นโค้ด HTML
• รองรับ Dynamic Code
• รองรับ DRY (Don’t Repeat Yourself)

เมื่อลองเข้าเว็บ jade-lang.com จะเห็นภาพเปรียบเทียบระหว่างโค้ดที่เขียนด้วย Jade (ด้านซ้ายมือ) กับโค้ดที่แปลงเป็น HTML แล้ว (ด้านขวามือ)

วิธีใช้งาน Jade

Jade จะใช้ Syntax แบบ Whitespace Sensitive ครับ คือจะใช้ space หรือ tab ก็ได้ในการ indent แต่ว่าห้ามใช้รวมกันนะครับ ต้องเลือกอย่างใดอย่างหนึ่ง

ตัวอย่างการใช้งาน Tag

h1 Header1
h2 Header2
h3 Header3

จะได้ผลลัพธ์ดังนี้

<h1>Header1</h1>
<h2>Header2</h2>
<h3>Header3</h3>

สร้าง List

ul
  li List#1
  li List#2
  li List#3

ก็จะถูกแปลงไปเป็นโค้ด HTML ดังนี้

<ul>
  <li>List#1</li>
  <li>List#2</li>
  <li>List#3</li>
</ul>

ทีนี้ลองมาดูตัวอย่างที่ซับซ้อนมากขึ้นครับ

div: div: h3 Hello
div
  div
    h3 World
โค้ดด้านบน ได้ผลลัพธ์เหมือนกัน คือ h3 จะอยู่ภายใน div
<div>
    <div>
        <h3>Hello</h3>
    </div>
</div>
<div>
    <div>
        <h3>World</h3>
    </div>
</div>
เราสามารถแทรกโค้ดลงไปได้ด้วยนะครับ โดยการใช้ - และเราสามารถแสดงผลตัวแปรได้ โดยใช้ #{}
ul
  - for (var i = 1; i <= 3; i++)
    li Item #{i}
จากตัวอย่างด้านบน จะถูกแปลงเป็นโค้ด HTML ได้แบบนี้ครับ
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
Jade ยังมีฟีเจอร์อื่นๆ อีกเยอะมากเลยนะครับ สามารถอ่านเพิ่มเติมได้ที่เว็บไซต์ jade-lang.com

สร้างโปรเจ็ค

หลักจากรู้จักกับ Jade และวิธีการใช้งานเบื้องต้นไปแล้ว คราวนี้มาลองใช้งานกับโปรเจ็คจริงๆ บ้าง เริ่มต้นด้วยการสร้างโปรเจ็คขึ้นมาก่อนเลยครับ
npm init
หรือใครจะใช้ package.json ตามนี้เลยก็ได้ครับ
{
    "name": "jade-demo",
    "version": "1.0.0",
    "description": "Sample Website built with Express.js + Jade",
    "dependencies": {
        "express": "^4.10.6",
        "jade": "^1.8.2"
    }
}
จากนั้นก็สั่ง install dependency ที่เราจะใช้ครับ นั่นก็คือ Express และ Jade
npm install
สร้างไฟล์ app.js ขึ้นมา โดยมีโค้ดดังนี้
var express = require('express');
var path = require('path');
var app = express();
// ประกาศให้ Express ใช้งาน View โดยให้ใช้โฟลเดอร์ views เป็นตัวเก็บไฟล์ jade.
app.set('views', path.join(__dirname, 'views'));
// ตั้งค่าให้ Express ใช้ View Engine ชื่อว่า Jade
app.set('view engine', 'jade');
// ฟังค์ชัน สำหรับรับ request จาก client และส่ง response กลับไปยัง client
// req คือ request และ res คือ response
// res.render('file') คือการให้ทำการ render ไฟล์ ที่อยู่ในโฟลเดอร์ views
function getHomePage(req, res) {
    res.render('index.jade');
}
// เมื่อ client เข้าถึงหน้า Home Page ของเว็บไซต์ http://localhost:5555/
// app.get(URL, getHomePage)
// URL - คือ PATH ของเว็บไซต์
// getHomePage คือ callback function ที่มี request และ response
app.get('/', getHomePage);
// start server ด้วย port 5555
var server = app.listen(5555, function() {
    console.log('Express.js is running...');
});
*** สังเกตว่าเราจะใช้ res.render(fileName) แทนการใช้ res.send(text)
จากโค้ดด้านบน เรายังไม่สามารถรันได้ เนื่องจากว่าเรายังไม่มีไฟล์ jade นะครับ ให้เราทำการสร้างโฟลเดอร์ views ขึ้นมา แล้วภายในโฟลเดอร์ views ก็ให้สร้างไฟล์สำหรับเขียน jade โดยใช้ชื่อว่า index.jade แล้วใส่โค้ดนี้ลงไปครับ
h1 Hello Jade
p Lorem ipsum dolor sit amet, 
  | consectetur adipiscing elit. 
  | Integer nec odio. Praesent libero. 
  | Sed cursus ante dapibus diam. Sed nisi.
h2 สูตรคูณ
ul
  - for (var i = 2; i <= 12; i++)
    - for (var j = 1; j <= 12; j++)
      li #{i} x #{j} = #{i * j}
    hr
จากนั้นก็ลองสั่ง start server แล้วลองเข้าหน้าเว็บไซต์ http://locahost:5555/ เพื่อดูผลลัพธ์ครับ
node app.js
เราก็จะได้ผลลัพธ์เหมือนกับการเขียน html แบบปกตินั่นแหละครับ เพียงแต่การใช้ jade มันจะสะดวกกว่าเท่านั้นเอง สุดท้ายแล้ว โปรเจ็คของเราก็จะมีหน้าตาเป็นแบบนี้ครับ
├── app.js
├── node_modules
│   ├── express
│   └── jade
├── package.json
└── views
    └── index.jade

บทสรุป

ก็น่าจะพอเห็นภาพกันคร่าวๆ แล้วนะครับว่า Jade ช่วยให้เราทำงานได้ง่ายขึ้นพอสมควรเลยทีเดียว ก่อนจบบทความ ผมขอสรุปขั้นตอนการใช้งาน Jade ให้อ่านกันอีกทีครับ

• 1. ติดตั้ง Express และ Jade
• 2. ตั้งค่าให้ Express รู้ว่าโฟลเดอร์ View คือโฟลเดอร์อะไร
• 3. ตั้งค่าให้ Express ใช้ View Engine เป็น Jade
• 4. ไฟล์ต้องลงท้ายด้วยนามสกุล .jade

แต่หากใครมองว่า Jade มันไม่เห็นจะอำนวยความสะดวกให้เรามากเท่าไรเลย ผมขอแนะนำให้อ่านวิธีการใช้งานฟีเจอร์เด่นๆ ของ Jade แบบละเอียดมากขึ้นได้ที่บทความ สอนวิธีใช้ Jade Template Engine ครับ