Các khái niệm liên quan đến giao diện frontend
AI bổ sungNó là gì?
Tổng quan các khái niệm cốt lõi khi xây dựng giao diện người dùng web: DOM, Component, State, Props, Virtual DOM, Hydration, SSR/CSR/SSG, Responsive Design, Accessibility. Bổ sung thuật ngữ thiết kế: Design System, Design Tokens, Component Library, Atomic Design, Visual Hierarchy, White Space, Typography Scale, Color Palette, Breakpoints, Grid System, Micro-interactions, Motion Design, Design Handoff, Figma/Sketch, Pixel Perfect, Design QA.
Dùng để làm gì?
Giúp hiểu bản chất hoạt động của trình duyệt và các framework hiện đại (React, Vue, Svelte...) để ra quyết định kiến trúc, tối ưu hiệu năng và trải nghiệm người dùng. Cung cấp ngôn ngữ chung giữa dev và designer để triển khai UI chính xác, nhất quán và dễ bảo trì.
Chạy ở đâu?
Browser (client-side) và/hoặc Server (SSR/SSG)
Nó thường đi với gì?
HTML/CSS/JS, React/Vue/Svelte/Next.js/Nuxt, Tailwind/CSS Modules, Vite/Webpack, Testing Library, Storybook, Figma, Zeplin, Chromatic, Design Tokens (Style Dictionary)
App của mình khi nào cần?
Khi bắt đầu dự án frontend mới, chọn framework, debug hiệu năng, cải thiện SEO/accessibility, hoặc phỏng vấn. Cần thiết khi làm việc với design system, nhận design handoff, hoặc xây dựng component library.
Khi nào không cần?
Chỉ viết script nhỏ, không quan tâm UI phức tạp, hoặc làm backend thuần túy.
Từ khóa lỗi thường gặp
Hydration mismatch, Layout shift (CLS), Memory leak, Re-render không cần thiết, Accessibility violation, CSS specificity war, Design drift, Token mismatch, Breakpoint inconsistency, Z-index collision, Font loading flash (FOUT/FOIT)
Một câu để nhớ
Frontend = DOM + State + Component + Render Strategy + UX + Design System.