Single-Page Application
Single-Page Application — это серебряная пуля от фронтенд-макак, призванная превратить твой уютненький сайтик в неповоротливого монстра, который грузится один раз, зато навсегда. Идея, как всегда, была светлой и гениальной: заставить браузер анонимуса притвориться десктопным приложением из светлого прошлого, чтобы хомячок, кликая по ссылочкам, не страдал от мучительной перезагрузки страницы целиком, а получал свою порцию нового контента почти мгновенно. На бумаге это выглядело как профит, а на деле породило целую индустрию по производству тормозных, жрущих память комбайнов и бесконечные срачи на тему того, какой фреймворк для этого поделия единственно верный.
Как эта магия (нет) работает[править]
На первый взгляд, всё выглядит как чудо чудное и диво дивное. Пользователь открывает сайт, и его браузер, аки прилежный раб, выкачивает один раз весь необходимый HTML, CSS и, что самое главное, овердофига JavaScript кода. Этот самый код, словно хитрый паразит, поселяется в браузере и берёт на себя всю дальнейшую работу. Когда юзер, преисполненный надежд, тыкает в какую-нибудь кнопку или ссылку, вместо классического запроса новой страницы к серверу и её мучительной отрисовки с нуля, хитрый скрипт лишь подтягивает с сервера недостающие данные, обычно в модном формате JSON, и с помощью своих колдунских манипуляций встраивает их в уже существующую страницу.
Этот процесс, именуемый в узких кругах клиентским рендерингом, позволяет добиться ощущения плавности и бесшовности, почти как в настоящем приложении. Страница не моргает, не исчезает, а просто меняет своё содержимое. Адепты этой религии утверждают, что это улучшает пользовательский опыт, сокращает нагрузку на сервер, ведь тот теперь не рендерит тонны HTML, а лишь отдаёт сырые данные, и вообще делает мир лучше. На деле же вся нагрузка просто переезжает с могучих серверов на дохленький процессор юзера, заставляя его ноутбук шуметь кулерами, а телефон молить о пощаде, особенно если устройство не самое новое.
Светлая сторона силы[править]
Надо признать, что при правильном приготовлении и в нужных руках этот ваш СПА может быть даже полезен. Главный козырь, которым машут евангелисты, это, конечно же, скорость отклика после первоначальной загрузки. Когда всё уже в кэше, переходы между разделами действительно становятся почти мгновенными, создавая иллюзию работы с нативной программой и удерживая внимание пользователя. Для всяких сложных интерфейсов вроде почтовых клиентов типа Gmail, музыкальных сервисов а-ля Яндекс.Музыка или навороченных админок, где юзер проводит часы, не закрывая вкладку, такой подход более чем оправдан.
К тому же, разработчикам это тоже оказалось на руку. Можно чётко разделить фронтенд и бэкенд, создав так называемое API, через которое общаются две команды кодеров. Бэкендеры спокойно пилят свою логику и отдают данные, а фронтендеры лепят из этих данных цветастые интерфейсы, не мешая друг другу. Такой подход упрощает и разработку мобильных приложений, ведь они могут использовать то же самое API, что и веб-версия. В итоге все при деле, пилят свои модули, увеличивают ЧСВ и получают зарплату, а что там у конечного пользователя тормозит, дело десятое.
Тёмная сторона[править]
А теперь о грустном. За всё в этой жизни надо платить, и за магию SPA платит в первую очередь сам пользователь. Первая загрузка такого приложения может стать настоящим испытанием для его терпения. Пока браузер скачает и обработает мегабайты, а то и десятки мегабайт JavaScript, анонимус успеет сходить за чаем, вернуться и обнаружить перед собой всё тот же белый экран. Это явление даже получило своё имя Time to Interactive, то есть время, когда страница вроде загрузилась, но тыкать в неё ещё нельзя, потому что скрипты не закончили свои тёмные ритуалы.
Но главная беда, о которую сломали копья тысячи сеошников, это, конечно же, SEO. Поисковые роботы, эти нежные и туповатые создания, исторически привыкли индексировать статичный HTML. Когда же они приходят на сайт, сделанный по технологии SPA, они видят лишь пустую страницу с подключенным скриптом. И хотя Гугл уже много лет клянётся, что научился выполнять JavaScript и видеть контент, на практике это работает через раз и с оговорками, что приводит к неполной индексации. Чтобы заставить поисковик полюбить твоё SPA-детище, приходится извращаться с серверным рендерингом, он же SSR, или пререндерингом, что по сути является костылём, нивелирующим изначальную идею переноса всей логики на клиент. Получается замкнутый круг: мы ушли от рендеринга на сервере, чтобы потом к нему же и вернуться, но уже с кучей новых сложностей.
Инструментарий современного джедая[править]
Естественно, лепить такое чудо руками на чистом JavaScript станет только самый отбитый мазохист. Поэтому почти сразу появилось целое созвездие фреймворков, призванных облегчить страдания разработчиков и стандартизировать процесс. Вокруг этих инструментов разворачиваются самые настоящие религиозные войны, по сравнению с которыми меркнут любые политсрачи.
Первым на трон взошёл Angular от корпорации добра Google, этакий монструозный комбайн, который диктовал свои правила игры и остаётся популярен в корпоративной среде для крупных проектов. Затем на сцену вырвался хипстерский React, который на самом деле библиотека, а не фреймворк, но благодаря своей гибкости, огромной экосистеме и поддержке от Facebook быстро завоевал сердца хомячков и лидирующие позиции на рынке труда. Позже из ниоткуда появился Vue.js, созданный одним китайским гением в одиночку, который попытался взять лучшее от обоих миров, простоту и низкий порог вхождения, что сделало его любимцем новичков и стартапов. Спор о том, что из этого лучше, является вечным двигателем для генерации бессмысленных статей на Хабре и срачей в Твиттере, и конца ему не видно.
В итоге, Single-Page Application, как и любая технология, не является ни абсолютным злом, ни панацеей. Это просто инструмент, который в руках мастера может сотворить чудо, а в руках вчерашнего выпускника курсов Войти в АйТи за 21 день порождает очередного тормозного уродца, проклинаемого пользователями и поисковыми системами. Анонимус же продолжает страдать, наблюдая, как простейший бложик на пять страниц грузится дольше, чем вся Windows XP в своё время. Таков путь.