Что такое SPA и MPA?

Большое спасибо за подробную статью о SPA и MPA и в целом развитии веб приложений, это было очень интересно и познавательно.

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

Хотелось бы по подробней узнать про преимущества и недостатки одностраничных (spa) и многостраничных (pwa) веб-приложений

Существует три основных подхода к разработке веб-приложений: одностраничные (SPA), многостраничные (MPA) и прогрессивные (PWA). Они выделяются среди других подходов простотой разработки, удобством для пользователей и широкими возможностями для развития бизнеса.

Рассказываем, чем отличаются компоненты MPA, SPA и PWA, какие у них преимущества и недостатки, что из них выбрать и для каких задач.
Одностраничные приложения

SPA или Single Page Application — это одностраничное веб-приложение, которое загружается на одну HTML-страницу. Благодаря динамическому обновлению с помощью JavaScript, во время использования не нужно перезагружать или подгружать дополнительные страницы. На практике это означает, что пользователь видит в браузере весь основной контент, а при прокрутке или переходах на другие страницы, вместо полной перезагрузки нужные элементы просто подгружаются.

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

Такого эффекта удается добиться с помощью продвинутых фреймворков JavaScript: Angular, React, Ember, Meteor, Knockout.

Примеры динамических приложений: Gmail, Google Maps, Facebok, GitHub, Meduza.
Преимущества

— Высокая скорость — все ресурсы загружаются за одну сессию, а во время действий на странице данные просто меняются, что очень экономит время;
— гибкость и отзывчивость пользовательского интерфейса — за счет того, что веб-страница всего одна, проще построить насыщенный интерфейс, хранить сведения о сеансе, управлять состояниями представлений и анимацией;
— упрощенная разработка — код можно начинать писать с файла file://URL, не используя сервер, не нужен отдельный код для рендера страницы на стороне сервера;
— кэширование данных — приложение отправляет всего один запрос, собирает данные, а после этого может функционировать в offline-режиме.

Недостатки

— Seo оптимизация требует решений в виде серверного рендеринга — из-за того, что контент загружается при помощи технологии AJAX, которая подразумевает динамическое изменение содержания станицы, а для оптимизации важна устойчивость;
— нагрузка на браузер — из-за того, что клиентские фреймворки тяжелые, они довольно долго загружаются;
— необходима поддержка JavaScript — без JS нельзя полноценно пользоваться полным функционалом приложения;
— утечка памяти в Java Script — из-за плохой защиты, SPA больше подвержена действиям злоумышленников и утечке памяти.

Многостраничные приложения

MPA или Multi Page Application — это многостраничные приложения, которые работают по традиционной схеме. Это означает, что при каждом незначительном изменении данных или загрузке новой информации страница обновляется. Такие приложения тяжелее, чем одностраничные, поэтому их использование целесообразно только в тех случаях, когда нужно отобразить большое количество контента.
Преимущества

— Простая SEO оптимизация — можно оптимизировать каждую из страниц приложения под нужные ключевые запросы;
— привычность для пользователей — за счет простого интерфейса и классической навигации.

Недостатки

— Тесная связь между бекендом и фронтендом, поэтому их не получается развивать параллельно; сложная разработка — требуют использования фреймворков как на стороне клиента, так и на стороне сервера, что увеличивает сроки и бюджет разработки.
— сложная разработка — требуют использования фреймворков как на стороне клиента, так и на стороне сервера, что увеличивает сроки и бюджет разработки.

SPA и MPA. Что выбрать?

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

Целесообразен, если:

— есть необходимость в многофункциональном, насыщенном пользовательском интерфейсе;
— есть необходимость в интерфейсе API — использовании готовых блоков для построения приложения.

Выбор MPA

Целесообразен, если:

— приложения используются только для чтения информации;
— есть необходимость в использовании приложения в браузерах без поддержки JavaScript.

Зачем нужны PWA

Прогрессивные приложения или Progressive Web Application взаимодействуют с пользователем, как приложение. Они могут устанавливаться на главный экран смартфона, отправлять push-уведомления и работать в офлайн-режиме.

Пример: Google Docs.
Преимущества

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

Недостатки

Не все браузеры поддерживают основные функции таких приложений (например, Firefox и Edge).