Skip to content
youhoc
  • Pages
    • Home
    • icon picker
      Modern App Guidelines
    • Linux
      • Day 1: Linux Distributions & Navigation
      • Day 2: User Management
      • Day 3: File Permission & Ownership
      • Day 4: Package Management
      • Day 5: Services Management
    • Javascript
      • JS The Weird Part
        • Execution Context
        • Types & Operators
        • Objects & Functions
        • Error Handling & Strict Mode
        • Typescript, ES6, Tra
      • Modern JS
        • JS in the Browser
        • Data Storage JSON
        • Modern JS
        • Advanced Objects & Methods
        • Webpack & Babel
        • Async
      • jQuery
        • In-depth Analysis of jQuery
      • React-ready JS
        • Arrow Function
        • Template Literals
        • Logical AND, OR, Ternary, Nullish Operators
        • Destructuring & Rest Operator
        • Array Method
        • Immutability and Spread Operator
        • Promises, Async/Await, Callback
    • PHP
      • gruntJS
      • composer
      • MySQL
    • Docker
      • Container Basics
      • Container Networking
      • Container Image
      • Container Volume & Persistent Data
      • Dockerfile
      • Docker Compose
      • Docker Registry
    • Node.js
      • 1. Installing & Exploring
      • 2. Core Modules
      • 3. Get User Input
      • File System & Input Arguments
      • 5. Express Web Server
      • 6. Deploy to Heroku & Github
      • Authentication
      • 7. Databases
      • 8. Rest API
    • ReactJS
      • React from Andrew
        • Summary from Next
        • 1. Basics
        • 2. React Components
        • 3. Webpack
        • 4. Styling with SCSS
        • 5. React Router
        • 6. React Hook
      • Modern React From The Beginning
        • Intro to JSX
        • Vite Build Tools
        • Basic Component Creation
        • Component State
        • Props & Component Composition
        • useState with Inputs & Form Submission
        • useEffect, useRef & Local Storage
        • Async / Await and Http Request in React
        • React Router: Declarative Mode
        • ContextAPI
        • React Router: Framework Mode
          • File-routing & HTML Layouts
          • Server-side Data Query
          • Links & Navigation
          • Loaders
    • Typescript
      • Type User vs UserProp
    • Payload CMS
youhoc
/
Modern App Guidelines

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
⁠
⁠
App Summary
⁠
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

⁠
294791932_10209125409128944_6418240998963376639_n.jpg
⁠
⁠
⁠
279630665_10208937831759627_2844676557685533424_n.jpg
⁠
⁠

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 ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.