Веб-приложения: виды, архитектура и принципы работы

Редакция Highload разобралась, что такое веб-приложение, каких видов оно может быть и каковы его преимущества перед статическими сайтами.

Содержание:
Что такое веб-приложение?
Преимущества веб-приложений
Архитектура веб-приложения
Принципы работы веб-приложений
Резюме

Что такое веб-приложение?

Веб-приложение — это приложение, одна часть которого загружается в браузер и взаимодействует с пользователем (визуально-интерфейсная часть), а другая находится на веб-сервере и выполняет запросы, поступающие от первой, а затем возвращает ответ. Часть, которая загружается в браузер и с которой взаимодействует пользователь, называется клиентской частью (фронтенд). На веб-сервере находится серверная часть веб-приложения (бэкенд).

Чем веб-приложения отличаются от веб-сайтов?

Несмотря на то, что и веб-сайтом, и веб-приложением пользуются с помощью браузера, между ними есть существенные различия.

Веб-сайт — это совокупность веб-страниц, чаще всего информационного характера. Он может содержать контент в виде текста, изображений, аудио или видео и так далее. Веб-сайты выдают пользователю готовые HTML-страницы, доступные для просмотра. Взаимодействие с ними ограничено. Чаще всего вы можете лишь воспользоваться поиском или подписаться на новости. Аутентификация не обязательна. Сайт компании — характерный пример веб-сайта. Также такие сайты часто называют статическими.

Веб-приложение носит интерактивный характер и позволяет вводить данные, динамически обрабатывать их и получать некие результаты. Кроме того, веб-приложения можно настраивать в соответствии со своими требованиями. Различные фрагменты страницы веб-приложения обновляются «на лету» после взаимодействия с пользователями, как, например, лента новостей в социальной сети.

Чтобы пользоваться возможностями веб-приложения, требуется пройти авторизацию, иначе кто угодно сможет получить доступ к вашим данным и настройкам. В качестве примера веб-приложения можно привести социальную сеть.

Подытожим основные различия между веб-приложением и веб-сайтом:

Веб-сайт	Веб-приложение
Позволяет просматривать данные	Позволяет манипулировать данными
Можно пользоваться без аутентификации	Требуется аутентификация
Выдает заранее подготовленные HTML-страницы, в основном, со статическими файлами	Фрагменты HTML-страницы генерируются и обновляются «на лету»
Проще в разработке; меньше настроек для посетителя	Требует разработки; дает больше настроек для пользователя. Это порождает сложность, обратная сторона чего — потенциальные ошибки

Несмотря на все различия, в некоторых случаях границы между веб-сайтами и веб-приложениями стираются — веб-сайты могут включать в себя веб-приложения или обладать некоторыми их характеристиками. Например, WordPress хранит информацию в реляционной базе данных MySQL и предоставляет множество интерактивных функций для администрирования.

Примеры веб-приложений

Примерами веб-приложений служат:

• интернет-почта (Gmail);
• текстовые редакторы («Google Документы»);
• социальные сети (Facebook);
• магазины электронной коммерции (Amazon);
• облачные хранилища (Dropbox);
• онлайн-заметки (Evernote);
• системы управления проектами (Trello);
• и многие другие приложения, которыми вы, несомненно, пользуетесь.

Преимущества веб-приложений

Веб-приложение обладает многими преимуществами, в том числе перечисленными ниже.

• Не требует установки на жесткий диск и поэтому не занимает много пространства.
• Не требует обновления, потому что обновляется централизованно.
• Пользоваться можно с любого устройства, на котором есть веб-браузер.
• Не зависит от платформы и операционной системы (ОС): если веб-приложение совместимо с браузером, оно работает.
• Разработчику не требуется создавать клиентские приложения для разных ОС, потому что используется браузер.

Применение веб-приложений

Веб-приложения могут разрабатываться и использоваться с различными целями. Они позволяют обмениваться информацией и проводить транзакции, продавать и покупать товары и услуги онлайн, совместно работать над проектами, создавать текстовые файлы, электронные таблицы и презентации, открывать доступ к ним другим пользователям.

С помощью веб-приложений можно работать с заметками, списками задач, управлять файлами в облаке, преобразовывать величины из одних единиц измерения в другие, переводить тексты, создавать парсеры и так далее — они применяются во многих различных сферах.

Архитектура веб-приложения

В зависимости от распределения нагрузки между клиентской и серверной частью, можно выделить несколько типов архитектуры: от преимущественно серверных до преимущественно клиентских. Особняком стоят прогрессивные веб-приложения, которым доступны некоторые возможности десктопных приложений. Рассмотрим эти типы архитектуры подробнее.

Серверные веб-приложения

Вся нагрузка возложена на серверную сторону. Приложение принимает запрос, определяет какую страницу нужно вывести, и возвращает соответствующую HTML-страницу. Она может быть как статической, так и динамической.

Для формирования ответа бэкенд может обращаться к базе данных за нужной информацией для наполнения шаблона страницы.

Веб-приложения с использованием AJAX

При первом запросе к странице передается 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-файла не производится. Клиент подставляет контент вместо переменных во время выполнения сценария.

Резюме

Веб-приложения уверенно занимают свое место в интернете и продолжают эволюционировать. Это обусловлено удобством их применения, а также готовностью к использованию на мобильных устройствах. В свою очередь, развиваются фреймворки для их разработки (и появляются новые). Учитывая множество удобных фреймворков как для бэкенда, так и для фронтенда, вам не придется изобретать велосипед при разработке веб-приложения. Вы сможете сконцентрироваться на поставленных перед вами задачах.

Более подробно по теме устройства веб-приложений можно посмотреть в этом замечательном видео: