Ứng dụng một trang là gì?

Ứng dụng Web hiện đại còn được gọi là Ứng dụng trang đơn. Điều đó có nghĩa là gì?

Trong quá khứ, khi các trình duyệt có khả năng kém hơn nhiều so với ngày nay và hiệu suất JavaScript kém, mọi trang đều đến từ một máy chủ. Mỗi khi bạn nhấp vào thứ gì đó, một yêu cầu mới được gửi đến máy chủ và trình duyệt sau đó sẽ tải trang mới.

Chỉ những sản phẩm rất sáng tạo mới hoạt động khác biệt và thử nghiệm với những cách tiếp cận mới.

Ngày nay, được phổ biến bởi các khung JavaScript frontend hiện đại như React, một ứng dụng thường được xây dựng dưới dạng một ứng dụng trang duy nhất: bạn chỉ tải mã ứng dụng (HTML,CSS,JavaScript) một lần và khi bạn tương tác với ứng dụng, điều thường xảy ra là JavaScript chặn các sự kiện của trình duyệt và thay vì đưa ra một yêu cầu mới đến máy chủ, sau đó trả về một tài liệu mới, máy khách yêu cầu một số JSON hoặc thực hiện một hành động trên máy chủ nhưng trang mà người dùng xem sẽ không bao giờ bị xóa sạch hoàn toàn và hoạt động giống một ứng dụng dành cho máy tính để bàn hơn.

Các ứng dụng trang đơn được xây dựng bằng JavaScript (hoặc ít nhất được biên dịch sang JavaScript) và hoạt động trong trình duyệt.

Công nghệ luôn giống nhau, nhưng triết lý và một số thành phần chính trong cách hoạt động của ứng dụng là khác nhau.

Ví dụ về các ứng dụng trang đơn

Một số ví dụ đáng chú ý:

  • Gmail
  • bản đồ Google
  • Facebook
  • Twitter
  • Google Drive

Ưu và nhược điểm của các SPA

Một SPA mang lại cảm giác nhanh hơn cho người dùng, bởi vì thay vì đợi giao tiếp máy khách-máy chủ xảy ra và đợi trình duyệt hiển thị lại trang, giờ đây bạn có thể có phản hồi ngay lập tức. Đây là trách nhiệm của nhà sản xuất ứng dụng, nhưng bạn có thể có quá trình chuyển đổi và quay vòng cũng như bất kỳ loại cải tiến UX nào chắc chắn tốt hơn quy trình làm việc truyền thống.

Ngoài việc giúp người dùng trải nghiệm nhanh hơn, máy chủ sẽ tiêu thụ ít tài nguyên hơn vì bạn có thể tập trung vào việc cung cấp một API hiệu quả thay vì xây dựng bố cục phía máy chủ.

Điều này làm cho nó trở nên lý tưởng nếu bạn cũng xây dựng một ứng dụng dành cho thiết bị di động trên API, vì bạn hoàn toàn có thể sử dụng lại mã phía máy chủ hiện có của mình.

Ứng dụng Trang đơn dễ dàng chuyển đổi thành Ứng dụng web tiến bộ, do đó cho phép bạn cung cấp bộ nhớ đệm cục bộ và hỗ trợ trải nghiệm ngoại tuyến cho các dịch vụ của bạn (hoặc thông báo lỗi tốt hơn nếu người dùng của bạn cần trực tuyến).

Các SPA được sử dụng tốt nhất khi không cần SEO (tối ưu hóa công cụ tìm kiếm). Ví dụ đối với các ứng dụng hoạt động sau khi đăng nhập.

Các công cụ tìm kiếm, trong khi cải tiến hàng ngày, vẫn gặp sự cố khi lập chỉ mục các trang web được xây dựng bằng cách tiếp cận SPA hơn là các trang do máy chủ kết xuất truyền thống. Đây là trường hợp của các blog. Nếu bạn định dựa vào các công cụ tìm kiếm, thậm chí đừng bận tâm đến việc tạo một ứng dụng trang đơn lẻ mà không có phần máy chủ được hiển thị.

Khi viết mã một SPA, bạn sẽ viết rất nhiều JavaScript. Vì ứng dụng có thể hoạt động lâu dài, bạn sẽ cần phải chú ý nhiều hơn đến khả năng rò rỉ bộ nhớ - nếu trước đây trang của bạn có tuổi thọ được tính bằng phút, thì bây giờ một SPA có thể mở cửa hàng giờ liền thời gian và nếu có bất kỳ vấn đề nào về bộ nhớ sẽ làm tăng mức sử dụng bộ nhớ của trình duyệt nhiều hơn và nó sẽ gây ra trải nghiệm chậm một cách khó chịu nếu bạn không quan tâm đến nó.

Các SPA rất tuyệt vời khi làm việc theo nhóm. Các nhà phát triển phần phụ trợ có thể chỉ tập trung vào API và các nhà phát triển giao diện người dùng có thể tập trung vào việc tạo ra trải nghiệm người dùng tốt nhất, sử dụng API được tích hợp trong phần phụ trợ.

Như một kẻ lừa đảo, Ứng dụng trang đơn phụ thuộc rất nhiều vào JavaScript. Điều này có thể làm cho việc sử dụng một ứng dụng chạy trên các thiết bị tiêu thụ điện năng thấp có trải nghiệm kém về tốc độ. Ngoài ra, một số khách truy cập của bạn có thể đã bị vô hiệu hóa JavaScript và bạn cũng cần xem xét khả năng truy cập cho bất kỳ thứ gì bạn xây dựng.

Ghi đè điều hướng

Vì bạn loại bỏ điều hướng trình duyệt mặc định, các URL phải được quản lý theo cách thủ công.

Phần này của ứng dụng được gọi là bộ định tuyến. Một số khuôn khổ đã chăm sóc chúng cho bạn (như Ember), những khuôn khổ khác yêu cầu thư viện sẽ thực hiện công việc này (nhưBộ định tuyến React).

Vấn đề là gì? Ban đầu, đây là một suy nghĩ sau cho các nhà phát triển xây dựng Ứng dụng Trang đơn. Điều này gây ra sự cố phổ biến "nút quay lại bị hỏng": khi điều hướng bên trong ứng dụng, URL không thay đổi (vì điều hướng mặc định của trình duyệt đã bị tấn công) và nhấn nút quay lại, một thao tác phổ biến mà người dùng thực hiện để quay lại màn hình trước đó, có thể chuyển đến trang web bạn đã truy cập cách đây rất lâu.

Vấn đề này hiện có thể được giải quyết bằng cách sử dụngAPI lịch sửđược cung cấp bởi các trình duyệt, nhưng hầu hết thời gian bạn sẽ sử dụng một thư viện sử dụng nội bộ API đó, nhưBộ định tuyến React.

Tải xuống miễn phí của tôiSổ tay dành cho Người mới bắt đầu JavaScript


Các hướng dẫn js khác: