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

Сегодня мы поговорим о том, что такое SPA и какой от него толк. Сразу замечу, что говорить мы будем не о водных процедурах, а о том SPA, который Single Page Application (одно-страничное веб-приложение). Что это такое, чем оно отличается от MPA (Multi Page Application) и для чего все это нужно — читайте в этой заметке.

История веб-разработки началась с появлением веб-приложения, объединяющего нескольких статических страниц, связанных друг с другом ссылками. Но вскоре появился тег ‘form’, можно считать, с того самого времени зародилась эра веб-разработки.

Немного из истории развития веб-приложений

От статических страниц к MPA

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

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

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

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

С появлением AJAX приложения стали работать быстрее

В начала 2000-х годов MPA был усовершенствован с появлением AJAX, который позволяет обновлять только часть страницы, а не всю страницу целиком. С одной стороны, это позволило улучшить производительность, с другой же — усложнило веб-страницу.

И вот, на рынке появился SPA

Спустя 10 лет возник паттерн SPA. На самом деле, SPA — это эволюция шаблона MPA + AJAX. При таком подходе только каркас веб-страницы строится на сервере, все остальное генерируется средствами JavaScript.

SPA запрашивает разметку и данные раздельно, и визуализирует результаты непосредственно в браузере. Это стало возможным благодаря новым front-end — фреймворкам, реализующим шаблон MVVM, таким как AngularJS, DST Platform и KnockoutJS.

SPA: достоинства и недостатки

Итак, давайте посмотрим, какие достоинства и недостатки имеет SPA по сравнению с MPA.

Достоинства SPA по отношению к MPA:

Более быстрая загрузка страниц;

Улучшенное восприятие пользовательского интерфейса, поскольку загрузка данных с сервера происходит в фоновом режиме;

Нет необходимости писать код на сервере для визуализации страницы;

Разделение на Front-end и Back-end — разработку;

Упрощенная разработка под мобильные приложения; вы можете повторно использовать один и тот же серверный код для веб-приложения и мобильное приложение;

Тем не менее, у этой чудесной технологии есть еще и ряд недостатков.

Недостатки SPA по отношению к MPA:

Тяжелые клиентские фреймворки, которые нужно загружать на каждый клиент;

Веб-формы не компилируются, а потому их сложнее отлаживать и они содержат больше уязвимостей, которыми могут воспользоваться злоумышленники;

SEO (Search Engine Optimization) — SPA усложняет оптимизацию сайта под поисковые движки. Поскольку большая часть веб-страницы строится на стороне клиента, боты поисковых систем видят страницу совершенно иначе, чем пользователь;

А что, если создать гибридное приложение?

Итак, почему бы нам не использовать какой-нибудь гибридный вариант? Было бы здорова разрабатывать на MPA (как на более безопасном шаблоне), где некоторые страницы были бы реализованы как SPA, не правда ли?

Такой вариант возможен, но нужно четко осознавать, насколько правильно будет использовать его для конкретного приложения. Иначе вы рискуете создать приложение, которое будет совмещать недостатки обоих шаблонов:

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

Более сложная разработка — вам придется использовать два фреймворка — MVVM для клиента и MVC для сервера;

Front-end и Back-end будут сильно связаны;

Вы не сможете использовать тот же самый backend для мобильных приложений.

Подведем итоги

Итак, какой шаблон использовать и когда? Я бы рекомендовал не смешивать SPA и MPA для разработки конкретного приложения. Каждый из этих паттернов хорош для своей области применения, но их совмещение не особо выгодно.

Рекомендую изучить уроки по Asp.Net5, в которых вы научитесь создавать приложения под SPA и MPA на новейшем бесплатном IDE Visual Studio.

Комментарии
RSS
14:41
+2
Большое спасибо за подробную статью о SPA и MPA и в целом развитии веб приложений, это было очень интересно и познавательно.
о pwa.
pwa это не гибрид чего то с чемто. pwa это набор букв сотрясающих воздух, потому что за ними не стоит ничего — ни одной технологии.
pwa может стать совершенно любой сайт с прицепленным к нему файлом манифеста и воркером, что по умолчанию должно быть и так у любого нормального проекта.
нет ничего что может делать якобы pwa, чего не может делать обычный типичный проект.
Ваш комментарий
Загрузка...
Вам может быть интересно
Современные сайты интерактивные и динамичные — они реагируют на действия пользователя, обрабатывают его запросы и выдают результат. Так работают многие онлайн-сервисы, например, интернет-банкинг...
В Последние годы Web-приложения постепенно вытесняют настольные решения и станов...
По результатам ежегодного отчёта State of the Octo...
Java virtual machine (JVM) — это программа, ...
Неопытные разработчики вряд ли поймут, что изображ...
Эта статья — о мертвых или почти мертвых язы...
Чем отличаются веб-приложения MPA, SPA и PWA, для ...
Зачем изучать PHP: рейтинг, перспективы, сферы при...
Python входит в число самых популярных языков прог...
Анализ кода является важной составляющей процесса ...

Новые комментарии

Спасибо ребятам разработчикам за русскую соц.сеть да еще и к празднику 9 мая!
Спасибо разработчикам DST за то что вовремя сделали такой важный проект как Русский Твиттер! Как нельзя кстати. Мы уже сделали канал на РутВите
Если вы хотите, чтобы получилось что-то путное, нужно переходить на УТ11, продлевать лицензию, обновляться, добиться увольнения 1С-ника, раз он не пон...
Если вы хотите, чтобы получилось что-то путное, нужно переходить на УТ11, продлевать лицензию, обновляться, добиться увольнения 1С-ника, раз он не пон...

Заявка на услуги DST

Наш специалист свяжется с Вами, обсудит оптимальную стратегию сотрудничества,
поможет сформировать бизнес требования и рассчитает стоимость услуг.

Россия, Москва

Комсомольский пр-т, д.28

8 800 5508827
Заказать звонок

Режим работы: Пн-Пт 10:00-19:00

info@dstglobal.ru

Задать вопрос по почте

Укажите ваше имя
Укажите ваше email
Укажите ваше телефон