Работаем удаленно и с выездом
Наши филиалыМоскваЯрославль
АВТОМАТИЗАЦИЯ, ВНЕДРЕНИЕ, СОПРОВОЖДЕНИЕ

Как функционируют веб-приложения?

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

В чем различия между веб-приложениями и веб-ресурсами?

Веб-ресурс

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

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

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

Веб-приложение

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

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

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

  1. Backend (программно-аппаратный элемент приложения) предполагает работу на удаленном ПК, местонахождение которого может быть абсолютно любым. Backend можно создавать на разнообразных языках программирования: C#, Ruby, PHP, Python и т. д. При генерации приложения с применением исключительно серверного элемента после любых переходов от раздела к разделу, отправок форм, актуализации сведений сервер будет выдавать новый HTML-документ, и произойдет перезагрузка страницы в браузере.
  2. Frontend (клиентский элемент приложения) предполагает выполнение в клиентском браузере. Он создается на языке программирования Javascript. Приложение может содержать исключительно клиентский элемент, если хранение клиентских сведений дольше 1 сессии не требуется. Это могут быть бильдредакторы либо стандартные игры.
  3. Single page application (одностраничное приложение). Решение повышенной сложности подразумевает взаимодействие серверного и клиентского элементов приложения. Взаимодействуя друг с другом, они помогают разработать продукт, функционирующий без необходимости заново загружать страницу в браузере. Более простое решение – переходы от раздела к разделу становятся причиной перезагрузок, тем не менее все манипуляции в разделе выполняются без них.

Python-фреймворк Джанго aka Backend

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

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

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

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

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

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

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

JS-фреймворки 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 стали использоваться JS-фреймворки: React, Backbone Marionette, Angular, Vue и т.д. Их концепция и синтаксис имеют различия, тем не менее все они упрощают процесс управления сведениями на Frontend, оснащены шаблонизаторами и решениями, обеспечивающими межстраничную навигацию.

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

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

Каким образом клиент и сервер взаимодействуют друг с другом?

Взаимодействие клиента и сервера осуществляется по протоколу HTTP, основывающемуся на запросе от пользователя к серверу и ответе сервера пользователю.

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

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

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

После доставки запроса от браузера до сервера он оказывается во фреймворке только через определенное время. На первом этапе его должен обработать веб-сервер. При поступлении запроса на статику (например, изображение) сам веб-сервер направляет его в ответ запросившему. А при получении запроса не к статическому документу web server должен отправить его во фреймворк.

К несчастью, такой возможности у него нет. По этой причине применяется дополнительная программа-прослойка – сервер приложений. Так, для продуктов на Python это могут быть uWSGI либо Gunicorn. И вот уже они направляют запрос во фреймворк.

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

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

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

Итак, кэш представляет собой широко используемую программистами технологию, при которой часто применяемые сведения вместо того, чтобы всякий раз получать их из БД, вычислять либо подготавливать другим путем, отправляются на хранение в место с быстрым доступом. Рассмотрим ряд примеров применения кэша:

  • Framework принял запрос на получение сведений для графического файла для отчетности. После изъятия из базы данных сведений осуществляются их подготовка и отправка в базу данных с быстрым доступом. При повторном запросе эти сведения будут сразу изъяты из упомянутой базы данных с быстрым доступом и доставлены на Frontend. Если сведения потеряют актуальность, они будут инвалидированы (удалены из cache).
  • Чтобы кэшировать статику, рекомендуется задействовать CDN (content delivery network) провайдеры. Это предназначенные для раздачи статических документов серверы, которые находятся в разных частях планеты. В отдельных ситуациях лучший результат удается получить, если положить изображения, видеоматериалы, Javascript-скрипты на content delivery network вместо своего сервера.
  • Все браузеры изначально предусматривают кэширование статики. Это позволяет добиться ускорения загрузки при повторном открытии веб-ресурса. Недочет, который может заметить специалист по разработке, заключается в том, что с включенным cache не всегда можно заметить корректировки, которые были внесены в код.
Получить помощь в работе с веб-сервером