🌎 Веб-приложения: 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 для
установки на устройства
#развитие #веб