Framework giúp xây ứng dụng web lớn nhanh và có tổ chức. Bài này giúp bạn hiểu framework là gì và chọn cái phù hợp.
- Hiểu framework và thư viện khác nhau thế nào
- Biết các lựa chọn phổ biến: React, Vue, Svelte, Astro, Next.js
- Xác định điều kiện cần trước khi học
- Chọn một framework để bắt đầu
- Thư viện (library)
- Bộ công cụ bạn gọi khi cần, ví dụ React.
- Framework
- Khung sườn quy định cách tổ chức cả ứng dụng, ví dụ Next.js, Angular.
- SPA
- Ứng dụng một trang, chuyển màn hình mà không tải lại trang.
- SSR / SSG
- Dựng HTML ở máy chủ khi có yêu cầu / dựng sẵn khi xây dựng; tốt cho tốc độ và SEO.
- Component
- Thành phần giao diện tái sử dụng, ví dụ nút, thẻ.
Khái niệm và lý thuyết
Khi giao diện có hàng chục phần tử phụ thuộc dữ liệu, việc tự cập nhật DOM bằng tay rất dễ sai. Framework áp dụng mô hình khai báo (declarative): bạn mô tả giao diện phải như thế nào với trạng thái hiện tại; khi trạng thái đổi, framework tự tính toán và cập nhật phần DOM cần thiết. Công thức cốt lõi: giao diện = hàm(trạng thái).
Đơn vị xây dựng là component: một phần giao diện đóng gói gồm cấu trúc, logic và kiểu dáng, có thể lồng và tái sử dụng. Dữ liệu chảy một chiều từ cha xuống con qua props, còn sự kiện đi ngược lên cha.
| Kiểu render | Ý nghĩa |
|---|---|
| CSR | Trình duyệt tải JS rồi mới dựng giao diện; tương tác mượt nhưng tải đầu chậm, SEO yếu |
| SSR | Máy chủ dựng HTML mỗi lần yêu cầu; nhanh hiển thị, tốt SEO |
| SSG | Dựng HTML sẵn lúc build; nhanh nhất cho nội dung ít đổi |
| Islands (Astro) | Trang tĩnh, chỉ phần tương tác mới nạp JS |
Vì sao cần framework?
Khi trang có hàng chục phần tử cần cập nhật theo dữ liệu, viết bằng DOM thuần rất rối. Framework cho phép bạn mô tả "giao diện nên trông thế nào với dữ liệu này", rồi tự cập nhật khi dữ liệu đổi.
So sánh các lựa chọn
| Công nghệ | Đặc điểm | Hợp với |
|---|---|---|
| React | Phổ biến nhất, nhiều việc làm | Ứng dụng phức tạp, đi làm |
| Vue | Dễ học, tài liệu tốt | Người mới, dự án vừa |
| Svelte | Mã gọn, nhẹ, nhanh | Dự án cá nhân, giao diện mượt |
| Astro | Gửi ít JS nhất, tốt cho nội dung | Blog, trang tài liệu, trang giới thiệu |
| Next.js | React đầy đủ, SSR, định tuyến | Website, cửa hàng, SaaS |
| Angular | Đầy đủ, nhiều quy ước | Doanh nghiệp lớn |
Điều kiện trước khi học
- HTML, CSS thành thạo.
- JavaScript hiện đại: hàm mũi tên, mảng map/filter, mô-đun, async/await.
- Biết dùng terminal, Node.js, npm và Git cơ bản.
Bạn muốn xin việc lập trình web: chọn React rồi Next.js. Bạn làm blog hoặc website giới thiệu: chọn Astro. Bạn muốn học dễ chịu, làm đồ án nhanh: Vue hoặc Svelte.
Khái niệm cốt lõi (component, state, props, sự kiện) giống nhau ở mọi framework. Học vững một cái thì chuyển sang cái khác chỉ mất vài ngày.
Đừng bắt đầu framework khi chưa chắc JavaScript. Đa số khó khăn của người mới thật ra là khó khăn với JS.
- Viết ra mục tiêu của bạn (xin việc, làm blog, đồ án) và chọn một framework.
- Xem trang chủ của framework đã chọn và chạy ví dụ đầu tiên.
- Kiểm tra mình có đủ ba điều kiện ở trên chưa.
- Framework tổ chức giao diện theo component và trạng thái.
- React phổ biến nhất; Astro hợp nội dung; Vue, Svelte dễ học.
- Học chắc JavaScript trước.