Spa что это в программировании

Single Page Application: как работает сайт-приложение

Эта статья для тех, кому интересны технологии веба и кто хочет работать в серьёзной веб-разработке.

Обычный сайт состоит из множества HTML-страниц. Вы кликаете по ссылкам, браузер загружает новые страницы по этим ссылкам, у вас появляется ощущение движения от одной страницы к другой. Страницы могут лежать как файлы на каком-то сервере или генерироваться под ваш запрос какой-то серверной программой. Но, условно говоря, каждый «экран» сайта — это отдельная техническая сущность, отдельный документ. И мы между ними перемещаемся.

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

В начале 2010-х появилась новая концепция — нечто среднее между сайтом и приложением. Такую архитектуру называют SPA — Single Page Application. Если вы пользовались VK.com или Facebook.com, вы уже сталкивались с такими продуктами.

Коротко главное

SPA работает так: когда пользователь открывает страницу, браузер загружает сразу весь код приложения. Но показывает только конкретный модуль — часть сайта, которая нужна пользователю. Когда пользователь переходит в другую часть приложения, браузер берёт уже загруженные данные и показывает ему. И, если нужно, динамически подгружает с сервера нужный контент без обновления страницы.

С одной стороны, такие приложения работают быстро и меньше нагружают сервер. С другой стороны, они требуют большей загрузки на старте.

Объясним на квадратах

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

На первый взгляд, разницы между сайтом и приложением нет. Чтобы её заметить, нажмём на кнопку с другим цветом.

Здесь становится заметно, что сайт и одностраничное приложение ведут себя по-разному:

Страница сайта обновится целиком. Получается, мы говорим серверу: «Привет, сделай-ка квадраты зелёными». Он говорит: «Хорошо. Но ещё вот вам снова шапка сайта и подвал, а также кнопки и метаданные». И отдаёт целиком новый HTML-файл.

В одностраничном приложении обновится только цвет квадратов. Браузер отправляет серверу запрос, тот возвращает нужный параметр, квадраты красятся, всё остальное остаётся неизменным.

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

Зачем нужны SPA

Одностраничные приложения чаще всего используют в сервисах, где пользователь проводит на одной странице много времени или совершает с ней какие-то действия, например:

• просматривает почту и отмечает письма как спам;
• пишет посты и комментирует чужие;
• смотрит сериалы;
• выбирает квартиру;
• разглядывает картинки и собирает их в тематические доски.

Веб-версии Gmail, Facebook Netflix, AirBnB и Pinterest — одностраничные приложения. Технология настолько распространена, что её используют даже для сайтов компаний. Посмотрите, например, на страницу Digital Agency London.

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

Обратите внимание, например, как работает переключение между разделами в интерфейсе Фейсбука: если открыть главную, а потом перейти в «Группы», то содержание страницы изменится, но шапка останется на своём месте — перезагрузки страницы не происходит.

Преимущества SPA

SPA быстрые. Переход между модулями в приложении происходит быстрее: нужные ресурсы уже загружены, нужно просто подставить данные, которые запросил пользователь. Часто при этом сервер возвращает не тяжеловесный HTML, а лёгкий JSON или XML.

Ещё использование JSON упрощает разработку приложения для разных платформ. Если для веб-версии разработать обычный сайт, который принимает от сервера HTML, то для мобильного приложения придётся писать доработку, так как там HTML не подойдёт. JSON делает ответ сервера универсальным.

SPA гибкие. Раз пользователь всё время работает с одной страницей, проще делать интересные переходы и анимацию элементов. Можно работать с состоянием кнопок, вкладок и переключателей. Таким образом, интерфейс SPA может быть похож скорее на полноценное приложение, а не на простой сайт.

SPA работают везде. Всё, что нужно для SPA — поддержка JavaScript. Такие сайты хорошо работают и на десктопе, и в вебе, могут отчасти заменить полноценные мобильные приложения.

Недостатки SPA

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

Похожая проблема с некоторыми системами аналитики. Вот что про SPA говорит Google-аналитика: «Стандартный тег Google Аналитики хорошо подходит для обычных сайтов, поскольку его код выполняется при каждой загрузке новой страницы. Однако при работе с одностраничным приложением такой код будет выполнен лишь один раз». То есть чтобы корректно собирать аналитику, придётся самостоятельно настроить отслеживание нужных событий.

Зависимость от интернета. Для запуска веб-приложения нужна связь с сервером, так что в большинстве случаев без интернета не обойтись, как и с обычными сайтами. Этим SPA проигрывают обычным приложениям.

Хотя здесь есть исключение — если во время первой загрузки браузер получает все данные и больше ничего подгружать не нужно, то можно работать и без интернета.

SPA не для новичков. Написать такое приложение на простом HTML и CSS не получится, нужно знать JS. Часто для этого используют фреймворки — React, Angular, Vue, Ember и другие. В любом случая для проекта нужны более компетентные разработчики.

Этот материал мы подготовили по мотивам интервью с Александром Штыковым — руководителем фронтенд-команд в Деловой Среде. У Деловой Среды есть образовательная платформа, которая работает как SPA.

Что дальше?

Если хотите сделать своё веб-приложение, посмотрите инструкцию, как запустить приложение на React и репозиторий на GitHub.Чтобы разрабатывать SPA, не помещает хорошо разбираться в JS, его фреймворках и других веб-технологиях. На Практикуме есть курс «Как стать веб-разработчиком» и «Как стать мидл фронтенд-разработчиком».

Single Page Application

Single-page application (SPA) — это веб-приложение, которое загружает только одну HTML-страницу и динамически обновляет ее содержимое без необходимости полной перезагрузки страницы при взаимодействии с пользователем.

Вместо того чтобы каждый раз загружать новую страницу из сервера, SPA использует технику AJAX (асинхронные запросы к серверу) для получения данных и обновления только необходимой ее части. SPA обеспечивает гладкую и быструю пользовательскую интеракцию, а также позволяет создавать более богатые взаимодействия и обеспечивает выполнение сложных задач с помощью клиентского JavaScript-кода. В SPA часто используются JavaScript-фреймворки или библиотеки, такие как Angular, React или Vue.js, для упрощения разработки и управления состоянием приложения.

Освойте профессию «Frontend-разработчик»

Frontend-разработчик

Научитесь создавать удобные и эффектные сайты, сервисы и приложения, которые нужны всем. Сегодня профессия на пике актуальности: в России 9000+ вакансий, где требуется знание JavaScript.

Профессия / 9 месяцев
Frontend-разработчик

Создавайте интерфейсы сервисов, которыми пользуются все

Что такое SPA

SPA (сокращение от Single Page Application) представляет собой веб-приложение, размещенное на одной веб-странице. Вместе с загрузкой страницы оно также загружает весь необходимый код для своего функционирования. SPA-приложения появились вместе с эрой HTML5 и являются типичным примером приложений на этой технологии.

Если SPA имеет сложную структуру и обширный функционал (например, система электронного документооборота), то такое приложение может содержать сотни и тысячи файлов со скриптами. Однако при загрузке сайта не будут загружены все файлы сразу. Для решения этой проблемы используется AMD-API, которое позволяет загружать скрипты по требованию. Например, если на главной странице одностраничного портала требуется три скрипта, они будут загружены перед запуском программы. А если пользователь переходит на другую страницу, например «О программе», соответствующий модуль (скрипт + разметка) будет загружен только перед переходом на эту страницу.

Архитектура SPA

Архитектура Single Page Application (SPA) является одним из наиболее популярных подходов в веб-разработке, позволяющим создавать динамичные и отзывчивые приложения. Она включает следующие основные компоненты:

• HTML, CSS и JavaScript. Это языки программирования, которые используются для создания и разработки SPA. HTML отвечает за структуру и содержимое страницы, CSS — за внешний вид и стили, а JavaScript — за динамическое поведение и взаимодействие с пользователями.
• Клиентская сторона (Client-side). Одностраничное приложение работает на клиентской стороне, что означает, что весь код выполняется в браузере пользователя, что делает приложение быстрым и отзывчивым. Все запросы и обработка данных происходят на клиентской стороне без полной перезагрузки страницы.
• Роутинг и навигация. SPA использует роутинг для управления навигацией между различными разделами или состояниями приложения. Он отслеживает изменение URL и, в зависимости от него, загружает соответствующий компонент или страницу без перезагрузки.
• Компоненты. SPA разделяет приложение на множество небольших и независимых блоков, которые могут быть модульно разработаны и повторно использованы. Компоненты представляют определенный функционал или интерфейс, их можно вкладывать друг в друга для создания сложных приложений.
• Состояние (State). Состояние играет важную роль в SPA и хранится на клиентской стороне. Оно применяется для хранения временных данных, пользовательских вводов, состояний компонентов и другой информации, которую приложение может использовать в процессе выполнения.
• AJAX. Это асинхронный подход, который позволяет обмениваться данными между клиентом и сервером без перезагрузки всей страницы. SPA использует AJAX для получения информации с сервера, отправки форм, обновления частей страницы и других взаимодействий.
• Фреймворкии библиотеки. Существуют различные фреймворки и библиотеки, такие как React, Angular и Vue.js, которые помогают разработчикам строить SPA более эффективно и удобно. Они предлагают готовые инструменты, компоненты и паттерны для создания одностраничных приложений.

Станьте Frontend-разработчиком
и создавайте интерфейсы сервисов, которыми пользуются все

Преимущества SPA

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

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

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

Более простая разработка и сопровождение. Разработчики могут создавать одностраничное приложение с помощью одного языка программирования — JavaScript, вместо использования разных технологий для разработки клиентской и серверной частей. Это упрощает процесс разработки и поддержки кода, что приводит к более эффективному использованию ресурсов команды разработчиков.

Возможность работы в офлайн-режиме. SPA сохраняет последнюю загруженную страницу и данные на устройстве пользователя. Это позволяет пользователям продолжать использовать приложение и просматривать содержимое даже при отсутствии интернет-соединения.

Недостатки SPA

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

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

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

Проблемы с безопасностью. Поскольку весь код и данные приложения находятся на клиентской стороне, это делает SPA более подверженным атакам и возможным утечкам данных. Защита приложения от уязвимостей и злоумышленников требует дополнительных мер безопасности.

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

Где применяется SPA

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

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

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

Мультимедийные платформы. Технология одностраничных приложений применяется при разработке видеохостингов, музыкальных сервисов и стриминговых платформ. Это позволяет пользователям плавно переключаться между видео- или аудиоконтентом без прерываний воспроизведения.

Приложения для мобильных устройств. SPA используются для разработки мобильных приложений с помощью фреймворков, таких как React Native или Ionic. Они позволяют создать кросс-платформенные приложения, обеспечивая пользователю более быструю и гладкую работу.

Инструменты для разработки SPA

React. Этот JavaScript-фреймворк стал одним из самых популярных инструментов для SPA. С его помощью разработчики могут создавать компоненты, которые легко масштабируются, переиспользуются и обновляются динамически без необходимости перезагрузки страницы. Большое сообщество разработчиков и широкие возможности делают React незаменимым инструментом для создания мощных SPA.

Angular. Это еще один популярный фреймворк, который предоставляет разработчикам набор инструментов для создания динамических и сложных SPA. Angular обладает мощной системой компонентов, удобными инструментами для маршрутизации и обработки данных. Он также предлагает инструменты для тестирования и отладки приложений.

Vue.js. Этот простой и гибкий JavaScript-фреймворк является отличным выбором для создания SPA. Vue.js предлагает простой в использовании API для разработки компонентов, управления состоянием и маршрутизации. Он также обладает прекрасным балансом между производительностью и функциональностью.

Ember.js. Ember.js предоставляет разработчикам все необходимые инструменты для создания амбициозных и сложных SPA. Он имеет мощную систему компонентов, удобные инструменты для работы с данными и маршрутизацию. Ember.js также поддерживает автоматическое связывание данных (data-binding) и имеет обширное сообщество разработчиков.

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

Технология Single Page Application сегодня является одной из наиболее востребованных в разработке. Она применяется во многих областях, где требуются быстрая и интерактивная работа с пользовательским интерфейсом, обновление данных в реальном времени и отсутствие задержек при загрузке контента.

Статьи по теме:

Single Page Application (SPA) — Введение в тестирование веб-приложений

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

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

В этом уроке мы разберем, что такое SPA и какие особенности есть в тестировании одностраничных сайтов.

Что такое SPA

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

Такие сайты похожи на мобильные приложения, в которых все действия выполняются в рамках одной страницы.

В SPA-приложении все данные загружаются один раз, когда открывается приложение. Затем пользователь может свободно перемещаться между различными разделами и не перезагружать страницу. Это делает приложение более быстрым и удобным для использования.

SPA-приложения могут быть созданы на различных технологиях, например: HTML, CSS и JavaScript.

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

Другой пример SPA — почтовые сервисы, например, Gmail:

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

Как работает SPA

Особенность SPA — использование JavaScript для формирования страницы у клиента. От сервера клиенту один раз приходит полный макет сайта, а дальше данные обновляются при запросах. Это значит, что большая часть логики и интерфейса находится на стороне пользователя, а сервер предоставляет только необходимые данные.

На примере интерфейса Gmail сервер изначально послал весь HTML, который нужен для формирования страницы:

• Шапка
• Боковая панель
• Центральная часть

Эти данные отобразились в браузере и больше не меняются. Внутри них могут меняться данные в зависимости от запросов, например:

• При переходе в письмо меняется центральная часть и вместо списка писем показывается выбранное письмо
• В этот же момент обновляется боковая панель. Если письмо ранее было не прочитано, то обновляется количество непрочитанных писем
• При создании новой категории для писем обновляется боковая панель

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

Тестирование SPA не сильно отличается от тестирования любого другого сайта. Оно строится на принципах, которые мы изучали в прошлых уроках. Но здесь есть свои особенности из-за принципа работы.

Как тестировать Single Page Application

В этой части мы не будем рассматривать все способы тестирования, которые разбирали в прошлых уроках. Как и для всех сайтов при тестировании SPA проверяются:

• Адаптивность
• Кроссбраузерность
• Мультиязычность, при ее наличии
• Загрузка при различных скоростях соединения

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

Посмотрим это на примере почты:

Тестирование первоначальной загрузки

На этом этапе страница тестируется так же, как и любая другая страница. Проверяется адаптивность, загрузка всех блоков и отсутствие ошибок в загрузке:

При тестировании разделите макет на логические компоненты и проверьте корректность их загрузки. Под корректностью загрузки подразумевается загрузка стилей и первоначальных данных.

В почтовом интерфейсе основные компоненты:

• Шапка страницы с меню и поисковой строкой
• Боковая панель с метками писем
• Центральная часть со списком писем

Тестирование функционала

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

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

Тестирование ошибочных запросов

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

В этом примере указана несуществующая метка письма, которая ищется по запросу label:hexlet . Когда мы сделали поиск по такому запросу, был отправлен запрос на сервер, но без результата. Вместо писем было выведено сообщение «Нет цепочек писем с таким ярлыком.»

Еще один пример обработки ошибок — так выглядит страница сервиса YouTube при отсутствии подключения к интернету:

Попробуйте воспроизвести эту ошибку с помощью DevTools. В этом примере раскрывается идея обновлений только некоторых частей приложения. Даже при отсутствии интернета остаются подгруженными шапка и левая панель страницы, а меняется центральная часть с видео, где выводится ошибка «Нет подключения к Интернету».

На этих примерах мы разобрали особенности тестирования SPA-приложений. Хоть тестирование таких проектов и похоже на тестирование обычных сайтов, у него есть несколько особенностей, которые мы разобрали в этом уроке.

Выводы

В этом уроке мы узнали, что помимо стандартных сайтов существуют одностраничные, которые похожи на мобильные приложения. Такие сайты называются SPA от английского Single Page Application.

Отличительная особенность таких сайтов — переложение логики работы сайта на сторону клиента. Для этого используется язык JavaScript, а на сервер посылаются только запросы на получение новых данных.

При тестировании таких приложений важно, чтобы обновления при запросах происходили корректно. Для этого тестируют:

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

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты

Об обучении на Хекслете

• Статья «Как учиться и справляться с негативными мыслями»
• Статья «Ловушки обучения»
• Статья «Сложные простые задачи по программированию»
• Вебинар « Как самостоятельно учиться »

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно

• 130 курсов, 2000+ часов теории
• 1000 практических заданий в браузере
• 360 000 студентов

Наши выпускники работают в компаниях:

Что такое SPA, и нужно ли оно вашему проекту?

Одностраничные сайты, или SPA, завоевывают всё больше пользователей. Расширенный функционал, удобство пользования и т.д. — у такой технологии много преимуществ. В статье ниже рассмотрим, что это такое, как работают SPA-приложения и нужны ли они вашему проекту.

Что такое SPA?

SPA — это одностраничный сайт, который почти не уступает мобильным приложениям в интерактивности и позволяет пользователю совершать любые действия без дополнительной перезагрузки страницы. Ранее подобное было возможно, но такое было довольно сложно реализовать, однако спектр возможностей с тех пор значительно расширился. SPA позволил разрабатывать сайты с подобной технологией гораздо проще. Также SPA еще называют одностраничным приложением, что расшифровывается в его названии: Single-Page Application, или «приложение одной страницы». Такая технология позволяет пользователю без проблем совершать действия внутри сайта, как в приложении. При этом ничего не нужно устанавливать на смартфон или ПК и это не занимает отдельное место в памяти устройства. В отличие, от SPA, многостраничное веб-приложение работает, загружая каждую страницу по отдельности.

Как работает SPA?

В SPA задействована всего 1 страница, которая взаимодействует с пользователем, переписывая страницу автоматически, в зависимости от совершаемых действий. Все необходимые ресурсы сайта подгружаются при первой загрузке сайта. При этом отпадает необходимость загружать каждую новую страницу целиком с сервера. Это становится возможным благодаря тому, что в основе SPA используется компонентный подход, где каждый компонент — это часть будущей страницы. Исключение составляют крупные сайты. Они загружают компоненты по мере необходимости, иначе первоначальная загрузка была бы очень долгой.

Нужна разработка SPA?

Разработаем функциональное, интерактивное приложение. Любой сложности. Подробнее

Плюсы и минусы SPA перед многостраничным сайтом

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

К недостаткам SPA-приложений относятся

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

Как создать SPA?

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

Для разработки SPA-приложения требуется знание JS, SPA-фреймворка и сопутствующих библиотек, опыт в коммерческой веб-разработке и масса времени для работы. А также дизайн и SEO, если необходимо продвижение.

Примеры single-page application

Приведем некоторые примеры веб-приложений с применением данной технологии:

2. Сервис доставки еды с применением технологии SPA, в разработке которого принимала участие наша команда:

Что выбрать: одностраничные веб-приложения или многостраничный сайт?

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

Лендинги редко делают на SPA, так как это не оправдано: SPA больше весят и первая загрузка длится дольше. А если нужна анимация то делать её нужно вручную, в отличие, например, от готовых конструкторов вроде Tilda.

Исторически так сложилось, что все крупные форумы — многостраничные приложения. Делать форум на SPA тоже не оправдано: легче взять готовый многостраничный движок для форума, и поменять в нем дизайн под свой вкус.

С интернет-магазинами и сервисами всё сложнее, под них не всегда найдется готовое решение. Поэтому их пишут с нуля на современной технологии SPA. Ведь концепции, и возможности SPA намного лучше, чем на многостраничном сайте.

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

Краткое резюме статьи:

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

Нужна разработка SPA?

Разработаем функциональное, интерактивное приложение. Любой сложности.