Realtime API trong 5 phút với FeathersJS

3170

Tác giả: Thành Nguyễn

Lời mở đầu

Sau một thời gian sử dụng Firebase và gặp phải một số hạn chế nhất định (xin phép không được đề cập) thì mình quyết định ra đi tìm đường cứu dự án.

Nhu cầu tại thời điểm đó của mình trước hết là phải đáp ứng được realtime data, dễ tiếp cận cho dev, khả năng custom cao để dễ phát triển thêm tính năng và đặc biệt nếu có hỗ trợ TypeScript thì đó sẽ là một điểm cộng.

Sau một thời gian tìm hiểu thì mình quyết định ra khơi với con tàu FeathersJS.

FeathersJS có gì hot?

Feathers key image

FeathersJS là một framework xây dựng theo hướng service-oriented. Các đặc trưng riêng của FeathersJS các bạn có thể đọc thêm tại đây. Dưới đây là một số cảm nhận của mình sau vài tuần vọc về nó:

  • Document tốt, giải thích kỹ và có liên kết rất rõ ràng
  • Open source nên việc custom lại framework là hoàn toàn có thể (nếu bạn đủ khả năng và thời gian)
  • Hỗ trợ thư viện cho cả frontend và backend để giúp việc kết nối dễ dàng hơn (bạn vẫn có thể kết nối bằng tay nếu muốn, có document cho việc này ngay tại trang chủ)
  • Hướng tiếp cận vấn đề theo service khá thú vị, vừa giúp dev tập trung giải quyết về business logic vừa hỗ trợ quá trình scale về sau (tách thành microservice chẳng hạn)
  • CÓ TYPESCRIPT
  • Có Command-Line Interface (CLI) để generate code (lười gõ như mình RẤT THÍCH điểm này)
  • Có nhiều plugins hay và hữu ích. Xem thêm tại đây

Mình tuy là dân frontend nhưng khi làm và phát triển ứng dụng với FeathersJS thấy khá thoải mái, không phải biết quá nhiều về cách tổ chức code, mô hình/kiến trúc, … của backend project vì đã được chuẩn hóa khi tạo project (tất nhiên mình vẫn phải nắm cấu trúc của dự án được generate ra nhưng tính ra vẫn dễ hơn việc bắt đầu từ số 0).

Một số thứ cần biết về FeathersJS

Services

Service Desk - Welcome Icons chart list email manage users chat message atlassian icon illustration

Như mình đã đề cập ở phía trên, FeathersJS xây dựng theo hướng service-oriented. Vậy nên services chính là trái tim của ứng dụng. Đặc điểm của services trong FeathersJS:

  • Là một object hoặc instance của một class
  • Protocol independent – tức không phụ thuộc vào phương thức bạn gọi service (có thể là REST API, websocket, gọi internal (dưới dạng Service.method())
  • Các methods của service bao gồm: find, get, create, update, patch và remove
  • Chủ yếu xử lý về truy suất và lưu trữ data xuống database

Khi tạo service thì bạn cần có ít nhất một trong những method được nêu. Ngoài các method kể trên thì FeathersJS không hỗ trợ method nào khác. Nếu bạn muốn thì bạn cần chuyển nhu cầu phát sinh thành một service mới hoặc một hook cho service hiện tại.

Lưu ý: Một số bạn có thể thắc mắc điểm khác nhau giữa patch và update. Mình xin giải thích thêm:

  • patch: cập nhật data bằng cách merge giữa data cũ và data mới
  • update: cập nhật data bằng cách replace data cũ bằng data mới
# Ví dụ để các bạn dễ hình dung hơn

User: {
  id: 69,
  first_name: 'Thanh',
  last_name: 'Nguyen',
  age: 17
}

User.patch(69, { age: 18 })
// => User: { id: 69, first_name: 'Thanh', last_name: 'Nguyen', age: 18 }

User.update(69, { age: 18})
// => User: { id: 69, age: 18 }

Để gọi một service khác trong service hiện tại thì bạn có thể dùng app.service(otherServiceName).

Chi tiết cách override các method của service các bạn tham khảo thêm tại đây.

Hooks

Teamwork ui manage task process workflow character work team illustration vector flat kit8

Hook là một phần quan trọng khác trong ứng dụng FeathersJS. Đặc trưng của hook

  • Xử lý dữ liệu trước, sau hoặc lỗi khi lưu trữ xuống database (validate dữ liệu, phân quyền user, ghi log hoặc trigger các tác vụ như gửi email, gửi tin nhắn, gửi notification, …)
  • Có 3 loại hooks: before, after và error. Hook có thể được gắn vào bất kì service nào hoặc gắn global vào app (chạy cho mọi service, thường là dạng ghi log)

Nếu các bạn đã từng làm hoặc tiếp xúc với Express.js thì chắc hẳn các bạn đã nghe qua khái niệm middleware. Hook chính là một middleware cho app hoặc service.

Nếu các bạn chưa từng nghe về middleware thì các bạn có thể hiểu nó là một bước trong dây chuyền xử lý. Dưới đây là một ví dụ để các bạn dễ hình dung hơn:

# Service của chúng ta sẽ là nấu cơm
# Quá trình nấu cơm như sau:
// đong gạo => vo gạo => nấu => mời cơm/ăn

# Các công việc "đong gạo", "vo gạo", "mời cơm/ăn" sẽ là hook, cụ thể:

- before hooks: đong gạo & vo gạo
- after hooks: mời cơm/ăn
- error hooks: xử lý khi cơm bị nhão hoặc bị cháy

# Nếu khai báo theo code thì chúng ta sẽ có dạng như sau:

let CookRiceService = { ... }

CookRiceService.hooks = {
  before: [measure(), clean()],
  after: [inviteOrEat()],
  error: [hideInTheCornerBecauseOfShame()]
}

Tất cả các hook sẽ chạy theo thứ tự như sau:

# Normal flow

app.beforeHook -> app.method -> service.beforeHook -> service.method -> service.afterHook -> app.afterHook

# Error flow, skip mọi bước sau bước sinh ra lỗi và chạy
service.errorHook -> app.errorHook

Để gọi service trong hooks thì bạn có 2 cách:

  • Gọi service hiện tại hook đang chạy: context.service
  • Gọi service khác: context.app.service(otherServiceName)
  • (context) sẽ được truyền vào khi khai báo hook với một service nhất định

Chi tiết các bạn đọc thêm tại đây

CLI

Cú pháp CLI của FeathersJS

CLI hay còn gọi là command-line interface là công cụ hỗ trợ chúng ta trong quá trình phát triển ứng dụng . FeathersJS CLI chủ yếu hỗ trợ chúng ta generate code để tiết kiệm thời gian gõ hoặc tránh các lỗi typing khi tạo bằng tay (sai tên file, tên biến, nhận thiếu/dư params, …).

Phần này chủ yếu hỗ trợ quá trình phát triển, không có gì để nói nên mình đi vào demo luôn nhé!

Demo

Preview demo

Demo | Github

Do lười không có thời gian nên demo lần này mình làm khá đơn giản, chủ yếu là để các bạn làm quen với FeathersJS. Nếu có dịp thì mình sẽ đi sâu hơn về nó.

Ứng dụng bao gồm các tính năng:

  • Đăng ký
  • Đăng nhập
  • Danh sách user được cập nhật realtime

Công nghệ sử dụng bao gồm:

  • Backend: FeathersJS (duh)
  • Frontend: VueJS qua CDN. Nếu là dự án thật thì các bạn nên chia làm 2 repo để dễ quản lý và phát triển hơn

Các thành phần liên quan tới FeathersJS:

  • Services: authentication(cái này generate sẵn, sử dụng email + password), users(chứa dữ liệu người dùng)
  • Hooks: validate-user (kiểm tra email + password), init-user (khởi tạo một số dữ liệu thêm), send-email-verification(gửi email sau khi user đăng ký, cái này để vậy thôi chứ chưa có thời gian implement, chủ yếu là demo after hook)

Các bước thực hiện:

# Tạo thư mục project
mkdir vct-11-feathersjs

# Generate khung project bằng CLI
feathers generate app

# Tạo hook bằng CLI
feathers generate hook

Đánh giá

Hiện tại mình đang sử dụng FeathersJS (cùng TypeScript) để phát triển một số ứng dụng trong công ty. Tuy có gặp một số khó khăn trong lúc phát triển nhưng nhìn chung so với việc sử dụng Firebase (Spark Plan) thì mình thấy FeathersJS ổn hơn và “tự do” hơn rất nhiều (đặc biệt là việc query dữ liệu và các hooks khi xử lý data). Và nếu thích thì các bạn vẫn có thể sử dụng Firebase ngay trong FeathersJS mà không gặp phải một vấn đề nào cả.

Dưới đây là một số đánh giá chung của mình:

Ưu điểm:

  • Service-oriented
  • Hỗ trợ TypeScript
  • CLI, documents, libraries, plugins hỗ trợ hữu ích. Cho phép customize nhiều thứ mặc dù là một framework
  • Dễ dùng, dễ tiếp cận

Nhược điểm:

  • Còn khá mới
  • Document còn một số chỗ thiếu sót (do mới upgrade từ v3 lên v4)
  • Cần cân nhắc khi xử lý vấn đề, khi nào nên tạo services và khi nào nên tạo hooks
  • Typing cho TypeScript chưa tốt nên sẽ phát sinh một vài vấn đề trong lúc customize service
  • Vẫn là monolithic application tuy nhiên có thể phát triển theo hướng microservice với các plugins hỗ trợ

Hi vọng các bạn sẽ có cái nhìn rõ hơn về FeathersJS và có thể áp dụng nó vào những project trong tương lai. Nếu có bất kì thắc mắc, góp ý nào thì cứ comment phía dưới.

TopDev via Devnow