Одностраничные (spa) и многостраничные (pwa) веб-приложения
Чем отличаются веб-приложения MPA, 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).
Итог
SPA и PWA — это веб-сайты, которые постепенно смещают со своих позиций классические MPA. Так происходит из-за того, что они более простые в разработке, быстрее работают и нравятся пользователям. Однако у них есть слабое место — SEO-оптимизация. Пока еще не все браузеры могут с ними нормально работать, поэтому, чтобы сделать такие приложения дружественными для сео, нужно прибегать к ряду ухищрений. MPA-сайты в этом плане более простые и надежные.