SPA (Single-Page Application) — один из трендов в сфере разработки веб-проектов. В статье рассмотрим некоторые новые тенденции, связанные с одностраничными приложениями, дадим краткий обзор характеристик SPA-приложений и рекомендации, на чем сосредоточить внимание в ближайшее время.
-
О технологии SPA
-
Преимущества SPA
-
Недостатки SPA
-
Реализация одностраничных приложений
-
SPA-фреймворки
-
Чего ожидать от SPA в будущем
-
Использование SPA
-
Наши проекты SPA
О технологии SPA
SPA — одностраничное веб-приложение, которое загружается на одну HTML-страницу и не требует дополнительно перезапускать страницу для обновления данных. Этот способ рендеринга страницы на стороне клиента потребляет меньше ресурсов, обеспечивает быстрые переходы и экономию трафика.
В отличие от SSR и SSG, SPA создает интерактивные веб-приложения. Facebook, Gmail, Google Maps, GitHub и Twitter относятся к этому типу веб-приложений.
Кроме того, SPA использует API для связи с сервером, поэтому, если требуется мобильное приложение, дополнительно разрабатывать API не нужно — мобильное приложение может использовать тот же API, что и веб-приложение.
Преимущества SPA
Опыт для разработчиков
Разработчики не тратят время на создание сложного макета, его перезапись и частое обновление страницы.
Вместо этого создают конкретные компоненты: back-end работают над API, а front-end разработчики над разделами пользовательского интерфейса (UI).
Кроссплатформенность SPA
SPA адаптируются ко многим платформам, мобильным устройствам и браузерам. Для этого нужна поддержка JavaScript.
Преобразование SPA в Progressive Web App (PWA)
Если хотите использовать локальный кэш и перевести работу приложения в автономный режим, рассмотрите возможность использования PWA как обязательного.
Минимум обращений к серверу
В SPA динамические изменения в разделах HTML выполняются в браузере, поэтому с точки зрения производительности эта «независимость» от сервера увеличивает скорость работы одностраничного приложения.
Недостатки SPA
Возможное отсутствие SEO-оптимизации
В SPA изменение содержания страницы происходит в браузере на стороне клиента, а для SEO важна устойчивость в виде рендеринга с сервера.
Также в зависимости от некоторых подходов к фреймворку контент может распознаваться нелегко, поэтому необходимо заранее подумать о стратегии SEO для приложения или веб-сайта, который нужно создать. Имейте в виду, что поисковые роботы могут легко проиндексировать HTML, но им сложнее понять JavaScript.
Совместное использование
В зависимости от некоторых факторов во время публикации любых полезных ссылок из вашего SPA предварительный просмотр, отображаемый Facebook, Twitter или LinkedIn (запрещены на территории РФ), может быть абсолютно одинаковым для любого URL-адреса. Это может создавать неудобство для некоторых людей и потребовать обходного пути.
Уязвимость к XSS-атакам
При несоблюдении мер защиты, злонамеренный разработчик с помощью XSS может внедрить клиентские скрипты в приложение и получить несанкционированный доступ к конфиденциальным данным.
Реализация одностраничных приложений
Для внедрения SPA используются такие инструменты и платформы, которые можно применять в зависимости от требований:
-
к приложению
-
документации
-
сообществу
-
опыту команды разработчиков или кривых обучения
-
повторно используемым компонентам
-
времени разработки
-
бюджету
По сути, принципы одинаковы для всех платформ: продумайте структуру кода для отображения одной страницы, которая будет взаимодействовать с пользователем с высокой производительностью.
Реализовать SPA можно тремя способами
-
Рендеринг на стороне сервера (SSR): в SSR сервер создает приложение за короткое время.
-
Рендеринг на стороне клиента (CSR): в CSR браузер — это то, что руководит всем и получает основные данные с сервера, а приложение генерирует представления и вводит их в DOM.
-
Генераторы статических сайтов (SSG). С помощью SSG сервер возвращает грамотно организованный HTML-код, содержащий большую информацию страницы. Этот способ является самым быстрым, но если нужно внести изменение, процесс создания новой страницы займет некоторое время.
Все три из перечисленных способов создают приложения в короткий срок, поэтому выбор архитектуры зависит от ваших требований.
SPA-фреймворки
Вы, вероятно, слышали о некоторых платформах SPA, таких как React, Angular.js и Vue.js. Но есть и другие, такие как EmberJ и BackBoneJ.
Вместо того, чтобы ранжировать различные фреймворки SPA (на данный момент по этому поводу достаточно информации), мы рассмотрим тенденции, популярность и звездные рейтинги в репозиториях, чтобы дать полезные рекомендации по каждому из них.
Если обратиться к статистике за последние два года, кажется, что React.js лидирует по числу загрузок:
В Google Trends видим, что по запросам за последние два года также лидирует React.js, а популярность Vue в несколько раз меньше, чем спрос на React и Angular:
При просмотре аналитики Stackoverflow (опросе разработчиков) легко заметить, что технологии React, Angular и Vue занимают первые места в рейтинге наиболее часто используемых веб-фреймворков. Это означает, что многие разработчики работают с ними и изучают их.
Глядя глубже в статистику Stackoverflow, видим, что о React, Angular и Vue больше положительных отзывов, чем негативных:
Для последнего сравнения проверим звездный рейтинг Github для каждого фреймворка. Из этого результата делаем вывод, что Vue действительно быстро распространяется:
Чего ожидать от SPA в будущем
Продолжают появляться новые варианты SPA.
Mint — представляет собой не целую библиотеку, как другие фреймворки, а скорее новый язык программирования, разработанный специально для создания одностраничных приложений. Обещание Mint — отсутствие ошибок во время разработки. Можно быть уверенными, что при компиляции не будет ошибок из-за неопределенных значений благодаря исчерпывающей проверке типов.
Некоторые более интересные особенности Mint — изменения в использовании оператора равенства, неизменяемость переменных, которая допускает меньше ошибок, концепция нового функционального программирования, использование или не использование всех параметров в вызове функции и другие элементы, такие как стиль и неявный импорт.
Еще один интересный вариант, популярность которого растет, — Rust. Это не новый язык программирования, но, похоже, он является конкурентоспособным вариантом для использования или замены части экосистемы JavaScript. То есть на Rust можно разрабатывать SPA. Если у вас есть время, попробуйте разобраться в этом.
Ниже представлен список инструментов с похожим использованием SPA, популярность которых также растет благодаря их заманчивым характеристикам и быстрому внедрению:
Использование SPA
SPA существуют, чтобы решить проблемы, которые возникают при использовании старых методов, связанных с неэффективной и повторяющейся разработкой.
Каждый веб-разработчик знаком с проблемами навигации по страницам внутри веб-приложения, высокой пропускной способностью, временем, необходимым для перестроения целых страниц, нежелательным кэшированием, использованием кнопок «Назад» и т. д.
Большинство разработчиков любят SPA, а более широкое сообщество программистов предоставляет всевозможную поддержку и рекомендации по их разработке с учебными пособиями и документацией. Ко всему прочему многочисленные преимущества одностраничных приложений делают их достойными внимания.
Что касается недостатков SPA, таких как проблемы с SEO, следует применять проверенные методы, такие как постоянное использование и обновление правильно отформатированного файла sitemap, а также изоморфное использование Javascript, такого как Next.js, Gatsby (на основе React) и Nuxt.js (на основе Vue). Эти мощные фреймворки позволяют одновременно работать с CSR и SSR.
SPA используются во многих отраслях (даже Netflix — одностраничное приложение, несмотря на количество контента). Успех SPA заключается в том, чтобы быть осторожным при планировании приложения и попытаться сформировать команду с развитыми навыками разработки.
Наши проекты на SPA
На проектах, которые мы разрабатываем, где требуется сложная логика на фронтенде для пользователя или в административной части, мы пользуемся технологией SPA на базе Vue.js. Последние проекты:
Обучающая платформа https://mait-nauka.ru/
Личный кабинет застройщика https://stroi.cherepovetscity.ru/
Интернет-магазин доставки еды https://kingsushi.pro/
Надеемся, это был полезный обзор одностраничных приложений.
Статья написана на основе материала: https://gorillalogic.com/blog/single-page-applications-what-to-expect-in-2022/
вверх