Понятие и классификация web-приложений

Понятие и классификация web-приложений
Web-приложение — клиент-серверное приложение, в котором клиент взаимодействует с веб-сервером при помощи браузера. Логика веб-приложения распределена между сервером и клиентом, хранение данных осуществляется, преимущественно, на сервере, обмен информацией происходит по сети. Одним из преимуществ такого подхода является тот факт, что клиенты не зависят от конкретной операционной системы пользователя, поэтому веб-приложения являются межплатформенными службами.
Любое веб-приложение представляет собой набор статических и динамических веб-страниц. Статическая веб-страница - это страница, которая всегда отображается перед пользователем в неизменном виде. Веб-сервер отправляет страницу по запросу веб-браузера без каких-либо изменений. В противоположность этому, сервер вносит изменения в динамическую вебстраницу перед отправкой ее браузеру. По причине того, что страница меняется, она называется динамической.
Преимущества веб-приложений
Экономия. Разрабатывается только одно приложение для браузеров, а не для каждой операционной системы;
Безопасность. Так как web-приложение имеет единую точку входа, то вы можете настроить ее защиту лишь в одном месте.
Доступ с разных устройств. Пользователь может взаимодействовать с веб-приложением через любое устройство, которое имеет доступ в интернет и способно выводить верстку.
Отсутствие клиентского ПО. Пользователям не нужно ничего скачивать и, что еще более важно, обновлять. Вы можете менять клиентский интерфейс, а обновление до последней версии произойдет при очередной загрузке страницы.
Масштабируемость. Даже если нагрузка на систему увеличится, вам не придется наращивать мощность клиентских мест. Обычно вебприложения могут обрабатывать большее количество данных только силами аппаратных ресурсов, поэтому вам не придется переписывать код и менять архитектуру.
Одним из ключевых требований при разработке web-приложений стало SEO (аббревиатура от Search Engine Optimization) – комплекс мероприятий по увеличению видимости сайта в поисковых системах по целевым поисковым запросам.
В предложена следующая классификация web-приложений:
многостраничные приложения (MPA - multi-page application);
одностраничные приложения (SPA - single-page application);
прогрессивные приложения (PWA - progressive web application).
MPA – это многостраничные приложения, работающие, как привычные веб-сайты. Такие web-приложения полностью обновляют страницу при каждом запросе клиента.
Преимущества MPA:
Каждая страница однозначно соответствует одному URL, что позволяет поисковым ботам просканировать ее без проблем.
MPA работают по тем же принципам, что и знакомые пользователю веб-сайты с классической навигацией. Найти разработчиков достаточно просто, инструментов для разработки таких сайтов очень много.
Недостатки MPA:
Затраты на создание мобильного приложения. MPA приложения плохо конвертируются в мобильные. Для этого в значительной части случаев потребуется разработка backend с нуля.
SPA – это одностраничные приложения, которые часть страницы загружают только один раз, а остальные информация поступает в виде простых объектов с данными. На стороне клиента такие объекты приобретают завершенный вид с помощью JavaScript фреймворков.
Одностраничные приложения имеют следующие преимущества:
Скорость загрузки данных значительно возрастает, так как серверу не приходится на каждом запросе заниматься отрисовкой пользовательского интерфейса. Эту задачу выполняет клиент;
Удобство создания. Для разработки одностраничного приложения необходимо разрабатывать API, к котором будут всегда обращаться web страницы. В связи с этим frontend может разрабатываться отдельно, эмулируя получение данных с сервера, а backend – разрабатывая это API. Кроме того, на основе готового кода в дальнейшем можно построить мобильное приложение;
Гибкость пользовательского интерфейса. Широкие возможности библиотек позволяют выполнять сложную бизнес-логику на стороне клиента. В backend достаточно реализовать проверку правильности выполнения;
Простое кэширование данных. Клиент может кэшировать пришедшие данные с сервера, чтобы работать без подключения к сети.
Недостатки SPA:
Основной минус – плохо поддаются SEO оптимизации. Отрисовкой страниц занимается клиент, а не сервер как при MPA и данных при первом запросе практически нет. Данный минус покрывается следующим – каждый запрос проверяется, кем он был сгенерирован, и, если это поисковой робот, страницы отрисовывает сервер. Такая технология называется SSR (Server Side Rendering);
Сильнее нагружают браузер, чем обычные MPA. Клиентские фреймворки весят заметно больше, чем в MPA и время на их обработку требуется больше;
Требует от разработчиков больших компетенций, из-за чего могут дорого стоить.
PWA – это прогрессивные web-приложения и отличаются они от MPA или SPA лишь добавлением некоторых технологий, такими как:
Service Worker – слой бизнес-логики между клиентом и сервером. Все запросы браузера проходят через него, что позволяет сделать приложение доступным без подключения к интернету: если соединение есть, то все в порядке, если нет, то данные можно взять из кэша;
Web App manifest – особый файл, который описывает, как называется приложение, какая у него будет иконка и так далее;
HTTPS – протокол, по которому должно работать web-приложение. Отличается от HTTP наличием шифрования;
App shell – некий скелет приложения, которые будет показываться пользователю вне зависимости от того, есть соединение с интернетом или нет (различные статические пункты меню и так далее);
Push Notifications – предоставляет возможность отправлять pushуведомления пользователю.
Так же, от приложения требуется выполнять ряд целевых показателей:
Надежность – приложение должно отрабатывать корректно даже при отсутствии сетевого соединения
Быстрота – приложение должно работать быстро и без задержек, интерфейс плавный и отзывчивый;
Привлекательность – приложение должно быть привлекательным, чтобы пользователь хотел вернуться в него снова.
Преимущества PWA:
устанавливаются в один клик, без переходов в магазины приложений;
всегда под рукой у пользователя – сайт доступен по иконке в смартфоне/компьютере даже без доступа в интернет;
снижают конкуренцию в поисковых системах;
позволяют отправлять push-уведомления, как приложение;
способные работать без доступа к сети;
достаточно легко конвертируемы из существующего сайта, достаточно немного его изменить.
Прогрессивные веб-приложения хороши для часто обновляющихся сервисов, к которым будут постоянно возвращаться клиенты. Push-уведомления позволят вам периодически привлекать внимание пользователей и стимулировать их на посещение приложения.

Общая архитектура Web-приложений

На рисунке 1.1 представлена общая архитектура web-приложений.

Рисунок 1.1 _– Общая архитектура Web-приложений

Приведем описание элементов архитектуры.
DNS (1) расшифровывается как «Domain Name System» (система доменных имён). Это технология позволяет определять, какой IP-адрес соответствует конкретному доменному имени. Это позволяет компьютера отправить запрос на соответствующий IP-адрес. Например, доменному имени vk.ru соответствует 87.240.190.72.