Как работают веб-приложения
Для меня сайт это в первую очередь что-то информационное и статичное: визитка компании, сайт рецептов, городской портал или вики. Набор подготовленных заранее HTML-файлов, которые лежат на удаленном сервере и отдаются браузеру по запросу.
Сайты содержат различную статику, которая как и HTML-файл не генерируется на лету. Чаще всего это картинки, CSS-файлы, JS-скрипты, но могут быть и любые другие файлы: mp3, mov, csv, pdf.
Блоги, визитки с формой для контакта, лендинги с кучей эффектов я тоже отношу для простоты к сайтам. Хотя в отличие от совсем статических сайтов, они уже включают в себя какую-то бизнес-логику.
А веб-приложение — это что-то технически более сложное. Тут HTML-страницы генерируются на лету в зависимости от запроса пользователя. Почтовые клиенты, соцсети, поисковики, интернет-магазины, онлайн-программы для бизнеса, это все веб-приложения.
2. Какие бывают веб-приложения
Веб-приложения можно разделить на несколько типов, в зависимости от разных сочетаний его основных составляющих:
- Backend (бэкенд или серверная часть приложения) работает на удаленном компьютере, который может находиться где угодно. Она может быть написана на разных языках программирования: PHP, Python, Ruby, C# и других. Если создавать приложение используя только серверную часть, то в результате любых переходов между разделами, отправок форм, обновления данных, сервером будет генерироваться новый HTML-файл и страница в браузере будет перезагружаться.
- Frontend (фронтенд или клиентская часть приложения) выполняется в браузере пользователя. Эта часть написана на языке программирования Javascript. Приложение может состоять только из клиентской части, если не требуется хранить данные пользователя дольше одной сессии. Это могут быть, например, фоторедакторы или простые игрушки.
- Single page application (SPA или одностраничное приложение). Более интересный вариант, когда используются и бэкенд и фронтенд. С помощью их взаимодействия можно создать приложение, которое будет работать совсем без перезагрузок страницы в браузере. Или в упрощенном варианте, когда переходы между разделами вызывают перезагрузки, но любые действия в разделе обходятся без них.
3. Pyhon-фреймворк Django aka бэкенд
В разработке фреймворк — это набор готовых библиотек и инструментов, которые помогают создавать веб-приложения. Для примера опишу принцип работы фреймворка Django, написанного на языке программирования Python.
Первым этапом запрос от пользователя попадает в роутер (URL dispatcher), который решает какую функцию для обработки запроса надо вызвать. Решение принимается на основе списка правил, состоящих из регулярного выражения и названия функции: если такой-то урл, то вот такая функция.
Функция, которая вызывается роутером, называется вью (view). Внутри может содержаться любая бизнес-логика, но чаще всего это одно из двух: либо из базы берутся данные, подготавливаются и возвращаются на фронт; либо пришел запрос с данными из какой-то формы, эти данные проверяются и сохраняются в базу.
Данные приложения хранятся в базе данных (БД). Чаще всего используются реляционные БД. Это когда есть таблицы с заранее заданными колонками и эти таблицы связаны между собой через одну из колонок.
Данные в БД можно создавать, читать, изменять и удалять. Иногда для обозначения этих действий можно встретить аббревиатуру CRUD (Create Read Update Delete). Для запроса к данным в БД используется специальный язык SQL (structured query language).
В Джанго для работы с БД используются модели (model). Они позволяют описывать таблицы и делать запросы на привычном разработчику питоне, что гораздо удобнее. За это удобство приходится платить: такие запросы медленнее и ограничены в возможностях по сравнению с использованием чистого SQL.
Полученные из БД данные подготавливаются во вью к отправке на фронт. Они могут быть подставлены в шаблон (template) и отправлены в виде HTML-файла. Но в случае одностраничного приложения это происходит всего один раз, когда генерируется HTML-страница, на который подключаются все JS-скрипты. В остальных случаях данные сериализуются и отправляются в JSON-формате.
4. Javascript-фреймворки aka фронтенд
Клиентская часть приложения — это скрипты, написанные на языке программирования Javascript (JS) и исполняемые в браузере пользователя. Раньше вся клиентская логика основывалась на использовании библиотеки JQuery, которая позволяет работать с DOM, анимацией на странице и делать AJAX запросы.
DOM (document object model) — это структура HTML-страницы. Работа с DOM — это поиск, добавление, изменение, перемещеие и удаление HTML-тегов.
AJAX (asynchronous javascript and XML) — это общее название для технологий, которые позволяют делать асинхронные (без перезагрузки страницы) запросы к серверу и обмениваться данными. Так как клиентская и серверная части веб-приложения написаны на разных языках программирования, то для обмена информацией необходимо преобразовывать структуры данных (например, списки и словари), в которых она хранится, в JSON-формат.
JSON (JavaScript Object Notation) — это универсальный формат для обмена данными между клиентом и сервером. Он представляет собой простую строку, которая может быть использована в любом языке программирования.
Сериализация — это преобразование списка или словаря в JSON-строку. Для примера:
Десериализация — это обратное преобразование строки в список или словарь.
С помощью манипуляций с DOM можно полностью управлять содержимым страниц. С помощью AJAX можно обмениваться данными между клиентом и сервером. С этими технологиями уже можно создать SPA. Но при создании сложного приложения код фронтенда, основанного на JQuery, быстро становится запутанным и трудно поддерживаемым.
К счастью, на смену JQuery пришли Javascript-фреймворки: Backbone Marionette, Angular, React, Vue и другие. У них разная философия и синтаксис, но все они позволяют с гораздо большим удобством управлять данными на фронтенде, имеют шаблонизаторы и инструменты для создания навигации между страницами.
HTML-шаблон — это «умная» HTML-страница, в которой вместо конкретных значений используются переменные и доступны различные операторы: if, цикл for и другие. Процесс получения HTML-страницы из шаблона, когда подставляются переменные и применяются операторы, называется рендерингом шаблона.
Полученная в результате рендеринга страница показывается пользователю. Переход в другой раздел в SPA это применение другого шаблона. Если необходимо использовать в шаблоне другие данные, то они запрашиваются у сервера. Все отправки форм с данными это AJAX запросы на сервер.
5. Как клиент и сервер общаются между собой
Общение клиента с сервером происходит по протоколу HTTP. Основа этого протокола — это запрос от клиента к серверу и ответ сервера клиенту.
Для запросов обычно используют методы GET, если мы хотим получить данные, и POST, если мы хотим изменить данные. Еще в запросе указывается Host (домен сайта), тело запроса (если это POST-запрос) и много дополнительной технической информации.
Современные веб-приложения используют протокол HTTPS, расширенную версию HTTP с поддержкой шифрования SSL/TLS. Использование шифрованного канала передачи данных, независимо от важности этих данных, стало хорошим тоном в интернете.
Есть еще один запрос, который делается перед HTTP. Это DNS (domain name system) запроc. Он нужен для получения ip-адреса, к которому привязан запрашиваемый домен. Эта информация сохраняется в браузере и мы больше не тратим на это время.
Когда запрос от браузера доходит до сервера, он не сразу попадает в Джанго. Сначала его обрабатывает веб-сервер Nginx. Если запрашивается статический файл (например, картинка), то сам Nginx его отправляет в ответ клиенту. Если запрос не к статике, то Nginx должен проксировать (передать) его в Джанго.
К сожалению, он этого не умеет. Поэтому используется еще одна программа-прослойка — сервер приложений. Например для приложений на питоне, это могут быть uWSGI или Gunicorn. И вот уже они передают запрос в Джанго.
После того как Джанго обработал запрос, он возвращает ответ c HTML-страницей или данными, и код ответа. Если все хорошо, то код ответа — 200; если страница не найдена, то — 404; если произошла ошибка и сервер не смог обработать запрос, то — 500. Это самые часто встречающиеся коды.
6. Кэширование в веб-приложениях
Еще одна технология, с которой мы постоянно сталкиваемся, которая присутствует как веб-приложениях и программном обеспечении, так и на уровне процессора в наших компьютерах и смартфонах.
Cache — это концепция в разработке, когда часто используемые данные, вместо того чтобы их каждый раз доставать из БД, вычислять или подготавливать иным способом, сохраняются в быстро доступном месте. Несколько примеров использования кэша:
Чем веб-приложение отличается от сайта?
Рядовой пользователь не видит между ними разницы. Он заходит по адресу на страницу, получает желаемый результат и все – больше ничто его не волнует. Но если вы разработчик – это совсем другой вопрос.
Программист, создающий данные продукты, должен очень хорошо понимать, какая между ними есть разница. Однако самое интересное, что даже среди опытных разработчиков есть различные мнения по этому поводу. Мы сейчас постараемся осветить главные отличия между сайтом и web-приложением, которые помогут вам лучше ориентироваться в данном вопросе.
Сайт — это.
. совокупность веб-страниц, которые связаны связаны между собой и содержат контент разного формата: текст, картинки, видео, музыка и пр. Сайт может состоять из одной или нескольких страниц, а его содержимое включать или просто текст, или текст вместе с разными медиа-файлами.
Виды сайтов:
- для знакомств;
- блоги;
- сообщества;
- поисковики;
- познавательные;
- образовательные и пр.
Например, Википедия, Яндекс, Google, Amazon.
Особенности сайтов
- Дружественность к пользователям;
- Легкий процесс поиска необходимой информации;
- Отображение полноценного контента;
- Легкая навигация.
Для чего может создаваться сайт
- Для демонстрации своих продуктов;
- Продвижения бренда, развития бизнеса;
- Рассказать людям о своих занятиях и достижениях;
- Пребывание онлайн для того, чтобы быть доступным клиентам.
Веб-приложение — это.
. полноценная программа, доступ к которой осуществляется через браузер. Другими словами, это тот же сайт, только с интерактивными элементами и обширным функционалом.
Например, Twitter, Фейсбук, YouTube и пр.
Одна из главных отличительных черт веб-приложений – высокая настраиваемость. А еще они способны решать сразу много задач. Именно поэтому сайт сделать намного легче, чем веб-приложение, для создания которого необходима опытная и продвинутая команда разработчиков.
Особенности веб-приложений
- Кроссплатформенность;
- Автоматизированное тестирование;
- Место размещения – в облаках.
Для чего может создаваться веб-приложение
Чтобы обеспечить доступ к имеющимся данным с разных устройств (мобильных, стационарных, оснащенных любой ОС) через все браузеры.
Главные отличия сайтов от веб-приложений
Характер взаимодействия с клиентами
Размещенный на сайтах контент пользователи могут просматривать и слушать, и это никак не меняет работу ресурса. В случае веб-приложения помимо потребления контента пользователи также манипулируют определенными данными, к примеру, заполняют формы.
Аутентификация
Это не обязательный процесс для обычных сайтов. В редких случаях пользователям могут предлагать регистрацию для доступа к расширенному функционалу или подписки на обновления. А в веб-приложениях без аутентификации не обойтись. Здесь функционал и спектр интерактивного взаимодействия гораздо шире, чем на сайте. И чтобы использовать все эти возможности, нужно с помощью логина и пароля зайти в личный аккаунт.
Уровень сложности решаемых задач
Если сайт просто отображает данные, имеющиеся на его страницах, то веб-приложение обладает намного более сложным функционалом.
Потребители контента
На сайтах все данные статичны и чаще всего открыты всем посетителям. Взаимодействие веб-приложения с пользователями носит более сложный характер и невозможно в полной мере без аутентификации.
Деплоймент
Чтобы внести простые изменения в сайт, не нужна полная компиляция и развертывание – только обновление HTML-кода. А для изменения веб-приложения разработчику нужно по новой скомпилировать, а затем развернуть ПО.
Вывод
В разработке сайта нет ничего супер сложного. Но для того, чтобы создать веб-приложение, нужны глубокие знания, навыки и опыт. Надеемся, что теперь разница между сайтами и веб-приложениями стала для вас более очевидной, и вам будет проще ориентироваться в этих понятиях в процессе своего обучения и работы.
Більше цікавих новин
10 IT-профессий, которые могут не бояться ИИ и автоматизации
Изучение ASP.NET Core с нуля / Разработка веб проекта на Core MVC (.NE
Продвижение в соц сетях: SMM, SMO и SMM-специалисты
Мобильные приложения для изучения программирования
Чем отличаются веб-сервис, веб-приложение и сайт
Серьёзный программист скажет, что это части одной системы, а не виды продуктов. А потом выдаст: «Делаем не сайт, а веб-приложение, — или, — Сайт готов, но нужно ещё подключить веб-сервисы». Как это понимать?
Только показываем или взаимодействуем?
Сравним блинную в торговом центре и федеральную сеть доставки пиццы.
Блинной хватает онлайн-визитки с указанием, какие блины она жарит, где находится. Можете анонсировать там скидки и мастер-классы, размещать срочные объявления: «Сегодня закрыты. Нет воды».
Пиццерия принимает заказы через сайт и мобильное приложение. С клиентами общается робот (чат-бот). У поваров и курьеров — свои приложения, чтобы получать задачи и фиксировать ход работ. Простеньким сайтом тут не обойтись: нужен целый комплекс программ.
Как работает веб-приложение
Повар раскатал тесто, выложил начинку, отправил пиццу в печь, упаковал в коробку для доставки. Так вот, коробка — это сайт, печь — веб-сервис, а повар — веб-приложение. Пицца, коробка, печь, повар — это не отдельные услуги, а часть единого процесса.
Перейдём от метафоры к реальности.
«Реализуем архитектуру “клиент-сервер”», — объявили разработчики. Что это значит: клиент только «просит» сервер поработать и выдать результат. Бизнес-процесс выполняется на сервере, а не на устройстве клиента. Веб-приложение — та часть кода на сервере, которая выполняет бизнес-процессы.
Веб-сервис — ещё более техническое понятие. Если веб-приложение хоть как-то касается клиента, то веб-сервис работает не с клиентом, а с другими приложениями и сервисами. Это код для другого кода.
Поясним на примере.
Заказчик пиццы при оформлении вводит адрес, контакты, номер карты. На сервер отправляется команда «Оформляй!» Сервер, а точнее, приложение на сервере, вычисляет стоимость доставки, применяет скидки, начисляет бонусы, записывает заказ в базу, уведомляет кухню и курьера, связывается с банком для оплаты, создаёт проводку для бухгалтерии. Проделав всё это, сервер отчитывается: «Заказ оформлен!» Заказчик видит уведомление.
Где тут веб-сервис? Там, где пиццерия связывается с банком, чтобы снять деньги со счёта плательщика. Он не видит, как сервер опрашивает банк: хватает ли денег на карте, правильно ли введены данные, не состоит ли карта в чёрном списке. С банком общается вспомогательный код — «веб-сервис». Ещё есть второй веб-сервис, для сбора метрик, и третий, для имейл-рассылок.
По сравнению с этим, на сайте блинной обрабатывать нечего: надо просто показать статичный текст и изображения. Пара незамысловатых страничек безо всяких приложений и сервисов.
К чему готовиться
Веб-приложение помогает компании расти благодаря тому, что:
- Работает даже на маломощных устройствах (оно только показывает результат на девайсе клиента, а всё самое сложное происходит на сервере).
- Не нуждается в разных версиях ПО для отдельных операционных систем (обойдётся одной универсальной).
- Даёт возможность контролировать и хранение данных, и выполнение бизнес-процессов.
- Позволяет запускать новые онлайн-услуги, обходить конкурентов.
Но вместе с тем оно приносит новые трудности:
- Усложняется разработка, которая стоит дороже и делается дольше, чем сайт-визитка;
- Возникают дополнительные расходы (на аренду сервера или покупку собственного, хранение резервных копий, зарплату сисадмину и нескольким программистам);
- Уходит время на выпуск обновлений, исправление ошибок.
Коротко о главном
В обиходе под сайтом понимают справочную: лендинг, портфолио, визитку. Пользователь ничего не делает, а только читает, что написано.
Под веб-приложением имеют в виду нечто более сложное: интернет-магазин, онлайн-банк, электронные госуслуги. Там есть взаимодействие с клиентом.
Говоря «мы разрабатываем веб-сервис», подразумевают, что пишут вспомогательный код. Для сбора метрик, например.
Технически приложение и сервис — не виды продуктов, а детали пазла. Малый оффлайн-бизнес обойдётся без них, средний и крупный онлайн-бизнес — нет. Пиццерия с онлайн-заказами никак не может быть простым сайтом.
Веб приложение и веб сайт в чем разница
Видео: Чем веб-приложения отличаются от веб-сайтов | Иван Петриченко
Веб-приложение против веб-сайта
С изобретением Интернета его развитие послужило платформой для нового поколения передачи информации и беспрецедентного уровня доступа. Всемирная паутина в основном состояла из веб-сайтов, а позже были разработаны веб-приложения, предлагающие дополнительные функции и возможности.
Подробнее о веб-сайте
Набор связанных друг с другом веб-страниц, доступных через сеть, такую как Интернет или интрасеть, называется веб-сайтом. Веб-сайт размещается на сервере (или более) и размещается с использованием унифицированного указателя ресурсов (URL) через Интернет. Все общедоступные веб-сайты обычно известны как Всемирная паутина.
Обычные веб-сайты в основном состоят из простой архитектуры на основе HTML и служат только платформой для отображения информации, а не взаимодействия и совершения транзакций с пользователем. Веб-страницы могут содержать текст, изображения или музыку. Например, простой веб-сайт может содержать сведения о серии продуктов, но на нем нет возможности для покупателя заказать продукт и произвести платежи через веб-сайт.
В настоящее время веб-сайты просто проектируются с использованием систем управления контентом, таких как Joomla или WordPress. Иногда также используются JavaScript и CSS.
Подробнее о веб-приложении
Веб-приложение — это компьютерное приложение, к которому можно получить доступ через сеть, такую как Интернет или интранет. Приложение может быть встроено в веб-страницу, или сама веб-страница может быть приложением. Facebook, Gmail, YouTube, Ebay, Twitter и Amazon — это веб-сайты со значительными реализациями веб-приложений. Как правило, эти веб-сайты используют имя пользователя и пароль для проверки личности пользователя и позволяют пользователю взаимодействовать и связываться с серверами через приложения, доступные на веб-странице.
При более внимательном рассмотрении Gmail становится ясно, что в нем есть много функций, которых нет на обычном веб-сайте на основе HTML. Аутентификация пользователей, отправка и получение электронных писем, обмен мгновенными сообщениями и контакты используют приложения для обработки информации и связи с сервером, тогда как на обычном веб-сайте такая степень взаимодействия невозможна. Другой пример — конвертер валют Yahoo, который выполняет расчет на основе доступных данных.
Веб-приложения могут быть разработаны на основе ряда языков программирования, таких как Java, JavaScript, PHP, ASP, .Net, XML, AJAX, и служб баз данных, таких как MySQL или Oracle.
В чем разница между веб-сайтом и веб-приложением?
• Веб-сайт — это просто связанный набор документов HTML, доступных через сеть, а веб-приложение — это компьютерное приложение, доставляемое через сеть.
• Веб-приложение может быть частью веб-сайта или может быть отдельным приложением.
• Веб-сайты служат исключительно для доставки информации в виде текста, музыки или видео. Однако веб-приложение может взаимодействовать с пользователем и давать несколько результатов в зависимости от операций.
• Веб-приложение может взаимодействовать с пользователем, в то время как веб-сайт только отображает информацию.