Mặc dù Single Page Application đã ra đời khá lâu, đồng thời không ít website áp dụng kỹ thuật này, hiện nay, việc sử dụng Single Page Application (SPA) vẫn khá hot. Điều đặc biệt là kỹ thuật này rất hiệu quả và tiết kiệm băng thông, lại cho người dùng những trải nghiệm khá mượt.
Vậy, Single Page Application là gì, có vai trò như thế nào, có lưu ý gì khi triển khai? Hãy cùng khám phá những điều cần biết về Single Page Application với bài viết sau đây.
Mục lục
1. Single Page Application là gì?
Single Page Application (SPA) là cách gọi chung cho một kiểu lập trình web, là ứng dụng giúp nâng cao trải nghiệm người dùng bằng cách sử dụng HTML5 và AJAX. Hình dung đơn giản khi tải 1 trang web, SPA sẽ tải một trang HTML đơn, sau đó SPA sẽ tiếp tục tải các HTML khác trong cùng một trang đó dựa trên request của người dùng. SPA có thể sử dụng nhiều thư viện JavaScript như Backbone.js, AngularJS, Durandal…
Cái tên của kỹ thuật này phần nào cũng giúp chúng ta hình dung về mục đích của nó. Toàn bộ resource của web bao gồm các file CSS, Javascript, master layout hay cấu trúc web page sẽ được load lần đầu tiên khi chúng ta bắt đầu duyệt một website code kiểu này. Ở những lần sau, khi chuyển trang khác, client sẽ gửi những ajax request để get dữ liệu cần thiết (thường là phần nội dung).Với Single Page Application, các website code theo kiểu này sẽ chỉ cần 1 trang duy nhất để xử lý tất cả các tính năng đồng thời.
Ví dụ:
– domain.com/admin/#/login
– domain.com/admin/#/change-password
– domain.com/admin/#/account
– domain.com/admin/#/dashboard
4 tính năng này hoàn khác nhau nhưng đều được xử lý tại 1 trang duy nhất: domain.com/admin. Đương nhiên, cần hiểu là, khi bạn cần sử dụng một tính năng thì nó sẽ hiện lên cách giao diện khác nhau, nhưng tất cả đều được xử lý tại trang domain.com/admin.
Sử dụng SPA mang đến trải nghiệm cho người dùng web tốt hơn, không tốn nhiều thời gian load lại toàn bộ trang web cồng kềnh, đồng thời tiết kiệm băng thông và thời gian chờ đợi. Đây cũng là xu hướng chung của lập trình web hiện nay.
Rất nhiều trang web bạn đang dùng ứng dụng SPA như: Gmail, Facebook, Youtube, Google Maps, … Hiện nay, tìm những trang web không ứng dung SPA là rất khó, nhất là sau khi người ta thấy được sự tiện lợi của nó.
Xem thêm: Thiết kế website công ty luật
2. Sự ra đời của Single Page Application
Kiểu lập trình web truyền thống trước khi SPA ra đời thường tuân theo mô hình MVC, với cách hoạt động thường là client gửi request tới server, server xử lý request và response cho client (Server Side Rendering – SSR). Trong quá trình đó, server làm hầu như tất cả mọi thứ, và client chỉ việc nhận kết quả, thường là nội dung của một web hoàn chỉnh với HTML, CSS, JS.
Có thể thấy, SSR tập trung xử lý ở server, trong khi trải nghiệm người dùng thì tập trung xử lý ở client. Do đó, khi các trang web ngày càng phức tạp và hướng đến trải nghiệm người dùng thì SSR không đáp ứng được.
Để tăng sự mượt mà trong trải nghiệm người dùng, ở giai đoạn này, người ta bắt đầu tách bạch vai trò của client với server. JQuery và các jQuery plugin lúc này được tận dụng triệt để. Người ta cũng biết đến ajax nhiều hơn. Nhưng sau cùng, các thư viện xử lý ở client giai đoạn đó vẫn thô sơ, không đáp ứng hết các xử lý phức tạp tại client.
Các nghiên cứu, tìm tòi sau rất nhiều thời gian cuối cùng đã đến được với SPA. Có thể nói, SPA là bước ngoặt lớn của lập trình web, với lợi thế đẩy mạnh các thao tác xử lý ở client, tách bạch vai trò frontend và backend hiệu quả và rõ ràng hơn. Các frontend developer từ đó cũng nhận ra, cần quan tâm hơn tới các design pattern, cấu trúc dữ liệu, cấu trúc dự án, thay vì chỉ quan tâm tới UI, UX.
3. Những khác biệt trong hoạt động của SPA và Web truyền thống
Có 2 điểm lớn tạo nên sự khác biệt trong cách hoạt động của web SPA so với web truyền thống là:
- Web SPA có backend và frontend rõ ràng.
- Web SPA sẽ đẩy mạnh xử lý ở frontend.
– Web SPA có backend và frontend rõ ràng.
Với kiểu lập trình truyền thông, backend và frontend chưa được phân định rõ ràng. Trong khi đó, với SPA, backend và frontend tách bạch tới mức chúng có thể nằm ở 2 dự án khác nhau. Như vậy:
+ Website code theo kiểu truyền thống chỉ cần 1 dự án, nhưng là môt dự án lớn và phức tạp, do đó xử lý khá cồng kềnh. Website code theo kiểu SPA có thể cần 2 dự án: 1 dự án cho backend và 1 dự án cho frontend tách bạch
+ Việc trao đổi dữ liệu giữa backend và frontend thường qua các Restful API, định dạng dữ liệu thường là JSON.
Cách hoạt động giữa frontend và backend của website kiểu SPA có thể hình dung như sau:
+ Khi truy cập vào các trang web, frontend sẽ tiếp nhận request. Nếu lập trình truyền thống cho backend thực hiện routing, thì web SPA sẽ cho thực hiện ở frontend.
+ Sau khi tiếp nhận request, frontend phân tích được người dùng web muốn sử dụng tính năng nào, cần những dữ liệu gì, từ đó gửi request tới backend, yêu cầu backend trả dữ liệu mong muốn.
+ Backend trả dữ liệu frontend (thường là dạng json), frontend dựa vào dữ liệu này để render ra nội dung trang web hoàn chỉnh (Thao tác này được gọi là Client Side Rendering)
Có thể thấy, SPA luôn chỉ có 1 trang để tiếp nhận request và thực hiện routing, do đó SPA xử lý tất cả tại một trang nhanh chóng mà không bị quá tải.
– Web SPA đẩy mạnh xử lý ở frontend
Với web SPA, frontend đảm nhiệm hoàn toàn việc render giao diện và xử lý các thay đổi trên giao diện, trong khi đó, backend chỉ làm theo yêu cầu trả dữ liệu cần thiết cho frontend.
Frontend của web SPA thường là một framework hoặc một thư viện về SPA. Những framework hay thư viện này được code bằng JavaScript, và giúp developer dễ dàng phát triển SPA hơn.
Để xử lý các yêu cầu phức tạp ở frontend, các framework SPA cũng hoạt động theo một kiến trúc cụ thể, có thể là MVC (Angular), MV-VM (VueJS, ReactJS),… Nhìn chung, code SPA bằng các framework chuyên về SPA sẽ đơn giản hơn nhiều so với việc code bằng jQuery hoặc bằng các kiến trúc khác thường thấy.
Xem thêm: Thiết kế Website điện máy
4. Bắt đầu lập trình web theo kiểu SPA như thế nào?
Nhìn chung việc lập trình web theo kiểu spa không hề khó, nhưng đòi hỏi lập trình viên phải kiên trì. Bởi lẽ, nếu đã quá quen thuộc với các dạng lập trình truyền thống thì bạn sẽ phải mất khá nhiều thời gian để thay đổi tư duy sang code kiểu spa (gồm backend và frontend tách biệt). Tất nhiên, trong quá trình thực hiện bạn ít nhiều sẽ phân vân không biết nên code ở backend hay front end.
Chính vì vậy, chúng tôi khuyên bạn nên chọn framework VueJS khi bắt đầu lập trình web kiểu spa vì cú pháp của nó được đánh giá là dễ dàng và trong sáng.
Sau đây là các thông tin về VueJS:
- Trang chủ: https://vuejs.org
- Trang thông tin Tiếng Việt: https://vi.vuejs.org
- Diễn đàn: https://forum.vuejs.org
- Facebook group tại Việt Nam: https://fb.com/groups/vuejsvietnam
- Các khóa học miễn phí: https://vueschool.io/courses?filter=free-courses
Ngoài ra, bạn cũng có thể tìm hiểu thêm về VueJS trên các kênh của youtube nữa nhé!
5. Một số lưu ý khi triển khai Web SPA
Nếu bạn đang có ý định triển khai một dự án web SPA nghiêm túc, hãy lưu ý những điều sau:
– Web SPA không dành cho developer thiếu kinh nghiệm với frontend. Do đó, hãy thông thạo CSS, JS, HTML, ajax, es6 trước khi triển khai web SPA.
– Web SPA sẽ không tốt cho SEO: nội dung được render dưới client khiến bot google không đọc được, nên không tốt cho SEO. Dù điều này có cách khắc phục nhưng nếu bạn thử nghiệm SPA cho SEO lần đầu thì cần học hỏi thêm rất nhiều.
– Cần làm quen với những bài toán mới phát sinh như: lazyload, xác thực tài khoản, animation loading.
– Do tách 2 dự án backend và frontend riêng biệt khiến nhiều người nghĩ code SPA lâu hơn kiểu truyền thống, nhưng không hẳn. Thêm nữa, việc này cũng dễ dàng hơn nếu bạn có vấn đề cần sửa lỗi.
– SPA phù hợp với nhiều dạng dự án, như các dự án cần maintain, có định hướng phát triển lâu dài, các dự án tập trung nhiều vào UX, các phần mềm dịch vụ (SAAS).
6. SPA có phải là xu hướng lập trình web trong tương lai?
Thật ra mà nói thì chúng ta rất khó trả lời câu hỏi này. Mặc dù chúng tôi không dám khẳng định spa là xu hướng nhưng với các hoạt động của spa trong những năm gần đây (2015 – 2020) thì chúng đã có mặt trên nhiều phần mềm dịch vụ lớn. Vì vậy, nếu spa không là xu hướng thì ít nhất cũng sẽ tìm được “thị phần” riêng cho mình, đồng thời cũng sở hữu nhiều tính năng vượt trội đủ để cạnh tranh với các kiểu lập trình truyền thống.
Tốt nhất, bạn nghiên cứu thêm nhiều tài liệu tham khảo khác và dựa vào tư duy của mình để có được câu trả lời thỏa đáng nhất nhé!
Nếu còn bất cứ thắc mắc gì về Single Page Application, hãy liên hệ 086.779.5558 để được thiết kế website AIO tư vấn phù hợp. Chúng tôi cũng luôn sẵn sàng hỗ trợ bạn để tạo ra những trang web tối ưu, trải nghiệm net và phù hợp nhất với mục đích của bạn! .
