Я преподаю разработку на JavaScript уже несколько лет, постоянно провожу консультации и иногда собеседования, а также работаю девелопером в компании. И среди этого всего я заметил одну интересную штуку: люди (я говорю больше о студентах и кандидатах) не понимают что такое веб-сайт и веб-приложение и какая между ними разница. А разница есть, и она существенно изменяет подход к разработке всего этого.
Давайте разбираться с этим!
Якщо ви подумали, що це два ідентичних поняття, то я поясню різницю, але спочатку ми розберемося з визначенням кожної з частин:
Веб-сайт
Это страница или группа связанных между собой страниц, размещенных на одном сервере и имеющих общее доменное имя. В основном это статические (но могут быть и динамические) страницы с информационным содержимым и достаточно ограниченным взаимодействием с пользователем. Веб-сайты содержат текст, изображения, видео и другие мультимедийные элементы, которые пользователь может просматривать с помощью браузера. Для разработки веб-сайтов используют такие технологии, как HTML, CSS, JavaScript. В качестве примеров таких сайтов могут быть – википедия, новостные сайты, корпоративные сайты, блоги.
Веб-приложения
Это программное обеспечение, которое выполняется на веб-сервере в браузере (который в этой истории является клиентом). Веб-приложения имеют более сложный функционал, позволяющий пользователю взаимодействовать с данными, например, путем добавления, редактирования и удаления их. Часто включают в себя все те же виды медиа-контента, что и веб-сайты. Для разработки веб-приложений используют HTML, CSS, JavaScript, и дополнительно библиотеки или фреймворки, например React, Angular, Vue, а также backend технологии и системы управления базами данных, что позволяет создавать не только динамическую, но в первую очередь интерактивную пользовательскую среду. . Именно это является важной частью веб-приложений. В качестве примеров - интернет-магазины (с личным кабинетом, страницей поддержки и понравившихся товаров и т.п.) и самые банальные гугл документы, где вы можете взаимодействовать с документом всесторонне и редактировать/изменять его как угодно.
Отличия веб-сайтов и веб-приложений
| Веб-сайты | Веб-приложения |
| Предоставляет информацию, не предоставляя пользователю воздействие на нее. | Создается для того чтобы взаимодействовать с пользователем многими способами. |
| Почти никогда не требует авторизации для использования. | Практически всегда требуется авторизация для возможности пользоваться приложением. |
| Обычно статический и включает в себя текстовую информацию. | Многофункциональный и закрывающий собой много потребностей и проблем пользователя. |
| Пользователь не может производить манипуляции с данными. | Пользователь может производить манипуляции с данными, но ограничен в этом. |
| Основаны на простых мерах безопасности, таких как HTTPS и т.д. | Используются более сложные меры предосторожности, так как имеют доступ к персональным данным пользователя. |
Это очень короткое и наглядное объяснение разницы между этими двумя понятиями. Двинемся дальше.
Рекомендуем курс по теме
Доступность и пользовательский опыт
К веб-сайтам легко получить доступ, потому что их не нужно загружаться и авторизироваться для просмотра. Они должны адаптироваться под любые устройства, экраны и режимы просмотра. Сайты имеют сравнительно низкий уровень интерактивности и почти всегда все взаимодействие с пользователем – это просмотр им информации, пользование внутренним поиском, заполнение форм и нажатие на кнопку.
Содержимое веб-сайтов можно оптимизировать для поисковых систем, что позволяет охватить большую аудиторию.
Веб-приложение необходимо сначала установить, чтобы иметь возможность пользоваться им, это немного усложняет доступность. В то же время, веб-приложения гораздо более кастомизированы и персонализированы, чего только стоят push-уведомления, где приложение использует обращение к вам лично. Веб-приложения могут обновлять интерфейс без перезагрузки страницы, что улучшает пользовательский опыт.
А выглядят ли они одинаково?
Дизайн сайтов и приложений отличается и даже рядовой пользователь сможет отличить их.
Веб-сайты почти все выглядят просто и доступно. На них удобно читать, просматривать материалы и не потерять место, где только что остановились, отвлекшись на кофе. Всё делается для легкости восприятия всего контента на сайте. Часто сайты выглядят минималистически и последовательно, имеют интуитивную навигацию между страницами, если их больше, чем одна.
То есть если мы говорим о новостях – это должна быть четкая структура сайта с заголовками, которые хорошо видны, а последние новости будут прямо перед вами, как только вы зайдете на сайт.
Веб-приложения ориентируются на удобство использования, интуитивный интерфейс и максимально интенсивный пользовательский опыт. Очень часто приложения имеют сгруппированный яркий дизайн с большим количеством динамических элементов и анимаций, даже незаметных.
В приложениях присутствует сложная навигация, как сайд-бары с категориями и фильтрами. Также они динамически обрабатывают ваши данные в режиме реального времени, имеют более сложные требования к адаптивности на разных устройствах.
В качестве примера возьмем интернет-магазин: это простые формы, яркие контрастные цвета, категории и фильтрация товаров, а также плашки, указывающие потенциальному покупателю на то, что этот товар сейчас по сниженной цене.
Скорость загрузки
Скорость загрузки веб-сайта зависит от объема имеющейся на нем информации, но обычно это очень быстро при нормальном стабильном интернете.
Сайт должен работать так, чтобы быстро отображать информацию на пользовательском экране. Контент на нем должен быть оптимизирован для поисковых систем, что опять же влияет на доступность.
Веб-приложения имеют быструю загрузку начальной страницы, а все остальное загружается в зависимости от необходимости. Но сама загрузка интерактивных интерфейсов и различных динамических элементов сложнее, поэтому может быть немного медленнее, чем сайты.
Поддержка
Веб-сайты, как вы уже могли догадаться, обновляются не так часто, поэтому в особой поддержке как таковой они обычно не нуждаются. Но если изменения все же нужны, то для этого достаточно просто сменить несколько строк в html коде.
Веб-приложения обновляются чаще с целью добавления новых функций и устранения проблем в предыдущих или нынешних версиях. Поддержка более сложна, так как для этого нужно сделать ревью всего кода, а затем уже вписывать то, что нужно изменить. И делать это нужно осторожно, чтобы не повредить логику :)
Разновидности
Разновидности, как таковые, мы имеем в веб-приложениях, ведь это более сложная структура с технической точки зрения. Это могут быть:
- SPA (Single Page Application) – одностраничное интерактивное приложение, которое позволяет пользователю, переключаясь между вкладками, оставаться на одной странице. Это работает благодаря тому, что при переключении подгружаются только нужные части страницы (те, которые должны измениться), что повышает скорость загрузки и соответственно уровень экспириенса пользователя.
- MPA (Multi Page Application) – традиционные многостраничные веб-приложения, такие как крупные интернет-магазины. При переключении между вкладками загружаются новые страницы, что обычно снижает скорость загрузки.
- PWA (Progressive Web Application) - прогрессивное веб-приложение, которое очень близко к компьютерным и мобильным приложениям по многим параметрам, таким как пользовательский опыт, скорость загрузки, интерактивность, возможности и встроенные функции. Их особенность в том, что у них есть прокси-прослойка, что делает браузер пользователя виртуальной машиной и "разделяет" программу на два условных фронтенда: один – с интерфейсом, а второй – с логикой. Это все делается благодаря Service Worker, которые пишутся обычно на чистом JavaScript.
Что же выбрать?
Если вы уже определились с целями вашего проекта, то считайте, сделали уже половину дела, потому что дальше осталась – техническая (И, имею сказать, самая интересная :)).
Выше мы уже поняли, что от цели зависит что вы выберете - донести информацию, или взаимодействовать с пользователем на постоянной основе, обмениваясь данными с ним.
Так что если вам нужно что-то сложное, интерактивное с возможностью обработки данных, то это однозначно веб-приложение. О донесении информации, разумеется – сайт.
Также влиять на выбор может бизнес-модель, а именно: это продажи, контент, или сложные бизнес-процессы (входящий продукт –>изменения состава, цены и т.д. –> исходный продукт).
Вывод
С разницей и преимуществами мы разобрались, по недостаткам – только сложность в разработке и поддержке, или если вы вместо разработки сайта выбрали разработку веб-приложения, то есть усложнили себе жизнь на ровном месте;)
Моя задача была в том, чтобы максимально просто и доступно рассказать вам, в чем разница и как правильно выбрать в зависимости от потребностей. Надеюсь, у меня получилось, а вы что скажете?
