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-приложения (Single-Page Applications) стали популярными в последние годы, так как они имеют удобный пользовательский интерфейс, работают быстро и без перебоев.
В этой статье расскажем, что такое SPA-приложения, как они работают и почему их использование выгодно для бизнеса и пользователей.
Что такое SPA-приложение?
SPA (Single-Page Application) — это веб-приложение, которое работает на одной странице без обновления ее браузером. Весь контент и данные приложения заранее загружаются на страницу при ее открытии. А во время работы загружаются только те части страницы, которые пользователь просит отобразить. Приложения SPA динамически создают и обновляют контент на странице, используя JavaScript-фреймворки и библиотеки, такие как Angular, React, Vue и другие.
SPA-приложения — это, как правило, сервисы, где пользователь находится на одной странице и в ее рамках совершает какие-то действия, например, работает с электронной почтой, просматривает, комментирует и пишет посты, смотрит видео-контент или изображения. SPA-приложениями мы пользуемся ежедневно, наиболее известные из них — это Gmail, Google Docs, Netflix, Airbnb, Trello.
Преимущества одностраничных приложений
В последнее время крупные компании все чаще и чаще используют SPA для своих продуктов и вот почему:
SPA-приложения загружаются только один раз на странице, а затем вся интерактивная работа с приложением происходит на клиентской стороне. Это даёт возможность ускорить загрузку приложения.
SPA-приложения работают только с одной страницей, не перезагружая ее приложением. Это позволяет снизить нагрузку на сервер и обработать меньше запросов.
SPA-приложения могут предоставлять более удобный интерфейс для пользователей. Они, как правило, более интуитивны и более быстрые, потому что пользователь может получать доступ к нужной информации из любой части интерфейса без перехода на другие страницы.
SPA-приложения имеют простую архитектуру, состоящую из клиентской и серверной частей. Это позволяет разработчикам быстрее разрабатывать и тестировать приложения. Наличие JS-библиотек и фреймворков, таких как Angular, React и Vue.js, предоставляют поддержку SPA-приложениям и дают возможность ускорить начальную разработку приложения.
SPA-приложения предоставляют более высокую степень безопасности, потому что у них нет необходимости загружать дополнительные веб-страницы, что может открыть дверь для различных видов хакерских атак. Кроме того, SPA-приложения проще обновлять и поддерживать, поскольку изменения ведутся только на клиентской стороне, а серверная сторона остается неизменной.
SPA-приложения могут работать на разных устройствах и платформах, что делает их более гибкими и удобными для использования. SPA-фреймворки, такие как Angular и React, имеют множество встроенных компонентов и библиотек, которые могут работать на разных устройствах без необходимости переписывания кода. А если в будущем вы решите развить SPA-приложение до полноценного мобильного приложения, то часть кода можно будет использовать повторно, а не писать всё с нуля.
Однако SPA-приложения также имеют свои недостатки. Например, они хуже индексируются поисковыми системами, так как содержимое страницы обновляется динамически. А в некоторых случаях SPA-приложения могут быть менее безопасными, так как они используют JavaScript для загрузки данных и обновления содержимого страницы. Это может привести к возможности атаки XSS (межсайтовый скриптинг).
SPA-приложения отлично подойдут для стартапов при разработке MVP, для проектов, у которых SEO не является ключевой метрикой, а также для продуктов, которые сфокусированы в первую очередь на пользовательском опыте.
В целом, SPA-приложения являются удобным решением для продуктов, которые требуют высокой скорости работы и удобства использования. Однако, разработчики должны учитывать потенциальные недостатки и принимать меры для обеспечения безопасности и доступности приложения для всех пользователей.
Компания L-TECH предоставляет своим клиентам современный комплексный подход к обеспечению безопасности. Если вы планируете создание веб-приложения, мы разработаем надёжное и быстрое решение.
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, его фреймворках и других веб-технологиях. На Практикуме есть курс «Как стать веб-разработчиком» и «Как стать мидл фронтенд-разработчиком».
Что такое 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?
Разработаем функциональное, интерактивное приложение. Любой сложности.