20/07/2019, 09:53

Dùng thử một số view engine phổ biến trong project Nodejs

Viewlập engine trong Node.js là gì? Một cách dễ hiểu nhất thì view engine trong Node.js cũng giống như Blade trong Laravel vậy. Vậy định nghĩa một cách cơ bản nhất thì view engine chính là công cụ giúp chúng ta viết code HTML một cách ngắn gọn và đơn giản hơn cách thông thường đồng ...

Dùng thử một số view engine phổ biến trong project Nodejs

Viewlập engine trong Node.js là gì?

Một cách dễ hiểu nhất thì view engine trong Node.js cũng giống như Blade trong Laravel vậy. Vậy định nghĩa một cách cơ bản nhất thì view engine chính là công cụ giúp chúng ta viết code HTML một cách ngắn gọn và đơn giản hơn cách thông thường đồng thời nó có thể sử dụng lại. Ngoài ra nó có thể đưa dữ liệu vào từ phía server và render ra đoạn HTML cuối cùng. Một số package view engine thường gặp trong project NodeJS/Express có thể kể ra như sau:

  • EJS
  • Pug (Trước đây là Jade)
  • Handlebars
  • Haml.js
  • Nunjucks

Hôm nay mình sẽ dùng thử một vài template trên xem cái nào dễ dùng hơn nhé. Bắt đầu thôi…

EJS

Đầu tiên để tạo demo cho bài viết này ta cần phải tạo một project base với ExpressJS nhé. Để tạo nhanh nhất mình dùng express-generator.

Khi chạy xong lệnh tạo project với view engine là ejs ta có project với cấu trúc thư mục như sau:

Như vậy với câu lệnh trên thì ta đã tạo được 1 project Express sử dụng sẵn view engine EJS. View engine này được setup trong file app.js:

  Từ phát triển tới triển khai phần 1: Backend, NodeJS, API


Tiếp theo để minh họa cách sử dụng mình sẽ thực hiện việc bóc tách layout cơ bản của trang web và render dữ liệu từ server. Đầu tiên ta thử việc render ra dữ liệu từ server.

Chỉnh sửa file routes/index.js:

File views/index.ejs:

Như vậy ta đã thực hiện truyền dữ liệu từ server sang view và render ra. Ngoài ra ta có thể tách các phần header, footer bằng cách thêm các file header.ejs, footer.ejs sau đó include vào như sau:

Pug

Pug – tên trước đây là Jade, cũng là 1 view engine khá phổ biến trong các project Nodejs. Để sử dụng nó làm view engine ta setup như sau:

Với ví dụ như trên ta tạo các file pug với nội dung như sau:

Như vậy với cùng một nội dung ta thấy cách viết của Pug rất rõ ràng, ngắn gọn và dễ hiểu. Pug có cách hoạt động gần giống như ngôn ngữ lập trình Python tức là dùng indent hoặc khoảng trắng. Ta không cần quan tâm thẻ đóng/mở vì Pug sẽ thay bạn làm điều đó.

  Tạo API server trên Node.js với Express và MongoDB (part 2)

Hbs (Handlebars.js)

Để sử dụng template này ta set view engine thành hbs. Đồng thời ta phải register các block (trong handlebarjs gọi là partial) như sau:

Với bài toán trên ta cũng sẽ tạo các file hbs có nội dung như sau:

Kết luận

Như vậy mình vừa thử sử dụng một vài view engine khá phổ biến trong project Nodejs. Và nếu lựa chọn để phát triển sản phẩm thì mình chọn Pug vì nó rất đơn giản và dễ hiểu, còn bạn bạn chọn view engine nào cho project Nodejs?

TechTalk via viblo.asia

  Top 3 website cung cấp tài nguyên thiết kế dự đoán sẽ là xu hướng của năm 2019
  Trình duyệt Tor chính thức có mặt trên kho ứng dụng Google Play: duyệt web ẩn danh, riêng tư và bảo mật
0