Что такое 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.