Giao diện người dùng nền Web được xây dựng theo kiến trúc Client-based, với toàn bộ mã lập trình sử dụng Javascript. Kiến trúc này đã tạo nên các ứng dụng Web (Web
Application) hiện đại, như Twitter, Facebook, Gmail, Youtube. Ưu điểm rõ ràng, mà
những ai đã từng dùng một trong các ứng dụng kể trên đó chính là: nhanh, và rất nhiều chức năng có thể được sử dụng ngay, không cần tải lại toàn bộ trang như các website truyền thống. Khả năng đó có được là do: phần lớn (hoặc toàn bộ) mã nguồn web nằm trên máy tính của người sử dụng, và Server chỉ đóng vai trò cung cấp các files cài đặt ban đầu và dữ liệu; còn việc giao diện được hiển thị như thế nào, hoàn toàn do Client (cụ thể ở đây là trình duyệt web người dùng sử dụng: Chrome, Safari, Firefox, …) tính toán. Bởi vậy, website xây dựng dựa trên kiến trúc này được gọi là ứng dụng Web, do chúng hoạt động y như một phần mềm cài đặt trên máy của người sử dụng.
Minh hoạ 3.5: Kiến trúc Web theo kiểu Server-based
Minh hoạ 3.5 thể hiện kiến trúc Website truyền thống, trong đó phía client chủ yếu
là Dumb Terminal – không tính toán gì, hoặc Thin Client – tính toán nhưng ít. Toàn bộ
nội dung trang web cần hiển thị mỗi khi người dùng yêu cầu đều do Web Server (xây dựng sử dụng các ngôn ngữ PHP, ASP.NET, JSP, Ruby, Python, …), tương tác với CSDL rồi kết xuất toàn bộ kết quả ra mã HTML hoàn chỉnh, trả lại cho trình duyệt web hiển thị.
Trong khi đó, ứng dụng web để duyệt tin trong hệ thống xenoNews sử dụng kiến trúc mô tả trong Minh hoạ 3.6. Đầu tiên, khi truy cập vào địa chỉ của ứng dụng, trình duyệt web gửi yêu cầu lấy các file mã nguồn của chương trình (bao gồm file HTML, các file javascript, css) từ server. Sau đó, với các yêu cầu về dữ liệu (lấy dữ liệu, thêm, xoá, sửa, cập nhật, …), client, server (cụ thể là Web Services, cũng là Middle-level trong hệ thống xenoNews) giao tiếp với nhau thông qua các yêu cầu AJAX, định dạng dữ liệu JSON. Khi đã có dữ liệu, dựa trên mã nguồn đã có được, trình duyệt web sẽ chỉnh sửa Mô
hình hồ sơ tài liệu (Document Object Model - DOM), kết xuất nên giao diện trang web
Minh hoạ 3.6: Kiến trúc Web theo kiểu Client-based
Kiến trúc này phù hợp cho hệ thống gợi ý tin tức xenoNews tôi đang trình bày, nhờ các tính chất sau:
- Giảm tải cho Web Server: Server không phải kết xuất mã HTML từng yêu cầu của người dùng.
- Nâng cao trải nghiệm người dùng (User experiences):
o Các tương tác có độ trễ thấp: dữ liệu cần trao đổi dưới dạng JSON thường nhỏ, quá trình gửi - nhận sẽ nhanh hơn so với hướng tiếp cận Server-based; đồng thời các máy tính cá nhân hiện nay đều có năng lực tính toán tốt, dễ dàng đáp ứng yêu cầu kết xuất và quản lý giao diện.
o Theo dõi tốt tương tác người dùng: các phản hồi của người dùng được cập nhật về CSDL theo thời gian thực. Từ đó, người dung có thể nhanh chóng
chỉnh sửa nếu cần thiết. Ví dụ như chức năng “Undo”, “Redo”, tương tự các phần mềm cài đặt trên máy tính.
o Hiệu ứng chuyển đổi (transition effect) và Hoạt hình (animations): tạo hiệu ứng thị giác khi di chuyển giữa các phần, hay thực hiện nhiều thao tác khác nhau. Các hiệu ứng thị giác này cũng đóng góp phần rất quan trọng khiến cho người dùng có cảm giác website hoạt động nhanh, từ đó cũng tạo sự thích thú và tăng hiệu quả đọc tin.
Để hiện thực hoá việc cài đặt kiến trúc này, tôi đã sử dụng một số thư viện Javascript và CSS chính như: BackboneJS, MarionetteJS, RequireJS, Underscore, Jquery, Twitter Bootstrap, …