Single Page Applications — что это?

SPA или Single Page Application — это одностраничное веб-приложение, которое работает путем загрузки веб-страницы вместе с необходимым кодом. В переводе с английского языка SPA дословно обозначает «Приложение одной страницы». Одностраничные приложения SPA начали активно использоваться с наступлением эры HTML5.

Основу платформы HTML5, предназначенной для создания веб-приложений, составляет JavaScript, HTML и CSS3. Поэтому можно утверждать, что под термином SPA подразумевается одностраничное веб-приложение, для функционирования которого необходима загрузка всех js-файлов (контролов, виджетов, модулей и т.п.), файлов CSS и непосредственно веб-страницы.

Многофункциональные приложения обычно содержат в себе сотни, а иногда и тысячи файлов с различными скриптами. Как в этом случае будет функционировать SPA приложение, учитывая, что для его работы требуется загрузка всех файлов? Проблема загрузки множества скриптов решена при помощи программного интерфейса приложения AMD. Этот API обеспечивает позволяет загружать скрипты по требованию. Так, если для загрузки «главной страницы» одностраничного приложения необходимо 5 скриптов, этот API загрузит их непосредственно перед запуском программы. После того, как пользователь перешел на другую страницу, AMD загружает скрипт и разметки именно этой страницы.

Принцип работы «одностраничных приложений»

Принцип работы SPA приложений может быть непонятен с первого раза. Поэтому рассмотрим актуальные примеры SPA приложений. Допустим, страница проекта, на котором находятся все ссылки на CSS и все необходимые скрипты, называется «Веб-страница». Файл с главной страницей принято называть index.html (в ASP.NET возможны и другие названия). Страницы, предназначенные для переключения пользователями внутри этого ресурса, назовем «модулями».

Далее рассмотрим все преимущества и недостатки такого подхода. Благодаря этому, должно стать понятно почему одностраничные приложения настолько популярны.

Преимущества Single Page Applications

• Главным преимуществом SPA приложений считается их универсальность. Они одинаково хорошо функционируют как на персональных компьютерах, так и на мобильных устройствах. Планшеты, смартфоны и даже простые мобильные телефоны, постепенно уходящие в историю, без проблем работают с проектами, разработанными по принципу SPA. Поэтому первым преимуществом одностраничных приложений можно считать широкий охват устройств. Следовательно, создание одностраничного приложения позволяет рассчитывать на значительно большую целевую аудиторию, чем при использовании стандартных методов веб-разработки.
• Вторым преимуществом SPA считается насыщенный интерфейс. Этот плюс обусловлен тем, что на одной веб-странице гораздо проще создать богатый интерфейс. Такой подход существенно упрощает процессы хранения информации, а также управления состоянием представления и анимацией.
• Еще одно преимущество одностраничных портал заключается в упрощении процедуры загрузки контента. Если сайт работает с шаблонами, то вместе с загрузкой любой страницы этого портала пользователь обязательно загружает и разметку шаблона. Конечно, сегодня кэширование уже достигло неимоверно высоких результатов. Но тем не менее, в SPA нечего кэшировать, а это означает, что происходит существенная экономия и времени, и ресурсов.

Недостатки SPA

Это веб-приложение имеет не так много минусов. Если говорить точнее, минус всего один – необходимость знания основ JavaScript. Этот недостаток, прежде всего, актуален для тех, кто работает на C#.

Принципы работы Single Page Applications

Фреймворки, реализующие парадигму SPA, работают по следующим принципам:

• SPA осуществляет поддержку пользовательской навигации. Все пользовательские «передвижения» должны фиксироваться в истории навигации. При этом навигация должна быть «глубокой». Другими словами, если пользователь откроет скопированную ссылку на внутренний модуль в другом окне или, например, браузере, он должен попасть на необходимую ему страницу.
• Разработка SPA приложения предусматривает использование только одной страницы. Следовательно, все необходимое для функционирования этого приложения (скрипты, стили и т.д.) должно размещаться на единственной веб-странице.
• SPA сохраняет данные о работе пользователей в DOM-хранилище или кэше браузера.
• SPA приложение предусматривает загрузку всех необходимых скриптов в процессе инициализации веб-страницы.
• SPA загружает дополнительные модули «по требованию» пользователя.

Шаблоны SPA

Исходя из всего вышесказанного, становится понятно, что SPA является абстрактным понятием. Single Page Application означает принцип архитектуры приложения. Поэтому далее рассмотрим шаблоны, необходимые для реализации проекта по принципам SPA.

Сегодня есть множество фреймворков, реализующих принцип SPA. Использование этих фреймворок позволяет рассчитывать на:

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

В следующей таблице рассмотрим основные шаблоны SPA на основе платформы APS.NET:

Выводы

Сегодня в интернете можно найти огромное количество примеров проектов, созданных по принципам SPA. Самым известным и мощным проектом такого типа является почтовый сервис Google – Gmail.

В качестве примера SPA-приложения можно привести и проект SilverReader. Особенностью этого сервиса для чтения RSS-каналов является тот факт, что он разработан при помощи фреймворка DurandalJS.

Теги: