АВТОМАТИЗАЦИЯ, ВНЕДРЕНИЕ, СОПРОВОЖДЕНИЕ Лидер рейтинга 1С РАБОТАЕМ УДАЛЕННО И С ВЫЕЗДОМ!

Особенности работы веб-приложений

Сотрудники компании "АйТи-Консалтинг", специализирующиеся на разных программных продуктах, бухгалтерских и it услугах, написали статьи, позволяющие посетителям сайта быстро ориентироваться в ответах на интересующие вопросы.

Особенности работы веб-приложений 

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

Отличия веб-приложений от веб-ресурсов

Веб-ресурс – это прежде всего нечто информационное и постоянное: визитная карточка организации, блог, портал, либо вики. Получается, это совокупность заблаговременно подготовленных HTML-документов, хранящихся на удаленном сервере и отправляемых браузеру по запросу.

Веб-ресурсы предполагают наличие разных статических документов, которые, как и HTML-документ, не создаются с ходу. В большинстве случаев это изображения, CSS-документы, JS-скрипты. Кроме того, это бывают еще и mp3, mov, csv, pdf.

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

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

Разновидности веб-приложений

Веб-приложения делятся на ряд разновидностей, исходя из различных сочетаний их ключевых компонентов:

  1. Backend (программно-аппаратный компонент приложения) функционирует на удаленном ПК, который может располагаться в любом месте. Бэкенд можно написать на всевозможных языках программирования: Ruby, PHP, C#, Python и проч. При написании продукта с задействованием лишь серверного компонента после любых переходов между разделами, отправок форм, актуализации информации сервер будет формировать новый HTML-документ, и страница в браузере будет загружаться заново.

  2. Frontend (клиентский компонент приложения) предусматривает выполнение в пользовательском браузере. Он пишется на языке программирования Javascript. В состав приложения может входить лишь клиентский компонент, если пользовательскую информацию не нужно хранить дольше 1 сессии. Это могут быть, к примеру, фоторедакторы либо обычные игры.

  3. Single page application (одностраничное приложение). Более сложное решение предполагает задействование и серверного, и клиентского компонентов приложения. Посредством их совместного использования возможно создание продукта, работающего без необходимости перезагружать страницу в браузере. Более простое решение – переходы между разделами связаны с перезагрузками, однако все операции в разделе осуществляются без них.

Python-фреймворк Django aka Backend

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

Прежде всего пользовательский запрос направляется в роутер (URL dispatcher), решающий, вызов какой функции для работы с запросом требуется в данный момент. Готовое решение основывается на перечне правил, которые состоят из регулярного выражения и наименования функции: при определенном URL будет вызываться определенная функция.

Функция, вызываемая URL dispatcher, получила название view. В ней может находиться любая бизнес-логика, однако в большинстве ситуаций это 1 из 2: или происходит изъятие из базы сведений, их подготовка и возвращение на фронт; или запрос поступает из определенной формы, подобная информация проходит проверку и отправляется на хранение в базу.

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

Возможно создание, чтение, изменение, исключение сведений в базе данных. В отдельных ситуациях для обозначения подобных операций используется термин CRUD (Create Read Update Delete). Чтобы запросить сведения в базе данных, следует применять особый язык SQL (structured query language).

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

Информацию, поступившую из базы данных, подвергают обработке во view и направлению на фронт. Ее можно подставить в шаблон (template) и отправить в форме HTML-документа. Однако в случае Single page application это осуществляется всего однажды – при генерации HTML-страницы, на которой подключаются все скрипты, созданные на языке JavaScript. В других случаях происходит сериализация и отправка информации в JSON-формате.

Javascript-фреймворки aka Frontend

Клиентский компонент приложения является скриптами, которые создавались на языке программирования Javascript и исполняются в пользовательском браузере. До этого вся клиентская логика базировалась на применении библиотеки Jquery, позволяющей вести работу с DOM, анимацией на странице и писать AJAX запросы.

DOM (document object model) является структурой HTML-страницы. Работа с document object model связана с обнаружением, добавлением, корректировкой, перемещением и исключением HTML-тегов.

AJAX (asynchronous javascript and XML) — собирательный термин для технологических решений, позволяющих создавать асинхронные (без перезагрузки страницы) запросы к серверу и выполнять обмен информацией. Поскольку клиентский и серверный компоненты веб-приложения писались не на одном языке программирования, для обмена сведениями требуется преобразование структур сведений (к примеру, списки и словари), в которых они хранятся, в JSON-формат.

JSON (JavaScript Object Notation) — формат для обмена сведениями между клиентом и веб-сервером широкой области применения, представляющий собой обычную строку, использование которой возможно в любом языке программирования.

Сериализацией называется превращение списка либо словаря в JSON-строку. Десериализацией называется обратное превращение строки в список или словарь.

Посредством выполнения действий с document object model возможно полное управление содержимым страниц. Посредством asynchronous javascript and XML возможен обмен информацией между клиентом и сервером. С такими технологическими решениями уже становится возможным создание одностраничного приложения. Однако при генерации сложного приложения в коде Frontend, базирующегося на JQuery, вскоре возникает путаница, поддерживать его очень непросто.

JQuery сменили Javascript-фреймворки: React, Backbone Marionette, Angular, Vue и прочее. Их концепция и знаковая система различаются, однако все они повышают удобство управления информацией на Frontend, обладают шаблонизаторами и инструментами, создающими навигацию между страницами.

HTML-шаблон — «умная» HTML-страница, в которой вместо определенных значений применяются переменные и имеются разные операторы: if, цикл for и проч. Процедура формирования HTML-страницы из шаблона с подстановкой переменных и применением операторов получила название рендеринг шаблона.

Созданная после рендеринга страница демонстрируется пользователю. Переход из раздела в раздел в SPA — это использование иного шаблона. При необходимости использования в шаблоне иной информации она запрашивается у сервера. Все отправки форм со сведениями — это asynchronous javascript and XML запросы на сервер.

Взаимодействие клиента и сервера

Клиент и сервер взаимодействуют друг с другом по протоколу HTTP, который основывается на запросе от клиента к серверу и ответе сервера запросившему.

Для запросов, как правило, применяют методы GET, если требуется получение сведений, и POST, если требуется изменение информации. Помимо этого, в запрос включаются Host (домен веб-ресурса), тело запроса (если это POST-запрос) и масса вспомогательных технических данных.

Используемые сегодня веб-приложения применяют протокол HTTPS, улучшенный вариант HTTP, поддерживающий шифрование SSL/TLS. Применение шифрованного канала отправки информации, вне зависимости от значимости данной информации, стало популярным в Сети.

Существует другой запрос, создаваемый перед HTTP. Это DNS (domain name system) запрос. Он позволяет получить ip-адрес, привязка к которому есть у запрашиваемого домена. Такие сведения отправляются на хранение в браузер, и уделять этому время больше не нужно.

Когда запрос от браузера доставляется до сервера, он не сразу передается в Django. Сперва он проходит обработку веб-сервера Nginx. Если поступил запрос на статический документ (к примеру, изображение), сам веб-сервер его передает в ответ клиенту. Если запрашивается не статический файл, веб-сервер должен выполнить его передачу в Django.

Увы, такая функция у него не предусмотрена. Вот почему применяется еще одна программа-прослойка — сервер приложений. Так, для продуктов на Python это могут быть uWSGI либо Gunicorn. И вот уже они отправляют запрос в Django.

После обработки запроса Django направляет ответ c HTML-страницей либо информацией и код ответа. Если все в норме, код ответа — 200; если страницу найти не удалось, код — 404; если что-то пошло не так и сервер не смог выполнить обработку запроса, код — 500. Это коды, которые встречаются чаще всего.

веб.jpg

Кэширование в веб-приложениях

Кэширование – очередное распространенное решение, присутствующее в веб-приложениях и ПО, а также в процессорах в ПК и мобильных гаджетах.

Кэш — применяемая разработчиками концепция, при которой часто используемая информация вместо того, чтобы ее каждый раз изымать из базы данных, вычислять либо подготавливать другим методом, сохраняется в месте, к которому можно быстро получить доступ. Разберем, в каких случаях применяется cache:

  • В Django поступил запрос на получение информации для графического изображения в отчетном документе. После изъятия из базы данных информации мы подготавливаем ее и отправляем в базу данных с быстрым доступом, к примеру, memcached на 60 минут. При очередном запросе мы сразу изымем ее из этой базы данных с быстрым доступом и направим на Frontend. Если мы поймем, что информация утратила актуальность, ее ждет инвалидация (удаление из cache).

  • Чтобы кэшировать статические документы, необходимо применять CDN (content delivery network) провайдеры. Это серверы, размещенные во всех уголках земного шара и адаптированные под раздачу статических файлов. В некоторых случаях большего эффекта удастся достичь, если положить изображения, видеофайлы, JS-скрипты на content delivery network вместо своего сервера.

  • В любых браузерах в базовых настройках предусмотрено кэширование статических документов. За счет этого при повторном открытии веб-ресурса загрузка происходит намного быстрее. Недостаток для программиста заключается в том, что с активным кэшем не всегда сразу заметны корректировки, внесенные в код.