Chuyển đổi Web: Phần 1 - Web Nguyên Thủy
Giới thiệu
Trước khi có SPAs và các framework hiện đại, web là một hệ thống đơn giản nhưng mạnh mẽ. Trong chuỗi 4 phần này, tôi sẽ khám phá sự tiến hóa của web - từ những ngày đầu, những gì đã thay đổi, và tương lai sẽ ra sao. Phần đầu tiên này đưa chúng ta trở về những khởi đầu: cách mà web hoạt động ban đầu.
Cơ sở của Web Nguyên Thủy
Các phiên bản đầu tiên của web được xây dựng dựa trên một số công nghệ cốt lõi:
- HTTP cho giao tiếp
- HTML cho cấu trúc
- CSS cho định dạng
- JavaScript cho tương tác nhẹ
Hai thành phần quan trọng nhất là:
- Thẻ (anchor) cho điều hướng
- Thẻ (elements) cho tương tác
Chỉ vậy thôi. Không có định tuyến phía client, không có hydration, không có việc render bằng JavaScript. Mọi thứ đều được cung cấp bởi phản hồi từ máy chủ.
Những gì Backend Đã Xử Lý
Các ứng dụng web trong thời kỳ này theo một chu trình đơn giản:
1. Lưu trữ
Tất cả dữ liệu ứng dụng được lưu trữ trong cơ sở dữ liệu (như MySQL, PostgreSQL). Backend có trách nhiệm đọc và ghi dữ liệu.
2. Định tuyến
Khi người dùng nhấp vào một liên kết hoặc gửi một biểu mẫu, trình duyệt sẽ gửi một yêu cầu HTTP. Máy chủ sẽ định tuyến yêu cầu đó đến trình xử lý đúng.
3. Lấy dữ liệu
Máy chủ đọc từ cơ sở dữ liệu và chuẩn bị thông tin cần thiết để render.
4. Thay đổi dữ liệu
Đối với các hành động như tạo, cập nhật hoặc xóa bản ghi, máy chủ sẽ trực tiếp thay đổi cơ sở dữ liệu.
5. Render
Máy chủ trả về HTML đã được render hoàn chỉnh cho trình duyệt. Các mẫu thường được tạo ra bằng các công cụ như PHP, ASP, hoặc các engine mẫu như ERB (Rails).
6. Logic
Hầu hết logic ứng dụng - điều kiện, quyền truy cập, xác thực - chạy trên máy chủ.
7. Phản hồi UI
Phản hồi được tích hợp vào các trang đã render từ máy chủ: thông báo, thông điệp thành công, hoặc lỗi xuất hiện sau khi biểu mẫu được gửi và trang được làm mới.
Ví dụ: Quy trình Đăng Nhập Cổ Điển
Dưới đây là cách thức đăng nhập hoạt động trong mô hình ban đầu:
- Người dùng truy cập /login - máy chủ gửi lại một trang HTML.
- Họ điền thông tin đăng nhập và gửi biểu mẫu.
- Biểu mẫu gửi đến /authenticate.
- Máy chủ kiểm tra thông tin đăng nhập, thiết lập phiên và chuyển hướng đến /dashboard.
- Trình duyệt thực hiện một yêu cầu đầy đủ khác - và máy chủ trả về một trang HTML mới.
Không cần JavaScript. Không cần quản lý trạng thái phía frontend. Không có JSON.
Đơn Giản Là Sức Mạnh
Mặc dù bị hạn chế bởi tiêu chuẩn ngày nay, nhưng kiến trúc này có những lợi thế thực sự:
- Luồng dự đoán: Mọi thứ đều tuyến tính.
- Khả năng tiếp cận & SEO: Tích hợp sẵn.
- Nâng cao dần: Cơ sở đã hoạt động - ngay cả khi không có JavaScript.
- Tải ban đầu nhanh: Không cần tải xuống các gói JS hoặc chờ đợi hydration.
Tuy nhiên, nó cũng có những hạn chế:
- Tải lại toàn bộ trang chậm và khó chịu.
- Không có tương tác phong phú như xác thực ngay lập tức hay cập nhật từng phần.
- Môi trường phát triển không tốt cho các ứng dụng động hơn.
Tóm Tắt
Vì vậy, trong giai đoạn đầu của web, mọi thứ - từ định tuyến đến render đến lưu trữ - đều được xử lý bởi backend. Nhiệm vụ của trình duyệt chỉ là render và gửi. Đó là một thế giới từ trang này sang trang khác.
Tại Sao Điều Này Quan Trọng
Bạn có thể tự hỏi - tại sao chúng ta lại nhìn lại một cái gì đó quá cũ và cơ bản?
Bởi vì việc hiểu nơi chúng ta xuất phát giúp chúng ta thấy bức tranh lớn hơn về nơi chúng ta đang đi. Ngày nay, chúng ta làm việc với các framework, thư viện component, định tuyến phía client, hydration và tính tương tác từng phần - nhưng bên dưới tất cả, các trách nhiệm cốt lõi vẫn không thay đổi:
- Đọc và thay đổi dữ liệu
- Điều hướng giữa các màn hình
- Render UI
- Cung cấp phản hồi
Điều đã thay đổi là nơi mà các trách nhiệm này sống - backend, frontend, hay cả hai.
Bằng cách hiểu cách mà các ứng dụng web đầu tiên đã phân công trách nhiệm gần như hoàn toàn cho máy chủ, chúng ta có thể đánh giá cao hơn những thay đổi kiến trúc đã xảy ra sau này. Và như chúng ta sẽ thấy trong các phần sau, tương lai của web có thể thực sự là một sự trở lại có suy nghĩ đến một số nguyên tắc này - nhưng được hiện đại hóa và nâng cao.
Hành trình này là về sự rõ ràng. Khi chúng ta hiểu các chuyển tiếp mà web đã trải qua, chúng ta có thể đưa ra những lựa chọn thông minh hơn về các công cụ mà chúng ta sử dụng hôm nay và các kiến trúc mà chúng ta xây dựng cho ngày mai.
Tiếp Theo
Trong Phần 2, chúng ta sẽ xem cách mô hình này bắt đầu thay đổi - với JavaScript đảm nhận vai trò lớn hơn, và những dấu hiệu đầu tiên của tính tương tác phía client định nghĩa lại mong đợi của người dùng.
Nếu bạn thấy bài viết này hữu ích, hãy xem xét việc hỗ trợ công việc của tôi - điều đó có ý nghĩa rất nhiều.
