SPA / MPA

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

SPA — это  Single Page Application (одно-страничное веб-приложение)
MPA- это (Multi Page Application)  (Мульт-страничные веь-приложения)

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

От статических страниц (SPA) к 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 и KnockoutJS.

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

SPA и MPA

Какие достоинства и недостатки имеет SPA по сравнению с MPA.
Достоинства SPA по отношению к MPA:
  • Более быстрая загрузка страниц;
  • Улучшенное восприятие пользовательского интерфейса, поскольку загрузка данных с сервера происходит в фоновом режиме;
  • Нет необходимости писать код на сервере для визуализации страницы;
  • Разделение на Front-end и Back-end — разработку;
  • Упрощенная разработка под мобильные приложения; вы можете повторно использовать один и тот же серверный код для веб-приложения и мобильное приложение;

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

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

Гибридное приложение?

Такой вариант возможен, но нужно четко осознавать, насколько правильно будет использовать его для конкретного приложения. Иначе вы рискуете создать приложение, которое будет совмещать недостатки обоих шаблонов:
  • Приложение может получиться медленным, ввиду того, что часть страниц будет формироваться на сервере, а для реализации части SPA понадобится установка клиентских фреймворков на клиентскую машину;
  • Более сложная разработка — вам придется использовать два фреймворка — MVVM для клиента и MVC для сервера;
  • Front-end и Back-end будут сильно связаны;
  • Вы не сможете использовать тот же самый backend для мобильных приложений.

Итого

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

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *