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.
Bạn sẽ học được
- 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
Thuật ngữ cần biết
- 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ẻ.
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.
Dữ liệu (state)ComponentGiao diện tự cập nhật
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.
Tình huống: Em nên học gì?
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.
Mẹo hay
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.
Lưu ý
Đừ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.
Thực hành
- 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.
Tóm tắt bài học
- 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.