Code Conventions & Patterns
Rust-First Architecture
Logic quan trọng phải ở Rust server, không phải frontend.
| Server (Rust) | Frontend (Vue) | |
|---|---|---|
| Business logic | Yes | No |
| Validation | Yes | UI validation only |
| Database | Yes (sqlx) | No |
| Authentication | Yes (JWT) | Lưu/gửi token |
| AI processing | Yes | Gọi API |
| UI state | No | Yes (composables) |
| User input | No | Yes (forms, events) |
Quy tắc: Hỏi "Logic này có cần window không?" - Nếu không → đặt ở Rust.
Mobile-First Design
| Nguyên tắc | Giá trị |
|---|---|
| Font size tối thiểu | 16px body, 14px minimum |
| Tap targets | >= 44x44px (Apple HIG) |
| Layout | Single column, full-width |
| Navigation | Bottom tabs hoặc drawer |
| Spacing | 12-16px padding minimum |
| Design for | 375px width (iPhone SE) |
Composable Patterns
Singleton State
ts
// Module-level ref - share giữa tất cả components
const data = ref<Type[]>([])
export function useXxx() {
return { data, ... }
}Proto Mapping
Composable boundary chuyển proto types sang internal types:
ts
// Proto camelCase → internal snake_case
config.value = {
total_cash: Number(res.config.totalCash),
daily_burn_rate: Number(res.config.dailyBurnRate),
}After Mutation
Luôn reload list từ server sau mutation:
ts
async function createItem(...) {
await client.create(...)
await loadItems() // Reload!
}No Circular Imports
Composable A có thể import B, nhưng B không được import A.
Anti-patterns
- Đừng thêm complexity để fix complexity - Fix root cause, không patch symptom
- Đừng dùng workaround - Tìm cách đúng theo framework/library
- Minimal first - Default là không hiển thị/thêm, chỉ show khi cần
- Đừng duplicate logic - Nếu logic tồn tại ở đâu đó, gọi nó thay vì copy
Code Review Checklist
Tự hỏi trước khi commit:
- Logic này đã tồn tại ở đâu chưa? → Reuse thay vì duplicate
- Function có nhiều hơn 1 responsibility? → Split
- Đây có phải workaround? → Tìm cách đúng
- Nếu thay đổi logic gốc, bao nhiêu chỗ cần sửa? → Phải là 1
Tool Prioritization
| Ưu tiên | Tool | Dùng cho |
|---|---|---|
| 1 | LSP | goToDefinition, findReferences, hover |
| 2 | Grep | Pattern search khi không biết symbol |
| 3 | Read | Chỉ khi LSP/Grep không đủ |
| Task | Dùng | Không dùng |
|---|---|---|
| Package manager | bun | npm |
| Proto codegen | ./generate.sh | manual buf commands |
| Type check (FE) | vue-tsc --noEmit | - |
| Type check (BE) | cargo clippy | - |