🌎 Веб-приложения: SPA , MPA, PWA

Веб-приложение работает в веб-браузере. В отличие от сайта — интерактивное и может выполнять задачи как десктопные приложения

SPA (Single Page Application)

SPA — одностраничное веб-приложение, где основное взаимодействие с пользователем происходит на одной странице.
Контент обновляется динамически, без полной перезагрузки страницы
🔵Применение: при высоком уровнем взаимодействия (соц сети, почтовые клиенты, административные панели)

🔵Зачем нужно: для быстрого и плавного пользовательского опыта, минимального времени загрузки

🔵Из чего состоит
💙клиентская часть (HTML, CSS, JavaScript)
💙фреймворки и библиотеки (React, Angular, Vue.js)
💙API для взаимодействия с сервером

🔖Как работает
1. загрузка начальной HTML-страницы
2. загрузка CSS и JavaScript файлов
3. инициализация фреймворка/библиотеки
4. запросы к API для получения данных
5. динамическое обновление DOM с использованием данных из API
6. обновление URL и состояния приложения без перезагрузки страницы
🔵Плюсы и минусы
💛 быстрая загрузка после первого запроса  (кэширование ресурсов и данных на клиенте)
💛 плавные и мгновенные переходы между разделами (виртуальный DOM и клиентская маршрутизации)
💛 меньше нагрузка на сервер (меньше количество запросов к серверу)

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

➡️ Примеры: Яндекс.Почта, ВКонтакте

✳️ Интеграция
⭕REST API, GraphQL для взаимодействия с сервером
⭕Веб-сокеты для реального времени


MPA (Multi Page Application)

MPA — многосерийное веб-приложение, где каждая страница загружается отдельно с сервера

🟢Применение: сайты с большим количеством контента, новостные сайты, интернет-магазины

🟢Зачем нужно: легче интегрировать SEO (оптимизацию сайтов для поисковых систем), т.к. у каждой страницы свой уникальный URL

🟢Из чего состоит
🟢серверная часть (бэкэнд: на PHP, Python, Java и тд)
🟢клиентская часть (HTML, CSS, JavaScript)
🟢система маршрутизации

🔖Как работает
1. пользователь переходит по URL
2. сервер обрабатывает запрос и возвращает HTML-страницу
3. браузер загружает ее отображает
4. при переходе на другую страницу процесс повторяется
5. доп. данные могут загружаться через AJAX-запросы

🟢Плюсы и минусы
➕простота SEO-оптимизации (каждая страница имеет свой статический контент)
➕четкая структура и маршрутизация (страницы обрабатываются отдельно)
➕простая архитектура

➖более длительное время загрузки при переходе между страницами (каждый переход — полный запрос к серверу)
➖высокая нагрузка на сервер из-за частых запросов

➡️ Примеры: Озон, сайт РБК

✳️ Интеграция
🟢REST API для взаимодействия с сервером
🟢встраивание iframe для отдельных модулей


PWA (Progressive Web Application)

PWA — сочетает возможности веб-приложений и нативных мобильных приложений.
Работает офлайн, отправляет push-уведомления и может устанавливаться на устройствах.

⚪Применение: веб-приложения, требующие офлайн-доступа и уведомлений, мобильные версии веб-сайтов

⚪Зачем нужно: обеспечивает нативный пользовательский опыт в веб-приложении, увеличивает вовлеченность пользователей

⚪Из чего состоит
⭕ клиентская часть (HTML, CSS, JavaScript)
⭕ Service Workers для работы офлайн
⭕ Web App Manifest для установки на устройства

🔖Как работает
1. пользователь открывает PWA в браузере
2. устанавливаются Service Workers
3. контент кэшируется для офлайн-доступа
4. пользователь может установить PWA на устройство

⚪Плюсы и минусы
➕офлайн-доступ и кэширование
➕push-уведомления
➕можно установить на устройства

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

➡️ Примеры: Лента.ру, КиноПоиск

✳️ Интеграция
🟡Service Workers для кэширования и работы офлайн
🟡Push API для уведомлений
🟡Web App Manifest для
установки на устройства


#развитие #веб


➿➿➿➿➿➿➿➿
🧑‍🎓 Больше полезного в базе знаний по системному анализу