STDIO
Tìm kiếm gần đây
    • Nội dung
    • QR Code
    • 0
    • 0
    • Sao chép

    SPA - Single Page Application Là Gì?

    Bài viết giới thiệu về SPA - Single Page Application, sự so sánh giữa mô hình SPA và mô hình web truyền thống, các lợi ích mà SPA mang lại và giới thiệu một số framework, thư viện hỗ trợ phát triển website theo hướng SPA.
    03/09/2015
    03/10/2020
    8 phút đọc
    SPA - Single Page Application Là Gì?

    SPA - Singe Page Application là gì?

    Singe Page Application hay Single Page Web Application là một ứng dụng web hay một website mà ở đó tất cả các thao tác của người dùng chỉ diễn ra trên 1 trang duy nhất, tất cả các cấu trúc của trang web (HTML) được load sẵn 1 lần và sẽ không load lại ngay cả khi chuyển trang.

    Một vài website nổi tiếng như: Gmail, Facebook, Youtube, Twitter, ... đều đang sử dụng SPA để tạo nên những trải nghiệm mang tính chiều sâu và chiều rộng cho người dùng.

    Cấu trúc của một SPA và nguyên lý hoạt động

    Có rất nhiều nội dung được lặp lại trên đa số các website. Một số thành phần vẫn được giữ nguyên khi người dùng điều hướng trong web (header, footer, logo, navigation bar…), một số thì chỉ nằm ở những vị trí cố định (filter bar, banner), và còn rất nhiều layout và template được lặp lại (blog, self-service, thiết lập của google mail). SPA sử dụng hiệu quả những sự lặp lại như này và nhờ vào việc linh động viết lại những thành phần cần thiết (có thay đổi) trong trang hiện tại thay vì tải lại toàn bộ 1 trang mới từ sever, SPA loại bỏ sự ngắt quãng khi người dùng đang trải nghiệm những trang nối tiếp nhau, tạo cho người dùng cảm giác như đang sử dụng 1 ứng dụng trên desktop.

    Ví dụ: màn hình website cần hiển thị bức tranh có 1 căn nhà và cái cây. Theo truyền thống, mullti-page website sẽ chuẩn bị sẵn HTML cho toàn bộ bức tranh ấy trên sever, sau đó gửi trang HTML đến browser của client.

    Trong khi đó, SPA sẽ gửi từng thành phần (cái cây, ngôi nhà, mặt trời), màu sắc (data và content) của trang web và những chỉ dẫn để kết nối những thành phần đó với nhau đến client, sau đó từ phía client sẽ dựa trên những chỉ dẫn đó để mà render nên 1 trang web hoàn chỉnh.

    Bằng cách truyền thống hay cách của SPA thì phía client đều thấy cùng trang web như nhau, nhưng SPA sẽ cho thấy sự khác biệt về tốc độ khi click vào một button next, filter 1 kết quả, mở 1 email hoặc trong ví dụ tiếp theo đây đó là yêu cầu trang web hiển thị 1 cái cây khác.

    Ở website truyền thống, khi yêu cầu hiển thị 1 cái cây khác thì trên sever sẽ chuẩn bị lại 1 trang HTML khác và gửi lại.

    Với SPA thì sever sẽ nói: “Hey, tôi đã có cái cây mới, nhưng bạn đã có sẵn căn nhà rồi nên cứ để nguyên thế nhé”, sau đó gửi lại sự hướng dẫn cùng với hình thái và màu sắc của cái cây mới để vẽ lại chỉ cái cây đó. Công việc của client là cập nhật lại cái cây theo thông tin mới mà server gửi đến.

    Với việc gửi những công đoạn vẽ (page rendering) như vậy từ sever đến client (bạn), trang web có thể được viết lại 1 cách linh động thay vì phải tải lại toàn bộ trang. Điều này giúp cho mọi việc diễn ra nhanh hơn rất nhiều và đồng thời giúp giảm tải cho server do không cần phải render lại toàn bộ trang quá nhiều lần.

    Ưu điểm của SPA

    Có rất nhiều lợi ích khi sử dụng giải pháp SPA như cải thiện hiệu năng và tính nhất quán, giảm thiểu thời gian phát triển và chi phí hạ tầng.

    Khi phân chia sự trình bày từ nội dung và dữ liệu, đội phát triển sẽ có thể làm việc với tốc độ khác nhau nhưng vẫn liên kết đến giải pháp chung. SPA sử dụng tốt cho việc responsive từ mobile, tablet cho đến desktop.

    Load 1 lần cho từng file HTML, CSS, JS

    Đối với SPA, sau lần tải đầu tiên, sever sẽ không gửi thêm HTML nào cho client vì client đã download tất cả từ đầu.

    Sever gửi cấu trúc của trang và browser của bạn sẽ render giao diện người dùng (UI) trên cấu trúc ấy.

    Sau đó, khi bạn click vào bất cứ đâu, SPA sẽ gửi yêu cầu về dữ liệu và cấu trúc, sever sẽ gửi lại những nguyên liệu thô cần thiết để browser của bạn dùng chúng trong việc render vùng giao diện cần cập nhật mới mà không phải làm mới lại cả trang.

    Khả năng thay đổi nhanh chóng các thành phần con bên trong giúp cho SPA cực kì hiệu quả cho các trang có tính điều hướng cao và sử dụng lặp lại các template.

    Hạn chế câu truy vấn đến sever

    Bởi vì sever không cần phải tốn thời gian và hiệu năng để vẽ lên toàn bô trang, SPA giảm tải sự ảnh hưởng trên toàn sever – đồng nghĩa với việc bạn có thể tiết kiệm chi phí khi dùng ít sever hơn cho cùng 1 lưu lượng yêu cầu.

    Xây dựng Front-end nhanh và có tính tương thích

    Cùng với thời gian xử lý nhanh hơn, SPA còn giúp cho người phát triển xây dựng hệ thống front-end nhanh chóng hơn.

    Điều này dựa trên cấu trúc tách rời của SPA, hoặc sự tách biệt giữa các dịch vụ back-end và hiển thị ở front-end.

    Nhiều tính năng nghiệp vụ quan trọng không có sự thay đổi nhiều ở phía back-end.

    Trong khi việc đăng nhập, đăng ký, mua và theo dõi hóa đơn của người dùng có thể bị thay đổi về “cách nhìn” hoặc sự trình bày của chúng theo thời gian, vấn đề tư duy và luồng dữ liệu đằng sau chúng vẫn phải có tính ổn định – bạn sẽ không muốn liều lĩnh trong việc làm rối chúng lên.

    Tương tự, nội dung và dữ liệu thô của bạn tuy có thể giữ nguyên nhưng việc bạn muốn chúng hiển thị như thế nào có thể khác đi được.

    Với việc tách tư duy và dữ liệu của back-end từ cách chúng được trình bày, bạn đã biến chúng thành 1 “dịch vụ”, và các nhà phát triển có thể xây dựng nhiều kiểu front-end cho việc trình diễn và sử dụng dịch vụ đó.

    Nhờ vào tách biệt trong cài đặt, các nhà phát triển có thể xây dựng, triển khai và trải nghiệm front-end một cách độc lập trên nền tảng công nghệ của back-end.

    Họ thiết kế sao cho người dùng có thể thấy và trải nghiệm theo những gì họ muốn, và sau đó kéo nội dung, dữ liệu và tính năng từ các dịch vụ đó về.

    Việc này được hoàn thành bởi việc sử dụng các API, đây là những chuẩn mực được đặt ra giữa các ứng dụng nhằm thể hiện việc họ sẽ cấu trúc, trao đổi, và kết nối dữ liệu lại như thế nào.

    Sự cài đặt API này giúp cho nhà phát triển làm việc nhanh hơn trên giao diện người dùng với không gây rủi ro tới nghiệp vụ quan trọng trong các công nghệ back-end.

    Tăng trải nghiệm người dùng

    Ngày càng nhiều tính năng được xây dựng như các dịch vụ mang tính module (kiến trúc microservice) có thể được cập nhật một cách độc lập, nó trở nên dễ dàng hơn để thử nghiệm chúng được hiển thị và sử dụng như thế nào.

    Những SPA framework rất tuyệt vời khi sử dụng cùng với các dịch vụ này để tạo ra tính hấp dẫn, linh động và thậm chí phác họa được cả trải nghiệm của người dùng.

    Mặc dù rất nhiều người chỉ muốn phát triển trên một ngôn ngữ lập trình nhất định (rất nhiều SPA framework sử dụng javascript) nhưng nhờ có các API, SPA bạn dựng trên một ngôn ngữ có thể làm việc tốt trên các dịch vụ từ back-end được phát triển bằng nhiều ngôn ngữ lập trình khác nhau.

    Giảm thiểu thời gian phát triển và chi phí hạ tầng

    Angular, React, Vue,... là những framework phổ biến được lựa chọn để tạo ra các SPA. Ngoài việc chứa kiến trúc để xây dựng website theo vòng đời SPA, các framework này còn cung cấp một bộ các component thiết yếu được tích hợp sẵn và các component của những nhà phát triển khác đã đóng góp trên cộng đồng. Nếu bạn nghĩ về nó giống như xây một ngôi nhà, bạn có thể trộn đất sét, làm khô gạch, khai thác và tạo khuôn thép cho chính mình - hoặc bạn có thể sử dụng gạch và đường ống mà người khác đã thiết kế và tập trung thời gian vào thứ tạo nên ngôi nhà của bạn độc nhất. Nhờ vào tính kế thừa này mà các dự án SPA có thể giảm thời gian phát triển, cũng như chi phí hạ tầng và có khả năng nâng cấp dài hạn. 

    0 Bình luận
    JavaScript

    JavaScript

    STDIO Training - Đào tạo lập trình Frontend - Backend.

    Đề xuất

      Khi bạn nhấn vào sản phẩm do chúng tôi đề xuất và mua hàng, chúng tôi sẽ nhận được hoa hồng. Điều này hỗ trợ chúng tôi có thêm kinh phí tạo nhiều nội dung hữu ích. Tìm hiểu thêm.
      STDIO

      Trang chính

      Công ty TNHH STDIO

      30, Trịnh Đình Thảo, Hòa Thạnh, Tân Phú, Hồ Chí Minh
      +84 28.36205514 - +84 942.111912
      developer@stdio.vn

      383/1 Quang Trung, Phường 10, Quận Gò Vấp, Hồ Chí Minh
      Số giấy phép ĐKKD: 0311563559 do sở Kế hoạch và Đầu Tư TPHCM cấp ngày 23/02/2012

      Đã thông báo Bộ Công Thương
      ©STDIO, 2013 - 2020