Bây giờ hãy để tôi cung cấp cho bạn một cái nhìn tổng quan ngắn gọn về các ứng dụng đơn trang.
Ứng dụng một trang là gì?
Chúng khác với các trang web mà bạn có thể đã phát triển trước đó như thế nào?
Ví dụ, trang web mà bạn đã phát triển trong quá trình chuyên môn trước đó,
nơi bạn có nhiều trang - tại sao các ứng dụng trang đơn thú vị
và những gì bạn cần phải biết
khi bạn đang thiết kế các ứng dụng đơn trang?
Bài giảng này không có ý định là toàn bộ luận về Ứng dụng Trang đơn,
nhưng thực sự, cung cấp cho bạn đủ giới thiệu
để giúp bạn bắt đầu suy nghĩ về Ứng dụng Trang đơn,
đặc biệt là trong bối cảnh của Angular.
Trước khi chúng tôi hiểu ứng dụng một trang, chúng ta hãy lùi lại một bước
và xem xét cách các trang web truyền thống hoạt động.
Trong các trang web truyền thống, cho đến nay - nếu bạn truy cập vào một trang web,
bạn có thể yêu cầu truy cập vào một trang cụ thể.
Ví dụ, bạn sẽ yêu cầu một trang index.html
khi bạn điều hướng đến trang web,
bằng cách nhấp vào một liên kết
hoặc bằng cách gõ địa chỉ của trang web vào thanh địa chỉ của trình duyệt của bạn.
Vì vậy, thông thường, trang index.html là trang đầu tiên
mà bạn lấy khi bạn truy cập một trang web.
Và khi trang được tải xuống từ máy chủ sang trình duyệt của bạn -
và sau đó điều này sẽ được hiển thị trong trình duyệt của bạn.
Bây giờ điều này có thể bao gồm không chỉ trang index.html,
mà còn các tài nguyên khác có thể cần phải được tải xuống để xây dựng trang index.html.
Trong trường hợp này, trang index.html có thể yêu cầu các tài nguyên bổ sung,
như hình ảnh hoặc dữ liệu, để được tải xuống trước khi trang chỉ mục có thể được xây dựng.
Nhưng bây giờ, sau đó, nếu bạn điều hướng đến một trang khác trong trang web của bạn
- ví dụ, một trang khác như contactus.html,
điều này sẽ dẫn đến trình duyệt của bạn gửi một yêu cầu khác
đến máy chủ để lấy trang thứ hai đó.
Vì vậy, nó sẽ bắt đầu một yêu cầu toàn bộ máy chủ
và tất cả các tài nguyên cần thiết để xây dựng
trang thứ hai sẽ phải được tải xuống từ máy chủ.
Vì vậy, khi bạn di chuyển từ trang này sang trang khác,
nó sẽ liên quan đến tất cả các trang mới được tải từ máy chủ
và điều này sẽ liên quan đến một thời gian chuyến đi vòng đến máy chủ
để lấy tất cả các tài nguyên cần thiết để xây dựng các trang đó.
Bây giờ hãy tưởng tượng rằng trang web của bạn có nhiều trang.
Sau đó, rõ ràng, mỗi phần duy nhất mà
trang web của bạn yêu cầu để kết xuất sẽ đòi hỏi một thời gian đi lại đầy đủ đến các máy chủ.
Những gì bạn sẽ lưu ý là - thường là nhiều trong số những trang này có rất nhiều điểm chung.
Có lẽ, ví dụ, đầu trang
và chân trang và một số thông tin khác đều phổ biến trong tất cả các trang này.
Tuy nhiên, mỗi yêu cầu trang mới sẽ yêu cầu bạn
- để đi và lấy toàn bộ trang từ máy chủ.
Bây giờ với việc sử dụng bộ nhớ đệm trên trang web trình duyệt, bạn có thể giảm thiểu một số vấn đề này
bằng cách sử dụng lại các tài nguyên đã được lấy từ bộ nhớ cache của bạn; nhưng vẫn còn,
mỗi trang mới mà bạn điều hướng đến sẽ yêu cầu toàn bộ một trang
để được tải lại từ trang web máy chủ.
Ứng dụng trang đơn tiếp cận vấn đề này theo một cách khác.
Trong một ứng dụng trang đơn, thông thường chúng tôi đã phát triển một ứng dụng web
để khi trình duyệt điều hướng đến trang web,
sau đó điều này sẽ yêu cầu ứng dụng web được tải xuống từ trang web máy chủ.
Vì vậy, điều này sẽ được, ví dụ, chứa trong một trang chủ như index.html
, nó sẽ kích hoạt toàn bộ các tài sản
được yêu cầu để hiển thị ứng dụng web của bạn để được tải xuống trang web khách hàng của bạn.
Bây giờ làm thế nào các tài sản này được đóng gói phụ thuộc vào cách bạn thiết kế ứng dụng web của bạn
và cũng là những gì framework bạn sử dụng để thiết kế ứng dụng web của bạn.
Tuy nhiên, bạn có một tải xuống lớn duy nhất khi bắt đầu ứng dụng web của bạn.
Những thay đổi tiếp theo cho trang web khách hàng, ví dụ, bắt đầu bằng một cú nhấp chuột vào một liên kết,
sẽ bắt đầu một yêu cầu mới đến trang web máy chủ; nhưng trong trường hợp này
, rất thường xuyên, bạn chỉ tải về một số dữ liệu, có lẽ dưới dạng dữ liệu JSON,
từ trang web máy chủ.
Vì vậy, trong trường hợp này, mỗi người trong số này có thể chỉ yêu cầu truy cập vào máy chủ
chỉ để tải dữ liệu JSON, ví dụ,
sau đó có thể cho phép bạn hoàn toàn hiển thị chế độ xem mới
trong ứng dụng đơn trang của bạn.
Vì vậy, việc tải xuống trang ban đầu, tải xuống ứng dụng ban đầu, tất nhiên,
luôn ở đó, nhưng hầu hết các tương tác tiếp theo với máy chủ
sẽ chỉ đơn giản là để tải xuống dữ liệu, thường ở dạng JSON hoặc XML,
tùy thuộc vào cách bạn thiết kế định dạng dữ liệu của bạn.
Và một khi dữ liệu được tải xuống,
những dữ liệu đó sau đó có thể được sử dụng để hiển thị chế độ xem mới trong ứng dụng của bạn.
Vì vậy, trong những trường hợp này,
bạn sẽ tiết kiệm rất nhiều thời gian chuyến đi vòng đến máy chủ để tải xuống rất nhiều tài sản.
Tất nhiên, tải trang ban đầu đòi hỏi một số lượng công việc phải được thực hiện,
nhưng các yêu cầu tiếp theo có thể dành cho một lượng dữ liệu rất nhỏ.
Và đó, thực sự, là tính năng quan trọng của các ứng dụng trang đơn.
Bây giờ với việc hiển thị trước một số lượt xem của họ trên chính trang web máy chủ,
bạn thậm chí có thể giảm thiểu một số thời gian tải xuống ban đầu cho ứng dụng web của bạn.
Vì vậy, ngay cả Angular, ví dụ, cho
phép bạn hiển thị trước một phần của chế độ xem đầu tiên của bạn trên trang web máy chủ
để cho phép hiển thị thông tin cho khách hàng một cách nhanh chóng,
trong khi phần còn lại của ứng dụng web đang được trình duyệt của bạn tải xuống.
Vì vậy, chúng tôi có thể tóm tắt rằng Ứng dụng Trang đơn
như một ứng dụng web trên một trang web phù hợp với một trang duy nhất - một lần nữa,
cho hoặc mất - bạn - bạn biết đấy, không giải thích nó quá theo nghĩa đen.
Vì vậy, bạn không cần phải tải lại toàn bộ trang một lần nữa.
Vì vậy, đó là tính năng quan trọng của một ứng dụng trang đơn.
Ngoài ra, Ứng dụng một trang cho phép bạn cung cấp trải nghiệm người dùng
gần hơn với công việc mà họ nhìn thấy với các ứng dụng trên máy tính. Sau
khi ứng dụng web ban đầu được tải xuống; sau đó,
hầu hết các tương tác khác có vẻ như bạn đang tương tác với một ứng dụng máy tính để bàn.
Vì vậy, để tóm tắt những gì chúng ta vừa học được, một ứng dụng đơn trang là gì?
Một ứng dụng trang đơn là một ứng dụng web hoặc một trang web phù hợp với một trang duy nhất.
Bạn không cần phải tải lại toàn bộ trang mỗi khi người dùng tương tác
với ứng dụng.
UX giống như một máy tính để bàn hoặc một ứng dụng gốc.
Hầu hết các tài nguyên cần thiết cho ứng dụng của bạn
được tải xuống tại phiên bản đầu tiên chính nó, với tải trang đầu tiên.
Sau đó, chỉ các phần của trang được vẽ lại,
dựa trên cách tương tác người dùng xảy ra mà không yêu cầu một chuyến đi khứ hồi máy chủ đầy đủ,
để lấy tất cả các tài nguyên mà bạn cần.
Tất nhiên, điều này không đến mà không có tập hợp riêng của nó các vấn đề cần phải được giải quyết.
Vì vậy, khi bạn thiết kế các ứng dụng một trang, một trong những điều đầu tiên
mà mọi người thường đặt câu hỏi về ứng dụng một trang
là chúng không được tối ưu hóa cho các công cụ tìm kiếm.
Vì vậy, tối ưu hóa công cụ tìm kiếm là một phần quan trọng cần được giải quyết.
Vì vậy, nếu bạn có công cụ tìm kiếm
thu thập dữ liệu trang web của bạn để trích xuất dữ liệu và chỉ mục thông tin,
thì Ứng dụng một trang có thể không nhất thiết phải hợp tác trong trường hợp này.
Nhưng ngay cả tối ưu hóa công cụ tìm kiếm với các khung dữ liệu hiện tại,
như Angular, đã đi xa xuống con đường mà ngay cả với Ứng dụng Trang đơn, các
công cụ tìm kiếm về cơ bản có thể
lập chỉ mục rất nhiều thông tin mà ứng dụng web của bạn phục vụ.
Vấn đề thứ hai cần giải quyết là bao nhiêu cấu trúc web nên được offloaded
vào trang web khách hàng như trái ngược với trang web máy chủ.
Vì vậy, các máy chủ là khá nhiều hoạt động như một nguồn dữ liệu trong ứng dụng trang đơn
và phần lớn công việc được offloaded vào các trang web khách hàng.
Từ một quan điểm,
điều này cung cấp cho bạn nhiều cách mở rộng hơn
để cung cấp ứng dụng web của bạn cho trang web khách hàng của bạn, bởi vì phần lớn công việc kết xuất được thực hiện trên trang web khách hàng.
Bây giờ bạn có thể tối ưu hóa điều này ở một mức độ nào đó để bù đắp tải xuống ban
đầu của ứng dụng web từ trang web máy chủ
bằng cách thực hiện một phần của kết xuất trên trang web máy chủ.
Như tôi đã đề cập, Angular cung cấp
cho bạn một cơ hội để làm điều đó với một phần trang web máy chủ render
của cái nhìn ban đầu của bạn về ứng dụng của bạn.
Khía cạnh thứ ba là làm thế nào để duy trì lịch sử để khi bạn nhấp vào một nút trở lại
hoặc một nút chuyển tiếp, bạn sẽ đưa người dùng đến đâu?
Bạn có lưu đủ thông tin
mà bạn sẽ có thể điều hướng trong số các chế độ xem khác nhau của ứng dụng của bạn và vân vân?
Vì vậy, đó là một điều mà bạn cần lưu ý.
Tất nhiên, bởi vì bộ định tuyến Angular tận dụng API lịch sử năm trang html,
vì vậy nó có thể giải quyết vấn đề này ở mức độ lớn.
Câu hỏi cuối cùng mà chúng ta có là phân tích.
Làm thế nào để bạn hỗ trợ phân tích trên trang web của bạn?
Làm thế nào để bạn thu thập dữ liệu phân tích và vân vân?
Và cũng có thể, như tôi đã đề cập trước đó, tăng tốc tải trang ban đầu
là một cái gì đó đáng quan tâm khi bạn đang thiết kế ứng dụng web của bạn.
Bây giờ với Angular, như tôi đã nói,
thực hiện một phần render ở phía máy chủ sẽ tăng tốc độ tải trang ban đầu
trên trang khách hàng của bạn trong khi phần còn lại của ứng dụng web
đang được tải xuống trang khách hàng.
Vì vậy, bạn có thể che dấu một chút thời gian tải xuống ban đầu cho các ứng dụng web
bằng cách thực hiện một phần render từ chính trang web của máy chủ.
Với những ý tưởng cơ bản này trong tâm trí,
bây giờ chúng ta hãy đi và khám phá cách Angular hỗ trợ Ứng dụng Trang đơn.
Chúng tôi đã kết hợp bộ định tuyến Angular
vào ứng dụng Angular của chúng tôi trong bài tập trước đó.
Trong các bài tập tiếp theo trong bài học
và bài tập này, chúng tôi sẽ hoàn thành
việc phát triển Ứng dụng Một trang mà chúng tôi đã thực hiện cho đến nay trong khóa học này.