10 Mental Models Cực Mạnh Mà Senior/Staff Engineer Thường Dùng
Những mental model (mô hình tư duy) dưới đây giúp level up từ coder → engineer rất nhanh. Đây là cách Senior/Staff Engineer suy nghĩ khi code, debug và design system. 🚀
📋 Tổng Quan 10 Mental Models
┌─────────────────────────────────────────────────────────────┐
│ SENIOR ENGINEER MENTAL MODELS │
├─────────────────────────────────────────────────────────────┤
│ │
│ 1. Problem → Model → Code 6. System Thinking │
│ 2. Programming Pyramid 7. Async Thinking │
│ 3. Data Flow Thinking 8. Performance Thinking │
│ 4. Code Reading Framework 9. Simplification Thinking │
│ 5. Debugging Framework 10. Engineering Loop │
│ │
└─────────────────────────────────────────────────────────────┘
1️⃣ Problem → Model → Code (Core Thinking)
Senior dev không nhảy vào code ngay, họ model vấn đề trước.
┌─────────────────────────────────────────┐
│ PROBLEM → MODEL → CODE │
├─────────────────────────────────────────┤
│ │
│ PROBLEM │
│ │ │
│ ▼ │
│ UNDERSTAND │
│ (input / output / constraints) │
│ │ │
│ ▼ │
│ MODEL │
│ (diagram / flow / state) │
│ │ │
│ ▼ │
│ ALGORITHM │
│ (logic solution) │
│ │ │
│ ▼ │
│ CODE │
│ │ │
│ ▼ │
│ TEST │
│ │
└─────────────────────────────────────────┘
| Level | Approach |
|---|---|
| Junior | Code trước |
| Senior | Model trước |
2️⃣ Programming Thinking Pyramid
┌─────────────────────────────────────────────────────────────┐
│ PROGRAMMING THINKING PYRAMID │
├─────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────┐ │
│ │BUSINESS │ ◄── Why build this? │
│ └────┬────┘ │
│ │ │
│ ┌────▼────┐ │
│ │ SYSTEM │ ◄── Architecture design │
│ └────┬────┘ │
│ │ │
│ ┌────▼────┐ │
│ │ LOGIC │ ◄── Algorithm / flow │
│ └────┬────┘ │
│ │ │
│ ┌────▼────┐ │
│ │ CODE │ ◄── Syntax / framework │
│ └─────────┘ │
│ │
└─────────────────────────────────────────────────────────────┘
💡 Senior dev dành nhiều thời gian ở 3 tầng trên.
| Tầng | Câu hỏi |
|---|---|
| Business | Tại sao cần build feature này? |
| System | Architecture nào phù hợp? |
| Logic | Algorithm nào tối ưu? |
| Code | Syntax/framework nào implement nhanh? |
3️⃣ Data Flow Thinking (Rất quan trọng)
Senior dev luôn hỏi: Data đi từ đâu → tới đâu?
┌─────────────────────────────────────────────────────────────┐
│ DATA FLOW THINKING │
├─────────────────────────────────────────────────────────────┤
│ │
│ USER ACTION │
│ │ │
│ ▼ │
│ FRONTEND ────────────────┐ │
│ │ │ │
│ ▼ │ │
│ API │ │
│ │ │ Response │
│ ▼ │ Flow │
│ BACKEND │ │
│ │ │ │
│ ▼ │ │
│ DATABASE │ │
│ │ │ │
│ ▼ │ │
│ RESPONSE ◄───────────────┘ │
│ │ │
│ ▼ │
│ UI UPDATE │
│ │
└─────────────────────────────────────────────────────────────┘
💡 Nếu hiểu data flow → debug cực nhanh
4️⃣ Code Reading Framework
Senior dev đọc codebase lớn bằng flow này:
┌─────────────────────────────────────────────────────────────┐
│ CODE READING FRAMEWORK │
├─────────────────────────────────────────────────────────────┤
│ │
│ General Flow: Angular Example: │
│ ┌─────────────────┐ ┌─────────────────┐ │
│ │ ENTRY POINT │ │ Component │ │
│ └────────┬────────┘ └────────┬────────┘ │
│ │ │ │
│ ▼ ▼ │
│ ┌─────────────────┐ ┌─────────────────┐ │
│ │ MAIN FLOW │ │ Service │ │
│ └────────┬────────┘ └────────┬────────┘ │
│ │ │ │
│ ▼ ▼ │
│ ┌─────────────────┐ ┌─────────────────┐ │
│ │ DATA STRUCTURE │ │ HTTP │ │
│ └────────┬────────┘ └────────┬────────┘ │
│ │ │ │
│ ▼ ▼ │
│ ┌─────────────────┐ ┌─────────────────┐ │
│ │ BUSINESS LOGIC │ │ Backend │ │
│ └────────┬────────┘ └─────────────────┘ │
│ │ │
│ ▼ │
│ ┌─────────────────┐ │
│ │ SIDE EFFECT │ │
│ │ (API/DB/IO) │ │
│ └─────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────┘
5️⃣ Debugging Framework (Senior Style)
┌─────────────────────────────────────────────────────────────┐
│ DEBUGGING FRAMEWORK │
│ (Senior Style) │
├─────────────────────────────────────────────────────────────┤
│ │
│ BUG │
│ │ │
│ ▼ │
│ ┌─────────────────────────────────────┐ │
│ │ REPRODUCE │ │
│ │ (Có thể tái tạo bug không?) │ │
│ └──────────────────┬──────────────────┘ │
│ │ │
│ ▼ │
│ ┌─────────────────────────────────────┐ │
│ │ NARROW │ │
│ │ (Bug ở layer nào?) │ │
│ └──────────────────┬──────────────────┘ │
│ │ │
│ ▼ │
│ ┌─────────────────────────────────────┐ │
│ │ OBSERVE │ │
│ │ (logs / network / state) │ │
│ └──────────────────┬──────────────────┘ │
│ │ │
│ ▼ │
│ ┌─────────────────────────────────────┐ │
│ │ HYPOTHESIS │ │
│ │ (Đặt giả thuyết nguyên nhân) │ │
│ └──────────────────┬──────────────────┘ │
│ │ │
│ ▼ │
│ ┌─────────────────────────────────────┐ │
│ │ TEST │ │
│ │ (Verify giả thuyết) │ │
│ └──────────────────┬──────────────────┘ │
│ │ │
│ ▼ │
│ ┌─────────────────────────────────────┐ │
│ │ FIX │ │
│ └─────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────┘
💡 Senior dev debug giống scientist - có phương pháp rõ ràng.
6️⃣ System Thinking (Layer Thinking)
┌─────────────────────────────────────────────────────────────┐
│ SYSTEM THINKING │
│ (Layer Thinking) │
├─────────────────────────────────────────────────────────────┤
│ │
│ General Architecture: Angular Architecture: │
│ │
│ ┌─────────────────┐ ┌─────────────────┐ │
│ │ UI LAYER │ │ Component │ │
│ └────────┬────────┘ └────────┬────────┘ │
│ │ │ │
│ ▼ ▼ │
│ ┌─────────────────┐ ┌─────────────────┐ │
│ │ APPLICATION │ │ Service │ │
│ │(business logic) │ └────────┬────────┘ │
│ └────────┬────────┘ │ │
│ │ ▼ │
│ ▼ ┌─────────────────┐ │
│ ┌─────────────────┐ │ Repository │ │
│ │ DOMAIN MODEL │ └────────┬────────┘ │
│ └────────┬────────┘ │ │
│ │ ▼ │
│ ▼ ┌─────────────────┐ │
│ ┌─────────────────┐ │ API │ │
│ │ DATA LAYER │ └─────────────────┘ │
│ └─────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────┘
7️⃣ Async Thinking (Rất quan trọng với Frontend)
┌─────────────────────────────────────────────────────────────┐
│ ASYNC THINKING │
├─────────────────────────────────────────────────────────────┤
│ │
│ General Flow: Angular + RxJS: │
│ │
│ ┌─────────────────┐ ┌─────────────────┐ │
│ │ EVENT │ │ User Click │ │
│ └────────┬────────┘ └────────┬────────┘ │
│ │ │ │
│ ▼ ▼ │
│ ┌─────────────────┐ ┌─────────────────┐ │
│ │ TRIGGER │ │ Observable │ │
│ └────────┬────────┘ └────────┬────────┘ │
│ │ │ │
│ ▼ ▼ │
│ ┌─────────────────┐ ┌─────────────────┐ │
│ │ STREAM │ │ Operator │ │
│ │(async process) │ │(map/switchMap) │ │
│ └────────┬────────┘ └────────┬────────┘ │
│ │ │ │
│ ▼ ▼ │
│ ┌─────────────────┐ ┌─────────────────┐ │
│ │ RESULT │ │ Subscriber │ │
│ └────────┬────────┘ └─────────────────┘ │
│ │ │
│ ▼ │
│ ┌─────────────────┐ │
│ │ UPDATE │ │
│ └─────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────┘
8️⃣ Performance Thinking
Senior dev luôn nghĩ về performance bottleneck:
┌─────────────────────────────────────────────────────────────┐
│ PERFORMANCE THINKING │
├─────────────────────────────────────────────────────────────┤
│ │
│ Request Flow: Bottleneck Points: │
│ │
│ ┌─────────────────┐ ┌─────────────────────────┐ │
│ │ REQUEST │ │ │ │
│ └────────┬────────┘ │ ┌───────────────┐ │ │
│ │ │ │ CPU │ │ │
│ ▼ │ └───────────────┘ │ │
│ ┌─────────────────┐ │ │ │
│ │ PROCESSING │ │ ┌───────────────┐ │ │
│ └────────┬────────┘ │ │ Memory │ │ │
│ │ │ └───────────────┘ │ │
│ ▼ │ │ │
│ ┌─────────────────┐ │ ┌───────────────┐ │ │
│ │ MEMORY │ │ │ Network │ │ │
│ └────────┬────────┘ │ └───────────────┘ │ │
│ │ │ │ │
│ ▼ │ ┌───────────────┐ │ │
│ ┌─────────────────┐ │ │ Disk │ │ │
│ │ IO │ │ └───────────────┘ │ │
│ └────────┬────────┘ │ │ │
│ │ └─────────────────────────┘ │
│ ▼ │
│ ┌─────────────────┐ │
│ │ RESPONSE │ │
│ └─────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────┘
9️⃣ Simplification Thinking
Senior dev luôn cố giảm complexity:
┌─────────────────────────────────────────────────────────────┐
│ SIMPLIFICATION THINKING │
├─────────────────────────────────────────────────────────────┤
│ │
│ COMPLEX PROBLEM │
│ │ │
│ ▼ │
│ ┌─────────────────────────────────────┐ │
│ │ BREAK DOWN │ │
│ │ (Chia nhỏ vấn đề phức tạp) │ │
│ └──────────────────┬──────────────────┘ │
│ │ │
│ ┌─────────────┼─────────────┐ │
│ │ │ │ │
│ ▼ ▼ ▼ │
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
│ │ Sub │ │ Sub │ │ Sub │ │
│ │Problem 1│ │Problem 2│ │Problem 3│ │
│ └────┬────┘ └────┬────┘ └────┬────┘ │
│ │ │ │ │
│ └────────────┼────────────┘ │
│ │ │
│ ▼ │
│ ┌─────────────────────────────────────┐ │
│ │ SIMPLE LOGIC │ │
│ └──────────────────┬──────────────────┘ │
│ │ │
│ ▼ │
│ ┌─────────────────────────────────────┐ │
│ │ CODE │ │
│ └─────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────┘
🔟 Senior Engineering Loop
Đây là vòng lặp mà dev giỏi dùng:
┌─────────────────────────────────────────────────────────────┐
│ SENIOR ENGINEERING LOOP │
├─────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────┐ │
│ ┌───────►│ PROBLEM │ │
│ │ └────┬────┘ │
│ │ │ │
│ │ ▼ │
│ │ ┌─────────┐ │
│ │ │ MODEL │ │
│ │ └────┬────┘ │
│ │ │ │
│ │ ▼ │
│ │ ┌─────────┐ │
│ │ │ DESIGN │ │
│ │ └────┬────┘ │
│ │ │ │
│ │ ▼ │
│ │ ┌─────────┐ │
│ │ │ BUILD │ │
│ │ └────┬────┘ │
│ │ │ │
│ │ ▼ │
│ │ ┌─────────┐ │
│ │ │ TEST │ │
│ │ └────┬────┘ │
│ │ │ │
│ │ ▼ │
│ │ ┌─────────┐ │
│ │ │ MEASURE │ │
│ │ └────┬────┘ │
│ │ │ │
│ │ ▼ │
│ │ ┌─────────┐ │
│ └────────┤ IMPROVE │ │
│ └─────────┘ │
│ │
└─────────────────────────────────────────────────────────────┘
🔥 Mental Model Mạnh Nhất: Data Transformation
Thực ra 90% code chỉ là data transformation:
┌─────────────────────────────────────────────────────────────┐
│ DATA TRANSFORMATION MODEL │
├─────────────────────────────────────────────────────────────┤
│ │
│ Core Concept: API Example: │
│ │
│ ┌─────────────────┐ ┌─────────────────┐ │
│ │ INPUT │ │ Request │ │
│ └────────┬────────┘ └────────┬────────┘ │
│ │ │ │
│ ▼ ▼ │
│ ┌─────────────────┐ ┌─────────────────┐ │
│ │ TRANSFORM │ │ Validate │ │
│ └────────┬────────┘ └────────┬────────┘ │
│ │ │ │
│ ▼ ▼ │
│ ┌─────────────────┐ ┌─────────────────┐ │
│ │ OUTPUT │ │ Business Logic │ │
│ └─────────────────┘ └────────┬────────┘ │
│ │ │
│ ▼ │
│ ┌─────────────────┐ │
│ │ Database │ │
│ └────────┬────────┘ │
│ │ │
│ ▼ │
│ ┌─────────────────┐ │
│ │ Response │ │
│ └─────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────┘
⚡ 4 Câu Hỏi Quan Trọng Nhất
Senior dev luôn hỏi 4 câu này khi debug:
┌─────────────────────────────────────────────────────────────┐
│ 4 CÂU HỎI DEBUG QUAN TRỌNG │
├─────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ 1️⃣ Data ở đâu? │ │
│ │ (Source of data) │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ 2️⃣ Data đi đâu? │ │
│ │ (Data destination) │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ 3️⃣ Ai thay đổi data? │ │
│ │ (Who mutates data) │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ 4️⃣ Khi nào data thay đổi? │ │
│ │ (When data changes) │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ 💡 Trả lời được 4 câu này → Debug 80% bug rất nhanh! │
│ │
└─────────────────────────────────────────────────────────────┘
🎯 Kết Luận
┌─────────────────────────────────────────────────────────────┐
│ KEY TAKEAWAYS │
├─────────────────────────────────────────────────────────────┤
│ │
│ 1. Model trước, code sau │
│ │
│ 2. Hiểu data flow = debug nhanh │
│ │
│ 3. Chia nhỏ vấn đề phức tạp │
│ │
│ 4. Debug như scientist - có phương pháp │
│ │
│ 5. 90% code = data transformation │
│ │
│ 6. Luôn hỏi: Data ở đâu? Đi đâu? Ai đổi? Khi nào? │
│ │
└─────────────────────────────────────────────────────────────┘
📚 Đọc Thêm
Những mental model này là mindset của Staff Engineer / Tech Lead. Nếu muốn tìm hiểu sâu hơn về Frontend Architecture, có thể tham khảo thêm:
- RxJS Mental Model
- State Management Thinking
- Angular Change Detection Thinking
- Large Frontend Codebase Structure
- System Design for Frontend