Single Page Application

Thay đổi cả tương lai!

Vậy là đã 10 năm kể từ khi #AngularJS ra đời, và cũng là 10 năm đánh dấu sự phát triển ngoạn mục của #SPA, thứ đã giải thoát các back-end Web #Developer và phân chia thế giới lập trình viên thành 2 đội, #BackEnd và #FrontEnd. Vậy SPA là gì mà ghê gớm vậy? Browser và web vẫn là thứ chúng ta sử dụng nhiều nhất tính đến thời điểm hiện tại, từ thời xa xưa với những trang web tĩnh được viết bằng html, sau đó đến những trang web được viết bằng #php, #jsp. Cả một thời người ta say mê nói đến những trang web động được viết bằng #joomla #wordpress, #asp.net, #JavaEE hay #SpringMVC. Nhưng đó là khi chúng ta còn ít thông tin, web đa phần chỉ để hiển thị tin tức. Nhưng đứng trước sự bùng nổ thông tin, web đã thay đổi, ngày nay 1 trang web có thể dùng để bán hàng, chat, mạng xã hội, video, call hay tin tức, nội dung cũng vô cùng đa dạng từ văn bản, hình ảnh cho đến video. Thực tế đặt ra là việc click vào 1 cái link nào đó khiến chúng ta phải cân nhắc rất cẩn thận nếu không muốn phải đợi vài giây cho đến vài phút để có 1 trang web hoàn chỉnh.

Quy luật của tự nhiên

Trong cái khó bao giờ cũng ló cái khôn và sự ra đời của #SPA là quy luật của tự nhiên, một thứ kém hiệu quả sẽ được thay thế bằng một thứ tốt hơn. Và tổ chức ứng dụng thành công nhất SPA có lẽ là #Facebook. Với khối lượng thông tin khổng lồ của mình, facebook đã thay đổi phiên bản web của họ từ multi-page site thành SPA, họ đã tạo ra những trải nghiệm mượt mà, dễ chịu cho người dùng không kém gì việc sử dụng app. Và cũng chính họ đã tạo ra #ReactJS để phục vụ cho chính họ và cho cộng đồng, cảm ơn #Facebook.

Mục tiêu ra đời

Ý tưởng của SPA rất đơn giản, đó quy tất cả các trang của 1 site về làm 1, và khi người dùng click vào 1 link chúng ta sẽ chỉ gọi api để lấy dữ liệu tương ứng với phần bị thay đổi mà không ảnh hưởng gì đến các thành phần khác của trang, điều này làm giảm thiểu đáng kể thời gian tải lại các phần không bị thay đổi, từ đó tạo ra cảm giác mượt mà và tăng trải nghiệm của người dùng. Ưu điểm của SPA đó là:

Tốc độ hiển thị rất nhanh và mượt, người dùng gần như không cảm thấy bị giật lag hay bị khó chịu vì họ không cần chờ cả trang web được load lại như trước nữa
Chỉ các phần thay đổi mới bị load lại, giúp người dùng thoát khỏi ức chế khi bị mất các thông tin quan trọng, ví dụ họ đang nhìn thấy 1 sản phẩm họ rất thích đang sale 50% nhưng khi vô tình click vào 1 sản phẩm khác, cả trang bị load lại và họ không nhìn thấy sản phẩm cũ đâu nữa (do chúng ta chèn sản phẩm mới vào)
Giảm thiểu các câu lệnh truy vấn cho server từ đó giảm thiểu được áp lực cho toàn bộ hệ thống phần cứng, phần mềm và tiết kiệm được chi phí vận hành cho doanh nghiệp.
Phân chia việc phát triển dự án ra thành 2 bên (FE và BE), từ đó tạo ra sự chuyên biệt, nâng cao được tốc độ phát triển cũng như chất lượng của dự án

Một số nhược điểm

Tuy vậy SPA cũng có nhược điểm:

Tốc độ tải trang đầu chậm vì nó phải load cả 1 packet js về browser của người dùng
Không chắc chắn google có thể đánh được index trang, và các trang con của bạn hay không, vì lập trình với SPA là #async, cũng giống như #ajax, Googlebot không thể biết chắc chắn khi nào toàn bộ nội dung của trang đã được render xong.

Các dự án phù hợp

Trải qua rất nhiều dự án mình thấy SPA phù hợp với:

Những dự án phục vụ cho việc quản lý, ví dụ cho các phòng ban trong doanh nghiệp, admin tool, và mình tin trong tương lai tất cả các dự án dạng này sẽ dùng SPA hết
Những dự án phần mềm bán hàng cho tạp hóa, siêu thị hoặc cửa hàng
Những dự án thương mại điện tử, rất nhiều mặt hàng, các bước thanh toán, thông tin khuyến mại, thông báo, chat, support, ...
Những dự án mạng xã hội
Những dự án được sử dụng để thay thế cho các ứng dụng chạy trên desktop như #Skype, #GoogleDocs, #DropBox
Những dự án dành cho các tập đoàn lắm tiền nhiều của, nơi họ có đội ngũ mạnh, và việc SEO là tách biệt hoặc họ có quá nhiều tiền để quảng cáo Và mình nghĩ chúng ta đừng lạm dụng SPA để:
Làm các blog cá nhân, nơi nội dung của chúng ta chỉ đơn giản là các bài viết
Các trang web tin tức đơn thuần
Các trang landing page Nếu các bạn là các cá nhân với số vốn ít ỏi thì Wordpress có lẽ là lựa chọn phù hợp hơn, và hiện tại thì cá nhân mình cũng đang dùng Wordpress là chính.

Một số framework

Nếu bạn có ý định xây dựng 1 SPA thì đây là một số framework mà mình đã từng trải qua và mình nghĩ nó đủ tốt cho mọi người:

Tổng kết

Theo quan điểm cá nhân của mình thì SPA là sự dịch chuyển không thể khác, khi cả thế giới đang chung tay vào phát triển nó, các search engine như Google hay Yahoo cũng sẽ cần có những sự thay đổi để phù hợp với SPA nếu không muốn bị những kẻ đi sau thông mình và nhanh nhẹn hơn thay thế.

Tham khảo

1.wiki