Как устроена архитектура веб-приложений: мануал для начинающих

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

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

Когда вы создаете приложение, вы должны помнить три принципа:

• С точки зрения клиента, приложение не должно быть сложным, оно должно быть приятным и решать большинство его проблем.
• С точки зрения бизнеса, ваше веб-приложение должно соответствовать своему продукту / рынку.
• С точки зрения инженера, приложение должно быть масштабируемым, функциональным и выдерживать высокие нагрузки трафика.

Мы обсудим вышеупомянутые моменты в архитектуре веб-приложений, и подробно рассмотрим основную концепцию, как работает архитектура, ее компоненты и типы.

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

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

• Решает конкретную проблему, даже если это просто поиск информации.
• Такая же интерактивная, как настольное приложение.
• Работает с системой управления контентом.

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

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

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

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

Как работает веб-запрос?

Возьмем в пример ситуацию, который вы хотите посетить progler.ru:

• Вы вводите progler.ru в своем браузере: когда вы вводите URL-адрес в своем веб-браузере и нажимаете Enter, веб-браузеру необходимо знать адрес сервера, на котором расположена страница. Таким образом, он отправляет запрос в DNS (сервер доменных имен, который является хранилищем доменных имен и их IP-адресов). После этого браузер отправляет запрос на найденный IP-адрес по протоколу HTTPS. Если вы уже заходили на progler.ru ранее из того же браузера, он извлечет адрес из кеша.
• Веб-сервер обрабатывает запрос: на следующем шаге веб-сервер отправляет запрос в область хранения, чтобы найти страницу и все данные, которые следуют за ней. Здесь появляется бизнес-логика (также называемая логикой домена и логикой приложения). Бизнес логика берет на себя ответственность за маршрутизацию, что означает доступ к каждой части данных. Она регулирует этот рабочий процесс специально для каждого приложения. По мере того как БЛ обрабатывает запрос, она отправляет его в хранилище, чтобы найти искомые данные.
• Вы получаете ответ: когда ответ возвращается, он отображается на вашем экране. Веб-страница (графический интерфейс) любого веб-сайта, отображаемого на вашем экране, называется внешним интерфейсом приложения. Здесь вы видите все компоненты UI и UX для доступа к информации.

Как работает архитектура веб-приложений?

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

• Код, который запускается в браузере и работает в соответствии с вводом пользователя.
• Код на сервере, который отвечает на HTTP-запросы.

Работая над веб-приложением, веб-разработчик определяет функции кода на сервере и функции кода в браузере. Они также определяют, как эти функции будут работать по отношению друг к другу. Серверный код может быть написан с использованием языков Python, JavaScript, C#, PHP, Ruby on Rails и т. д. Любой код может иметь возможность запускаться на сервере, если он может отвечать на HTTP-запросы. Серверный код в основном отвечает за создание страницы, запрошенной пользователем. Он также хранит различные типы данных, такие как профили пользователей, твиты, страницы и т. д. Серверный код не может быть виден конечным пользователем (за исключением редкой неисправности).

Клиентская часть включает комбинацию языков HTML, CSS и JavaScript. Этот код анализируется браузером, и пользователь может его видеть и редактировать. Только через HTTP-запросы клиентский код может связываться с сервером. Кроме того, он не может напрямую читать файлы с сервера.

Компоненты архитектуры веб-приложений

Архитектура веб-приложения работает на различных компонентах. Эти компоненты можно разделить на две части.

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

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

• Веб-браузер или клиент.
• Сервер веб-приложений.
• Сервер базы данных.

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

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

Уровень представления: этот уровень доступен клиенту через браузер и включает компоненты пользовательского интерфейса и компоненты процесса пользовательского интерфейса. Как мы уже обсуждали, эти компоненты пользовательского интерфейса созданы с помощью HTML, CSS и JavaScript (и его фреймворков или библиотеки), где каждый из них играет свою роль в создании пользовательского интерфейса.

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

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

Некоторые другие части веб-приложения, которые отделены от основных слоев, существующих в архитектуре:

• Сквозной код: эта часть обеспечивает связь, оперативное управление и безопасность. Он влияет на все части системы, но никогда не должен смешиваться с ними.
• Сторонние интеграции: используя сторонние API, мы можем интегрировать платежные шлюзы, социальные сети, GDS на туристических веб-сайтах и ​​т. д.

Типы архитектуры веб-приложений

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

• Приложение запрашивает только необходимые сведения о контенте и предотвращает перебои в работе пользователя. 
• AJAX, асинхронный JavaScript и XML в основном используются для взаимодействия страниц.
• Пользователи могут продолжать взаимодействие со страницей, пока ее содержимое обновляется (более быстрое взаимодействие).

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

3. Бессерверная архитектура. При таком подходе разработчики передают управление серверами и инфраструктурой стороннему поставщику услуг облачной инфраструктуры. Преимущество этого подхода заключается в том, что он позволяет приложению выполнять требуемую или настраиваемую логику, не беспокоясь о задачах, связанных с инфраструктурой. Этот подход в основном предпочитают компании, которые не хотят управлять или поддерживать серверы и оборудование, для которого они разработали веб-приложение.

Заключение

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