Chuyện gì đã xảy ra với frontend trong lúc bạn không để ý

kciter1 · 2026-07-20T02:12:58+09:00

Bài viết dành cho các lập trình viên đã rời xa frontend khoảng năm 2008, giải thích những thay đổi trong 20 năm qua Luận điểm chính là mọi công cụ đều là mô sẹo hình thành trên một vấn đề thực tế (vết thương), và giải pháp của mỗi lớp lại tạo ra vấn đề cho lớp tiếp theo, chồng chất lên nhau Xuyên suốt bài viết, tác giả lấy một thẻ làm mẫu để theo dõi nút bấm đã thay đổi ra sao qua từng thời kỳ Layer I — jQuery (2006–2010) Bắt đầu từ nhu cầu muốn thay đổi chỉ một phần trang mà không phải tải lại toàn bộ trang jQuery đã xóa nhòa khác biệt giữa các trình duyệt và phổ biến hóa AJAX, nhưng lại nảy sinh vấn đề dữ liệu tồn tại ở cả biến JS lẫn giao diện, buộc lập trình viên phải tự đồng bộ Việc thao tác DOM thủ công này là “tội tổ tông” mà mọi lớp sau đó đều cố gắng giải quyết Layer II — Framework (2010–2015) UI khai báo: thay vì viết quy trình cập nhật màn hình, chỉ cần mô tả giao diện sẽ trông như thế nào theo dữ liệu, framework sẽ xử lý việc cập nhật React dẫn dắt thời kỳ này bằng component + JSX + Virtual DOM, sau đó là Vue/Angular/Svelte/Solid Hiện nay, mọi framework đang hội tụ về khái niệm signal: theo dõi quan hệ phụ thuộc và chỉ cập nhật những nơi cần thiết Cũng có phe quay lại cách server gửi HTML, như htmx, Alpine.js, Hotwire Layer III — Build (2012–2018) Vì JS không có hệ thống module, CommonJS và ES Modules cạnh tranh nhau; để tương thích trình duyệt cũ, cần transpile bằng Babel và bundle bằng webpack Build bao gồm minify, tree-shaking, chia tách code và tạo sourcemap Đổi lại là sự xuất hiện của node_modules; ngay cả một dự án starter rỗng cũng cài khoảng 250.000 file Layer IV — Cuộc đua tooling (2018–2024) Đây là thời kỳ giải quyết vấn đề build chậm và cấu hình webpack phức tạp bằng cách viết lại bằng Go/Rust esbuild (Go) khiến bundling nhanh hơn 10–100 lần, còn SWC (Rust) thay thế Babel Vite trở thành công cụ mặc định; bundler production đang được thay bằng Rolldown dựa trên Rust, và stack liên quan đang được hợp nhất dưới VoidZero (gần đây được Cloudflare mua lại) Các package manager như pnpm, Bun cũng đi theo xu hướng tương tự Layer V — Sự trở lại của server rendering (2014–2026) Với SPA, server chỉ gửi một div rỗng, nên lúc tải ban đầu sẽ hiện màn hình trống và với công cụ tìm kiếm cũng trông như một trang rỗng Giải pháp là render HTML trở lại ở server, tức là quay về cách làm của năm 2008 SSR (render theo từng request), SSG (render sẵn khi build), ISR (SSG tự động cập nhật) xuất hiện, và các meta-framework như Next.js, Astro, SvelteKit, Nuxt đảm nhiệm việc này Chi phí hydration — làm cho HTML từ server sống lại trong trình duyệt — trở thành vấn đề mới; Islands (Astro), Resumability (Qwik), React Server Components xuất hiện như các cách giảm hydration Layer VI — Công cụ kỹ thuật (2015–2026) TypeScript đảm bảo độ an toàn khi refactor bằng hệ thống kiểu và trên thực tế đã trở thành tiêu chuẩn Tailwind dẫn dắt styling bằng cách dùng utility class, trong khi CSS native cũng phát triển với nesting, biến, container query…, làm giảm nhu cầu về tooling cũ shadcn/ui định hình cách làm: thay vì cài component, hãy sao chép source để sở hữu; TanStack Query, Zustand, Zod, Vitest, Playwright tạo nên bộ từ vựng cơ bản của ứng dụng năm 2026 Layer VII — Triển khai (2015–2026) Thay vì upload qua FTP, chỉ cần kết nối Git repository với Vercel/Netlify/Cloudflare, mỗi lần push sẽ tự động build·deploy, và mỗi PR sẽ được tạo URL live preview Khái niệm serverless function và edge (chạy code tại hàng trăm data center gần người dùng) đã trở nên phổ biến Layer VIII — AI (2023–2026) Mô tả bằng ngôn ngữ tự nhiên cho v0, Lovable, Bolt thì frontend hoạt động được sẽ được tạo ra; Cursor, Claude Code, Copilot viết code thay bạn Backend/system engineer cũng có thể tạo frontend trong một ngày, khiến ranh giới giữa các lĩnh vực kỹ thuật trở nên mờ hơn Tuy vậy, code được sinh ra giả định đã có kiến thức về 8 lớp phía trên, và mục đích của bài viết này là lấp đầy khoảng cách đó Bedrock — Kết luận Hướng đi ở tuyến đầu năm 2026 là render HTML trên server, gửi rất ít JS và tận dụng web platform Bài viết kết luận rằng sau 20 năm đi một vòng lớn, ngành này đã quay lại một điểm khá giống với những file từng được upload bằng FTP

Bài viết dành cho các lập trình viên đã rời xa frontend khoảng năm 2008, giải thích những thay đổi trong 20 năm qua
Luận điểm chính là mọi công cụ đều là mô sẹo hình thành trên một vấn đề thực tế (vết thương), và giải pháp của mỗi lớp lại tạo ra vấn đề cho lớp tiếp theo, chồng chất lên nhau
Xuyên suốt bài viết, tác giả lấy một thẻ <button> làm mẫu để theo dõi nút bấm đã thay đổi ra sao qua từng thời kỳ

Layer I — jQuery (2006–2010)
- Bắt đầu từ nhu cầu muốn thay đổi chỉ một phần trang mà không phải tải lại toàn bộ trang
- jQuery đã xóa nhòa khác biệt giữa các trình duyệt và phổ biến hóa AJAX, nhưng lại nảy sinh vấn đề dữ liệu tồn tại ở cả biến JS lẫn giao diện, buộc lập trình viên phải tự đồng bộ
- Việc thao tác DOM thủ công này là “tội tổ tông” mà mọi lớp sau đó đều cố gắng giải quyết
Layer II — Framework (2010–2015)
- UI khai báo: thay vì viết quy trình cập nhật màn hình, chỉ cần mô tả giao diện sẽ trông như thế nào theo dữ liệu, framework sẽ xử lý việc cập nhật
- React dẫn dắt thời kỳ này bằng component + JSX + Virtual DOM, sau đó là Vue/Angular/Svelte/Solid
- Hiện nay, mọi framework đang hội tụ về khái niệm signal: theo dõi quan hệ phụ thuộc và chỉ cập nhật những nơi cần thiết
- Cũng có phe quay lại cách server gửi HTML, như htmx, Alpine.js, Hotwire
Layer III — Build (2012–2018)
- Vì JS không có hệ thống module, CommonJS và ES Modules cạnh tranh nhau; để tương thích trình duyệt cũ, cần transpile bằng Babel và bundle bằng webpack
- Build bao gồm minify, tree-shaking, chia tách code và tạo sourcemap
- Đổi lại là sự xuất hiện của node_modules; ngay cả một dự án starter rỗng cũng cài khoảng 250.000 file
Layer IV — Cuộc đua tooling (2018–2024)
- Đây là thời kỳ giải quyết vấn đề build chậm và cấu hình webpack phức tạp bằng cách viết lại bằng Go/Rust
- esbuild (Go) khiến bundling nhanh hơn 10–100 lần, còn SWC (Rust) thay thế Babel
- Vite trở thành công cụ mặc định; bundler production đang được thay bằng Rolldown dựa trên Rust, và stack liên quan đang được hợp nhất dưới VoidZero (gần đây được Cloudflare mua lại)
- Các package manager như pnpm, Bun cũng đi theo xu hướng tương tự
Layer V — Sự trở lại của server rendering (2014–2026)
- Với SPA, server chỉ gửi một div rỗng, nên lúc tải ban đầu sẽ hiện màn hình trống và với công cụ tìm kiếm cũng trông như một trang rỗng
- Giải pháp là render HTML trở lại ở server, tức là quay về cách làm của năm 2008
- SSR (render theo từng request), SSG (render sẵn khi build), ISR (SSG tự động cập nhật) xuất hiện, và các meta-framework như Next.js, Astro, SvelteKit, Nuxt đảm nhiệm việc này
- Chi phí hydration — làm cho HTML từ server sống lại trong trình duyệt — trở thành vấn đề mới; Islands (Astro), Resumability (Qwik), React Server Components xuất hiện như các cách giảm hydration
Layer VI — Công cụ kỹ thuật (2015–2026)
- TypeScript đảm bảo độ an toàn khi refactor bằng hệ thống kiểu và trên thực tế đã trở thành tiêu chuẩn
- Tailwind dẫn dắt styling bằng cách dùng utility class, trong khi CSS native cũng phát triển với nesting, biến, container query…, làm giảm nhu cầu về tooling cũ
- shadcn/ui định hình cách làm: thay vì cài component, hãy sao chép source để sở hữu; TanStack Query, Zustand, Zod, Vitest, Playwright tạo nên bộ từ vựng cơ bản của ứng dụng năm 2026
Layer VII — Triển khai (2015–2026)
- Thay vì upload qua FTP, chỉ cần kết nối Git repository với Vercel/Netlify/Cloudflare, mỗi lần push sẽ tự động build·deploy, và mỗi PR sẽ được tạo URL live preview
- Khái niệm serverless function và edge (chạy code tại hàng trăm data center gần người dùng) đã trở nên phổ biến
Layer VIII — AI (2023–2026)
- Mô tả bằng ngôn ngữ tự nhiên cho v0, Lovable, Bolt thì frontend hoạt động được sẽ được tạo ra; Cursor, Claude Code, Copilot viết code thay bạn
- Backend/system engineer cũng có thể tạo frontend trong một ngày, khiến ranh giới giữa các lĩnh vực kỹ thuật trở nên mờ hơn
- Tuy vậy, code được sinh ra giả định đã có kiến thức về 8 lớp phía trên, và mục đích của bài viết này là lấp đầy khoảng cách đó
Bedrock — Kết luận
- Hướng đi ở tuyến đầu năm 2026 là render HTML trên server, gửi rất ít JS và tận dụng web platform
- Bài viết kết luận rằng sau 20 năm đi một vòng lớn, ngành này đã quay lại một điểm khá giống với những file từng được upload bằng FTP

Chuyện gì đã xảy ra với frontend trong lúc bạn không để ý

Bài viết liên quan

4 bình luận