Записаться на курс
Основы технической грамотности

Что такое и как работают Web-приложения

Вы часто могли слышать такие словосочетания как веб-сайт(или просто сайт) или веб-приложения. И если с сайтом, в целом, всё понятно - это просто какой-то статичный ресурс в интернете - сайт визитка, сайт с рецептами, городской портал. То с веб-приложениями всё гораздо интереснее. Давайте разбираться.

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

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

Примеры веб-приложений:
https://www.amocrm.ru/ - но нужно понимать, что по данной ссылке находится статичный сайт(лендинг), где просто размещена информация о продукте. Чтобы попасть в веб-приложение вам нужно зарегистрироваться и войти и тогда ссылка будет примерно такого вида https://evgenynocodeherotech.amocrm.ru/dashboard

https://trello.com/ - сервис, который позволяет создавать рабочие доски и управлять задачами

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

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

Разберёмся на примере создания задачи в Trello:
  1. Пользователь заполняет название и описание задачи и нажимает на кнопку "Создать"
  2. После клика на кнопку "Создать" браузер пользователя отправляет запрос на сервер, где хранится логика этого веб-приложения и сообщает этому серверу, что нужно создать новую задачу для определённого пользователя, с определенным названием и описанием.
  3. Сервер создаёт эту задачу т.е добавляет информацию по этой задаче в базу данных веб-приложения и отправляет обратно в браузер пользователя ответ о том, что задача была создана успешно.
  4. Пользователь видит у себя в браузере созданную им задачу


Из чего состоят веб-приложения?

В самом простом варианте, для общего понимания, любое веб-приложение состоит из 3х частей.

Frontend - это визуальная часть веб-приложения. Интерфейс, который видит и с которым может взаимодействовать пользователь. Пример frontend части ниже. В стандартной разработке frontend часть строится на основе HTML, CSS и Javascript.

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

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

Заключение

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

Полезные ссылки

https://highload.today/veb-prilozheniya/ 

https://habr.com/ru/post/450282/