Редакция Highload разобралась, что такое веб-приложение, каких видов оно может быть и каковы его преимущества перед статическими сайтами.
Содержание:
Что такое веб-приложение?
Преимущества веб-приложений
Архитектура веб-приложения
Принципы работы веб-приложений
Резюме
Веб-приложение — это приложение, одна часть которого загружается в браузер и взаимодействует с пользователем (визуально-интерфейсная часть), а другая находится на веб-сервере и выполняет запросы, поступающие от первой, а затем возвращает ответ. Часть, которая загружается в браузер и с которой взаимодействует пользователь, называется клиентской частью (фронтенд). На веб-сервере находится серверная часть веб-приложения (бэкенд).
Несмотря на то, что и веб-сайтом, и веб-приложением пользуются с помощью браузера, между ними есть существенные различия.
Веб-сайт — это совокупность веб-страниц, чаще всего информационного характера. Он может содержать контент в виде текста, изображений, аудио или видео и так далее. Веб-сайты выдают пользователю готовые HTML-страницы, доступные для просмотра. Взаимодействие с ними ограничено. Чаще всего вы можете лишь воспользоваться поиском или подписаться на новости. Аутентификация не обязательна. Сайт компании — характерный пример веб-сайта. Также такие сайты часто называют статическими.
Веб-приложение носит интерактивный характер и позволяет вводить данные, динамически обрабатывать их и получать некие результаты. Кроме того, веб-приложения можно настраивать в соответствии со своими требованиями. Различные фрагменты страницы веб-приложения обновляются «на лету» после взаимодействия с пользователями, как, например, лента новостей в социальной сети.
Чтобы пользоваться возможностями веб-приложения, требуется пройти авторизацию, иначе кто угодно сможет получить доступ к вашим данным и настройкам. В качестве примера веб-приложения можно привести социальную сеть.
Подытожим основные различия между веб-приложением и веб-сайтом:
| Веб-сайт | Веб-приложение |
| Позволяет просматривать данные | Позволяет манипулировать данными |
| Можно пользоваться без аутентификации | Требуется аутентификация |
| Выдает заранее подготовленные HTML-страницы, в основном, со статическими файлами | Фрагменты HTML-страницы генерируются и обновляются «на лету» |
| Проще в разработке; меньше настроек для посетителя | Требует разработки; дает больше настроек для пользователя. Это порождает сложность, обратная сторона чего — потенциальные ошибки |
Несмотря на все различия, в некоторых случаях границы между веб-сайтами и веб-приложениями стираются — веб-сайты могут включать в себя веб-приложения или обладать некоторыми их характеристиками. Например, WordPress хранит информацию в реляционной базе данных MySQL и предоставляет множество интерактивных функций для администрирования.
Примерами веб-приложений служат:
Веб-приложение обладает многими преимуществами, в том числе перечисленными ниже.
Веб-приложения могут разрабатываться и использоваться с различными целями. Они позволяют обмениваться информацией и проводить транзакции, продавать и покупать товары и услуги онлайн, совместно работать над проектами, создавать текстовые файлы, электронные таблицы и презентации, открывать доступ к ним другим пользователям.
С помощью веб-приложений можно работать с заметками, списками задач, управлять файлами в облаке, преобразовывать величины из одних единиц измерения в другие, переводить тексты, создавать парсеры и так далее — они применяются во многих различных сферах.
В зависимости от распределения нагрузки между клиентской и серверной частью, можно выделить несколько типов архитектуры: от преимущественно серверных до преимущественно клиентских. Особняком стоят прогрессивные веб-приложения, которым доступны некоторые возможности десктопных приложений. Рассмотрим эти типы архитектуры подробнее.
Вся нагрузка возложена на серверную сторону. Приложение принимает запрос, определяет какую страницу нужно вывести, и возвращает соответствующую HTML-страницу. Она может быть как статической, так и динамической.
Для формирования ответа бэкенд может обращаться к базе данных за нужной информацией для наполнения шаблона страницы.
При первом запросе к странице передается HTML-код каркаса. Код JavaScript асинхронно подгружает остальные фрагменты страницы и может «на лету» отправлять запросы на сервер и обрабатывать его ответы в формате XML (eXtended Markup Language) или JSON (JavaScript Object Notation). Эта технология называется «асинхронный JavaScript и XML» (Asynchronous JavaScript And XML, AJAX).
Вся нагрузка возложена на клиентскую сторону. Сервер только доставляет HTML-код со ссылками на стили и сценарии JavaScript, а эти сценарии обеспечивают логику, отображение и подгружают нужный контент.
Все взаимодействие с пользователем происходит на одной странице, поэтому такие приложения называют одностраничными (single page applications, SPA). Пользователь выполняет некоторые действия, отправляет запрос и получает ответ без перезагрузки страницы.
Для создания одностраничных веб-приложений используются такие фреймворки, как, например, Ember.js, Angular, React, Backbone.js и Vue.js.
Прогрессивные веб-приложения (англ. progressive web application, PWA) — это веб-приложения, разработанные с помощью определенных специальных технологий и стандартных шаблонов, что позволяет им пользоваться преимуществами десктопных и веб-приложений.
Прогрессивные веб-приложения могут хранить данные на стороне клиента, поэтому ими можно пользоваться без подключения к интернету и работа с данными ведется быстрее.
Они обладают следующими характеристиками:
Веб-приложения состоят из серверной части (back-end, бэкенд) и клиентской части (front-end, фронтенд). Пользователи взаимодействуют с клиентской частью через интерфейс, который отображается в браузере (Chrome, Firefox, Safari, Edge и др.). По команде пользователя запрос отправляется на сервер через интернет. На сервере его обрабатывает серверный код и возвращает клиенту ответ.
В ответе может содержаться как готовая HTML-страница, так и шаблон страницы или данные, например в формате XML или JSON. Это зависит от выбранного типа рендеринга (формирования) страницы. То есть, страница может отправляться вообще без изменений (статическая страница) или же бэкенд вносит в нее изменения, после чего отправляет ее браузеру (динамическая страница). Рендеринг может производиться либо полностью на сервере, либо в разных соотношениях распределяться между сервером и клиентом, либо выполняться только клиентом.
Страницы первых веб-сайтов содержали только текст в формате HTML. Со временем добавились изображения и таблицы, но веб-страницы оставались статическими в прямом смысле слова. Со временем появились технологии, которые позволили придать им динамику. Эту эволюцию мы рассмотрим подробнее в следующих подразделах.
Клиент отправляет серверу навигационный запрос. В ответ на этот запрос сервер передает клиенту статическую веб-страницу без изменений. Весь ее контент (текст, изображения и т.д.) каждый раз выводится одинаково. Этот контент «жестко» закодирован в самой странице.
Вот пример статической веб-страницы:
<!DOCTYPE html>
<html>
<head>
<title>Домашняя страница</title>
</head>
<body>
<h1>Домашняя страница</h1>
<hr>
<div>
<span><b>Домашняя</b></span>
<span><a href="products.html">Продукты</a></span>
<span><a href="about.html">О сайте</a></span>
</div>
<hr>
<p>Добро пожаловать в статический мир!</p>
</body>
</html>
Она будет выглядеть примерно так:
Здесь есть заголовок, меню и абзац. Меню содержит ссылки на страницы сайта, кроме текущей. Текущая страница выделена полужирным.
Чтобы реализовать несколько разделов, нужно было использовать несколько страниц с одинаковым кодом и разным наполнением.
Например, страница «О сайте» будет содержать такой код:
<!DOCTYPE html>
<html>
<head>
<title>О сайте</title>
</head>
<body>
<h1>О сайте</h1>
<hr>
<div>
<span><a href="home.html">Домашняя</a></span>
<span><a href="products.html">Продукты</a></span>
<span><b>О сайте</b></span>
</div>
<hr>
<p>Это статический сайт.</p>
</body>
</html>
В браузере она будет выведена примерно так:
Как видим, большая часть кода не изменилась. Изменился текст и оформление меню: жирным выделена страница «О сайте», а «Домашняя» теперь — ссылка. Эти изменения вносились вручную.
Представим теперь страницу «Продукты», на которой приведен перечень продуктов со ссылками на страницы отдельных продуктов. При изменениях необходимо было менять список, информацию о наличии продукта, цену и т. п. Очень много работы приходилось делать вручную.
В 1993 году появилась спецификация Common Gateway Interface (CGI). Это интерфейс, который используется программой для связи с веб-сервером. Такая программа называется шлюзом. Шлюз может быть написан на любом языке программирования, который использует стандартный ввод-вывод: C/C++, Fortran, PERL, TCL, любая оболочка Unix (shell), Visual Basic, AppleScript. На практике большинство сценариев было написано на Perl.
Эти сценарии позволяли использовать один и тот же шаблон, чтобы наполнять его разным контентом. Таким образом, страницы стали динамически генерироваться на сервере в тексте сценария. В то же время, с точки зрения отклика на действия пользователя в режиме реального времени страницы оставались статическими.
В 1995 году с возникновением JavaScript появилась возможность реагировать на действия пользователя мгновенно и открывать всплывающие окна. Веб-страницы оживились. В этом же году был создан язык PHP. Он позволял объединять HTML-код с логикой.
Для простоты на PHP наши страницы можно было бы представить так:
<!DOCTYPE html>
<html>
<head>
<title><?php echo $title ?></title>
</head>
<body>
<h1><?php echo $title ?></h1>
<hr>
<div>
<?php
$i = 0;
foreach($menu as $menu_item) {
if($menu_item == $current){
?>
<span><b><?php echo $menu_item ?></b></span>
<?php
}else{
?>
<span><a href="<?php echo $menu_links[$i] ?>"><?php echo $menu_item ?></a></span>
<?php
}
$i++;
}
?>
</div>
<hr>
<p>Добро пожаловать в динамический мир!</p>
</body>
</html>
При предварительной обработке в этот код подставляются значения переменных, перебираются элементы меню и выводятся либо ссылки, либо название текущей страницы полужирным.
Для домашней страницы он дает такой выходной код HTML:
<!DOCTYPE html>
<html>
<head>
<title>Домашняя страница</title>
</head>
<body>
<h1>Домашняя страница</h1>
<hr>
<div>
<span><b>Домашняя</b></span>
<span><a href="products.html">Продукты</a></span>
<span><a href="about.html">О сайте</a></span>
</div>
<hr>
<p>Добро пожаловать в динамический мир!</p>
</body>
</html>
И получаем нужный результат:
Выгода — не приходится создавать каждую страницу отдельно. Один и тот же код выполняет рендеринг любой страницы. Такой рендеринг называется серверным рендерингом (server-side rendering, SSR). Сервер обрабатывает запрос, формирует страницу из шаблона, а клиент получает готовую полнофункциональную HTML-страницу.
Сейчас для написания кода бэкенда используется множество языков и специальных фреймворков. Самые популярные — это Java (с использованием Java Servlet API), PHP + Laravel, Python + Django, Node.js, языки платформы .NET (C#, VB) + ASP.NET, Ruby + Ruby on Rails и Go. Выбор конкретного языка и фреймворка зависит от характера решаемых задач.
Список продуктов с информацией о них может храниться в базе данных (БД). С ней взаимодействует серверный код. Он может читать данные из базы, добавлять, изменять или удалять их. В качестве системы управления базой данных используются MySQL, PostgreSQL, Memcached, MongoDB, Redis и другие. Для работы с БД существует множество библиотек, ориентированных на различные серверные языки программирования.
В рассмотренном выше случае на странице «Продукты» были бы показаны продукты, список которых получен из БД. Возможно, этот список был бы отсортирован или отфильтрован по каким-либо критериям, заданным пользователем. Такой отбор можно совершать при отправке запроса к базе данных. В системе администрирования такого веб-ресурса можно добавлять продукты, изменять информацию о них и удалять их из БД.
Интерфейс веб-приложения может передаваться браузеру не только в виде целой HTML-страницы. Например, в одностраничном приложении это каркас: мета-теги, ссылки на стили и на сценарии, а также элементы, обычно div, в которые сценарий подставляет нужный контент.
Окончательный вид приложение приобретает после загрузки всего контента и задействования всех стилей. Но и после этого некоторые меню и списки формируются динамически при нажатии соответствующих кнопок, а некоторые обновляются в режиме реального времени. Например, комментарий к публикации можно отправить не покидая страницу, и он отобразится, как только будет установлено, что он успешно добавлен в хранилище.
Фронтенд может содержать информационные блоки и элементы управления. Например, в Facebook информационные блоки — это публикации в ленте, истории, рекомендации, а элементы управления — кнопки вкладок, меню, ссылки, поля поиска и ввода контента для публикации, комментариев и т. д.
Если же взять, к примеру, Google Docs, то видим, в основном, следующие элементы управления: меню, панель инструментов, панель структуры, документ. Информационный блок здесь — это справка. В целом же это интерактивный интерфейс.
Интерактивность обеспечивается за счет JavaScript-кода, который выполняется в браузере. Для сложных приложений используются специальные библиотеки, упрощающие написание кода. Например, Google Docs и многие другие веб-приложения Google используют библиотеку Closure Library, Facebook — библиотеку React. Библиотека Redux применяется для управления состоянием приложения и часто используется с React. Широко используются такие библиотеки для веб-приложений, как Angular, Ember.js, Express.js (в паре с Node.js), Vue.js.
Благодаря использованию этих библиотек можно использовать клиентский рендеринг (client-side rendering, CSR). В одностраничном приложении рендеринг, логика и загрузка возлагаются на клиентскую сторону.
Например, с использованием Vue.js рендеринг осуществляется следующим образом. В файле index.html указываем переменную hello:
<html lang="ru">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="hello">
{{ hello }}
</div>
<script src="index.js"></script>
</body>
</html>
В файле index.js указываем, что подставлять вместо переменной hello:
var app = new Vue({
el: '#hello',
data: {
hello: 'Рендеринг на стороне клиента!'
}
});
Вывод в браузере:
Предварительная обработка HTML-файла не производится. Клиент подставляет контент вместо переменных во время выполнения сценария.
Веб-приложения уверенно занимают свое место в интернете и продолжают эволюционировать. Это обусловлено удобством их применения, а также готовностью к использованию на мобильных устройствах. В свою очередь, развиваются фреймворки для их разработки (и появляются новые). Учитывая множество удобных фреймворков как для бэкенда, так и для фронтенда, вам не придется изобретать велосипед при разработке веб-приложения. Вы сможете сконцентрироваться на поставленных перед вами задачах.
Более подробно по теме устройства веб-приложений можно посмотреть в этом замечательном видео:
Сегодня мы поговорим о том, как выбрать лучшие курсы Power BI в Украине, особенно для…
В 2023 году во всех крупнейших регионах конкуренция за вакансию выросла на 5–12%. Не исключением…
Unicorn Hunter/Talent Manager Лина Калиш создала бесплатный трекер поиска работы в Notion, систематизирующий все этапы…
Edtech-стартап Mate academy принял решение отправить своих работников в десятидневный отпуск – с 25 декабря…
Служба безопасности Украины задержала в Киеве 46-летнего программиста, который за деньги устанавливал шпионские программы и…
IT-специалист Джордан Катлер создал и выложил на Github подборку разнообразных ресурсов, которые помогут достичь уровня…