веб сайт или веб приложение
Чем веб-приложение отличается от сайта?
Рядовой пользователь не видит между ними разницы. Он заходит по адресу на страницу, получает желаемый результат и все – больше ничто его не волнует. Но если вы разработчик – это совсем другой вопрос.
Программист, создающий данные продукты, должен очень хорошо понимать, какая между ними есть разница. Однако самое интересное, что даже среди опытных разработчиков есть различные мнения по этому поводу. Мы сейчас постараемся осветить главные отличия между сайтом и web-приложением, которые помогут вам лучше ориентироваться в данном вопросе.
. совокупность веб-страниц, которые связаны связаны между собой и содержат контент разного формата: текст, картинки, видео, музыка и пр. Сайт может состоять из одной или нескольких страниц, а его содержимое включать или просто текст, или текст вместе с разными медиа-файлами.
Виды сайтов:
Например, Википедия, Яндекс, Google, Amazon.
Особенности сайтов
Для чего может создаваться сайт
. полноценная программа, доступ к которой осуществляется через браузер. Другими словами, это тот же сайт, только с интерактивными элементами и обширным функционалом.
Например, Twitter, Фейсбук, YouTube и пр.
Одна из главных отличительных черт веб-приложений – высокая настраиваемость. А еще они способны решать сразу много задач. Именно поэтому сайт сделать намного легче, чем веб-приложение, для создания которого необходима опытная и продвинутая команда разработчиков.
Особенности веб-приложений
Для чего может создаваться веб-приложение
Чтобы обеспечить доступ к имеющимся данным с разных устройств (мобильных, стационарных, оснащенных любой ОС) через все браузеры.
Главные отличия сайтов от веб-приложений
Характер взаимодействия с клиентами
Размещенный на сайтах контент пользователи могут просматривать и слушать, и это никак не меняет работу ресурса. В случае веб-приложения помимо потребления контента пользователи также манипулируют определенными данными, к примеру, заполняют формы.
Аутентификация
Это не обязательный процесс для обычных сайтов. В редких случаях пользователям могут предлагать регистрацию для доступа к расширенному функционалу или подписки на обновления. А в веб-приложениях без аутентификации не обойтись. Здесь функционал и спектр интерактивного взаимодействия гораздо шире, чем на сайте. И чтобы использовать все эти возможности, нужно с помощью логина и пароля зайти в личный аккаунт.
Уровень сложности решаемых задач
Если сайт просто отображает данные, имеющиеся на его страницах, то веб-приложение обладает намного более сложным функционалом.
Потребители контента
На сайтах все данные статичны и чаще всего открыты всем посетителям. Взаимодействие веб-приложения с пользователями носит более сложный характер и невозможно в полной мере без аутентификации.
Деплоймент
Чтобы внести простые изменения в сайт, не нужна полная компиляция и развертывание – только обновление HTML-кода. А для изменения веб-приложения разработчику нужно по новой скомпилировать, а затем развернуть ПО.
Вывод
В разработке сайта нет ничего супер сложного. Но для того, чтобы создать веб-приложение, нужны глубокие знания, навыки и опыт. Надеемся, что теперь разница между сайтами и веб-приложениями стала для вас более очевидной, и вам будет проще ориентироваться в этих понятиях в процессе своего обучения и работы.
Как работают веб-приложения
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 — это концепция в разработке, когда часто используемые данные, вместо того чтобы их каждый раз доставать из БД, вычислять или подготавливать иным способом, сохраняются в быстро доступном месте. Несколько примеров использования кэша:
Мобильный web сайт или мобильное приложение?
Данное эссе дает обзор аргументов, приведенных в различных статьях для принятия решения, какую платформу выбрать при разработке проектов для мобильных устройств. В конце приведена попытка составить схематический итоговый алгоритм выбора платформы.
Определения
Существует два направления технической реализации проектов для мобильных устройств: мобильный web сайт и мобильное приложение.
Мобильным web сайтом будем считать специализированный сайт, адаптированный для просмотра и функционирования на мобильном устройстве. Сайт может включать в себя интерактивные компоненты с использованием JavaScript, HTML5, новых API браузеров. В этом случае такую реализацию называют web-приложением. Далее, чтобы избежать путаницы любой вариант, работающий внутри браузера мобильного устройства, будем называть web-сайтом.
Мобильное приложение – это специально разработанное приложение под конкретную мобильную платформу (iOS, Android, Windows Phone). Обычно приложение разрабатывается на языке высокого уровня и компилируется в нативный код ОС, дающий максимальную производительность.
Существует еще третий вариант – мобильное приложение, включающее в себя компонент браузера. В этом случае часть мобильного приложения чаще всего используется для навигации и интергации с ОС, а web-компонент – для показа контента. Обычные пользователи не могут зачастую отличить такой вариант от нативного мобильного приложения.
Аргументы
Интерфейс
Одним из первых аргументов, которые приводят сторонники приложений – наиболее близкий к ОС и привычный для пользователей интерфейс. Действительно мобильное приложение наиболее тесно интегрировано с платформой и дает реализовать привычный отзывчивый интерфейс. С другой стороны web сайт с помощью хорошего форматирования и использования JavaScript может дать вполне понятный метод взаимодействия. На текущий момент отзыв web сайта значительно уступает приложению, но мощность мобильных устройств продолжает расти и сами браузеры существенно меняются в лучшую сторону. Кроме того, различные версии мобильных ОС могут диктовать свои стандарты, которых приходится придерживаться. При этом некоторые нововведения могут оказаться не совсем понятны обычным пользователям. Существенным в данном случае является то, что наиболее активными пользователями (теми кто выставляет рейтинг и делает комментарии в магазинах приложений) являются те, кто «фанатеет» от последних новшеств мобильной ОС. На это стоит обратить внимание при продвижении проекта – их можно использовать как союзников, помогающих распространению.
Быстродействие
Web сайт, а особенно интерактивный, существенно уступает приложению с точки зрения быстродействия. Браузеры мобильных устройств пока не могут порадовать высокой производительностью, кроме того, web-разработчики используют не самые оптимизированные версии библиотек (плохая реализация этих библиотек никак не сказывается на «больших» браузерах, поэтому с этим там можно смириться). Однако и приложение не всегда может радовать хорошим быстродействием – излишняя анимация, сложный интерфейс значительно снижают «отклик». Кроме того, для сложной графики и анимации приходится использовать языки более низкого уровня, разрабатывать или покупать отдельные специализированные библиотеки.
Интеграция с платформой
В этой области приложения далеко опережают сайт. В приложении существенно больше возможностей для доступа к устройству. Однако выше упоминался уже третий вариант, когда компонент браузера внедряется в приложение и в этом случае такая разница нивелируется. Кроме того, постоянно растет уровень предоставления доступа к возможностям устройства из браузера через расширяющийся набор API.
Наличие Интернет
Web сайт запускается из браузера, поэтому требует постоянного соединения с сетью. Это не имеет значения, если проект реализуется исключительно как онлайновый. Однако даже в этом случае из-за особенностей мобильного доступа в Интернет переход между частями приложения (навигация) связана с неприятными для пользователя задержками. Возможно, использование API для хранения локальных данных решат эту проблему, но пока примеров такого применения найти не удалось. Мобильные приложения могут осуществлять работу без подключения, выполняя кеширование и обновление данных, если требуется, при появлении соединения. Но все же и приложению нужно подключение в подавляющем большинстве бизнес-решений.
Фрагментация
Для реализации проекта на всех или каких-то определенных платформах требуется разработать приложение для каждой из платформ отдельно, причем на каждой свои среда и язык разработки, свои стандарты интерфейса. В случае мобильного сайта одна версия должна покрывать потребности всех платформ. Так выглядит в теории. Но на практике оказывается, что браузеры на различных платформах функционируют по-разному. Приходится поддерживать либо несколько версий одного сайта, либо в коде подстраивать выдаваемый контент под текущий запрос. Существенные отличия в размерах экрана также сказываются и на верстке сайта.
Ресурсы
Существует такой аргумент, как наличие специалистов. Считается, что специалиста для разработки мобильных приложений очень трудно найти и требуется очень высокая оплата. Учитываем еще то, что под каждую платформу, скорее всего, потребуется отдельный разработчик. В то время как web разработчиков очень много и их услуги сравнительно меньше стоят. Видимо все зависит от конкретной ситуации и конкретного места. Если в наличие есть web-разработчик, то наиболее выгодным будет разработать именно web сайт, если есть мобильные разработчики, то вполне может оказаться не слишком затратным разработка приложения. Но опять же, зависит от проекта – если потребуется серверная часть (а она скорее всего потребуется), то опять же нужен будет web-разработчик, хотя возможно не такой высокой квалификации и трудоемкость его части будет существенно ниже.
Публикация
Приложения некоторых платформ «завязаны» на определенный магазин (AppStore, Windows Store). Даже если такой жесткой привязки нет, то пользователи все равно привыкли находить приложения в магазинах (Google Play). Такие магазины накладывают существенные ограничения на функции приложений (в первую очередь в области платных услуг), к тому же требуется значительно время на утверждение каждой новой версии. Со своей стороны web сайт доступен сразу, достаточно только открыть браузер и ввести адрес (хотя если присмотреться, то это довольно трудоемкое действие может оказаться). Новая версия web сайта доступна сразу на момент публикации. Возможность предоставления платных услуг никак не ограничивается. Опять же аргумент весьма своеобразный – с одной стороны ограничение и медленная публикация в магазине, с другой – в магазине уже есть огромное число пользователей и уже готовые системы для оказания платных услуг. Тогда как на сайт пользователей надо привести и оплата через сайт на мобильном устройстве остается очень трудоемкой процедурой.
HTML5
Большое внимание в последнее время уделяется аббревиатуре HTML5. Это понятие существенно отличается, если смотреть на него с маркетинговой или технической точки зрения.
Технологически HTML5 это дальнейшее развитие языка разметки HTML. Однако сделан существенный шаг в сторону большей структуризации представления, нежели формата отображения. В язык добавлены большие мультимедийные возможности для проигрывания аудио и видео. Добавлена возможность работать с графикой. Существенно расширен язык форматирования CSS. В язык JavaScript добавлено несколько API для работы с графикой, локальными данными, мультимедийным контентом. Сам язык существенно переработан в сторону увеличения быстродействия. Стандарт HTML5 все еще находится в разработке и продолжает дополняться.
С маркетинговой точки зрения HTML5 это гораздо более широкое понятие. Под ним понимают еще много дополнительных API в той или иной степени поддерживаемых различными браузерами, многие интересные расширения CSS (в первую очередь в области интерактивного отображения). Основой понятия является высокая интерактивность сайта, которая позволяет пользователям принимать его за нативные приложения.
С точки зрения мобильной разработки существенно разделять обычный web сайт и сайт с использованием HTML5 не имеет смысла. Фактически стандартом любого сайта становится интерактивность в той или иной мере, реализованная с помощью JavaScript и новых API. Не целесообразно выделять отдельно разработчиков web сайта и разработчиков HTML5 – web разработчик должен свободно владеть технологиями HTML5 и использовать их в случае, если проект удобно реализовать с помощью последних разработок.
Выводы
Как оказывается, ни один из приведенных аргументов не склоняет чашу весов в ту или иную сторону. В каждом аргументе есть как преимущества, так и недостатки обоих вариантов решения. Третий, комбинированный, вариант тоже может решить часть проблем, но при этом порождает новые. Поэтому в каждом конкретном случае надо принимать решение исходя из текущей ситуации.
С точки зрения экономии ресурсов самым предпочтительным вариантом выглядит web разработка. Главное – не погрязнуть в тонкостях реализации, предоставить наиболее полезные функции пользователям. Помнить, что главное – контент, а «красивости» (анимация, графика) отходят на второй план.
Если планируется онлайн работа проекта как основной вариант взаимодействия с пользователем – безусловно, надо начинать с сайта, который может охватывать не только мобильных клиентов, но и пользователей стационарных компьютеров. В случае успеха можно далее реализовать отдельно мобильные приложения на выбранные платформы. Для большинства бизнес-приложений такой вариант наиболее подходит.
Если проект предусматривает больше оффлайн работу и нацелен на мобильных пользователей, то тут стоит отдать предпочтение приложениям. Однако, как упоминалось выше, возможно web разработчик все равно потребуется.
Для реализации игр и других приложений, требующих высокой производительности интерфейса вероятно дальновиднее реализовать через приложения. Существуют кросс платформенные библиотеки для разработки игр, которые позволяют на одном коде (или с минимальными изменениями) реализовать нативные приложения для различных платформ.
Чем отличаются сайт и веб-приложение?
Перевод статьи «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-код. В случае веб-приложения при внесении изменений вам потребуется заново скомпилировать и развернуть программу.
Заключение
Разработка сайта — относительно простой процесс. Для создания веб-приложения требуются более глубокие знания, опыт и планирование.
Надеюсь, после прочтения этой статьи вы лучше понимаете разницу между сайтами и приложениями и сможете сориентироваться, что именно вам требуется в том или ином случае.