First things first
Chào các bạn. Nhân lúc đang có họat động MayFest sôi nổi này, mình tranh thủ làm vài dòng về những thứ mà mình đã được trải nghiệm trong công việc của một lập trình viên. Mình là Nhân, một Backend ĐÉP, mình rất thích tìm hiểu về các công nghệ xoay quanh các công nghệ backend, kiến trúc, đóng gói và triển khai ứng dụng phía server. Nhưng đợt này công ty mình có làm nhiều task liên quan tới FrontEnd vì vậy để tổng hợp lại những kiến thức FrontEnd từ lúc chập chững vào nghề ( Mảng này mình khá yếu, toàn dùng template 😂). Nên giờ mình sẽ làm một số bài viết về chủ đề này. Ngoài ra mình cũg sẽ viết 1 số bài viết về BackEnd nữa, nếu các bạn quan tâm thì đọc tiếp nha. Bài viết này sẽ là phần mở đầu nội dung bao gồm những kiến thức tổng quan nhất về FrontEnd.
PHẦN 1: THÀNH PHẦN
Front-End bao gồm ba công nghệ chính hợp tác tạo nên giao diện web:
- HTML xây dựng cấu trúc và nội dung. HTML là “bộ khung” của trang, xác định các phần tử (đoạn văn, tiêu đề, hình ảnh, v.v.)
- CSS điều khiển trình bày và bố cục. CSS định kiểu (màu sắc, font, khoảng cách, bố cục)
- JavaScript bổ sung tính năng tương tác và động. JavaScript xử lý logic, phản hồi sự kiện người dùng (click, nhập liệu) và cập nhật DOM.
- TypeScript: là ngôn ngữ mở rộng của JavaScript thêm tính năng kiểu tĩnh (static typing). TypeScript kiểm tra kiểu tại thời gian biên dịch và cung cấp công cụ IDE mạnh hơn (gợi ý mã, bắt lỗi sớm). Mã TS được biên dịch về JS để chạy ở trình duyệt.
Ví dụ:
JavaScript:
let age = 30;
age = "thirty"; // Không báo lỗi, nhưng dễ gây bug
TypeScript:
let age: number = 30;
age = "thirty"; // Lỗi: Type 'string' is not assignable to type 'number'
Tóm tắt sự khác biệt chính:
| Tính năng | JavaScript | TypeScript |
|---|---|---|
| Kiểu dữ liệu tĩnh | Không | Có |
| Phát hiện lỗi sớm | Không | Có lúc biên dịch |
| Khai báo biến có kiểu rõ ràng | Không | Có |
| Hàm có kiểm tra tham số và kiểu trả về | Không | Có |
| Hướng dẫn lập trình viên tốt hơn | Không | Có (nhờ IntelliSense, type checking) |
DOM (Document Object Model)
Là mô hình đối tượng tài liệu, đại diện cây cấu trúc HTML của trang, cho phép JavaScript truy xuất và thay đổi nội dung, cấu trúc hoặc style động trên trang. Ví dụ, DOM cho phép tìm phần tử theo ID và cập nhật giá trị hoặc sự kiện cho chúng.
BOM (Browser Object Model)
Bao gồm các đối tượng mà JavaScript dùng để tương tác với trình duyệt, như window, history, location… BOM không chuẩn hóa nhưng cho phép kiểm soát cửa sổ trình duyệt, URL, lịch sử… mà DOM không có. Vậy chúng ta đã có 3 thành phần chính để cấu tạo nên các website cơ bản nhưng các phần phần trên chạy ở đâu ? Hãy đến phần 2 để rõ hơn .
PHẦN 2: MÔI TRƯỜNG
Ở phần 1 ta đã có cá nhìn khái quát về các thành phần của 1 trang web, nhưng các thành phần ấy chạy ở đâu, tại sao chúng cần môi trường để chạy ?
Vì bản thân chúng không phải là chương trình độc lập hoặc ứng dụng máy tính, mà chỉ là:
- HTML: Cấu trúc nội dung.
- CSS: Trình bày giao diện.
- JavaScript: Tạo động, tương tác.
Chúng cần môi trường hiểu và xử lý chúng – cụ thể là:
- HTML/CSS cần một engine render (trình duyệt) để vẽ UI.
- JS cần một engine như V8 (Chrome) hay SpiderMonkey (Firefox) để chạy lệnh. Trình duyệt Web (Browser) – Môi trường gốc để chạy
| Thành phần | Vai trò của trình duyệt |
|---|---|
| HTML | Trình duyệt phân tích cú pháp (parse), xây DOM |
| CSS | Trình duyệt xây dựng CSSOM và render giao diện |
| JavaScript | Trình duyệt thực thi mã JS bằng engine (VD: V8 của Chrome) |
Ví dụ: Khi bạn mở file index.html bằng Chrome, trình duyệt sẽ:
- Đọc HTML ➝ xây DOM Tree.
- Đọc CSS ➝ xây CSSOM Tree.
- Kết hợp DOM + CSSOM ➝ tạo Render Tree để vẽ UI.
- Đọc và thực thi JavaScript để tạo tương tác, xử lý logic động.
TypeScript không chạy trực tiếp trong trình duyệt, mà cần biên dịch sang JavaScript (transpile) trước đó (thường bằng tsc, Webpack, hoặc Vite).
Như vậy từ các file html, css, js tĩnh và môi trường thì ta đã có thể xây dựng được các trang web cực kỳ sống động rồi. Nhưng những trang web hiện tại có nhiều trang, rất nhiều thành phần, hoạt ảnh vì vậy để có thể dễ dàng hơn trong việc lập trình ta tới phần tiếp theo là Frameword và Lib FrontEnd.
Mình sẽ nói kỹ hơn về cách mà HTML/CSS/JS chạy trên trình duyệt ở một bài viết khác.
PHẦN 3: LIBRARY & FRAMEWORK
Đầu tiên ta cần phân biệt giữa Library và Framework
1. Library = Bộ công cụ (Toolbox)
Ví dụ: Bạn có một bộ dụng cụ sửa xe: có tua vít, cờ lê, búa, kìm…
Bạn chọn ra từng món phù hợp để sửa cái bạn muốn: bánh xe, dây điện, đèn pha...
Bạn điều khiển quá trình sửa – bạn là người ra quyết định.
2. Framework = Bộ máy/Khung sườn hoàn chỉnh
Ví dụ: Một dây chuyền lắp ráp ô tô có sẵn:
Băng chuyền chạy sẵn.
Có các module đã định nghĩa (gắn động cơ, lắp bánh, kiểm tra an toàn…)
Việc của bạn: “gắn” các bộ phận riêng (code, logic, UI...) vào đúng chỗ.
3. So sánh
| Đặc điểm | Library (Bộ công cụ) | Framework (Bộ máy hoàn chỉnh) |
|---|---|---|
| Ai kiểm soát luồng | Bạn (code của bạn gọi thư viện) | Framework (framework gọi code của bạn) |
| Mức độ linh hoạt | Cao, tuỳ chỉnh tuỳ ý | Thấp hơn, phải theo quy tắc có sẵn |
| Mục tiêu | Giải quyết bài toán nhỏ/lẻ | Xây dựng cả hệ thống front-end |
| Ví dụ | React, Lodash, Axios | Angular, Vue, Svelte, Next.js, Nuxt.js |
| Ẩn dụ | Bộ đồ nghề – bạn chủ động sửa/lắp | Dây chuyền – bạn chỉ gắn phần mình vào thôi |
4. Các Library
- Các Library UI giúp thiết kế UI nhanh, chuẩn hóa : Một số Lib có sẵn giúp việc tùy chỉnh giao diện được dễ dàng, responsive hơn như: Tailwind, Ant Design, Bootstrap, …
- Các thư viện tiện ích như Axios: Gọi API Three.js: Đồ họa 3D WebGL Chart.js, Recharts: Vẽ biểu đồ, data visualization
- … và còn rất nhiều lib khác nhau tùy theo nhu cầu sử dụng
5. Các Framework
Hiện nay có rất nhiều Framework, về từng loại mình sẽ đề cập riêng ở từng vài về cá Framework cụ thể, sau đây là phần tổng quan về các Framwork hiện nay:
React.js (Library - Facebook): (về thực chất thì ReactJS không hẳn là 1 Framework FE nhưng khi kết hợp với Redux, React Router thì cũng có thể xem như ReactJS là 1 Framework FE) Dựa trên component, dễ mở rộng, thường dùng với Redux, React Router.
Vue.js (Progressive Framework): Kết hợp ưu điểm của Angular và React, cú pháp gần HTML, nhẹ, dễ học.
Angular (Full Framework - Google): Tích hợp đầy đủ (Router, HTTP, Form,...), mạnh trong enterprise.
Svelte: Compile trực tiếp thành JS thuần, hiệu năng cao, không dùng virtual DOM.
SolidJS: Cực nhanh, cú pháp JSX như React, reactive bằng signals.
Sau đây là bảng so sánh độ phổ biến của các Framework FrontEnd:
Nguồn : https://gist.github.com/tkrotoff/b1caa4c3a185629299ec234d2314e190****
PHẦN 4: KẾT LUẬN
Thế giới Front-End rất rộng lớn và không ngừng thay đổi từng ngày. Để nắm bắt hết mọi khía cạnh của lĩnh vực này là điều không dễ dàng – nó đòi hỏi thời gian, trải nghiệm thực tế, và sự cập nhật liên tục.
Tuy nhiên, qua bài viết này, bạn đã có được một cái nhìn tổng quan về Front-End: từ những công nghệ cốt lõi như HTML, CSS, JavaScript đến môi trường thực thi, thư viện, framework, và cách chúng phối hợp để tạo nên những ứng dụng web hiện đại.
Muốn tiến xa trong lĩnh vực này, kiến thức nền tảng là điều bắt buộc. Bởi lẽ, dù công nghệ có thay đổi ra sao, thì phần lớn các framework hiện nay vẫn xoay quanh ba trụ cột: HTML, CSS và JavaScript.
Cảm ơn đã đọc hết bài viết, nếu thấy có nội dung nào cần sửa đổi thì mình xin 1 comment để cùng sửa nhé.