Site icon LCDUNG

So sánh Single Page App (SPA) vs Progressive Web App (PWA)

Hôm nay mình thấy một team nói với nhau về Progressive web app mà không phân biệt nó khác Single page app đến mức nào? Và công nghệ chạy background ra sao! Chỉ biết là nó dùng ajax, javascript thư viện của thằng này thằng kia nên nó là Progressive web app đó, chứ hỏng có hiểu là cơ chế hoạt động nó ra sao hết thấy tội mà thôi cũng kệ… luôn chứ sao 😀

 

Như hình mô tả bên trên của mình thì chắc cũng hiểu sơ sơ tốc độ load của từng loại khái niệm về web app, single page app, progressive web app!

Web app

Cái này chắc mọi người ai cũng từng nghe web động (dynamic web app) cơ chế hoạt động của web app từ thời sơ khai cho đến nay cũng không thay đổi nhiều với phương thức truyền dữ liệu là Post form hoặc reload trang để Get param từ url.

Bất lợi khá nhiều:

  1. Tổng lại là thời gian load để xử lý từ 2 phía client và server rất nhiều!
  2. Server site xử lý khá nhiều vì phải generate view cho client.
  3. Việc develop tốn nhiều công sức đồi hỏi client site và server site phải có sự liên kết!

Single Page App (SPA)

Vì sự bất lợi của Web app, Single page app ra đời để cải thiện các điểm bất lợi còn tồn động và single page app xử lý dựa trên nền các library, framework java script và phương thức truyền dữ liệu chính là dùng ajax. Ai dùng Angular (Framework) hay React (Library) sẽ hiểu về nó 😛

Thuận lợi:

  1. Tổng lại là thời gian load để xử lý từ 2 phía client và server giảm rất nhiều!
  2. Server site xử lý và trả về gói dự liệu nhẹ hơn nhiều.
  3. Việc develop client site và server site có thể tách rời riêng biệt rõ ràng hơn!
  4. Việc chuyển trang trên single page và không reload page nên thấy rất nhanh.

Bất lợi:

  1. Developer phải có kiến thức về java script và các library java script render (React, Angular,…) thật kỹ để phát triển front end.
  2. Browser phải hỗ trợ các version java script mới để các library hay framework java script vận hành tốt.
  3. Khi reload page thời gian khởi tạo từ phía client vẫn tốn nhiều thời gian.

Progressive Web App (PWA)

Để tối ưu hơn tốc độ load từ Single page app, Progressive web app ra đời để tận dụng các technique từ Browser đã hỗ trợ Java script, Cache, DB local và phương thức truyền dữ liệu chính là Service Worker (Plugin của browser, device dùng thông qua java script và là trái tim của PWA).

Thuận lợi:

  1. Tổng lại là thời gian load để xử lý từ 2 phía client và server giảm rất nhiều!
  2. Server site xử lý và trả về gói dự liệu nhẹ hơn nhiều.
  3. Việc develop client site và server site có thể tách rời riêng biệt rõ ràng hơn!
  4. Việc reload trang không còn là vấn đề như SPA.
  5. Trang đã load lần đầu thì các lần sau có thể chạy offline vì mọi thứ đều store dưới local của browser.

Bất lợi:

  1. Developer phải có kiến thức về java script và các library java script render (React, Vue,…) thật kỹ để phát triển front end.
  2. Browser phải dùng version mới để hỗ trợ các version java script để các library hay framework java script sử dụng service worker.
  3. Domain phải dùng HTTPS để bảo mật khi truyền dữ liệu.

Trong tương lai mình thấy được Accelerated Mobile Pages (AMP) sẽ kết hợp với PWA để tạo ra đột phá về trải nghiệm người dùng tốt hơn về thời gian load có thể là tốn zero giây cho first load 😀

Exit mobile version