register

Веб приложение. Разница между сайтом, веб-приложением, SPA и PWA

Назад
08
Апр 2020

Содержание:

Разница между веб-приложением и вебсайтом
Что называют одностраничным веб-приложением SPA
Что называют многостраничными веб-приложениями MPA
Что выбрать – SPA или MPA
Что относится к прогрессивным веб-приложениям – PWA
Технологии PWA: Service Worker и Web App манифест
Какому приложению отдать предпочтение при разработке

Разница между сайтом, веб-приложением, SPA и PWA

Все ресурсы в интернете можно поделить на статичные вебсайты и интерактивные приложения. Последние, в свою очередь, могут относиться к одностраничным (SPA) или многостраничным (MPA). Еще в последние пару лет часто встречается термин PWA.

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

Разница между веб-приложением и вебсайтом

По классическому определению, веб-приложение – это программа, состоящая из клиента и сервера – фронтенда и бэкенда. А вебсайт – это набор статичных HTML-страниц, объединенных одним доменом. Статичные страницы, в отличие от динамических, не меняют свое содержание, в зависимости от действий пользователя и не содержат интерактивных программных элементов.

Однако полностью статичных вебсайтов уже сейчас практически нет. Даже в простом вебсайте-визитке на Вордпрессе есть база данных, есть минимальные интерактивные функции. Поэтому формально все современные вебсайты попадают под определение «приложение».

Но есть и альтернативная трактовка.

По ней, сайт – это веб-ресурс, главный элемент которого – контент. В веб-приложении же главное – это взаимодействие с пользователями. Так, новостные и информационные ресурсы подпадают под определение вебсайт. А онлайн офисы, такие как Гугл Доки и Таблицы, относятся к интернет приложениям.

Большинство ресурсов совмещают информативную и интерактивную часть. Например, вебсайт университета может информировать посетителей (рассказывать о специальностях, стоимости обучения и т. д.) и в то же время предоставлять студентам возможность записываться на курсы, а преподавателям вести журнал оценок. Подобный ресурс можно назвать и вебсайтом, и приложением.

Языки программирования веб-приложений

Использование языков разработки – еще одна граница, проходящая между вебсайтом и  онлайн приложением. Вебсайт пишется на HTML и CSS, которые, строго говоря, не относятся к языкам разработки.

Фронтенд пишется на HTML, CSS и JavaScript. Популярные фреймворки для фронтенда: React, Angular 1 и 2, Vue, Ember.js

Бэкенд можно писать почти на любом любом языке. Но самые популярные: Java, Python + Django, PHP + Laravel, JavaScript + Node.js, Go, C, C# + Asp.net, Ruby

Кроме того, на бэкенде используются языки баз данных: Oracle, MySQL, MS Access, dBase. Базы данных можно прописывать и на стандартных языках бэкенда, например на Питоне.

Что называют одностраничным веб-приложением SPA

SPA (Single Page Application) – одностраничное интерактивное приложение. Важно, что оно не только находится на одной странице, но и, подобно полноценной программе, является интерактивным. Так информационный вебсайт может состоять из одной страницы, но, по существу, не являться SPA.

В одностраничном приложении пользователь, переключаясь между вкладками, остается на одной странице. Причем подгружаются и обновляются только нужные части контента, что играет в пользу быстродействия SPA.

Пример одностраничной программы – Gmail. Обратите внимание – когда вы переключаетесь между списками сообщений, адрес страницы не меняется. Это отличительный признак SPA.

На каких языках пишется

Основной язык создания SPA – JavaScript. Небольшое одностраничное приложение можно сделать с помощью библиотеки jQuery. Однако этот вариант не самый оптимальный для больших проектов. Лучше использовать фреймворки Vue, React или Angular.

Преимущества одностраничных приложений

  • Скорость. Быстродействие достигается благодаря тому, что контент, который не меняется из вкладки во вкладку, не нужно перезагружать.
  • Скорость разработки. Основную часть программы составляет фронтенд. Поэтому снижаются затраты на написание серверной части.
  • Код SPA можно использовать как основу для разработки мобильных приложений.
  • Пользовательский опыт сравним с удобством полноценной программой.
  • Кэширование. SPA более эффективно в работе с кэшем.
  • Поиск и устранение багов через инструменты разработчика для Хрома.

Недостатки

  • SEO. Поскольку информация подгружается в основном по запросу пользователя, кроулеры Google и Яндекс, не всегда могут просканировать (и проиндексировать) части SPA.
  • Некоторые пользователи отключают JavaScript на своих браузерах. В таком случае приложение не будет работать.
  • Проблемы с безопасностью. SPA более уязвимы для межсайтовых атак (XSS). Хотя масштаб работ по обеспечению безопасности одностраничной программы меньше, чем в многостраничных приложениях.

Что называют многостраничными веб-приложениями MPA

MPA (Multi Page Application) – традиционные многостраничные веб-приложения. Когда пользователь взаимодействует с вебсайтом, загружаются новые HTTP-страницы. Поэтому обмен данными происходит медленней, чем в SPA. Особенно, если есть проблемы с интернет-соединением или с хостингом вебсайта.

Примеры MPA – интернет-магазины, такие как Rozetka и Amazon.

Преимущества SPA

  • SEO. Поисковые движки приспособлены для индексации многостраничных приложений. Все страницы можно оптимизировать под разные запросы – в чем и заключается суть SEO, и что проблематично реализовать в SPA. Например, для каждой страницы можно добавлять мета-теги.
  • Данные из Google.Аналитики. Один из факторов успеха интернет-проекта – получение информации о поведении пользователей на вебсайте. Возможности SPA в этом плане ограничены.
  • Масштабируемость. MPA-архитектура подходит, когда вебсайт состоит из сотен и тысяч страниц.
  • Навигация. Пользователь может сохранять ссылки на страницы в закладках и легко делиться ими.
  • Возможность использования готовых решений, таких как OpenCart и WordPress c его плагином WooCommerce.

Недостатки

  • Ниже скорость взаимодействия. MPA-серверы перезагружают контент, когда пользователь взаимодействует с приложением. Хотя существуют методы ускорения MPA (например, оптимизация работы с кэшем), но пользовательский опыт все же не будет дотягивать до SPA.
  • Сложность разработки. Нужно отдельно писать фронт и полноценный бэк.
  • Поддерживать и обновлять крупные многостраничные вебсайты хлопотно.

Что выбрать – SPA или MPA

SPA лучше всего подходит для проектов, где SEO не играет большой роли и не нужно индексировать каждую страницу. Например, для SaaS-платформ.

Модель MPA лучше использовать для информационных ресурсов, интернет-магазинов, каталогов и маркетплейсов. Если ваша компания предоставляет большое количество товаров или услуг – нужно делать MPA.

Стоит отметить, что SPA часто является частью архитектуры многостраничного вебсайта. К примеру, основная часть ресурса может быть многостраничной, а личный кабинет реализован в виде SPA.

Что относится к прогрессивным веб-приложениям – PWA

PWA или Прогрессивное приложение близко по своим возможностям, функциям и качеству пользовательского опыта к нативным компьютерным и мобильным приложениям.

Четкой границы между не-PWA и PWA приложением нет. Но можно выделить ряд характеристик. В частности PWA должно содержать прокси-слой (Service Worker) и Web App манифест. По сути, браузер выступает виртуальной машиной для запуска веб-приложений, подобно тому, как Windows запускает exe-файлы, а Android – apk.

Технологии PWA: Service Worker и Web App манифест

Service Worker – это прокси-слой между серверной и клиентской частью. Он находится в браузере, через проходят все запросы. Таким образом, есть два фронтенд слоя – в одном прописывается интерфейс, в другом – логика. Это позволяет делать полноценные программы для веб.

Service Worker, как правило, пишется на чистом JavaScript и подключается к HTML-странице как отдельный файл.

Web App манифест – это JSON-файл, в котором прописывается название программы, иконка, тип отображения PWA: standalone, fullscreen или browser. Манифест позволяет закрепить PWA на домашнем экране смартфона вместе с нативными приложениями.

Преимущества прогрессивных веб-приложений

  • Они работают на любом устройстве. Интерфейс PWA подстраивается под ширину  экрана компьютера или телефона.
  • Разработчику достаточно создать одну программу для всех платформ.
  • UX сравним с приложениями для ПК и мобильного. Пользователь не ощущает разницы между использованием полноценной, установленной на устройство программы и PWA.
  • Обновление в режиме реального времени благодаря Сервис Воркерам.
  • Безопасность. PWA работает только по HTTPS протоколу.
  • Индексируемость в поисковых движках.
  • Интерактивные функции: push-уведомления и гео-локация.
  • Можно закреплять иконку на домашнем экране телефона.
  • Большинство функций доступны офлайн. А если возникает необходимость дождаться ответа с сервера, PWA включает экран загрузки или отдельные элементы интерфейса, сигнализирующие о том что данные загружаются. Это направлено на улучшение пользовательского опыта.
  • Ссылкой на PWA-приложение можно делиться, как на обычный вебсайт.

Недостатки

  • Не поддерживается на старых смартфонах. Для iOS – ниже версии 11.3
  • Потребление энергии выше, чем у простого вебсайта.
  • В отличие от мобильных приложений, PWA не представлены в магазинах AppStore и Google Play.
  • Поскольку PWA не требуют верификации в магазинах приложений, гарантии безопасности для пользователей несколько ниже. С другой стороны, для разработчика отсутствие лишних согласований – это плюс.
  • У PWA нет доступа к некоторым аппаратным ресурсам устройств. Например, к Bluetooth или NFC. Хотя подвижки в этом направлении есть и в ближайшем будущем можно ожидать расширение функционала прогрессивных веб-приложений.

Какому приложению отдать предпочтение при разработке

На каких приложениях остановаться, зависит от цели проекта и наличия ресурсов на разработку и продвижение.

Если вы строите информационные веб проект, то достаточно адаптивный вебсайт, который подстраивает верстку под размер экрана.

Если вам нужно добавить раздел, не требующий индексации в поисковиках для многостраничного ресурса (например, личные кабинеты админов и пользователей), то лучше сделать его в формате SPA.

Если вам нужно обеспечить функциональность близкую к полноценным программам и охватить как мобильных, так и ПК пользователей за минимальный бюджет, то нужно делать PWA.

Если ваше приложение будет использовать продвинутые функции системного железа (NFC, камеру, сканер отпечатков пальца, ресурсы видеокарты), например вы делаете 3D-игру, то лучше делать нативное приложение для каждой платформы.

Наша команда с радостью поможет вам выбрать верный вариант и разработать веб приложение. Мы проконсультируем вас и найдем решение, которое будет направлено именно под ваши желания и задачи. Свяжитесь с нами или оставьте свои контакты и мы перезвоним в удобное для вас время. 

Ваc может заинтересовать

Технологии

Безопасность Web-приложений: 10 главных угроз и как от них защититься

03
Апр 2020
Содержание: 1. Внедрение 2. Некорректная аутентификация 3. Утечка конфиденциальных данных 4. Внешние XML-сущности (XXE) 5. Нарушение контроля доступа 6. Неправильная настройка безопасности 7. Межсайтовый скриптинг (XSS) 8. Небезопасная десериализация 9. Использование компонентов с известными уязвимостями 10. Недостаточный мониторинг и ведение логов Общие правила защиты веб-приложений Чек-лист мер обеспечения защиты веб-приложений   По данным Positive Technologies, […]
повышение продаж
Технологии

Как диджитализация бизнеса повышает продажи

02
Апр 2020
Диджитализация, она же цифровизация и цифровая трансформация, – это преобразование бизнеса с помощью информационных технологий. Под определение «диджитализация» попадает и создание сайта, и представительство в социальных сетях. Диджитализация повышает продажи бизнеса через: выход на интернет-аудиторию; привлечение целевой аудитории через дополнительные услуги;  повышение лояльности клиентов; автоматизацию процессов в отделе продаж.  Косвенно продажи растут и за счет […]
Технологии

3 причины, почему о диджитализации бизнеса нужно задуматься уже в 2020 году

23
Мар 2020
Диджитализация — это преобразование бизнеса с помощью современных технологий и методов управления. Этот процесс также называют цифровой трансформацией или цифровизацией.  С результатами диджитализации мы сталкиваемся ежедневно. Стоит только погуглить, например, погоду в Испании, как тут же на сайтах начнут мелькать баннеры туристических фирм. Так диджитализированный бизнес выходит на целевую аудиторию.  Цели диджитализации: повышение эффективности бизнеса, […]

Спасибо за ваш интерес!

Мы с вами свяжемся в ближайшее время