Single-page application (SPA) là một trang web hay một ứng dụng web, mà tất cả những thao tác xử lý của trang web đều được diễn ra trên một trang duy nhất. Với mục đích chính là nâng cao trải nghiệm người dùng, giúp người dùng cảm thấy như đang sử dụng desktop application.
SPA thực hiện việc đó bằng cách nào?
Với một trang web truyền thống, khi người dùng yêu cầu một trang web, thì server sẽ tính toán và trả về trang web đó cho người dùng toàn bộ trang web dưới dạng mã html. Hầu như không có bất kỳ sự liên kết nào giữa 2 yêu cầu gần nhau. Do đó khi có nhiều yêu cầu được diễn ra thì sẽ làm quá trình tính toán diễn ra lâu hơn, bởi hệ thống phải tính toán nhiều thành phần trước khi trả về một trang web hoàn chỉnh.
Với SPA lại khác, ở lần request đầu tiên, hệ thống sẽ trả về tất cả code xử lý cũng như code hiển thị của toàn bộ trang web, ở những yêu cầu tiếp theo client chỉ phải requets những phần nào mình cần, và server sẽ trả về dữ liệu dưới dạng thô (json), giúp rút ngắn thời gian truyền tải, đồng thời client có cơ hội sử dụng những hiệu ứng được xây dựng sẵn, giúp nâng cao trải nghiệm của người dùng hơn, quá trình thao tác với dữ liệu không khác gì với desktop application.
SPA có thực sự dễ phát triển?
Cái gì cũng có cái khó riêng của nó, SPA không khó, nhưng nó mới nên cần một khoảng thời gian ban đầu để làm quen (~2 tuần), còn việc phát triển một ứng dụng SPA theo mình thì đơn giản hơn phát triển 1 website truyền thống. Vì mình không cần phải thiết kế một trang web hoàn chỉnh, thay vào đó, chỉ cần phát triển từng services tương ứng, đối với từng trạng thái cụ thể SPA sẽ gọi những servies tương ứng.
Phát triển ứng dụng SPA như thế nào?
Hiện tại có khá nhiều cách để phát triển SPA, trong đó thì phương pháp sử dụng framework javascript là cách đơn giản, hiệu quả và được nhiều người biết đến nhất
Hiện nay có khá nhiều framework giúp bạn làm được việc này:
- AngularJS (mình sử dụng cái này)
- BackboneJS
- SailJS
Nhưng điểm yếu của SPA?
Không thể tối ưu cho các bộ máy tìm kiếm
Không sử dụng được browser history
Nếu hai vấn đề trên không phải là điểm bận tâm trong sản phẩm của bạn, thì SPA là một lựa chọn sáng suốt cho việc phát triển ứng dụng web ở thời điểm hiện tại.
BackboneJS
Để bắt đầu series các bài học về BackboneJS, trước hết tôi muốn giới thiệu về một khái niệm mà ngày nay được nhắc đến rất nhiều trong việc phát triển ứng dụng web hiện đại. Đó là: “Single page web application” (viết tắt SPA). Khi đó các câu hỏi của các bạn như: Tại sao lại SPA ? Tại sao lại Backbone ? sẽ dễ dàng có câu trả lời thỏa đáng.
Trong cuốn sách “Single Page Web Applications” của tác giả Michael S. Mikowski & Josh C. Powell có một ví dụ rất hay mà tôi dịch đại ý là: Tại thời điểm bạn đang đọc những dòng này chúng ta đã tiêu tốn 35 triệu phút chỉ để chờ một trang web được load xong, thời gian này bằng 96 lần thời gian đi từ một nơi nào đó đến Sao Hỏa và quay trở lại.
Có thể mỗi chúng ta chỉ tốn một vài giây để chờ trang web load xong nhưng đằng sau đó là cả một sự hao phí lớn về tài nguyên do các máy chủ phải xử lý các request này. Do vậy người ta mới đặt một câu hỏi là: “Tại sao một máy chủ phải liên tục xử lý các yêu cầu nhàm chán này? Có thể nào một trang web chỉ cần load một lần không ?”. Để giảm bớt sự lãng phí tài nguyên này người ta mới nghĩ ra khái niệm bộ nhớ cache, để lưu lại các trang web mà chúng ta đã đọc một lần rồi thì lần sau không cần phải gửi yêu cầu đến máy chủ load lại trang đó nữa, đơn giản chỉ cần lấy trong bộ nhớ cache của trình duyệt web ra.
Sau một thời gian, có những yêu cầu phức tạp hơn trong cuộc sống nảy sinh, ví dụ bạn cần trình diễn một slideshow ảnh, thì hiện tượng chớp liên tục do phải load lại cả trang web khi bạn click xem các ảnh tiếp theo gây ra sự khó chịu không hề nhẹ. Khi đó người ta sử dụng javascript – ngôn ngữ của web để giải quyết bài toán này. Khi đó các máy chủ có thời gian nghỉ ngơi và đẩy trách nhiệm cho trình duyệt web. Từ thời điểm này, người ta đã nghiên cứu và phát triển ra một giải pháp đó là: Single page web applications – Mọi thao tác người dùng chỉ diễn ra trên một khung trang web được load sẵn một lần duy nhất, kể cả việc chuyển trang cũng không làm cả trang web phải load lại. Mỗi phần từ trên trang web làm việc một cách độc lập hoặc có liên kết với nhau. Nếu phần từ nào cần tương tác với máy chủ thì tự nó đứng ra làm việc với máy chủ, tự gửi yêu cầu, nhận kết quả và hiển thị lại mà không ảnh hưởng đến các phần từ khác trên cùng một page. Điều này quá đỗi tuyệt vời và ngày nay nó được ứng dụng rộng rãi trong việc phát triển ứng dụng web hiện đại.
BackboneJS ra đời để phục vụ việc xây dựng các ứng dụng SPA này, nhưng sức mạnh của Backbone không dừng lại ở những ứng dụng nhỏ, khi nó kết hợp với RequireJS thì nó thích hợp cho việc xây dựng các ứng dụng lớn – huge SPA. Mà trong series học về BackboneJS & RequireJS mình sẽ nói kỹ hơn về bộ đôi này.
Trên đây mình đã giới thiệu một cái nhìn tổng quan về Single Page Web Applications và tại sao lại Backbone. Cảm ơn các bạn đã bỏ thời gian đọc và hi vọng nhận được phản hồi từ các bạn. Hẹn gặp lại các bạn trong các bài viết sau.
