Single Page Application là gì

Single Page Application (SPA)

Trước hết, Single Page Application(SPA) là chúng ta có một trang vỏ và trong đó ta có thể tải nhiều trang con ở bên trong trang vỏ đó mà không ảnh hưởng hay động chạm gì tới trang vỏ ở bên ngoài. Nói như vậy thôi các bạn cũng có thể dễ dàng hình dung được mô hình hoạt động của nó rồi đúng không? Nhưng mình sẽ giải thích dõ hơn một chút nữa nhé.

Vì Single Page Application chỉ load phần trang cần thiết và khác với một ứng dụng truyền thống, như bạn biết bạn thường nhấp nháy và tải tất cả mọi thứ một lần nữa. SPA không phải là rất hiệu quả về băng thông, đặc biệt là trong thế giới di động đang rất phát triển ngày nay sao.

Trong một SPA chúng ta có thể tải các nội dung ban đầu trước thường đó là các nội dung và các phần dùng chung và xuất hiện ở nhiều trang trong một website như: header, menu, footer, … và cái đó ở đây mình tạm gọi là vỏ cho ngắn gọn và dễ hình dung nhé. Tiếp saud đó, các phần khác nhau sẽ được load lên bên trong của vỏ như nội dung trang,quảng cáo, box tin gi gi đó,… Mình vd nhé: Khi bạn đang ở trang chủ thì sẽ có header, menu, footer là phần chung nên nó sẽ load lên trước và ở giữa của cái vỏ đó mình cho load lên sản phẩm mới đi nó là phần riêng chỉ có ở trang chủ thôi. Nhưng khi click sang trang Giới Thiệu thì mình load lên nội dung là đoạn văn bản giới thiệu đại loại thế. Còn các phần như header, menu, footer thì mình giữ nguyên không load lại gi cả. Hiểu rồi chứ?

The Challenge With SPAs

Thách thức với việc xây dựng SPAs là có rất nhiều vấn đề khác nhau để đối phó với: DOM manipulation và history, làm thế nào để bạn tự động tải mô-đun và làm thế nào để bạn đối phó với những promises  khi bạn thực hiện gọi async và những thứ như tương tự như vậy.

Routing (định tuyến) trở thành một vấn đề lớn bởi vì bạn phải có một số cách để theo dõi chúng hoạt động, hướng dẫn chúng đi đúng đường của mình “chúng đang ở đâu? Và chúng cần đi tới đâu? “.

Bây giờ tôi chắc chắn bạn có thể làm tất cả điều này với các mã nguồn khác khác nhau trên mạng. Chúng ta có thể sử dụng sammyJS và jQuery và requireJS. Đối với AJAX chúng ta có thể sử dụng Q và có rất nhiều lựa chọn khác nhau.

Nhưng Angular, bạn sẽ thấy,nó cung cấp rất nhiều tính năng lý thú . Tất cả các loại công cụ bạn sẽ thấy được xây dựng trong Angular.

Nguồn: http://congdongdev.com/