Categories
Tech

Giới thiệu về Express Framework

 

1. Express framework

Express là 1 framework nodejs để tạo web application, bao gồm nhiều tính năng mạnh mẽ để xây dựng các ứng dụng web và mobile. Bản thân express framework khá tối giản, tuy nhiên các nhà phát triển đã tạo ra rất nhiều thư viện giúp giải quyết hầu hết các vấn đề trong lập trình web, bao gồm thư viện để làm việc với cookies, sessions, URL parameters, POST data, security headers, …

Vậy có nên tìm hiểu express hay không? Độ phổ biến của 1 web framework là quan trọng, bởi vì nó sẽ cho thấy framework có được duy trì hay không, có các đóng góp mới hay không, có nhiều thư viện hoặc hỗ trợ hay không, có cơ hội việc làm hay không. Dựa trên số lượng các công ty đang sử dụng Express, số người đang đóng góp, cung cấp hỗ trợ (miễn phí hoặc trả phí), thì câu trả lời là CÓ.

Cài đặt và xây dựng web application bằng express khá đơn giản, nhanh chóng, đòi hỏi ít kỹ năng vì chỉ sử dụng javascript.

2. Các thành phần chính

2.1 Route Handlers

Route Handlers quyết định ứng dụng sẽ đáp ứng các request từ phía client như thế nào. Route là 1 URI (hoặc đường dẫn) và method (POST, GET, PUT, …), mỗi route có thể có 1 hoặc nhiều functions, các function này sẽ được thực thi khi route khớp. Về mặt cơ bản, tất cả route đều có thể được định nghĩa trong file js chính của application, định nghĩa 1 route như sau:

app.METHOD(PATH, HANDLER)

Trong đó app là 1 thực thể của express, PATH là đường dẫn, METHOD là 1 HTTP request method viết thường, HANDLER là các function sẽ được thực thi khi route khớp. Để cụ thể hơn thì tham khảo các ví dụ bên dưới:

  • danh sách user, đường dẫn là {domain}/users, method = GET
app.get('/users', function (req, res) {
    // display user list here
});
  • chi tiết user, đường dẫn là {domain}/user/profile/:id, method = GET
app.get('/user/profile/:id', function (req, res) {
    var user_id = req.params.id;
    // display user profile here
});
  • tạo mới user, đường dẫn là {domain}/user/create, method = POST
app.post('/user/create', function (req, res) {
    var first_name = first_name:req.body.first_name;
    var last_name = last_name:req.body.last_name;
    // insert user record here
});
  • dùng nhiều handler function
app.get('/user/profile/:id', function (req, res, next) {
    // increase profile view count
    next();
}, function (req, res) {
    var user_id = req.params.id;
    // display user profile here
});
  • dùng nhiều method với 1 path
app.route('/book')
.get(function (req, res) {
    // Get a random book
})
.post(function (req, res) {
    // Add a book
})
.put(function (req, res) {
    // Update the book
})

Ngoài ra còn 1 số ví dụ về path khi tạo route như sau:

Route path: /users/:userId/books/:bookId
Request URL: {domain}/users/34/books/8989
req.params: { "userId": "34", "bookId": "8989" }

Route path: /flights/:from-:to
Request URL: {domain}/flights/LAX-SFO
req.params: { "from": "LAX", "to": "SFO" }

Route path: /user/:userId(\d+)
Request URL: {domain}/user/42
req.params: {"userId": "42"}

Khi làm việc thực tế với 1 trang web, nếu ta đặt tất cả route trong file js chính của application thì file này sẽ rất lớn, khó kiểm soát, dễ phát sinh lỗi. Express hỗ trợ Router, giúp chia sẻ các route vào các module khác nhau, sau đó sử dụng trong file js chính. Ví dụ, ta thiết kế các route làm việc với user vào router file tên là user.js, các route làm việc với department vào router file tên là department.js, …

Tạo file user.js như sau:

var express = require('express');
var router = express.Router();

router.get('/', (req, res) => {
    var users = getUserList();
    res.render('user/index', {"users": users, title: 'User List'});
});

router.get('/profile/:id', (req, res) => {
    var users = getUserById(req.params.id);
    res.render('user/profile', {"user": user, title: 'User Profile'});
});

module.exports = router

Sử dụng trong file js chính:

var usersRouter = require('./routes/user');
app.use('/user', usersRouter);

Từ bây giờ ta có thể truy cập {domain}/user để xem danh sách user hoặc {domain}/user/profile/{id} để xem user profile.

 

2.2 Middleware

Function Middleware là các function có thể truy xuất object request (req), object response (res), và function middleware kế tiếp trong chu kỳ request-response của ứng dụng. Các function Middleware có thể:
– thực thi code bất kỳ.
– thay đổi các object request response.
– kết thúc chu kỳ request-response.
– gọi function middleware kế tiếp.

Express application có thể sử dụng các loại middleware sau:

Application-level middleware, sử dụng app.use để khai báo middleware, function sẽ được thực thi mỗi khi application nhận được request bất kỳ.

app.use(function (req, res, next) {
    console.log('Time:', Date.now())
    next()
});

Router-level middleware, trở lại file user.js ở trên, chúng ta thêm vào function middleware sau, function sẽ được thực thi cho tất cả các request tới module user:

router.use(function (req, res, next) {
    console.log('Time:', Date.now())
    next()
});

Error-handling middleware, function middleware dạng này bắt buộc phải có 4 parameter.

app.use(function (err, req, res, next) {
    console.error(err.stack)
    res.status(500).send('Something broke!')
});

Third-party middleware, sử dụng các library đã được xây dựng sẵn, ví dụ sau đây mình họa việc cài đặt và sử dụng middleware cookie-parsing:

var cookieParser = require('cookie-parser');
app.use(cookieParser());

 

2.3 Template Engine

Template Engine cho phép ta sử dụng các file view template trong ứng dụng, tại thời điểm thực thi, template engine sẽ thay thế các biến trong file template bằng giá trị được truyền, và chuyển đổi template đó thành file HTML để trả về phía client. Các template engine được sử dụng phổ biến trong Express là Pug, Mustache, EJS, Jade, … bài viết này sử dụng Pug để làm ví dụ cho việc sử dụng template engine. Khai báo template engine để sử dụng như sau:

app.set('view engine', 'pug');

từ bây giờ, ta có thể tạo các file .pug và render thành HTML. Ví dụ sau render file index.pug và truyền các biến title, message:

app.get('/', function (req, res) {
    res.render('index', {title: 'Homepage', message: 'Hello Ceres!'})
});

 

3. Cài đặt

3.1 Cơ bản

Tạo 1 thư mục sẽ chứa web application sử dụng Express:

$ mkdir myapp
$ cd myapp

Sử dụng npm init để tạo package.json:

$ npm init

Cài đặt express:

$ npm install express --save

Tạo file app.js trong thư mục gốc:

const express = require('express');
const app = express();
const port = 3000;

app.get('/', (req, res) => {
    res.send('Hello World!');
});

app.listen(port, () => {
    console.log(`Listening at http://localhost:${port}`);
});

Khởi động server:

$ node app.js

Tại thời điểm này, ta đã có thể kiểm tra trang web với nodejs và express tại http://localhost:3000/

 

3.2 Express Generator

Ta có thể sử dụng application generator tool để xây dựng khung sườn cho ứng dụng nhanh chóng:

$ npx express-generator
$ express --view=pug myapp
$ cd myapp
$ npm install

Express Generator sẽ tự động tạo ra 1 khung sườn như sau:

khung sườn được tạo ra đã bao gồm Express Router, template engine Pug với layout cơ bản, ta có thể dùng chúng hoặc tạo mới tùy vào nhu cầu sử dụng.

 

4. Kết luận

Theo quan điểm cá nhân, Express framework và các thư viện hỗ trợ có khả năng xử lý mọi vấn đề như một framework PHP thông thường. Mặc dù PHP framework là dành riêng cho web nhưng Express cũng không thua kém. Khi so sánh với PHP, Nodejs và Express có nhiều ưu điểm về hiệu năng, ngôn ngữ thống nhất cho cả server và client, độ mềm dẻo, … Có nhược điểm như khó khăn trong việc xử lý file lớn, sử dụng nhiều CPU, các module cần phải kiểm thử kỹ khi sử dụng… Như vậy, Nodejs và Express vẫn có tương lai.

 

Link demo:

https://github.com/ththao/nodeweb