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

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

Вы используете этот тип приложений каждый день. Это, например:

  • Gmail
  • Карты Гугл
  • Facebook
  • Твиттер
  • GitHub
  • Гугл драйв

Плюсы

Цифровой пользовательский опыт

высокая скорость и общий поток приложения при взаимодействии с пользователем, например, нативные настольные или мобильные приложения, так как большинство ресурсов (HTML + CSS + скрипты) загружаются только один раз в течение срока службы приложения

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

Представление

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

Ресурсы

Помимо меньшей пропускной способности, это также означает меньшую нагрузку на браузер и сервер.

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

Разработка

SPA легко отлаживать с помощью Chrome, так как вы можете отслеживать сетевые операции, исследовать элементы страницы и связанные с ними данные.

Масштабируемость

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

Возможность создавать мобильные приложения {почти нативные, гибридные} с использованием библиотек JavaScript

Разделение озабоченности

Backend-разработчики могут просто сосредоточиться на API, а фронтенд-разработчики могут сосредоточиться на создании лучшего пользовательского интерфейса,

Минусы

Поисковая оптимизация

Сложно и непросто сделать SEO оптимизацию SPA. Его содержимое загружается с помощью AJAX (асинхронный JavaScript и XML) ·

Время загрузки

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

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

Безопасность

SPA менее безопасен. Благодаря межсайтовому скриптингу (XSS) злоумышленники могут внедрять клиентские скрипты в веб-приложение.

объем памяти

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

Утечка памяти в JavaScript может даже привести к замедлению работы мощной системы

Аналитический

Инструменты аналитики, такие как Google Analytics, в значительной степени полагаются на загрузку целых новых страниц в браузере, инициированную загрузкой новой страницы. СПА так не работают.

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

Можно добавить события загрузки страницы в SPA с помощью API истории HTML5; это поможет интегрировать аналитику.

SPA против MPA

MPA {Многостраничное приложение}

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

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

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

Что выбрать ..?

На это нет правильного ответа. Это зависит от вашего приложения

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

Гибридный

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

Реализация

Веб-сокеты и Ajax

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

Это может легко реализовать библиотеку AJAX поверх WebSockets и по-прежнему использовать то же соединение WebSocket для двунаправленной передачи данных в реальном времени.

Отправленные сервером события

События, отправленные сервером (SSE) - это метод, с помощью которого серверы могут инициировать передачу данных клиентам браузера. После того, как начальное соединение установлено, поток событий остается открытым, пока не будет закрыт клиентом. SSE отправляются по традиционному протоколу HTTP

JS фреймворки

Держу пари, что вы слышали или читали что-то вроде сравнения «React vs Vue vs Angular». Это настолько распространено, что вы не можете обойтись без этого

Есть много других фреймворков, но это самые распространенные

  • Угловой

Angular - популярный веб-фреймворк от Google. Знайте, что здесь я говорю о Angular v2 и выше, а не о AngularJS.

он построен и основан на Typescript. Другими словами, вы должны освоить этот язык, чтобы использовать Angular v2 и выше. Для некоторых это может быть трудным решением, но оно того стоит. Использование Typescript обеспечивает правильность типов и множество современных функций ES. Angular использует хорошо известную нам концепцию компонентов, виртуального DOM и шаблонов.

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

  • Реагировать

React - еще один популярный веб-фреймворк, на этот раз от Facebook. используя так называемый JSX. По сути, это комбинация стандартного синтаксиса JS с HTML в одном файле.

React основан на концепции виртуального DOM. С помощью этой техники он позволяет создавать компоненты - строительные блоки - для создания пользовательского интерфейса. Эти компоненты могут иметь свои собственные состояния.

  • VueJS

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

Вместо JSX Vue размещает свои шаблоны. Они имеют простой в использовании и читаемый синтаксис для создания вашего пользовательского интерфейса.

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

Навигация

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

Эта часть приложения называется маршрутизатором. Некоторые фреймворки уже позаботятся о них за вас (например, Angular), другим требуются библиотеки, которые будут выполнять эту работу (например, React Router).