MDN убил React. Вот что они использовали вместо него.

На протяжении многих лет веб-разработчики полагались на MDN Web Docs Web Docs как на бесспорную библию открытой веб-платформы. Он является не просто сайтом документации, а окончательным авторитетом, диктующим лучшие практики, определяющим стандарты и направляющим бесчисленные архитектурные решения в отрасли. Его технические решения, таким образом, имеют беспрецедентный вес, сигнализируя о сдвигах в самой основе того, как мы строим для интернета.

Это влияние сделало объявление не чем иным, как сейсмическим событием: MDN Web Docs Web Docs официально отказался от React. Это не было тихим устареванием или незначительным рефакторингом; это был полномасштабный отказ от фреймворка, который питал весь его фронтенд, Yari, React SPA, извлеченный из Create React App с «сумасшедшей webpack config» и даже полагающийся на `dangerouslySetInnerHTML`. Этот шаг вызвал шок в сообществе разработчиков, сродни тому, как крупный облачный провайдер внезапно прекращает поддержку своей флагманской базы данных.

Это решение выходит за рамки простой перестройки компании; это глубокое заявление о будущем направлении самой веб-платформы. MDN Web Docs Web Docs, та самая сущность, которая документирует HTML, CSS и JavaScript, теперь выступает за создание с использованием этих внутренних технологий. Они перестроили весь свой фронтенд с нуля, используя Web Components с Lit и пользовательские серверные компоненты, что резко контрастирует с их предыдущим React-основанным Single Page Application.

MDN Web Docs Web Docs сделал смелый, обдуманный шаг в сторону от преобладающей тенденции SPA-для-всего. Их новая архитектура интегрирует пользовательские элементы непосредственно в контент, устраняя необходимость в обертке и уменьшая неиспользуемый JavaScript. Эта приверженность бережливой, соответствующей стандартам разработке очевидна в таких функциях, как выпадающее меню их основного сайта, которое теперь полностью работает на CSS до загрузки JavaScript, а затем прогрессивно улучшается. Время запуска среды разработки сократилось с 2 минут до 2 секунд, демонстрируя ощутимые преимущества их нового, производительного подхода.

MDN Web Docs Web Docs когда-то полагался на Yari, React-основанное Single Page Application (SPA), которое служило его фронтендом. Это не была простая реализация React; команда извлекла Yari из Create React App, что сигнализировало о глубоком погружении в пользовательские, очень сложные конфигурации. Извлечение означало отказ от управляемой простоты Create React App ради детального контроля, выбор, который часто приводит к значительным затратам на обслуживание со временем.

Центральным элементом растущего технического долга Yari была его «сумасшедшая webpack config». Эта сложная настройка, свидетельство многолетних настроек, исправлений и обходных путей, серьезно замедляла скорость разработки и эффективность сборки. Разрастающаяся конфигурация превращала отладку и обновления в кошмар, создавая медленный, хрупкий опыт разработки. Разработчики сталкивались с мучительно долгим ожиданием, при этом время запуска среды разработки увеличивалось до болезненных двух минут – значительное препятствие для проекта, ориентированного на быструю итерацию и всеобъемлющую документацию развивающихся веб-стандартов.

Добавляя сложности и иллюстрируя присущую стеку неуклюжесть, Yari часто использовал `dangerouslySetInnerHTML` для рендеринга контента. Для сайта документации, где основная цель — безопасно представлять доверенную информацию, эта практика несла существенные риски безопасности, открывая возможности для уязвимостей межсайтового скриптинга (XSS). Это также казалось по своей сути неуклюжим, требуя ручной очистки контента и обхода декларативной модели рендеринга React, что является ярким показателем трудных компромиссов, на которые пошла команда.

В конечном итоге, Yari представлял собой мощный инструмент, который был принципиально неправильно применен. Тяжелое SPA, разработанное для высокоинтерактивных, динамических приложений со сложным управлением состоянием, оказалось плохо приспособленным для основной миссии MDN Web Docs: предоставления в основном статической, соответствующей стандартам документации. Стек поставлял значительные объемы неиспользуемого JavaScript при каждой загрузке страницы, что способствовало замедлению рендеринга страниц и неэффективному пользовательскому опыту. Эта архитектура прямо противоречила принципам веб-производительности, которые сам MDN Web Docs отстаивает, что стало критическим несоответствием, подтолкнувшим команду к радикальной перестройке.

Перестройка фронтенда MDN Web Docs основывалась на радикальной философии: создание *с использованием платформы*, а не просто поверх нее. Они сознательно отказались от слоев абстракции традиционных фреймворков, напрямую используя нативные возможности браузера. Это означало полный переход к Web Components, в частности, с использованием Lit для реализации.

Web Components предлагают мощный набор веб-стандартов для создания пользовательских, многократно используемых и инкапсулированных HTML-тегов. Их преимущества глубоки: истинная инкапсуляция через Shadow DOM предотвращает конфликты стилей или скриптов, они обеспечивают независимую от фреймворков повторную используемость и гарантируют бесшовную совместимость в различных фронтенд-средах. Этот подход позволяет компонентам жить непосредственно в контенте, устраняя сложности оберток и отправку неиспользуемого JavaScript.

Этот стратегический сдвиг ставит во главу угла перспективность сайта документации. Опираясь на фундаментальные веб-стандарты, такие как Custom Elements, Shadow DOM и HTML Templates, MDN Web Docs инвестировал в технологии со сроком службы, значительно превышающим любой отдельный JavaScript-фреймворк. Стандарты развиваются медленно и предсказуемо, обеспечивая долгосрочную стабильность и снижая риск устаревания.

Резко контрастирует с этим быстрая смена и привязка к экосистеме, распространенные в мире, насыщенном фреймворками. Фреймворки часто диктуют паттерны разработки, вводят частые критические изменения и вынуждают к постоянным рефакторингам и обновлениям зависимостей. MDN Web Docs явно обошел этот цикл, выбрав стабильность вместо преходящих тенденций.

Новый стек, включающий Web Components, созданные с помощью Lit, и пользовательские серверные компоненты, обеспечивает ощутимые приросты производительности. Время запуска среды разработки сократилось с мучительных 2 минут до всего лишь 2 секунд. Эта легкая архитектура гарантирует загрузку только того CSS и JavaScript, который необходим странице, значительно сокращая объем отправляемого кода и улучшая время первоначальной загрузки страницы. Для более глубокого изучения технических особенностей этой трансформации читатели могут обратиться к Under the hood of MDN Web Docs's new frontend - MDN Web Docs.

Отказ от React означал, что MDN Web Docs Web Docs приняли философию построения с платформой, а не просто на ней. Этот радикальный сдвиг нашел своего идеального партнера в Lit, простой библиотеке для создания быстрых, легковесных web components. Lit — это не разветвленный фреймворк, а сфокусированный инструмент, предоставляющий достаточную абстракцию, чтобы сделать работу с нативными Web Components удовольствием, не диктуя при этом всю архитектуру приложения.

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

Важно отметить, что Lit позволяет custom elements находиться непосредственно в HTML, устраняя необходимость в громоздких wrapper components или сложных rendering trees. Это значительно сокращает boilerplate code и гарантирует, что компоненты являются по-настоящему нативными, бесшовно располагаясь рядом со стандартными HTML-элементами. Предыдущий React SPA MDN Web Docs Web Docs, Yari, извлеченный из Create React App, часто полагался на «crazy webpack config» и даже `dangerouslySetInnerHTML` для внедрения контента, что иллюстрирует значительные трудности при интеграции динамических элементов в его сложную структуру.

Lit предложил прагматичное промежуточное решение для MDN Web Docs Web Docs, обеспечив баланс между чистыми браузерными API и полноценным фреймворком. Он предоставил значительно больше структуры и удобства поддержки, чем vanilla JavaScript, но при этом имел лишь малую долю накладных расходов и предвзятости React. Это позволило команде использовать мощь современных web стандартов без бремени большого, сложного dependency tree. Результатом является frontend стек, который не только производителен – сокращая время запуска development environment с 2 минут до всего лишь 2 секунд – но и невероятно интуитивно понятен для будущего развития, идеально соответствуя их миссии по документированию и воплощению open web platform.

MDN Web Docs Web Docs разработали свои собственные server components, что было дальновидным шагом, предвосхитившим переход индустрии к UI, управляемому сервером, задолго до того, как React Server Components получили широкое распространение. Эта proprietary architecture нацелена на экстремальную эффективность, гарантируя, что каждая страница доставляет только essential code для blazing-fast user experience. Команда отдала приоритет минимизации client-side overhead, что стало прямым ответом на bloat, связанную с их предыдущим frontend Yari, основанным на Create React App.

Эти custom server components рендерят Lit components непосредственно в HTML на сервере, что значительно снижает нагрузку на клиент. Используя NodeJS, backend MDN Web Docs Web Docs обрабатывает код Lit, преобразуя интерактивные web components в статические HTML-строки еще до того, как они достигнут браузера. Эта robust pre-rendering capability устраняет client-side rendering delays, доставляя fully formed content немедленно и обходя сложности традиционного client-side SPA.

Важно отметить, что MDN Web Docs Web Docs использует Declarative Shadow DOM, мощную web platform feature, которая все еще набирает более широкое распространение. Эта технология встраивает Shadow DOM компонента и связанные с ним стили непосредственно в initial HTML payload, вместо того чтобы полагаться на JavaScript для его построения post-load. Браузеры, поддерживающие Declarative Shadow DOM, могут мгновенно отображать encapsulated structure и styling компонента в момент получения HTML, не дожидаясь парсинга или выполнения ни одной строки JavaScript. Это обеспечивает критически важное визуальное улучшение.

Этот инновационный подход означает, что пользователи видят полностью стилизованный, функциональный компонент в тот момент, когда приходит HTML, что значительно улучшает воспринимаемую производительность и уменьшает совокупное смещение макета. Загружается только JavaScript, необходимый для гидратации и добавления интерактивности к компонентам, *фактически присутствующим* на странице. Неиспользуемый JavaScript из компонентов, отсутствующих на определенной странице, никогда не попадает к клиенту, что является резким контрастом со старым Yari SPA, который поставлял большие пакеты потенциально ненужного кода на каждом маршруте.

Серверные компоненты MDN Web Docs обеспечивают невероятно легкую, оптимизированную нагрузку, значительно сокращая время начальной загрузки и потребление пропускной способности для своей обширной библиотеки документации. Эти стратегические инвестиции в серверный рендеринг в сочетании с нативными возможностями браузера демонстрируют глубокую приверженность разработке *с использованием* платформы, а не просто *поверх* нее. В результате получился сайт документации, который не только объясняет веб-стандарты, но и демонстрирует те самые стандарты производительности и эффективности, которые он отстаивает, предлагая убедительную альтернативу.

Преобразование во фронтенд-архитектуре MDN Web Docs оказало наиболее драматическое влияние на производительность разработчиков. Если раньше инженеры ждали запуска своей локальной среды разработки более двух минут, то новый стек теперь загружается всего за две секунды. Это ошеломляющее 98%-ное сокращение времени запуска кардинально меняет рабочий процесс разработки, высвобождая бесчисленные часы для работы над функциями и исправления ошибок вместо очередей компиляции.

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

Рассмотрим выпадающее меню основного сайта, яркий пример этой философии «производительность прежде всего». Теперь оно полностью функционирует с помощью CSS до загрузки любого JavaScript, а затем постепенно улучшается, как только становятся доступны необходимые скрипты. Этот подход, ориентированный на нативные возможности, обеспечивает мгновенную интерактивность и отзывчивость, демонстрируя мощь создания с использованием веб-платформы, а не наложения тяжелых фреймворков сверху.

Эти замечательные достижения напрямую связаны с архитектурным решением значительно сократить объемы JavaScript и полностью использовать нативные функции браузера. Устранение тяжелых накладных расходов React Single Page Application (SPA) в сочетании со стратегическим использованием Web Components устранило ненужную сложность. Библиотеки, такие как Lit, обеспечивают легкую основу для этих компонентов, в то время как собственные серверные компоненты MDN Web Docs гарантируют, что только точный CSS и JavaScript, необходимый странице, когда-либо достигает клиента.

В конечном итоге, этот сдвиг представляет собой глубокую приверженность тем самым веб-стандартам, которые документирует MDN Web Docs. Переход от сложного, извлеченного Create React App к оптимизированному стеку, построенному на нативных возможностях браузера, не только значительно повысил производительность, но и установил новый эталон того, как могут работать влиятельные веб-платформы, доказывая, что меньше JavaScript часто означает больше скорости.

Новый стек MDN Web Docs Web Docs использует Progressive Enhancement, основополагающий принцип, который отдает приоритет прочной, функциональной базовой линии для всех пользователей. Этот подход начинается с основного контента и функциональности, доставляемых с помощью надежных HTML и CSS, накладывая JavaScript только в качестве необязательного улучшения. Сайт остается полностью пригодным для использования, даже если скрипты дают сбой, заблокированы или еще не загрузились.

Рассмотрим главное выпадающее меню навигации сайта, критически важный элемент интерфейса. Оно отлично работает, используя только CSS, реагируя на взаимодействия пользователя без единой строки JavaScript. Только после загрузки необходимого JavaScript оно получает дополнительные улучшения, такие как улучшенная навигация с клавиатуры или динамическое управление состоянием. Это обеспечивает немедленную пригодность к использованию и единообразный опыт в различных сетевых условиях.

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

Такая стратегия резко контрастирует со многими современными архитектурами Single Page Application (SPA). Часто SPA доставляет почти пустую страницу, требуя загрузки, анализа и выполнения большого пакета JavaScript, прежде чем какой-либо контент станет видимым или интерактивным. Это создает критические точки отказа и значительные задержки для пользователей.

Приверженность MDN Web Docs Web Docs принципу Progressive Enhancement подчеркивает его философию: строить с платформой, а не просто поверх нее. Используя в первую очередь нативные возможности браузера, команда предоставила веб-опыт, который по своей сути более надежен, доступен и производителен для всех, кто обращается к окончательному источнику веб-стандартов.

Помимо глубокого архитектурного сдвига, MDN Web Docs Web Docs также представил драматическую переработку пользовательского интерфейса. Это была не просто переработка кода бэкенда; это представляло собой полное переосмысление того, как разработчики взаимодействуют с самой важной документацией в интернете. Новый фронтенд обеспечил отполированный, интуитивно понятный опыт, прямо отражая основную приверженность современным веб-стандартам и подходу, ориентированному на пользователя.

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

Особое внимание было уделено конкретным элементам пользовательского интерфейса, преобразующим ежедневные взаимодействия. MDN Web Docs Web Docs перешел на четкие Lucide icons, заменив старые активы масштабируемым, согласованным набором, который улучшил визуальную ясность. Опыт поиска претерпел мощный редизайн, представив более интуитивно понятный и многофункциональный модальный элемент, который упростил обнаружение документации, часто являющейся первой точкой взаимодействия для пользователей. Даже верхняя навигация подверглась всестороннему обновлению, предлагая более четкие пути к основному контенту.

Ключевым моментом является то, что новая компонентная архитектура, построенная на Lit, напрямую способствовала этим визуальным улучшениям. Используя легковесные web components Lit, MDN Web Docs Web Docs создали целостную систему дизайна, что значительно упростило поддержание единообразия на сотнях тысяч страниц, обеспечивая при этом быстрые циклы разработки. Этот модульный подход гарантировал, что элементы UI были многоразовыми, производительными и единообразно стилизованными, поднимая весь пользовательский опыт до уровня базового технического мастерства.

Радикальный поворот MDN Web Docs Web Docs неизбежно вызывает у разработчиков один вопрос: означает ли это конец доминирования React или даже самой эры Single Page Application (SPA)? Ответ неоднозначен, это не окончательное заявление об устаревании. React остается мощным инструментом, незаменимым для высокоинтерактивных, сложных приложений, где первостепенное значение имеет управление состоянием на стороне клиента.

MDN Web Docs Web Docs, однако, по сути, функционирует как платформа для доставки контента. Ее основная функция — эффективно предоставлять документацию, а не управлять сложными пользовательскими взаимодействиями, требующими полноценного SPA. Предыдущий Yari stack, извлеченный из Create React App, стал «избыточным» решением, обремененным «сумасшедшим webpack config» и даже требующим `dangerouslySetInnerHTML` для интеграции контента. MDN Web Docs Web Docs просто не требовался громоздкий JavaScript-бандл или накладные расходы на маршрутизацию на стороне клиента, присущие традиционному SPA.

Этот шаг MDN Web Docs Web Docs отражает более широкую, ускоряющуюся отраслевую тенденцию отказа от менталитета «SPA по умолчанию». Разработчики все чаще ищут более тонкие архитектурные решения, адаптированные к конкретным сценариям использования. Примеры включают фреймворки и библиотеки, такие как: - Astro - Qwik - Современные фреймворки server-side rendering (SSR)

Эти новые решения продвигают такие концепции, как частичная гидратация и архитектура островов, доставляя только тот JavaScript, который необходим для интерактивных компонентов. Они отдают приоритет производительности при первоначальной загрузке страницы и используют server-side rendering для обеспечения быстрой, насыщенной контентом основы. Эта философия идеально согласуется с новым стеком MDN Web Docs Web Docs, который использует Lit для Web Components и пользовательские серверные компоненты для загрузки только того CSS и JavaScript, который требуется странице.

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

Значительные достижения MDN Web Docs Web Docs — запуск среды разработки, сократившийся с более чем 2 минут до всего 2 секунд — подчеркивают этот сдвиг. Их решение подтверждает будущее, в котором создание с использованием платформы, приоритет эффективности и принятие прогрессивного улучшения преобладают над монолитными клиентскими фреймворками для контент-ориентированных проектов. Это не смерть React, а четкий сигнал к более продуманному и производительному фронтенд-ландшафту.

Драматический отказ MDN Web Docs Web Docs от React служит мастер-классом для любой команды, планирующей свой следующий веб-проект. Разработчики и технические руководители теперь должны критически пересмотреть давние предположения об архитектуре фронтенда. Это не просто история MDN Web Docs Web Docs; это мощный план для создания эффективных, отказоустойчивых веб-приложений без излишней сложности.

Во-первых, внимательно изучите свою реальную потребность в полноценном клиентском фреймворке для всего сайта. Предыдущий стек Yari MDN Web Docs, основанный на ejected Create React App, стал обузой из-за сложных конфигураций webpack и даже требовал `dangerouslySetInnerHTML` для рендеринга контента. Такой уровень накладных расходов фреймворка часто приносит убывающую отдачу для контентных сайтов, потребляя значительное время разработчиков и отправляя мегабайты неиспользуемого JavaScript. Оцените, действительно ли полноценный SPA необходим для каждой страницы.

Во-вторых, перестаньте игнорировать Web Components. Это зрелый, мощный примитив платформы, предлагающий надежный путь от постоянной смены фреймворков JavaScript. MDN Web Docs использовали Lit для создания пользовательских элементов, которые живут непосредственно в их контенте, устраняя необходимость в компонентах-обертках и значительно сокращая объем отправляемого кода. Этот подход обеспечивает долгосрочную стабильность, исключительную производительность и перспективную основу, построенную непосредственно на веб-стандартах.

В-третьих, вновь примите прогрессивное улучшение как основополагающий принцип для создания надежных и быстрых веб-интерфейсов. Новый стек MDN Web Docs является примером этого, где основные элементы пользовательского интерфейса, такие как главное выпадающее меню сайта, функционируют исключительно с помощью CSS до загрузки JavaScript. Послойное улучшение обеспечивает прочную, доступную основу для всех пользователей, независимо от условий сети или возможностей браузера, делая JavaScript необязательным слоем, а не зависимостью.

При выборе архитектуры для вашего следующего проекта учитывайте характер вашего приложения. Для высокоинтерактивных, интенсивно использующих данные веб-приложений, требующих сложного управления состоянием и частых обновлений на стороне клиента — например, дашбордов или редакторов реального времени — полноценный SPA, такой как React, по-прежнему предлагает мощные преимущества. Однако для большинства сайтов с большим объемом контента, порталов документации или маркетинговых сайтов MDN Web Docs демонстрирует глубокие преимущества более легкого, компонентного подхода с серверным рендерингом HTML и целевым JavaScript. Эта стратегия отдает приоритет скорости первоначальной загрузки страницы, отказоустойчивости и долгосрочной поддерживаемости перед излишней сложностью на стороне клиента. Время запуска их среды разработки, сократившееся с более чем 2 минут до всего 2 секунд, подчеркивает это влияние.

Почему MDN заменил свой React-фронтенд?

MDN заменил свой React SPA, названный Yari, чтобы устранить технический долг, улучшить производительность и привести свой собственный сайт в соответствие с веб-стандартами, которые он документирует. Старый стек имел сложную конфигурацию и отправлял ненужный JavaScript для сайта с большим объемом контента.

Каков новый технологический стек MDN?

Новый стек MDN построен на нативных Web Components с использованием библиотеки Lit. Он также включает в себя специально разработанные серверные компоненты и делает акцент на прогрессивном улучшении, позволяя основным функциям работать только с CSS до загрузки JavaScript.

Что такое Lit и почему MDN выбрал его?

Lit — это легковесная библиотека для создания быстрых Web Components. MDN выбрал ее, потому что она проста, чрезвычайно производительна и использует нативные браузерные технологии, избегая накладных расходов и привязки к более крупным фронтенд-фреймворкам.

Как новый стек улучшил производительность MDN?

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