Позвольте мне теперь дать вам краткий обзор одностраничных приложений.
Что такое однострочные приложения?
Чем они отличаются от сайтов, которые вы могли разработать раньше?
Например, сайт, который вы разработали в предыдущем курсе этой специализации,
, где у вас было несколько страниц - почему одностраничные приложения интересны
и что это такое, что вам нужно знать
, когда вы разрабатываете одностраничные приложения?
Эта лекция не предназначена для того, чтобы быть целым трактатом о одностраничных приложениях,
, но на самом деле, дать вам достаточно введение
, чтобы вы начали думать о одностраничных приложений,
особенно в контексте Angular.
Прежде чем мы поймем одностраничные приложения, давайте сделаем шаг назад
и посмотрим, как работают традиционные веб-сайты.
В традиционных веб-сайтах, пока - если вы посещаете сайт,
вы можете запросить доступ к определенной странице.
Например, вы будете запрашивать страницу index.html
при переходе на сайт,
либо нажав на ссылку
, либо введя адрес веб-сайта в адресную строку браузера.
Таким образом, как правило, страница index.html является первой
, которую вы получаете при посещении веб-сайта.
А когда страница загружается с сервера в ваш браузер -
и тогда это будет отображаться в вашем браузере.
Теперь это может включать не только страницу index.html, но и другие ресурсы
, которые могут понадобиться для того, чтобы построить страницу index.html.
В этом случае страница index.html может потребовать дополнительных ресурсов, как изображения или данные
, для загрузки до того, как будет создана индексная страница.
Но теперь, впоследствии, если вы перейдете на другую страницу на своем сайте
- скажем, например, другую страницу типа contactus.html,
, это приведет к тому, что ваш браузер отправит еще один запрос на сервер
для получения этой второй страницы.
Таким образом, он инициирует весь запрос на сервер
и все ресурсы, необходимые для построения
второй страницы, должны быть загружены с сервера.
Таким образом, когда вы переходите с одной страницы на другую страницу,
это будет включать каждую новую страницу, которая будет загружена с сервера
, и это будет включать время поездки туда и обратно на сервер
, чтобы получить все ресурсы, необходимые для построения этих страниц.
Теперь представьте, что на вашем сайте много страниц.
Тогда очевидно, что каждая отдельная часть, которую требуется для рендеринга вашей веб-
, потребует полного времени поездки на серверы.
То, что вы бы отметили, - часто это то, что многие из этих страниц имеют много общего.
Возможно, например, заголовок
и нижний колонтитул и какая-то другая информация являются общими на всех этих страницах.
Но все же, каждый новый запрос страницы потребует от вас
- пойти и получить всю страницу с сервера.
Теперь с использованием кэширования на сайте браузера, вы можете смягчить некоторые из этих проблем
, повторно используя уже полученные ресурсы из кэша; но все же,
каждая новая страница, на которую вы переходите, потребует перезагрузки всей страницы
с сайта сервера.
Одностраничные приложения подходят к этой проблеме по-другому.
В одностраничном приложении, как правило, мы разработали веб-приложение
, поэтому, когда браузер переходит на веб-сайт,
, тогда это будет запрашивать веб-приложение для загрузки с сайта сервера.
Таким образом, это будет, например, содержаться в главной странице, такой как index.html,
, которая вызовет весь набор активов
, которые необходимы для рендеринга вашего веб-приложения для загрузки на ваш клиентский сайт.
Теперь, как эти активы упакованы, зависит от того, как вы разрабатываете веб-приложение
, а также от того, какую структуру вы используете для разработки вашего веб-приложения.
Но, тем не менее, у вас есть одна большая загрузка в начале вашего веб-приложения.
Последующие изменения на клиентском сайте, например, инициированные кликом по ссылке,
инициирует новый запрос на сайт сервера; но в этом случае
очень часто вы загружаете только некоторые данные, возможно, в виде данных JSON,
с сайта сервера.
Таким образом, в этом случае для каждого из них может потребоваться только доступ к серверу
только для загрузки данных JSON, например
, который затем может позволить вам полностью отобразить новое представление
в вашем приложении Single Page.
Так что начальная загрузка страницы, начальная загрузка приложения, конечно,
всегда есть, но большинство последующих взаимодействий с сервером
будет просто для загрузки данных, как правило, в виде JSON или XML,
в зависимости от того, как вы создаете свой формат данных.
И как только данные будут загружены,
эти данные могут быть использованы для рендеринга нового представления в вашем приложении.
Так что в этих обстоятельствах
вы сэкономите много времени на поездку на сервер для скачивания большого количества активов.
Конечно, начальная загрузка страницы требует некоторого объема работы,
, но последующие запросы могут быть очень маленькими объемами данных.
И это, действительно, является важной особенностью одностраничных приложений.
Теперь с предварительной рендерингом некоторых из своих просмотров на самом сервере,
вы даже можете уменьшить некоторое время начальной загрузки для вашего веб-приложения.
Так даже Angular, например,
позволяет предварительно визуализировать часть вашего первого представления на сайте сервера
, чтобы включить отображение информации клиенту быстро,
в то время как остальная часть веб-приложения загружается вашим браузером.
Таким образом, мы можем резюмировать, что Single Page Applications
как веб-приложение на веб-сайте, который вписывается в одну страницу - опять же,
дают или берут - вы - знаете, не интерпретируйте это слишком буквально.
Таким образом, вам не нужно перезагружать всю страницу снова.
Так что это важная особенность одностраничного приложения.
Кроме того, одностраничные приложения позволяют предоставлять пользовательский интерфейс
, который ближе к работе с настольными приложениями.
После загрузки исходного веб-приложения; затем
большинство других взаимодействий будет казаться, что вы взаимодействуете с настольным приложением.
Итак, чтобы обобщить то, что мы только что узнали, что такое одностраничное приложение?
Одностраничное приложение представляет собой веб-приложение или веб-сайт, который помещается в одну страницу.
Вам не нужно перезагружать всю страницу каждый раз, когда пользователь взаимодействует
с приложением.
UX больше похож на рабочий стол или собственное приложение.
Большая часть ресурсов, необходимых для вашего приложения
, загружается в самом первом экземпляре с первой загрузкой страницы.
После этого перерисовываются только части страницы,
в зависимости от того, как происходит взаимодействие с пользователем без необходимости полного обхода сервера,
для получения всех необходимых ресурсов.
Конечно, это не происходит без собственного набора вопросов, которые необходимо решить.
Таким образом, когда вы разрабатываете одностраничные приложения, одна из первых вещей
, что люди часто задают вопрос о одностраничных приложениях
заключается в том, что они не оптимизированы для поисковых систем.
Таким образом, оптимизация поисковых систем является важной частью, которая должна быть решена.
Таким образом, если у вас есть поисковые системы
, которые сканировать ваш сайт для извлечения данных и индексации информации,
, тогда одностраничные приложения могут не обязательно сотрудничать в этом случае.
Но даже поисковая оптимизация с текущими фреймворками данных,
как Angular, пошли далеко по пути, что даже с Single Page Application,
поисковые системы могут по существу индексировать много информации
, что ваше веб-приложение обслуживает.
Второй вопрос, который необходимо решить, заключается в том, какая часть веб-конструкции должна быть выгружена
на клиентский сайт, а не на серверный сайт.
Таким образом, сервер в значительной степени выступает в качестве источника данных в Single Page Applications
и большая часть работы выгружается на клиентский сайт.
С одной стороны,
это дает вам гораздо более масштабируемый способ доставки вашего веб-приложения
на ваш клиентский сайт, потому что большая часть работы рендеринга выполняется на клиентском сайте.
Теперь вы можете оптимизировать это в некоторой степени, чтобы компенсировать начальную загрузку
веб-приложения с сайта сервера
, выполнив часть рендеринга на сайте сервера.
Как я уже упоминал, Angular предоставляет вам возможность
для этого с частичным рендерингом сайта
вашего первоначального представления вашего приложения.
Третий аспект - как сохранить историю, поэтому, когда вы нажимаете на кнопку Назад
или кнопку вперед, куда бы вы взяли пользователя?
Вы сохраняете достаточно информации
, чтобы вы могли перемещаться между различными представлениями вашего приложения и так далее?
Так что это одна вещь, которую вы должны иметь в виду.
Конечно, потому что угловой маршрутизатор использует html-пятистраничный API истории,
, поэтому он способен решить эту проблему в значительной степени.
Последний вопрос, который у нас есть, это аналитика.
Как вы поддерживаете аналитику на своей веб-странице?
Как вы собираете аналитические данные и так далее?
А также, как я уже упоминал ранее, ускорение начальной загрузки страницы
- это то, что вызывает озабоченность, когда вы разрабатываете свое веб-приложение.
Теперь с Angular, как я уже сказал,
выполнение частичного рендеринга на стороне сервера ускорит начальную загрузку страницы
на вашем клиентском сайте, в то время как остальная часть веб-приложения
загружается на клиентский сайт.
Таким образом, вы можете маскировать немного времени начальной загрузки веб-приложения
, выполнив частичный рендеринг с самого сайта сервера.
Имея в виду эти основные идеи,
давайте теперь пойдем и изучим, как Angular поддерживает одностраничные приложения.
В предыдущем упражнении мы уже включили угловой маршрутизатор
в наше угловое приложение.
В последующих упражнениях в этом уроке
и задании мы завершаем разработку приложения на одной странице
, над которым мы работали до сих пор в этом курсе.