Devahoy - Node Template Engine

วันนี้ขอนำเสนอบทความสั้นๆสำหรับการเลือก Template Engine บน Node.js หากท่านยัง render ไฟล์ html ธรรมดาอยู่แล้วละก็ เปลี่ยนมาใช้ Template Engine กันดีกว่าครับ บทความนี้ assume ว่าผู้อ่านมีความรู้พื้นฐาน Node.js รวมถึง Express.js เบื้องต้นอยู่แล้ว เพราะฉะนั้นตรงส่วนไหนไม่เข้าใจ ก็ไปอ่านเพิ่มเติมเอานะครับ ขอโฟกัสที่ตัว Template Engine อย่างเดียว

Setup Project

ตัวอย่างจะทำการสร้างโปรเจ็คขึ้นมาแบบธรรมดา โดยมีแค่ไฟล์ package.json, app.js และโฟลเดอร์ views โดยภายในโฟลเดอร์นี้ก็จะเป็นไฟล์ template นามสกุลต่างๆ

ไฟล์ package.json

{
  "name": "simple-template-engines",
  "version": "0.0.1",
  "dependencies": {
    "ejs": "^2.3.3",
    "express": "^4.13.1",
    "express-handlebars": "^2.0.1",
    "jade": "^1.11.0",
    "swig": "^1.4.2"
  }
}

ไฟล์ app.js

var express = require('express')
var path = require('path')

var app = express()

app.set('views', path.join(__dirname, 'views'))
// Setup template engines go here.

app.get('/', function (req, res) {
  // code goes here
})

app.listen(8000, function () {
  console.log('App running on port 8000')
})

Jade Template

npm install jade

การใช้งานก็แค่ set view engine เป็น jade

ไฟล์ app.js

app.set('view engine', 'jade')

app.get('/jade', function (req, res) {
  res.render('index', {
    title: 'This is title of Jade Template',
    message: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit',
    names: ['John Doe', 'Jane Doe', 'Jane Dane']
  })
})

สร้างไฟล์ index.jade ในโฟลเดอร์ views


h1 #{title}
p #{message}
ul
    each name in names
        li= name

เมื่อรัน Server ก็จะถูกคอมไฟล์เป็นไฟล์ html แบบนี้

<h1>This is title of Jade Template</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
<ul>
  <li>John Doe</li>
  <li>Jane Doe</li>
  <li>Jane Dane</li>
</ul>

EJS Template

npm install ejs

การใช้งานคล้ายกับ Jade ก็แค่ set view engine เป็น ejs

ไฟล์ app.js

app.set('view engine', 'ejs')

app.get('/ejs', function (req, res) {
  res.render('index', {
    title: 'This is title of EJS Template',
    message: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit',
    names: ['John Doe', 'Jane Doe', 'Jane Dane']
  })
})

และสร้างไฟล์ index.ejs ขึ้นมาสำหรับเอาไว้ render

<h1><%= title %></h1>
<p><%= message %></p>
<ul>
    <% names.forEach(function(name) { %>
        <li><%= name %></li>
    <% }); %>
</ul>

เมื่อรัน Server ก็จะถูกคอมไฟล์เป็นไฟล์ html แบบเดียวกับ Jade แบบนี้

<h1>This is title of EJS Template</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
<ul>
  <li>John Doe</li>
  <li>Jane Doe</li>
  <li>Jane Dane</li>
</ul>

Swig Template

npm install swig

Swig จะต่างจาก Jade และ EJS เล็กน้อย คือไฟล์ extension จะเป็น html ปกติ โดยเรา้ต้องการให้ไฟล์ html ไหนทำการ render ด้วย Swig ก็จะใช้คำสั่ง swig.renderFile ฉะนั้น view engine ก็เซตเป็น html แบบนี้

var swig = require('swig')

app.engine('html', swig.renderFile)
app.set('view engine', 'html')

app.get('/swig', function (req, res) {
  res.render('index', {
    title: 'This is title of Swig Template',
    message: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit',
    names: ['John Doe', 'Jane Doe', 'Jane Dane']
  })
})

ไฟล์ index.html สำหรับ Swig Template

<h1>{{ title }}</h1>
<p>{{ message }}</p>
<ul>
  {% for name in names %}
  <li>{{ name }}</li>
  {% endfor %}
</ul>

เมื่อรัน Server ก็จะถูกคอมไฟล์เป็นไฟล์ html แบบเดียวกับ Jade และ EJS แบบนี้

<h1>This is title of Swig Template</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
<ul>
  <li>John Doe</li>
  <li>Jane Doe</li>
  <li>Jane Dane</li>
</ul>

Handlebars

npm install express-handlebars

Handlebars จะต่างจาก View Engine อื่นเล็กน้อย โดยการใช้ module express-handlebars จากนั้น ก็ใช้ ตัว module กำหนดว่าจะใช้ไฟล์ extension เป็นชื่ออะไร อย่าง Handlebars ก็จะใช้ hbs ฉะนั้นก็เลยตั้งค่าเป็นแบบนี้

var handlebars = require('express-handlebars')

app.engine('hbs', handlebars({ extname: 'hbs' }))

app.get('/hbs', function (req, res) {
  res.render('index', {
    title: 'This is title of Handlebars Template',
    message: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit',
    names: ['John Doe', 'Jane Doe', 'Jane Dane']
  })
})

และสร้างไฟล์ index.hbs ขึ้นมาแบบนี้

<h1>{{ title }}</h1>
<p>{{ message }}</p>
<ul>
  {{#each names }}
  <li>{{ this }}</li>
  {{/each}}
</ul>

ผลลัพธ์ก็จะได้เช่นเดียวกันกับ View Engine อื่นๆ

<h1>This is title of Handlebars Template</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
<ul>
  <li>John Doe</li>
  <li>Jane Doe</li>
  <li>Jane Dane</li>
</ul>

สรุป

บทความนี้เป็นแค่ตัวอย่างการ Setup และใช้งาน View Template Engine เบื้องต้นเท่านั้น รายละเอียด และ Features อื่นๆ ที่แต่ละ View Engine มีก็ต้องไปลองอ่านเพิ่มเติมกันเอาเองครับ ส่วนนี้ผมทำไว้เผื่อตัวเองด้วย บางทีก็ลืมๆว่า ต้องกำหนดอะไรบ้าง เหมือนกัน :)

Setup Project

Jade Template

EJS Template

Swig Template

Handlebars

สรุป

References