ลองเขียน Jade พัฒนาส่วน View ของ Express Web Framework

July 16, 2015 2:49 am Node.js

ช่วงนี้อยู่ในช่วงเรียนภาษาใหม่ๆ ผมเลือกหยิบ Node.js มาลองเขียนเล่นๆดู (หลังจากเขียน php อยู่นาน) เลยได้ทดลองเขียนเว็บด้วยภาษา Node.js โดยใช้ Framework ที่ชื่อ Express ซึ่งเป็น Framework ยอดนิยมในการพัฒนา Web Application ด้วยภาษา Node.js ครับ โดยตัว Express นั้นจะมาพร้อมกับ Package มากมาย หนึ่งในนั้นก็คือ Jade ครับ

Jade เป็น Template Engine ที่ใช้จัดการภาษา HTML ทำงานบน Node.js ครับ ทำให้การเขียนเว็บในส่วนของ View เป็นระเบียบและง่ายขึ้นครับ (ใครที่เคยเขียน python มาก่อนได้เปรียบมากๆครับ เพราะ syntax ในการเขียนนั้น คล้าย python เลย) การจัดการโค๊ดนั้นทำได้ง่ายครับ ไม่ต้องกังวลในเรื่องของการปิด Tag ต่างๆของ HTML การเขียน HTML นั้นถูกหลักหรือไม่ เพราะ Jade จะช่วยเราในส่วนนี้ครับ

แต่เรื่องมันก็ไม่ได้จบแบบง่ายๆไปซะหมดครับ เราต้องทำความรู้จักกับมัน และต้องทำความคุ้นเคยกับมันสักระยะนึงก่อน (ผมเล่นครั้งแรกก็งงๆ พอใช้ไปสักพัก มันง่ายกว่าที่คิดแฮะ)

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

ผมจะเริ่มเขียนในส่วนของ Jade ให้ดูก่อนนะครับ ตามด้านล่างนี้เลย

Jade

doctype html
html(lang="en")
  head
    title ทดสอบการทำงานของ Jade
  body
    h1 หัวข้อเรื่องง่ายๆ
    #container
      p.
        เราจะใช้งาน Jade ในการออกแบบหน้า View
        เพื่อให้สามารถแก้ไขโค๊ดได้โดยง่าย

ผลลัพธ์ที่ผ่านการประมวลผลเป็น HTML แล้ว จะออกมาประมาณนี้ครับ

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>ทดสอบการทำงานของ Jade</title>
  </head>
  <body>
    <h1>หัวข้อเรื่องง่ายๆ</h1>
    <div id="container">
      <p>เราจะใช้งาน Jade ในการออกแบบหน้า View
        เพื่อให้สามารถแก้ไขโค๊ดได้โดยง่าย</p>
    </div>
  </body>
</html>

จะเห็นได้ว่า คุณไม่จำเป็นที่จะต้องกังวลในเรื่องของ Tag เปิดหรือปิดเลย แค่คุณเว้นวรรคให้ถูกต้อง ทำให้โค๊ดนั้นดูง่าย และที่สำคัญคือ คุณไม่ต้องกังวลเรื่องของ Tag เปิดหรือปิดของ HTML เลย เพราะตัว Jade จะจัดการให้

สามารถดูข้อมูลเพิ่มเติมได้นะครับที่เว็บของ Jade ครับ http://jade-lang.com/