SPAs, NWAs, and PWAs

Để chứng minh làm thế nào ASP.NET Core và Angular có thể phối hợp với nhau tốt nhất, chắc chắn chúng ta không thể nghĩ gì tốt hơn là xây dựng một số dự án SPA nhỏ với hầu hết các tính năng của Ứng dụng web. Lý do cho một lựa chọn như vậy là khá rõ ràng: không có cách tiếp cận nào tốt hơn để hiển thị một số tính năng tốt nhất mà họ phải cung cấp hiện nay. Chúng tôi sẽ có cơ hội làm việc với các giao diện và mẫu hiện đại như HTML5 pushState API, webhooks, data transport-based requests, dynamic web Components, UI data bindings, and a stateless, AJAX-driven architecture, có khả năng hoàn hảo bao gồm tất cả những điều này. Chúng ta cũng sẽ sử dụng tốt một số tính năng NWA đặc biệt như service workers, web manifest files và nhiều hơn nữa.

Nếu bạn không hoặc chưa biết ý nghĩa của các định nghĩa và từ khóa trên này, đừng lo lắng điều đó, chúng ta sẽ khám phá các khái niệm này trong những phần tiếp theo, dành riêng để liệt kê các tính năng phù hợp nhất của các loại ứng dụng web sau đây:

1. Single-page application (SPAs)

Nói ngắn gọn, một SPA là một ứng dụng web-based để cung cấp trải nghiệm người dùng giống như một ứng dụng desktop.

Nếu chúng ta xem xét thực tế là tất cả các SPAs vẫn được phục vụ thông qua máy chủ web và do đó các trình duyệt web truy cập giống như bất kỳ trang web tiêu chuẩn nào khác, chúng tôi có thể dễ dàng hiểu được kết quả mong muốn đó chỉ có thể đạt được bằng cách thay đổi một số mẫu mặc định thường được sử dụng trong phát triển web, chẳng hạn như tải tài nguyên, quản lý DOM và điều hướng UI. Trong một SPA tốt, cả nội dung và tài nguyên - HTML, JavaScript, CSS, v.v. - đều được truy xuất trong một lần tải trang hoặc được tự động tìm nạp khi cần. Điều này cũng có nghĩa là trang không tải lại hoặc làm mới, nó chỉ thay đổi và điều chỉnh để đáp ứng với hành động của người dùng, thực hiện các cuộc gọi phía máy chủ khi cần thiết.

Một số tính năng chính được cung cấp bởi một SPA có thể tóm gọn như sau:

• No server-side round trips: Một SPA có thể render lại bất kỳ phần nào của giao diện người dùng mà không cần phải gửi 1 full server-side để nhận 1 Full Html page. Điều này được thực hiện theo nguyên tắc separation of concerns (SOC) design principle, có nghĩa là các thành phần bao gồm nguồn dữ liệu (data source), logic nghiệp vụ (business logic) và lớp trình bày (presentation layer) sẽ được tách biệt.
• Efficient routing: Một competitive SPA có thể theo dõi trạng thái của người dùng và localtion bằng cách sử dụng JavaScript-based routers. Chúng ta sẽ nói nhiều hơn về điều đó trong các chương sắp tới khi chúng ta giới thiệu các khái niệm về định tuyến phía máy chủ và phía máy khách.
• Performance and flexibility:

• Một competitive SPA thường chuyển tất cả giao diện người dùng của nó sang máy khách, nhờ vào SDK JavaScript mà nó lựa chọn (Angular, JQuery, Bootstrap, v.v.). Điều này thường tốt cho hiệu suất mạng vì nó giúp tăng kết xuất phía máy khách và xử lý ngoại tuyến làm giảm tác động của UI qua mạng. Tuy nhiên, thỏa thuận thực sự do phương pháp này mang lại là tính linh hoạt được cấp cho UI vì nhà phát triển sẽ có thể viết lại hoàn toàn giao diện ứng dụng mà ít hoặc không ảnh hưởng đến máy chủ, ngoài một vài tệp tài nguyên tĩnh.

2. Native web application

Multi-page applications ngày càng phổ biến từ năm 2015, thường được gọi là NWA vì chúng có xu hướng triển khai một số small-scale, quy mô nhỏ liên kết với nhau trên nhiều trang multipage thay vì xây dựng một SPA monolithic nguyên khối.

Thực tế là cũng có rất nhiều SPA cấp độ doanh nghiệp và NWA hoàn hảo phục vụ hàng ngàn người dùng mỗi ngày. Có thể kể đến một vài cái tên như là: WhatsApp Web and Teleport Web, Flickr, plus a wide range of Google web services, including Gmail, Contacts, Spreadsheet, Maps, v.v.... Các dịch vụ này, cùng với lượng người dùng khổng lồ của họ, là bằng chứng cuối cùng cho thấy chúng ta không nói về một xu hướng ngớ ngẩn sẽ biến mất theo thời gian; ngược lại, chúng ta đang chứng kiến ​​sự hoàn thành của một mô hình hợp nhất chắc chắn sẽ tồn tại còn rất lâu.

3. Progressive web application

Trong năm 2015, một mô hình phát triển web khác đã được đưa ra ánh sáng khi Frances Berriman (một nhà thiết kế tự do người Anh) và Alex Russel (một kỹ sư Google Chrome) lần đầu tiên sử dụng thuật ngữ **PWAs **để chỉ những ứng dụng web có thể tận dụng lợi thế của một vài tính năng quan trọng mới được hỗ trợ bởi các trình duyệt hiện đại: service workers và web manifest files. Hai cải tiến quan trọng này có thể được sử dụng thành công để cung cấp một số chức năng thường chỉ có trên ứng dụng di động - Đẩy thông báo (push notifications), chế độ ngoại tuyến (offline mode), truy cập phần cứng dựa trên quyền (permission-based hardware access), v.v. - sử dụng các công cụ phát triển dựa trên web tiêu chuẩn (web-based) như HTML, CSS và JavaScript.

Sự nổi lên của PWAs bắt đầu vào ngày 19 tháng 3 năm 2018, khi Apple triển khai hỗ trợ cho service workers trên Safari 11.1. Bắt đầu từ ngày đó, PWAs đã được áp dụng rộng rãi trong toàn ngành nhờ những lợi thế không thể phủ nhận của họ so với MPA, SPA và NWA: thời gian tải nhanh hơn, Kích thước ứng dụng nhỏ hơn, mức độ tham gia của người dùng cao hơn, v.v.

Dưới đây là các tính năng kỹ thuật chính của PWAs (theo Google):

• Progressive: Hoạt động cho mọi người dùng, bất kể lựa chọn trình duyệt, sử dụng nguyên tắc progressive enhancement
• Responsive: Phù hợp với nhiều thiết bị: desktop, mobile, tablet, or forms yet to emerge.
• **Connectivity **independent: Service workers cho phép sử dụng Offline, hoặc kết nối mạng chậm như 3G.
• App-like: Cảm thấy giống như một ứng dụng cho người dùng với các tương tác và điều hướng ứng dụng..
• Fresh: Always up to date due to the service worker update process
• Safe: Được phục vụ qua HTTPS để tránh rình mò và đảm bảo nội dung không bị giả mạo
• Discoverable: Identifiable as an application by a web manifest (manifest.json) file, and a registered service worker, and discoverable by search engines
• Re-engageable: Ability to use push notifications to maintain engagement with the user
• Installable: Provides home screen icons without the use of an App Store
• Linkable: Can easily be shared via a URL and does not require complex installation

Giới hạn: