Nâng cao trải nghiệm người dùng website với Single page application

Nếu so sánh giữa 2 phần mềm có chung tính năng, trải nghiệm người dùng của sản phẩm nào tốt hơn, sản phẩm đó thành công hơn. Để website của bạn có trải nghiệm tốt nhất, đừng bỏ qua bài viết này với chủ đề về Single page application.

1. Single page application là gì?

Single page application là một ứng dụng web hoặc website giúp nâng cao trải nghiệm đối với người dùng. Mục tiêu của mô hình này là giúp trang web có thể chuyển đổi mượt mà hơn khi người dùng thao tác.

2. Sự khác nhau giữa Single page application với một trang web thông thường

Trước kia, khi chưa có single page application, các trang web được lập trình theo mô hình MVC (Model - View - Controller). 

Với mô hình này, các logic hầu hết được xử lý ở phía server, phía client (người dùng) chỉ có nhiệm vụ hiển thị dữ liệu (View) được gửi về từ server. Đây được gọi là Server Side Rendering. Mỗi khi người dùng thao tác, website phải liên tục reload lại toàn bộ trang, tạo ra trải nghiệm không tốt với người dùng.

Single page application đã ra đời để khắc phục vấn đề trên. Nguyên lý hoạt động của mô hình này là với mỗi lần người dùng thao tác để xem thông tin nào đó ở trang web, nó sẽ chỉ lấy các dữ liệu cần thiết dựa theo yêu cầu từ người dùng mà không phải lấy lại toàn bộ dữ liệu phục vụ cho cả trang web như mô hình MVC truyền thống.

Với Single page application, việc xử lý sẽ được thực hiện phần lớn ở phía client. Phía frontend sẽ tiếp nhận request từ người dùng, xử lý và lấy ra những thông tin cần thiết rồi mới gửi yêu cầu tới server để xử lý.

Nếu như theo mô hình truyền thống, việc chuyển hướng giữa các url được xử lý ở phía backend, thì với single page application, chúng sẽ được thực hiện ở phía frontend.

Theo mô hình Single page application, backend trả dữ liệu cho frontend dưới dạng chuỗi json, frontend sẽ dựa vào chuỗi json này để kết xuất (render) ra giao diện cho người dùng. Quá trình này được gọi là client side rendering.

Dưới đây là hình ảnh mô tả sự khác nhau giữa mô hình truyền thống (Multi page application) và mô hình Single page application.

Sự khác nhau giữa mô hình truyền thống và mô hình Single page website

Tóm tắt lại cho sự khác nhau giữa Multi page application và Single page application:

• Multi page application: mỗi lần người dùng website gửi yêu cầu, server trả về toàn bộ 1 file - html chứa đầy đủ dữ liệu

• Single page application: lần đầu gửi request, server trả về file html chứa toàn bộ dữ liệu, ở những lần gửi request sau, sẽ trả về chuỗi định dạng JSON, dùng để kết xuất dữ liệu cần thiết

3. Ưu điểm của single page application

Đối với lập trình viên

Single page application giúp lập trình viên dễ dàng quản lý dự án hơn khi  tách biệt được 2 phần frontend và backend.

Tiết kiệm băng thông cho server, do các dữ liệu có thể chuyển đổi sẽ được thông qua server và client, còn dữ liệu tĩnh chỉ cần được render 1 lần khi người dùng lần đầu vào trang web.

Code phía server có thể được tận dụng để dùng cho mobile app.

Lập trình viên có thể tái sử dụng tại dữ liệu vì website vẫn có thể cache dữ liệu như bình thường.

Đối với người dùng

Người dùng có trải nghiệm mượt mà khi dùng web, không cần mất thời gian đợi trang web tải lại toàn bộ dữ liệu như thông thường.

4. Nhược điểm của single page application

Bên cạnh những ưu điểm nêu trên, single page application cũng có một vài nhược điểm: 

• Các kỹ thuật SEO sẽ rất khó được sử dụng đối với Single page application.

• Đòi hỏi lập trình viên Backend cũng phải nắm được cách thức hoạt động của các framework phía Frontend.

• Việc tải trang web lần đầu chậm hơn so với cách cách thông thường

Có thể bạn quan tâm: [BÍ KÍP] Hướng dẫn SEO Web lên TOP Google bền vững

5. Một số phương pháp áp dụng single page application vào dự án

Cách đơn giản nhất để áp dụng single page application vào dự án là chúng ta có thể sử dụng kỹ thuật call ajax của Jquery. Kỹ thuật call ajax được ra đời ngay khi các lập trình viên thấy mô hình Server Side Rendering mang lại trải nghiệm kém với người dùng. Với kỹ thuật này, lần đầu vào trang web sẽ load toàn bộ trang web, còn với những thao tác sau của người dùng, trang web sẽ chỉ tải lại những thông tin cần thiết. 

Về sau, họ nhận thấy các thư viện hỗ trợ khi đó còn thô sơ, chưa đáp ứng được hết các yêu cầu, xử lý phức tạp phía client, nên các framework lớn của Javascript như Angular, ReactJs, VueJs,... đã ra đời để có thể tối ưu hơn cho Single page application. Việc ra đời các framework này đã làm cho việc xử lý phía frontend trở nên đơn giản hơn rất nhiều. Và chúng đang dần thay thế kỹ thuật call ajax của Jquery.

Những framework dành cho Single Page Application

 

6. Tạm kết

Sự ra đời của Single page application đã đem lại cho người dùng một trải nghiệm hoàn toàn mới. Tuy nhiên, cũng tùy thuộc vào mục đích của dự án mà các lập trình viên nên lựa chọn mô hình nào cho phù hợp.

Để đọc thêm nhiều bài viết về chủ đề cải thiện trải nghiệm người dùng nói riêng và công nghệ nói chung, bạn có thể truy cập vào kênh tri thức của Rabiloo.