Single Page Application là gì? Có phải là xu hướng lập trình web trong tương lai? – PhamBinh.net
Xin chào tất cả mọi người,
5 năm trước (khoảng năm 2015), tôi đã nghe về khái niệm Ứng dụng trang đơn và muốn tìm hiểu. Sau khi thực hiện một vài dự án thử nghiệm theo phong cách SPA, tôi đã hiểu nó là gì, và theo cảm nhận của tôi lúc đó, “ Ứng dụng một trang sẽ là tương lai của lập trình web “. Vậy ứng dụng trang đơn là gì, nó có gì khác so với kiểu lập trình web truyền thống, cho đến thời điểm hiện tại (2020) ứng dụng trang đơn có đang là xu hướng hay không, mời các bạn chú ý theo dõi bài viết này.
Lưu ý: Đây là một bài đăng “dài dòng”, vì tôi muốn bạn không chỉ biết ứng dụng một trang là gì mà còn hiểu nó, tại sao nó ra đời và một số lưu ý. Khi viết web trong một ứng dụng trang đơn.
& gt; & gt; Đọc thêm: Cách tính kinh nghiệm làm việc, sự khác biệt giữa biết và hiểu.
Tôi. Ứng dụng một trang là gì? Tại sao Ứng dụng trang đơn ra đời.
1.1 Ứng dụng một trang là gì?
Ứng dụng Trang Đơn (viết tắt là spa) là tên chung cho một loại lập trình mạng.
Các trang web được lập trình theo phong cách spa thường mang lại trải nghiệm mượt mà khiến người dùng cảm thấy như họ đang sử dụng ứng dụng dành cho thiết bị di động thay vì ứng dụng dành cho thiết bị di động > Không phải là một trang web (thực ra viết một trang web theo phong cách spa rất giống với viết một ứng dụng dành cho thiết bị di động).
Nếu bạn muốn trải nghiệm mã hóa trang web theo phong cách spa, chắc chắn bạn đã … từng trải qua nó, vì các trang web lớn như facebook.com, google.com, youtube.com, twitter.com đều được mã hóa. phong cách spa. Không khó để nhận thấy trải nghiệm của các trang trên đều rất mượt mà, nổi bật nhất là việc chuyển từ trang này sang trang khác không có độ trễ.
Vậy tại sao công nghệ này được gọi là Ứng dụng trang đơn – cái tên nghe có vẻ hơi khó hiểu đối với người mới bắt đầu. Trên thực tế, ngay khi bạn cố gắng viết một dự án theo phong cách spa, bạn sẽ hiểu. Nhưng tôi có thể giải thích cho bạn một cách nhanh chóng.
Nó được đặt tên là Ứng dụng một trang vì một trang web được mã hóa theo kiểu này chỉ cần một trang để xử lý tất cả các chức năng của nó . Ví dụ: – domain.com/admin/#/login- domain.com/admin/#/change-password- domain.com/admin/#/account- domain.com/admin/#/dashboard có 4 chức năng khác nhau , nhưng tất cả chúng đều nằm trên một trang domain.com/admin. Tất nhiên, mỗi chức năng sẽ hiển thị một giao diện khác nhau, nhưng tôi muốn nhấn mạnh rằng được xử lý tại domain.com/admin . Còn nguyên nhân vì sao thì chỉ được xử lý trên một trang, mời các bạn cùng theo dõi trong nội dung bài viết. Lưu ý : Ký tự sau dấu # trên url không hợp lệ. trong sự cô lập trang. Điều này có nghĩa là domain.com/admin/#/bla-bla-bla vẫn là domain.com/admin
Nếu bạn đọc lời giải thích của tôi mà vẫn không hiểu, không sao cả, chỉ cần làm ví dụ về spa là bạn sẽ hiểu. Tôi cũng khuyến khích bạn nên hiểu thông qua thực hành hơn là đọc lý thuyết.
& gt; & gt; Đọc thêm: Những cách hiệu quả để học các công nghệ mới
Lý do 1,2 spa ra đời
Để tìm hiểu thêm về spa, chúng ta nên biết tại sao nó lại có mặt trên trái đất này.
Trước khi spa ra đời, lập trình web có xu hướng theo mô hình mvc (kiểu lập trình truyền thống). Cách thức hoạt động thường là máy khách gửi yêu cầu đến máy chủ, máy chủ xử lý yêu cầu đó và phản hồi lại máy khách. Những gì khách hàng nhận được thường là nội dung web với html, css và js. Tóm lại, máy chủ làm hầu hết mọi thứ và máy khách chỉ nhận được kết quả (như không “làm” nhưng vẫn ăn).
Thao tác máy chủ để xử lý các yêu cầu và phản hồi trong html, css, js đầy đủ còn được gọi là Kết xuất phía máy chủ (mọi người vẫn viết tắt là ssr).
Tuy nhiên, khi các trang web ngày càng phức tạp và tập trung nhiều hơn vào trải nghiệm người dùng , ssr trở nên kém phản hồi hơn vì ssr trên máy chủ được xử lý tập trung trong khi trải nghiệm người dùng lấy khách hàng làm trung tâm .
Ở giai đoạn này, mọi người nghĩ những gì thuộc về máy khách, hãy để máy khách xử lý và bắt đầu phân tách vai trò của máy khách và máy chủ. Tại thời điểm này, các plugin jquery và jquery được phát huy hết tác dụng, và ajax đã trở nên quen thuộc với mọi người. Nhưng suy cho cùng thì thư viện xử lý của client (chủ yếu là jquery) ở giai đoạn đó vẫn còn rất đơn giản, khó có thể đáp ứng được các xử lý phức tạp của client.
Thêm nữa Tôi đã từng mất ngủ trong jquery do các lỗi khó hiểu như sự kiện nhấp chuột trùng lặp và cũng cảm thấy mệt mỏi khi cập nhật dom thông qua các hàm append (), html (), prepend () Lặp đi lặp lại nhiều lần. Nhưng tôi cũng phải hiểu rằng jquery được tạo ra để làm việc với dom, nó giúp tôi chèn một đoạn html vào đâu đó, chỉnh sửa văn bản hoặc thay đổi css. Tôi không thể mong đợi nhiều hơn.
Sau giai đoạn này, ý tưởng về một phong cách lập trình có thể được khách hàng xử lý nhiều hơn, đó là spa.
spa có thể nói là một bước ngoặt lớn trong lập trình web, bởi vì spa thúc đẩy nhiều hoạt động xử lý hơn ở phía khách hàng, nâng cao vai trò của front end và giảm bớt “gánh nặng” của back end (nó cũng có thể được nói rằng spa tách biệt kết thúc phía trước và kết thúc phía sau). Các nhà phát triển front-end bây giờ cũng cần chú ý nhiều hơn đến các mẫu thiết kế, cấu trúc dự án và cấu trúc dữ liệu, thay vì chỉ ui và ux.
& gt; & gt; Đọc thêm: Một lập trình viên giỏi phải biết những mẫu thiết kế nào.
& gt; & gt; Đọc thêm: Một số mẫu thiết kế bạn có thể sử dụng trong javascript.
Thứ hai. Web spa hoạt động khác với web truyền thống
Xin lỗi vì những lời dài dòng, nhưng để hiểu về spa, bạn thực sự nên hiểu “bài nói dài” trước đó.
So với các mạng truyền thống, cách thức hoạt động của mạng spa có 2 đặc điểm hình ảnh lớn:
- Web spa với phần phụ trợ và giao diện người dùng rõ ràng.
- web spa sẽ được cải tiến trên giao diện người dùng.
- Mã hóa trang web truyền thống chỉ yêu cầu 1 dự án, trong khi trang web mã hóa spa có thể yêu cầu 2 dự án: 1 dự án phụ trợ và 1 dự án giao diện người dùng.
- Theo khái niệm spa, backend và frontend được coi là 2 dự án khác nhau, mặc dù chúng được sinh ra để dành cho nhau.
- Trao đổi dữ liệu giữa phụ trợ và giao diện người dùng thường thông qua api khôi phục và định dạng dữ liệu thường là json.
- Khi người dùng truy cập vào một trang web, giao diện người dùng sẽ là phần tiếp nhận yêu cầu, không phải là giao diện người dùng – hay đúng hơn, web spa đang định tuyến trên giao diện người dùng thay vì giao diện người dùng sau- kết thúc như trong lập trình truyền thống.
- Sau khi nhận được yêu cầu, front-end sẽ biết người dùng muốn sử dụng chức năng nào và chức năng này cần dữ liệu gì, sau đó gửi yêu cầu đến back-end để yêu cầu back-end trả lại dữ liệu mong muốn.
- Giao diện người dùng nhận dữ liệu (thường ở dạng json) từ chương trình phụ trợ và dựa vào dữ liệu này để hiển thị nội dung web hoàn chỉnh.
- Trang chủ: https://vuejs.org
- Trang tài liệu tiếng Việt: https://vi.vuejs.org
- Diễn đàn: https://forum.vuejs.org
- Nhóm facebook Việt Nam: https://fb.com/groups/vuejsvietnam
- Các khóa học miễn phí: https://vueschool.io/courses?filter=free-courses
- web spa không dành cho các nhà phát triển front-end thiếu kinh nghiệm : Nếu bạn không thành thạo html, css, js, ajax, es6, hãy trau dồi kiến thức trước khi triển khai web spa.
- Web spa có hại cho seo : Nội dung được hiển thị dưới phía máy khách, khiến bot google không thể đọc được và do đó có hại cho seo. (Sẽ có cách khắc phục nhưng tôi sẽ đề cập đến vấn đề đó trong một bài viết khác).
- Nhiều vấn đề mới sẽ phát sinh : xác thực tài khoản, tải hoạt ảnh, tải lười.
- Thời gian hoàn thành : Việc chia tách hai dự án phụ trợ và giao diện người dùng riêng biệt sẽ khiến nhiều bạn nghĩ rằng mã spa sẽ mất nhiều thời gian hơn mã kiểu truyền thống. Nhưng không phải như vậy, tùy vào từng dự án mà thời gian hoàn thành của web spa sẽ nhanh hơn hoặc chậm hơn so với kiểu mã hóa truyền thống.
- Spa thân thiện với dự án : Là dự án cần được duy trì và có hướng phát triển lâu dài. Phần mềm như một dịch vụ (saas). Dự án chủ yếu tập trung vào trải nghiệm người dùng.
Chúng tôi sẽ giới thiệu từng cái một.
2.1 web spa với phụ trợ và giao diện người dùng rõ ràng.
Trong lập trình truyền thống, không có sự phân chia rõ ràng giữa phụ trợ và giao diện người dùng. Ví dụ như laravel framework, bạn vẫn có thể viết php trong view component. Nhưng sử dụng spa thì khác, backend và frontend được tách biệt để chúng có thể nằm trong 2 dự án khác nhau:
& gt; & gt; Đọc thêm: tất cả về api thư thái
Cách thức hoạt động của trang web kiểu spa giữa giao diện người dùng và hậu cần có thể được mô tả như sau:
Kết xuất giao diện người dùng (phía máy khách) còn được gọi là kết xuất phía máy khách .
Đọc đến đây, bạn có hiểu tại sao spa xử lý tất cả những điều này trên một trang không? Đó là vì spa luôn chỉ có 1 trang duy nhất để nhận yêu cầu và thực hiện định tuyến, giống như nhiều framework php thường nhận yêu cầu qua tệp index.php, vì vậy. & Gt; & gt; read more: don’t try remove “public” on laravel url ”
2.2 web spa tạo điều kiện cho quá trình xử lý front-end.
Đối với web spa, giao diện người dùng chịu trách nhiệm hiển thị giao diện và xử lý các thay đổi về giao diện, còn giao diện người dùng chỉ đợi dữ liệu được giao diện người dùng yêu cầu và trả lại.
Web spa yêu cầu quá trình xử lý phức tạp trên giao diện người dùng, vì vậy giao diện người dùng thường áp dụng khung hoặc thư viện spa để xử lý nó, chẳng hạn như góc cạnh, vuejs hoặc reactjs. Các framework hoặc thư viện này sẽ giúp các lập trình viên phát triển spa dễ dàng hơn và tất nhiên chúng đều được mã hóa bằng javascript.
& gt; & gt; Đọc thêm: Học javascript trong 15 phút.
Hiện tại, chúng tôi chưa thảo luận về khung hoặc thư viện nào mà spa chọn, nhưng chắc chắn rằng “ giao diện người dùng của web spa thường là khung hoặc thư viện của spa “.
Bạn có thể đã biết kiến trúc MVC của phần phụ trợ, nhưng bạn có biết rằng MVC cũng có thể được áp dụng cho giao diện người dùng không? Trên thực tế, để xử lý các yêu cầu phức tạp trên giao diện người dùng, các khuôn khổ spa cũng có thể hoạt động theo một kiến trúc cụ thể, có thể là mvc (góc cạnh) hoặc mv-vm (vuejs, reactjs).
Bạn không cần phải vội vàng tìm hiểu kiến trúc mvc hoặc mv-vm cho giao diện người dùng, chỉ cần biết rằng mã hóa spa với các khung cụ thể dành cho spa sẽ đơn giản hơn nhiều so với mã hóa bằng jquery hoặc bất kỳ kiến trúc nào khác. Đây là ý tưởng của riêng bạn (bạn quá giỏi tôi sẽ không nói).
Ba. Cách bắt đầu với lập trình web kiểu spa
Bắt đầu không khó nhưng đòi hỏi bạn phải kiên trì. Vì nếu đã quá quen thuộc với phong cách lập trình web truyền thống, bạn sẽ mất nhiều thời gian để thay đổi tư duy sang mã kiểu spa (tách riêng phần backend và frontend). Đôi khi bạn tự hỏi liệu điều này nên được mã hóa trên phụ trợ hay giao diện người dùng.
Hãy kiên nhẫn khi bạn bắt đầu viết mã cho spa của mình
Để chọn khuôn khổ spa nào để bắt đầu, tôi khuyên bạn nên sử dụng vuejs. Bởi vì cú pháp ngắn gọn của nó, nó dễ hiểu hơn so với góc cạnh và phản ứng.
Một số thông tin về vuejs như sau:
Bạn cũng có thể tìm thấy nhiều video vuejs trên youtube.
Lưu ý: Cách nghĩ của mã web spa rất khác với mã truyền thống, mã spa gần với mã ứng dụng di động hơn.
Bốn. Một số lưu ý khi triển khai web dựa trên spa
Nếu bạn đang triển khai một dự án mạng lưới spa nghiêm túc , vui lòng lưu ý những điều sau:
v. Spa có phải là tương lai của lập trình web không?
Câu hỏi này thực sự khó trả lời. Dù không dám nói spa là xu hướng nhưng với cách thức hoạt động của spa đã xuất hiện trên nhiều phần mềm dịch vụ lớn trong 5 năm trở lại đây (2015-2020). Các công ty tôi làm việc mới thực hiện một số dự án theo phong cách spa, và các ông lớn công nghệ như google và facebook cũng đang sử dụng spa trên sản phẩm của họ. Nếu spa không phải là trào lưu thì ít nhất nó cũng đã tìm được “thị phần” cho riêng mình và đủ tự tin để “cạnh tranh” với các show truyền thống.
Đây là ý kiến của tôi, còn của bạn thì sao?
