веб приложения зачем нужны
Чем отличаются сайт и веб-приложение?
Перевод статьи «What is the Difference Between a Website and a Web Application?».
Конечному пользователю бывает сложно понять разницу между сайтом и веб-приложением. Он просто вводит URL в адресной строке браузера (переходит по ссылке) — и — бум! — вот он результат.
А для пользователя важно как раз получить то, что хотелось. Если это удалось сделать, больше пользователя ничто не волнует.
Но если вы разработчик, именно вы создаете эти продукты для пользователей. Так что вы-то должны хорошо разбираться, чем они отличаются друг от друга. Но улавливаете ли вы разницу между сайтами и веб-приложениями?
Вообще среди разработчиков есть разные мнения на этот счет, но я постараюсь осветить ключевые отличия, которые помогают мне самому ориентироваться.
Что такое сайт?
Сайт — это набор связанных друг с другом веб-страниц, содержащих изображения, текст, аудио, видео и прочий контент. Сайт может быть одно- или многостраничным, а его содержимое может быть простым текстом, а может содержать разные медиа.
Сайты бывают самые разные:
Примеры сайтов: Википедия, Google, Amazon, Craigslist.
Отличительные черты сайтов
Зачем вам может понадобиться сайт
Что такое веб-приложение?
Веб-приложение — это программа, к которой вы можете получить доступ при помощи браузера. Также можно сказать, что веб-приложения — это сайты с богатым функционалом и интерактивными элементами.
Веб-приложения отличаются высокой настраиваемостью. Они могут решать целый ряд задач и обладают обширным функционалом. В целом создать приложение сложнее, чем сайт, для этого требуется опытная команда разработчиков.
Примеры популярных веб-приложений: Twitter, Facebook, Gmail, Adobe CC, YouTube.
Отличительные черты веб-приложений
Зачем вам может понадобиться веб-приложение
Для организации доступа к данным и с мобильных устройств, и с компьютеров, с любой платформы и через любой современный браузер.
Ключевые отличия сайтов и веб-приложений
1. Взаимодействие с пользователем
На сайтах размещается контент, который пользователь может читать, смотреть и слушать, причем это никак не влияет на работу сайта. В веб-приложении пользователь не только потребляет контент, но и манипулирует данными. Для взаимодействия с приложением пользователь может, например, заполнять какие-то формы или предоставлять какие-нибудь данные.
2. Аутентификация
На обычных сайтах аутентификация не обязательна. Правда, пользователя могут попросить зарегистрироваться, чтобы получить доступ к дополнительному функционалу или чтобы подписаться на обновления. В веб-приложениях аутентификация необходима. Они предлагают куда более широкий набор функционала и возможностей для интерактивных взаимодействий с пользователем, чем простой сайт. Чтобы всем этим пользоваться, нужно входить в свой аккаунт при помощи логина и пароля.
3. Решаемые задачи и сложность
Сайт только отображает данные, содержащиеся на определенной странице и запрошенные пользователем. Веб-приложение выполняет более сложные функции.
4. Для кого создается
Сайты содержат главным образом статический контент. Информация на них, как правило, открыта для всех посетителей. Веб-приложения создаются для взаимодействия с конечным пользователем. Без ввода логина и пароля вы не получите доступа к данным.
5. Деплоймент
Если речь идет о сайте, для внесения простых изменений никогда не потребуется полная повторная компиляция и деплоймент. Вам нужно будет лишь обновить HTML-код. В случае веб-приложения при внесении изменений вам потребуется заново скомпилировать и развернуть программу.
Заключение
Разработка сайта — относительно простой процесс. Для создания веб-приложения требуются более глубокие знания, опыт и планирование.
Надеюсь, после прочтения этой статьи вы лучше понимаете разницу между сайтами и приложениями и сможете сориентироваться, что именно вам требуется в том или ином случае.
Веб-приложение
9 ноября 2017 Опубликовано в разделах: Азбука терминов. 53363
Практически любой интернет-ресурс входит в их число. Это поисковые системы, видео сервисы типа youtube, соцсети, любые веб-сайты с функциями аутентификации пользователя, покупки, заказа, бронирования, калькуляторы кредитов.
Как работает веб-приложение
Технически это интернет-приложение с архитектурой «клиент-сервер». Чтобы понять принцип, давайте вспомним основные элементы такой архитектуры.
Клиентом служит браузер, сервером — веб-сервер. Связь происходит посредством сети. Представьте, что web-приложение состоит изначально из страниц с частично либо полностью неопределенным содержимым. Итоговое содержание веб-страниц сформируется тогда, когда конкретный пользователь отправит запрос.
Страницы, которые мы видим в браузере, могут быть статическими и динамическими.
Статическая web-страница отображается для всех посетителей одинаково. Как это работает:
В случае с динамическими страницами схема выглядит так:
Технические аспекты
Среди нефункциональных важны:
Классификация
Веб приложения можно разделить на виды в зависимости от технологий создания, а также по назначению.
Остановимся подробно на популярных и востребованных.
Основное преимущество такого подхода в том, что web-страницы не обновляются со всеми данными заново, а лишь подгружают нужное с сервера, это повышает производительность и степень интерактивности. Один из принципов работы — подгрузка JavaScript. Удобно применять в интернет-магазинах, сайтах-каталогах, любых крупных интернет-проектах, требующих обработки больших массивов данных.
Также различают такие технологии, как ASP, JSP, CGI. Они могут быть разработаны на любом языке программирования, например, PHP, Java и т.д.
По назначению веб-приложения условно можно разделить в зависимости от сферы применения. Почему условно? Как мы выяснили выше, любой интерактивный сайт – это онлайн-приложение. Соответственно, таких сфер, тематик и классификаций можно придумать множество.
CRM — система управления проектами, направленная на автоматизацию обработки полного спектра информации о клиентах и товарах.
Подобные решения — это комплексный продукт, объединяющий функции баз данных, почты, календаря, учета финансов и другие. В них могут быть интегрированы, в зависимости от потребностей, различные модули: управленческой отчетности, бухгалтерии, учета кадров и т.д.
CRM являются основой бизнеса телемаркетинговых компаний и колл-центров. Незаменимы, когда нужно настроить проектную работу с четким разделением по ролям и зонам ответственности, взаимодействие между отделами, работу с клиентами. Это актуально для банков, агентств маркетинговых коммуникаций, компаний-разработчиков IT, онлайн-магазинов товаров и услуг.
Более заточенный под потребности конкретного бизнеса вариант – это ERP. Это web-приложения, разработанные для автоматизации процессов управления внутрихозяйственной деятельностью крупных предприятий с развитой филиальной сетью, различными направлениями деятельности, сложноподчиненной структурой. Включает модули производственного, финансового управления, закупки и тд.
В интернете сегодня представлены все виды бизнеса и категории потребителей. Веб-приложения помогают готовить, покупать, выбирать автомобили, растить детей, учить китайский, исследовать глубины океана и звезды. Новые технологии дают возможность разработчикам создавать продукт под любой спрос, вкус и кошелек.
При этом, у всего многообразия онлайн-приложений есть общие характерные черты.
Примеры применения веб приложений
Пример 1
Процедура сотрудничества компании с банковским учреждением теперь выглядит так:
Не нужно тратить время на неоднократные поездки, сидение в очередях, перекладывание бумажек.
Пример 2
Еще один тренд последних лет — использование crm-программ. Владельцы даже малого бизнеса по достоинству оценили все возможности, которые получают при использовании сервиса управления рабочим временем и проектами.
Все это стало возможным благодаря развитию веб-технологий.
– Только качественный трафик из Яндекса и Google
– Понятная отчетность о работе и о планах работ
– Полная прозрачность работ
Как работают веб-приложения
1. Чем веб-приложения отличаются от сайтов
Для меня сайт это в первую очередь что-то информационное и статичное: визитка компании, сайт рецептов, городской портал или вики. Набор подготовленных заранее HTML-файлов, которые лежат на удаленном сервере и отдаются браузеру по запросу.
Сайты содержат различную статику, которая как и HTML-файл не генерируется на лету. Чаще всего это картинки, CSS-файлы, JS-скрипты, но могут быть и любые другие файлы: mp3, mov, csv, pdf.
Блоги, визитки с формой для контакта, лендинги с кучей эффектов я тоже отношу для простоты к сайтам. Хотя в отличие от совсем статических сайтов, они уже включают в себя какую-то бизнес-логику.
А веб-приложение — это что-то технически более сложное. Тут HTML-страницы генерируются на лету в зависимости от запроса пользователя. Почтовые клиенты, соцсети, поисковики, интернет-магазины, онлайн-программы для бизнеса, это все веб-приложения.
2. Какие бывают веб-приложения
Веб-приложения можно разделить на несколько типов, в зависимости от разных сочетаний его основных составляющих:
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 — это концепция в разработке, когда часто используемые данные, вместо того чтобы их каждый раз доставать из БД, вычислять или подготавливать иным способом, сохраняются в быстро доступном месте. Несколько примеров использования кэша:
Что такое веб-приложение: определение и ключевые преимущества
Веб-приложение тоже работает через браузер, и визуально похоже на сайт, но в отличие от сайта, имеет более сложную логику и функционал (личные кабинеты, функционал с ограничением доступа, расчеты, формирование отчетов и др.). Поэтому не всякая команда, которая делает сайты, может создать веб-приложение.
Наглядные примеры
К примеру, возьмем Microsoft Office. Это приложение, которое устанавливается на ваш компьютер. А теперь посмотрим на его аналог — Google Docs. Это тоже программа, только находится она на удаленном сервере (не на вашем ПК), а доступ к ней возможен только через Интернет. Поэтому Google Docs относится к веб-приложениям.
Еще один пример. Adobe Photoshop — приложение для обработки изображений. Для работы с ним его нужно скачать с сайта и установить на ваш компьютер. А вот у похожего на фотошоп сервиса Figma есть веб-приложение, которое работает через Интернет, не требует скачивания и установки.
Веб-приложение — это программное обеспечение, которое хранится на удаленном сервере и доступно через Интернет. Собственно такой подход принято называть «Программное обеспечение как услуга» (SaaS). 
Отличия веб-приложений от сайтов и мобильных приложений
Веб-приложения позволяют сотрудникам создавать документы и изображения, обмениваться информацией и совместно работать над проектами независимо от местоположения или устройства. Сайты же обычно имеют стандартный и несложный набор функций.
Мобильные приложения разрабатываются под какую-то платформу (Android или iOS) и требуют установки на устройство. А веб-приложения доступны пользователю без скачивания, вне зависимости от устройства и браузера пользователя.
Ключевые преимущества веб-приложений
Вывод
Распространение Интернета среди компаний и частных лиц повлияло на способ ведения бизнеса. Это привело к широкому распространению веб-приложений по мере того, как компании переходят от традиционных моделей к облачным и сетевым моделям. Веб-приложения дают компаниям возможность оптимизировать свои операции, повысить эффективность и сократить расходы.
Онлайн-приложения, такие, как почтовые клиенты, текстовые редакторы, электронные таблицы и другие программы, предоставляют те же функции, что и версии для настольных компьютеров. Однако у них есть дополнительное преимущество, заключающееся в том, что они работают на нескольких платформах, имеют более широкий охват и легко доступны из любого места.
Десктопное или веб-приложение: плюсы и минусы
Сегодня поговорим об отличиях десктопных и веб-приложений. Не обещаем, что сможем быть полностью непредвзятыми, но постараемся честно рассмотреть плюсы и минусы.
Итак, веб-приложение работает через браузер, используя его как среду выполнения, десктопное— устанавливается, запускается и работает локально. Сравним их по основным характеристикам.
Веб-приложение не требует установки, все обновления происходят на сервере, доставляются пользователям сразу — достаточно просто перезагрузить страницу или выйти, а потом снова зайти в аккаунт. Но иногда для его работы нужно установить дополнительные библиотеки или использовать защищенные сетевые протоколы.
Десктопное нужно устанавливать на компьютере или мобильном устройстве, обновлять каждый раз, как выходит новая версия. Несмотря на то, что чаще всего процесс автоматизирован — все равно это занимает время пользователей и ресурсы устройств. Дополнительно придется отслеживать версии на каждом компьютере, смартфоне и планшете.
Веб-приложение публикуется на локальном или облачном сервере, там же происходит процесс обновления. При этом сервер нужен в любом случае, даже если решение совсем простое. Ведь кроме фронтенда, с которым пользователи будут работать через браузер, нужно где-то размещать бэкенд.
Десктопное придется устанавливать вручную на каждом устройстве. В компании, где много рабочих мест, это может занять достаточно много времени. Плюс в том, что не обязательно выбирать сервер или искать ресурсы для публикации, если речь не идет о клиент-серверном решении.
Работа веб-приложения зависит не только от того, насколько грамотно оно разработано и характеристик пользовательского устройства, но также от скорости интернет-соединения, работоспособности удаленного сервера.
Десктопное работает автономно, поэтому главное — качество кода и стабильность оборудования, на котором этот код выполняется. Но если связь с сервером необходима — то возникают те же проблемы, что у «конкурента».
Веб-приложение доступно из любой точки мира, с любого устройства, а пользовательские файлы всегда будут под рукой. Но только если есть интернет-соединение или реализована возможность работы офлайн и загрузки-выгрузки данных.
Десктопное доступно всегда — но только с устройства, на котором оно установлено. Чтобы работать с разных устройств, его придется установить на каждом, а также придумать, где хранить файлы, чтобы всегда иметь к ним доступ.
Веб-приложение одинаково хорошо будет работать на любом устройстве, будь то стационарный компьютер, ноутбук, планшет или смартфон — ведь оно практически не зависит от «железа» или операционной системы. Главное — подходящий браузер. Как правило, для работы большинства веб-клиентов подходят Google Chrome, Mozilla Firefox, Safari от Apple или Windows-браузер (Microsoft Edge / Internet Explorer).
Десктопное зависит от операционной системы, процессора, видеокарты, ряда других параметров. Приходится учитывать нюансы каждой среды (в том числе при «отлове» ошибок), писать код с учетом возможных вариантов, нанимать отдельных разработчиков или даже целые команды для версий под разные ОС.
Веб-приложение полностью зависит от браузера и технологий его работы. Поэтому есть ряд ограничений, например — в доступе к аппаратному обеспечению вашего устройства. Это и некоторые другие ограничения обойти невозможно (во всяком случае, сейчас). Но целый ряд задач можно решить по принципу «что нельзя переписать, можно надстраивать или расширять». Редакторы документов, изображений, аудио, видео, 3D графики; системы управления проектами; хранилища файлов; no-code конструкторы — успешно работают в браузерах. Инструменты быстрой интеграции сервисов, а также интерфейсные библиотеки еще больше расширяют существующие возможности.
Десктопное позволяет реализовать буквально любые функции — в этом оно однозначно превосходит web. Во всяком случае, полноценного онлайн аналога Photoshop или Sony Vegas еще никто не разработал. Системные утилиты — определенно сфера десктопной разработки. Как и программы, которые должны долго работать в фоновом режиме — например, чаты или торрент-клиенты — через браузер с ними просто неудобно будет работать. Также такое ПО чаще используется для специфических проектов, с нестандартными интерфейсами или функциями. Поэтому web разработка пока не представляет опасности для desktop программистов— эти технологии будут развиваться параллельно, просто под разные задачи.
По поводу скорости работы все не так однозначно, как может показаться. Несмотря на то, что браузерный клиент постоянно обменивается данными с сервером, быстродействие будет во многом будет зависеть от того, насколько грамотно он спроектирован, «чистоты» кода, возможностей оборудования, стабильности канала связи. Разница в быстродействии, которая очевидна при тестировании, зачастую незаметна для пользователей.
Веб-приложение, разработанное с использованием современных протоколов и средств защиты, способно полноценно обеспечивать сохранность данных. Однако на некоторые моменты разработчики не могут повлиять: браузер, облачный сервер, канал связи — могут повысить уровень безопасности за счет дополнительных средств проверки, но также снизить его за счет своих уязвимостей. Несомненный плюс для пользователей: такое ПО проще контролировать. Ограничения среды снижают вероятность, что оно скрыто получит доступ к файлам или запустит какой-либо процесс.
Десктопное настраивается более гибко, а значит — теоретически при его разработке можно предусмотреть все потенциальные уязвимости. На практике — вряд ли. Впрочем, сделать его полностью безопасным все же можно. Но только если устройство, на котором оно установлено, не будет никуда подключаться, даже к защищенной локальной сети. В противном случае — риск все равно будет.
Однозначно сказать, что безопаснее — сложно (если вообще возможно). На это влияют много факторов, прежде всего — человеческий. А ведь именно в защите от человеческого фактора, в различных его проявлениях, заключается смысл всех мер безопасности.
Но очевидно, что доверие к десктопному ПО выше. Некоторые организации принципиально не соглашаются работать в браузерах, многие пользователи все еще относятся к ним настороженно. Однако ситуация меняется — с развитием технологий растет лояльность людей к ним.
Возможности браузерной разработки огромны, ее потенциал раскрыт далеко не полностью. Технологии развиваются, рынок ИТ растет, предлагая все новые приложения — при прочих равных пользователи будут выбирать web просто потому, что это удобнее. Если говорить о решениях для корпоративных клиентов, то тут браузерные приложения незаменимы. Они гибкие, универсальные, не требуют предварительной подготовки среды, позволяют сэкономить финансы компании, аппаратные ресурсы, время сотрудников.
Но рассмотрим другое мнение. Некоторые разработчики считают, что перспективы далеко не безоблачные. Слишком несовершенны технологии работы браузеров, слишком много некачественного ПО уже «накодили». Поэтому пользователи браузерных решений будут возвращаться обратно к десктопным. Такая тенденция будет продолжаться, пока разработчики браузеров массово используют Java Script. Только когда появится реальная альтернатива — можно будет делать прогнозы на будущее.
Веб-приложения уже сейчас подходят для решения многих задач — как бизнеса, так и обычных пользователей. Если вы решили разработать свое — используйте no-code платформу AppMaster.io.
Готовые блоки кода и визуальные инструменты для работы с ними помогут вам создать готовое веб-приложение и его серверную часть гораздо проще и быстрее, чем методы классического программирования!