Одностраничные приложения или многостраничные приложения: за и против одностраничных приложений

  1. Google, Facebook и Trello используют одностраничные приложения
  2. Сокращение времени отклика и затрат на оборудование с помощью SPA
  3. Скорость и отзывчивость
  4. адаптируемость
  5. Гибкий интерфейс
  6. Автономная поддержка и кэширование
  7. Возможность разделения данных и пользовательского интерфейса
  8. Отладка с помощью Chrome
  9. Недостатки SPA - но не те, которые вы не можете победить
  10. Плохая проходимость
  11. Утечки памяти
  12. Проблемы безопасности
  13. Недостаток масштабируемости
  14. Одна ссылка для обмена
  15. Кнопки браузера назад и вперед не работают
  16. Завершение вещей

Одностраничные приложения, или SPA, вызвали много шума в Интернете. Разработчики столкнулись со словами, сравнивая SPA с традиционным многостраничным подходом. Этот спор превратился в борьбу, похожую на iOS против Android.

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

Google, Facebook и Trello используют одностраничные приложения

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

Где вы можете увидеть одностраничные веб-приложения? Вы имеете дело с ними каждый день, проверяя свою электронную почту в Gmail, прокручивая свою новостную ленту в Facebook или добавляя новое задание в Trello.

Вы имеете дело с ними каждый день, проверяя свою электронную почту в Gmail, прокручивая свою новостную ленту в Facebook или добавляя новое задание в Trello

[Источник изображения: блог Trello]

Вы помните последний раз, когда вы использовали Google Doc? Да, Google Docs тоже SPA. Когда вы нажимаете на любой элемент Google Doc, набираете что-либо или выполняете какие-либо другие действия, основной интерфейс остается неизменным. Ничего, кроме содержимого, которое вы хотите изменить, не изменяется. Это основная идея одностраничного приложения.

[Источник изображения: Интернет-магазин Chrome]

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

Этот веб-сайт рекламирует приложение CashNotify (приложение на панели задач macOS для платежей Stripe) и позволяет пользователям купить приложение:

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

Такие приложения могут также удовлетворить потребности компаний, работающих в одном продукте и одном сервисе, таких как   Seedlip   , компания, которая продает первые в мире безалкогольные напитки

Утилиты, а именно сайты для сокращения URL, также обычно являются одностраничными приложениями. Google URL Shortener хороший пример

Google URL Shortener   хороший пример

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

Сокращение времени отклика и затрат на оборудование с помощью SPA

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

Скорость и отзывчивость

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

SPA также сокращают время отклика благодаря перемещению обработки данных с сервера в браузер.

адаптируемость

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

Гибкий интерфейс

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

Автономная поддержка и кэширование

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

Возможность разделения данных и пользовательского интерфейса

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

Отладка с помощью Chrome

Конечно, вы можете отлаживать многостраничные приложения с помощью Chrome, но с одностраничным подходом это намного проще. На это есть несколько причин. Во-первых, вы можете увидеть весь код сразу, так как он расположен на одной странице. Во-вторых, эти приложения разрабатываются на платформах, которые имеют свои собственные инструменты разработчика Chrome, такие как Реагировать на инструменты разработчика а также AngularJS Batarang ,

[Источник изображения: Интернет-магазин Chrome]

Недостатки SPA - но не те, которые вы не можете победить

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

Плохая проходимость

Почему СПА не занимаются SEO? Определенно, SPA имеет гораздо меньшее семантическое ядро, чем MPA. Независимо от того, как сильно вы стараетесь, вы можете разместить только ограниченное количество ключевых слов на одной странице. По этой причине вы должны тщательно продумать, какой контент лучше всего соответствует запросам ваших пользователей. Кроме того, одностраничные приложения дают вам возможность использовать богатые внутренние якорные текстовые ссылки, теги и мета-описания.

Тем не менее, вы можете справиться с этими проблемами с SEO. Поисковые системы дают более высокие оценки доменам, посвященным одной теме, поэтому вы можете сделать свой одностраничный веб-сайт на 100% тематическим. Это поможет вам преодолеть проблемы с SEO и удержать первое место.

Утечки памяти

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

Иногда события могут быть связаны неправильно. Как это происходит? Элемент HTML может быть связан с событием. Но если вы измените содержимое HTML, обработчик событий останется в памяти, хотя вы больше не сможете его выполнить. Браузер не удаляет этот обработчик событий, поэтому вам нужно сделать это самостоятельно с помощью RequireJS загрузка модуля или закрытие всех событий должным образом.

Проблемы безопасности

Некоторые люди подчеркивают небезопасность SPA из-за межсайтового скриптинга (XSS). С помощью XSS злоумышленники могут использовать уязвимость веб-страницы и вставить свой собственный код на стороне клиента. Это позволяет злоумышленникам доставлять вредоносный скрипт в браузер жертвы.

Но на самом деле вы можете справиться и с этой проблемой.

С MPAs вам нужно защищать отдельные страницы. В случае одностраничных приложений вам просто нужно защитить конечные точки данных. Если вы не хотите, чтобы ваш клиент имел доступ ко всему вашему коду, вы должны разделить загружаемый JavaScript на несколько отдельных частей.

Недостаток масштабируемости

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

Одна ссылка для обмена

Используя одностраничный подход, у вас есть только один URL (т.е. есть только одна ссылка, чтобы поделиться в социальных сетях). Это делает невозможным обмен определенной частью контента.

Кнопки браузера назад и вперед не работают

Кнопки браузера «назад» и «вперед» не работают с одностраничными приложениями. Каждый раз, когда посетители нажимают кнопку «Назад», браузер фактически переносит их на предыдущую страницу, загруженную браузером, но не в предыдущее состояние в вашем приложении. Вы можете решить эту проблему с помощью HTML5 History API. Хорошей новостью является то, что многие современные SPA-платформы оснащены этим API.

Завершение вещей

При выборе между SPA и MPA, учитывайте следующее:

  • Что будет делать ваш сайт

  • Сколько информации вы собираетесь публиковать для своих пользователей и какой тип информации это будет (включает ли это интерактивный контент?)

  • Как будет выглядеть ваш сайт и какими будут основные элементы

  • Какие преимущества ваш контент будет предлагать пользователям

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

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

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

Где вы можете увидеть одностраничные веб-приложения?
Но как?
Как это происходит?
Включает ли это интерактивный контент?