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

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

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

สร้าง List

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

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

โค้ดด้านบน ได้ผลลัพธ์เหมือนกัน คือ h3 จะอยู่ภายใน div

เราสามารถแทรกโค้ดลงไปได้ด้วยนะครับ โดยการใช้ - และเราสามารถแสดงผลตัวแปรได้ โดยใช้ #{}

จากตัวอย่างด้านบน จะถูกแปลงเป็นโค้ด HTML ได้แบบนี้ครับ

Jade ยังมีฟีเจอร์อื่นๆ อีกเยอะมากเลยนะครับ สามารถอ่านเพิ่มเติมได้ที่เว็บไซต์ jade-lang.com

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

หลักจากรู้จักกับ Jade และวิธีการใช้งานเบื้องต้นไปแล้ว คราวนี้มาลองใช้งานกับโปรเจ็คจริงๆ บ้าง เริ่มต้นด้วยการสร้างโปรเจ็คขึ้นมาก่อนเลยครับ

หรือใครจะใช้ package.json ตามนี้เลยก็ได้ครับ

จากนั้นก็สั่ง install dependency ที่เราจะใช้ครับ นั่นก็คือ Express และ Jade

สร้างไฟล์ app.js ขึ้นมา โดยมีโค้ดดังนี้

*** สังเกตว่าเราจะใช้ res.render(fileName) แทนการใช้ res.send(text)

จากโค้ดด้านบน เรายังไม่สามารถรันได้ เนื่องจากว่าเรายังไม่มีไฟล์ jade นะครับ ให้เราทำการสร้างโฟลเดอร์ views ขึ้นมา แล้วภายในโฟลเดอร์ views ก็ให้สร้างไฟล์สำหรับเขียน jade โดยใช้ชื่อว่า index.jade แล้วใส่โค้ดนี้ลงไปครับ

จากนั้นก็ลองสั่ง start server แล้วลองเข้าหน้าเว็บไซต์ http://locahost:5555/ เพื่อดูผลลัพธ์ครับ

เราก็จะได้ผลลัพธ์เหมือนกับการเขียน html แบบปกตินั่นแหละครับ เพียงแต่การใช้ jade มันจะสะดวกกว่าเท่านั้นเอง สุดท้ายแล้ว โปรเจ็คของเราก็จะมีหน้าตาเป็นแบบนี้ครับ

บทสรุป

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

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

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

(Visited 11,002 times, 8 visits today)

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

  1. ผมชอบ ejs มากกว่า jade นี่แค่วรรคผิดไปนิดนึงก็ไม่ได้ จริงๆ ใช้ PHPStorm ก็ทำได้เหมือน jade นะ

    พิมพ์ div.abc#def แล้วก็กด tab จบปิ๊ง ได้ <div class="abc" id="def"></div> แล้ว

  2. ถึงกลับ กุมขมับ

  3. ถ้าจะเขียนด้วย jade ก็แทบจะลืม tag html ที่เขียนแบบเดิมๆ รู้สึกแปลกๆ แต่มันก็ช่วยประหยัดเวลาได้สุดยอดจริงๆ 555

    น่าจะมีผลต่อการจับ tag ของพวก Tool Editor แต่ก็ไม่ไช่สิ่งที่ต้องกังวล เพราะ Jade จัดการ syntax อยู่หมัด

  4. โอ้ว ถ้าใช้ Jade คล่อง ดูท่าทางจะดีมากเลยนะเนี่ยย ขอบคุณมากๆ คับ สำหรับบทความ

Leave a Reply