Случайный хак Microsoft, породивший современный веб: эволюция идеи от SPA до современного JAM Stack

В 1999 году Microsoft добавила в Internet Explorer объект XMLHttpRequest как внутренний хак для Outlook Web Access.

Эта возможность фонового обмена данными без перезагрузки страниц позднее была скопирована другими браузерами и легла в основу технологии Ajax. Запуск Gmail в 2004 году и Google Maps в 2005-м доказали жизнеспособность подхода, а появление фреймворков вроде Backbone.js и React превратило одностраничные приложения в индустриальный стандарт. Сегодня веб-разработка возвращается к гибридным архитектурам, замыкая эволюционный круг.

В середине 1990-х веб состоял преимущественно из статичных HTML-документов. Если требовалась динамика — гостевая книга, каталог товаров, — в дело вступали CGI-скрипты на C или Perl. Схема была простой: браузер отправлял запрос, сервер запускал внешнюю программу, она генерировала ответ, и сервер возвращал браузеру новую страницу. Каждый запрос порождал отдельный процесс в операционной системе, что делало архитектуру крайне ресурсоёмкой.

Появление PHP, ASP и других серверных технологий не изменило фундаментальный принцип: многостраничная архитектура (Multi-Page Application) предполагала, что вся бизнес-логика, маршрутизация и рендеринг находятся на сервере. Браузер играл роль «тонкого клиента»: каждый клик или отправка формы вызывали полную перезагрузку страницы. Пользователь смотрел на белый экран, пока сервер обрабатывал запрос и собирал новый HTML. Плавные переходы, сохранение фокуса в формах или мгновенная обратная связь были невозможны.

Рождение XMLHttpRequest: вынужденный хак Microsoft

В конце 1990-х Microsoft активно развивала Internet Explorer. Для поддержки сложных интерактивных приложений в браузер была встроена виртуальная машина Java, позволявшая запускать Java-апплеты. Однако Sun Microsystems подала иск против Microsoft за нарушение стандартов языка, и параллельно шло антимонопольное разбирательство. Под давлением Microsoft решила полностью удалить поддержку Java из своих продуктов.

Это поставило под угрозу релиз Outlook Web Access — веб-версии почтового клиента Outlook, которая использовала Java-компоненты для обновления интерфейса без перезагрузки. Инженеры Microsoft оказались в тупике незадолго до выхода Internet Explorer 5 в 1999 году. Выходом стал небольшой внутренний механизм — объект XMLHttpRequest. Он позволял JavaScript выполнять фоновые HTTP-запросы к серверу, получать данные и обновлять фрагменты страницы без полной перезагрузки. Microsoft создала этот инструмент исключительно как хак для спасения почтового клиента, не подозревая, что закладывает фундамент будущего веба.

Вскоре технологию скопировали разработчики Mozilla для браузера Phoenix (будущий Firefox), а затем и другие производители. Энтузиасты начали экспериментировать: в 2002 году студент Стюарт Моррис создал сайт slashdot.org, работавший в пределах одной страницы; в том же году был зарегистрирован патент на реализацию одностраничных интерфейсов, а в Netscape обсуждали концепцию «внутреннего браузинга». Появился инновационный почтовый сервис Oddpost с трёхпанельным интерфейсом, активно использовавший XMLHttpRequest.

Gmail и Google Maps: доказательство концепции

Настоящий прорыв произошёл 1 апреля 2004 года, когда Google запустила почтовый сервис Gmail. Проект, разработанный инженером Полом Бакхайтом под кодовым именем Caribou, поразил рынок не только гигабайтом бесплатного хранилища, но и невероятной отзывчивостью интерфейса. Поиск по письмам работал мгновенно, автодополнение адресов появлялось по мере ввода, цепочки писем открывались без перезагрузки страницы. Gmail выглядел и ощущался как настольное приложение, хотя работал в браузере.

Многие считали ставку на JavaScript безумием: реализации скриптов в браузерах тех лет сильно различались, а у пользователей был медленный dial-up. Однако риск оправдался. Почти год спустя, в феврале 2005 года, Google выпустила Google Maps, основанный на разработках приобретённой компании Where 2 Technologies. Пользователи впервые могли захватывать карту мышью и перемещать её в любом направлении; браузер не перезагружался, а лишь подгружал фрагменты карты — тайлы — в фоновом режиме.

Эссе Джесси Джеймса Гарретта и рождение термина Ajax

18 февраля 2005 года Джесси Джеймс Гарретт из консалтинговой компании Adaptive Path опубликовал эссе «Ajax: A New Approach to Web Applications». Он объединил существовавшие техники под акронимом Ajax (Asynchronous JavaScript + XML) и подчеркнул, что это не новая технология, а сочетание стандартов: HTML и CSS для представления, динамический DOM, XML для обмена данными, фоновый XMLHttpRequest и JavaScript, связывающий всё воедино.

Гарретт ввёл понятие Ajax-движка — прослойки на JavaScript, которая загружается в начале сессии и берёт на себя рендеринг интерфейса и асинхронный обмен данными с сервером. Пользователь переставал смотреь на пустой экран в ожидании ответа. Статья произвела эффетк разорвавшейся бомбы: разботчики по всему миру осознали, что держат в руках инструмент для создения полноценных приложений в браузере.

Эра jQuery и пробема «jQuery Soup»

В 2006 году появилась библотека jQery, котоая упростила манипуляции с DOM и сгладила разлчия межу браузерами. Однао императивный подхoд jQery требоал пошаовых инстpукций: найти кнопку, повесить обpабoтчик, найти тeг, изменить тeкст. Сocтояние прилoжения xpaнилocь прямo в HTML-элeмeнтax, в data-атрибyтax, и для oпределeния тeкyщегo cтaтycа cкpиптy приxoдилocь кaждый paз oпpaшивaть DOM-дepeвo. Кoд быcтpo пpeвpaщaлcя в xaoтичнyю, тpyднoчитaeмyю мaccy, пoлyчившyю пpoзвищe «jQuery Soup». Beбy тpeбoвaлacь apxитeктypa.

Backbone.js и Knockout.js: рождение архитектуры SPA

В октябре 2010 года вышли два фреймворка, оформившие концепцию одностраничных приложений (Single Page Application). Первым стал Backbone.js, созданный Джереми Ашкенасом. Он привнёс в браузер классический паттерн MVC (Model-View-Controller) и инициировал важнейший сдвиг парадигмы: источником истины для данных стали не HTML-элементы, а JavaScript-модели в памяти браузера. Изменения в модели автоматически вызывали события, обновлявшие интерфейс. Именно с Backbone оформилась архитектура «тонкого сервера»: сервер переставал генерировать HTML и превращался в API, отдающее данные в формате JSON, а всю работу по рендерингу брал на себя клиент.

Параллельно появился Knockout.js Стива Сандерсона, реализовавший паттерн MVVM (Model-View-ViewModel) и двустороннюю привязку данных. Специальные атрибуты data-bind и наблюдаемые объекты позволяли мгновенно отражать изменения JavaScript-кода в HTML и наоборот — пользовательский ввод автоматически обновлял данные в памяти.

За ними последовала волна JS-фреймворков: AngularJS, Ember.js, Ext JS. Термин «Single Page Application» прочно вошёл в лексикон индустрии.

Расцвет SPA и новые вызовы

К середине 2010-х с появлением React, Vue и Svelte архитектура SPA стала индустриальным стандартом. Декларативный подход и концепция виртуального DOM позволили строить невероятно сложные и динамичные приложения прямо в браузере. Однако за победу пришлось заплатить высокую цену.

Первой и самой болезненной проблемой стала поисковая оптимизация. Когда поисковый робот заходил на SPA-сайт, сервер возвращал пустую HTML-страницу и ссылку на JavaScript-файл. Поисковики тех лет не умели исполнять сложный JS и индексировали пустую страницу. Инженерам приходилось изобретать обходные пути.

Вторая проблема — скорость первоначальной загрузки и размер бандла. Чтобы увидеть хотя бы строку текста, браузер должен был выполнить каскад шагов: загрузить HTML, скачать много мегабайт JavaScript, распарсить его, исполнить, сделать фоновый API-запрос за данными и только потом отрендерить интерфейс. Это порождало «водопады загрузок» и бесконечные спиннеры на экранах пользователей.

Третья проблема — нагрузка на устройство. Вся вычислительная работа по сборке страниц переместилась с мощных серверов на мобильные телефоны и бюджетные ноутбуки. Наконец, управление состоянием превратилось в кошмар: до половины кода приложения уходило на синхронизацию данных между сервером, локальным кешем и компонентами.

Возвращение на сервер: SSR, гидратация и гибридные архитектуры

Для решения этих проблем разработчики начали возвращать вычисления на сервер. Сначала появился серверный рендеринг (SSR) в его новом понимании. Ключевое отличие от классического SSR заключалось в том, что веб-страница должна была оставаться интерактивной. Для этого браузеру всё равно требовалось загрузить JavaScript и выполнить гидратацию — процесс, подобный наполнению сухой губки статичного HTML водой интерактивности: привязка событий мыши к отрендеренным тегам. Гидратация оказалась чрезвычайно дорогой операцией: зачем загружать и гидратировать статичный заголовок или подвал, которые никогда не меняются?

Сегодня мы наблюдаем новый виток эволюции. Появление React Server Components и концепций, реализованных в Next.js и Remix, позволяет выполнять серверные компоненты исключительно на сервере. Их код вообще не отправляется в браузер, что сокращает размер JS-бандлов почти до нуля. На клиент попадают только чистый HTML и небольшие островки интерактивности — ровно там, где они действительно нужны.

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