Skip to content

youhoc

Pages
- Home
- Modern App Guidelines
- Node.js
  Express.js
  Express Web Server
  EJS Layouts: Tổ chức giao diện gọn gàng hơn trong Express.js
  Authentication Trong REST API Với JWT
  File Upload with Multer, Express.js
  Server-Side Validation Với Express-Validator
  Sequelize
  Sequelize Transactions: Đảm Bảo Tính Toàn Vẹn Dữ Liệu
  7 loại Data Types phổ biến Trong Sequelize
  Phân Trang (Pagination) Trong Express.js Với Sequelize/MySQL
  Hướng dẫn Cơ bản về Rest API
  Node-cron Simple to Complex Setup with PM2
  Hono
  Hono Response
  Error Handling
  Trong Hono, tại sao không nên tách Route và Controller như MVC truyền thống?
- Cloudflare
  Minimal Cloudflare Worker + Hono + Drizzle ORM (part 1)
  Minimal Cloudflare Worker + Hono + Drizzle ORM (part 2)
  Minimal Hono App with JSX in both back-end and front-end
  Minimal Hono App built with Vite, "real" React and React Router v7
  Kết nối với Database: Giữ Connection hay Pooling chờ sẵn?
- Typescript
  TypeScript cơ bản (phần 1)
  TypeScript cơ bản (phần 2)
  require vs import
- React
  React-ready Javascript Refresher
  Arrow Function
  Template Literals
  Logical AND, OR, Ternary, Nullish Operators
  Destructuring & Rest Operator
  Array Method
  Immutability and Spread Operator
  Promises, Async/Await, Callback
  Hiểu React từ gốc rễ qua biên dịch từ Vanilla JS
  Hiểu React Component cơ bản với Rating App
  Thay đổi giao diện với State và useState Hook
  Thay đổi giao diện với State và useState Hook (phần 2)
  Thay đổi giao diện với State và useState Hook (phần 3)
  Controlled vs Uncontrolled Input trong React
  useState vs URL-driven UI
  useEffect: Hiểu đúng để dùng đúng
- Next.js
  Học Next.js bây giờ có muộn không?
  9 điều cơ bản đầu tiên khi đến với Next.js
  Làm quen với Fetch dữ liệu, Loading, Error & Not Found trong Next
  Tự xây dựng Image Picker có preview trong React
  Xử lý Form Submit trong Next.js — Từ cơ bản đến production-ready
  Upload ảnh lên Cloudinary trong Next.js: Tối giản, đủ dùng
  Upload ảnh lên Cloudinary trong Next.js: Phiên bản nâng cao có Progress Bar
  Routing nâng cao trong Next.js qua ví dụ trang News Archive
  Metadata trong Next.js: Từ cơ bản đến OG Image động theo tiêu đề bài viết
  Thực hành Intercepting Routes trong Next.js qua ví dụ Photo Gallery
  Optimistic Update với Like Button: Đẹp trước, lưu sau, lỗi thì hoàn tác, làm gì căng?
  Next.js Caching: Hướng dẫn thực chiến cho production
- htmx
  HTMx Form: Request, Response, Swap
- Linux
  Day 1: Linux Distributions & Navigation
  Day 2: User Management
  Day 3: File Permission & Ownership
  Day 4: Package Management
- Payload CMS

Modern App Guidelines

Những điều cần lưu ý khi phát triển một ứng dụng hiện đại.

Các thành phần của app

Định nghĩa

the requests received by the server,

the routes that handle the requests and trigger the execution of their controller handlers,

the middlewares that can control the request flow and the request before moving forward,

the controllers that execute code once a route has been reached,

the services that are used to build custom logic reusable by controllers,

the models that are a representation of the content data structure,

the responses sent to the application that sent the request,

and the webhooks that are used to notify other applications of events that occured.

Routes

Controller

Thin, ít logic:

Services

Fat, nhiều logic:

Model

Helper

Định nghĩa và Nguyên tắc

Pure function: no side effects

Reusability: Dùng lại cho nhiều Models, Controller

Testability: Test riêng từng helper

Maintainability: Dễ tìm và sửa

Single Responsibility / No dependencies: Helpers không phụ thuộc Model/Database

Cấu trúc file Helper trong App

Ví dụ

Ví dụ, một ứng dụng tải lên và chia sẻ ảnh miễn phí như

Hires.vn⁠

⁠

1

View (Template)

Frontend - Presentation Layer

Hiển thị giao diện cho user

Data từ Controller

HTML rendered

upload.hbs

photo-detail.hbs

home.hbs

2

Client-side JS

Frontend - Interaction Layer

Xử lý tương tác user, validate form, AJAX

User events (click, input)

HTTP requests, DOM updates

upload-validator.js

upload-form.js

3

Route

Backend - Entry Point

Map URL → Controller + Middleware

HTTP Request (URL + method)

Gọi middleware chain → controller

GET /upload

POST /api/photos/upload

4

Middleware

Backend - Pre-processing Layer

Xử lý request trước controller (auth, validate, parse)

Request object

Modified request hoặc Response (nếu fail)

authMiddleware

uploadMiddleware

validationMiddleware

5

Controller

Backend - HTTP Handler Layer

Nhận HTTP request, gọi Service/Model, trả HTTP response

HTTP Request (req, res)

HTTP Response (JSON/HTML)

photoController.upload()

photoController.getPhoto()

6

Service

Backend - Business Logic Layer

Xử lý business logic phức tạp, orchestration

Plain JS data

Plain JS data/object

photoService.upload()

photoService.processImage()

7

Helper

Backend - Utility Layer

Pure functions, utilities dùng chung

Plain data

Transformed data

ValidationHelper

IdHelper

ImageHelper

8

Model

Backend - Data Access Layer

Định nghĩa cấu trúc dữ liệu + CRUD operations

Plain JS data

Database results

Photo.create()

Photo.findById()

9

Database

Persistence Layer

Lưu trữ dữ liệu

SQL queries

Data rows

SQLite tables: photos, users, tags

There are no rows in this table

⁠

Modules Relationship

Modules Relationship

⁠

Bonus: Validation Modules

Q: Validation nên ở đâu? Model, Middleware hay Service?

A: Câu hỏi rất hay! Đây là điểm nhiều người nhầm lẫn. Câu trả lời là CẢ 3 ĐỀU CÓ, nhưng mỗi nơi validate MỤC ĐÍCH KHÁC NHAU!

So sánh 3 tầng Validation ở từng modules

Middleware: Route → Controller

HTTP/Request validation

Request format, required fields, basic types

req.file có tồn tại? req.body.title có phải string? File size < 10MB?

FAIL FAST (trả lỗi ngay, không chạy tiếp)

Service: Controller → Model

Business rules validation

User permissions, business rules, context

User tier có được upload video? Title có trùng không? Content có an toàn?

Có thể gọi database để check

Throw error với statusCode

Model: Trước INSERT/UPDATE

Data integrity validation

Schema validation, data types, constraints

width phải > 0? license phải thuộc enum? user_id đúng type?

LAST LINE OF DEFENSE

Luồng dữ liệu

USE CASE 1: Hiển thị trang Upload

⁠

USE CASE 2: User Submit Form Upload

⁠

USE CASE 3: Xem chi tiết ảnh

Chi tiết:

Tóm tắt

Cấu trúc thư mục của App

Luồng dữ liệu chính:

Nguyên tắc vàng:

View: Chỉ hiển thị, không logic

Client JS: UX logic, không tin cậy về security

Route: Chỉ routing, không business logic

Middleware: Pre-processing, có thể reject request

Controller: Thin - chỉ điều phối

Service: Fat - chứa business logic

Helper: Pure functions, stateless

Model: Data + CRUD, không biết business context

Database: Chỉ lưu trữ

Những quy tắc để quản lý app development

⁠

⁠

⁠

⁠

⁠

⁠

Twitter Tech Tree

Security Tips

Expose API data at client-side

⁠

img 5.jpg

⁠

⁠

Want to print your doc?
This is not the way.

Try clicking the ··· in the right corner or using a keyboard shortcut (

CtrlP

) instead.